@elastic/eui 81.1.0 → 81.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/eui_theme_dark.css +28 -25
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +28 -25
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/date_picker/super_date_picker/super_date_picker.js +49 -39
  6. package/eui.d.ts +9 -2
  7. package/lib/components/date_picker/super_date_picker/super_date_picker.js +49 -39
  8. package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +31 -37
  9. package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +31 -37
  10. package/package.json +1 -1
  11. package/src/components/date_picker/super_date_picker/_super_date_picker.scss +34 -28
  12. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +49 -39
package/es/components/date_picker/super_date_picker/super_date_picker.js CHANGED
@@ -26,10 +26,10 @@ import PropTypes from "prop-types";
26
26
  import classNames from 'classnames';
27
27
  import moment from 'moment'; // eslint-disable-line import/named
28
28
  import dateMath from '@elastic/datemath';
29
+ import { isObject } from '../../../services/predicate';
29
30
  import { EuiI18nConsumer } from '../../context';
30
31
  import { EuiDatePickerRange } from '../date_picker_range';
31
32
  import { EuiFormControlLayout } from '../../form';
32
- import { EuiFlexGroup, EuiFlexItem } from '../../flex';
33
33
  import { RenderI18nTimeOptions } from './time_options';
34
34
  import { PrettyDuration, showPrettyDuration } from './pretty_duration';
35
35
  import { AsyncInterval } from './async_interval';
@@ -226,7 +226,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
226
226
  customQuickSelectRender: customQuickSelectRender,
227
227
  dateFormat: dateFormat,
228
228
  end: end,
229
- isDisabled: isDisabled,
229
+ isDisabled: !!isDisabled,
230
230
  isPaused: isPaused,
231
231
  recentlyUsedRanges: recentlyUsedRanges,
232
232
  refreshInterval: refreshInterval,
@@ -257,41 +257,38 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
257
257
  timeFormat = _this$props3.timeFormat,
258
258
  utcOffset = _this$props3.utcOffset,
259
259
  compressed = _this$props3.compressed,
260
- onFocus = _this$props3.onFocus,
261
- className = _this$props3.className,
262
- dataTestSubj = _this$props3['data-test-subj'];
260
+ onFocus = _this$props3.onFocus;
263
261
  var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
264
262
  refreshInterval: refreshInterval,
265
- isDisabled: isDisabled,
263
+ isDisabled: !!isDisabled,
266
264
  isPaused: isPaused,
267
265
  onRefreshChange: _this.onRefreshChange,
268
266
  shortHand: true
269
267
  }) : undefined;
270
268
  var formControlLayoutProps = {
271
- className: classNames('euiSuperDatePicker', className),
272
269
  compressed: compressed,
273
270
  isInvalid: isInvalid,
274
271
  isLoading: isLoading && !showUpdateButton,
275
- disabled: isDisabled,
272
+ disabled: !!isDisabled,
276
273
  prepend: _this.renderQuickSelect(),
277
- append: autoRefreshAppend,
278
- 'data-test-subj': dataTestSubj
274
+ append: autoRefreshAppend
279
275
  };
280
276
  if (isQuickSelectOnly) {
281
277
  return ___EmotionJSX(EuiFormControlLayout, _extends({
282
278
  iconsPosition: "static"
283
279
  }, formControlLayoutProps));
284
280
  }
285
- if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
281
+ var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
282
+ if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
286
283
  return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, ___EmotionJSX("button", {
287
284
  className: classNames('euiSuperDatePicker__prettyFormat', {
288
285
  'euiSuperDatePicker__prettyFormat--disabled': isDisabled
289
286
  }),
290
287
  "data-test-subj": "superDatePickerShowDatesButton",
291
- disabled: isDisabled,
288
+ disabled: !!isDisabled,
292
289
  onClick: _this.hidePrettyDuration,
293
290
  onFocus: onFocus
294
- }, ___EmotionJSX(PrettyDuration, {
291
+ }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX(PrettyDuration, {
295
292
  timeFrom: start,
296
293
  timeTo: end,
297
294
  quickRanges: commonlyUsedRanges,
@@ -301,9 +298,6 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
301
298
  return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
302
299
  var contextLocale = _ref4.locale;
303
300
  return ___EmotionJSX(EuiDatePickerRange, _extends({}, formControlLayoutProps, {
304
- className: classNames(formControlLayoutProps.className, {
305
- 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
306
- }),
307
301
  isCustom: true,
308
302
  iconType: false,
309
303
  startDateControl: ___EmotionJSX(EuiDatePopoverButton, {
@@ -312,7 +306,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
312
306
  position: "start",
313
307
  needsUpdating: hasChanged,
314
308
  isInvalid: isInvalid,
315
- isDisabled: isDisabled,
309
+ isDisabled: !!isDisabled,
316
310
  onChange: _this.setStart,
317
311
  value: start,
318
312
  dateFormat: dateFormat,
@@ -332,7 +326,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
332
326
  compressed: compressed,
333
327
  needsUpdating: hasChanged,
334
328
  isInvalid: isInvalid,
335
- isDisabled: isDisabled,
329
+ isDisabled: !!isDisabled,
336
330
  onChange: _this.setEnd,
337
331
  value: end,
338
332
  dateFormat: dateFormat,
@@ -374,18 +368,16 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
374
368
  showUpdateButton = _this$props5.showUpdateButton,
375
369
  compressed = _this$props5.compressed;
376
370
  if (!showUpdateButton) return null;
377
- return ___EmotionJSX(EuiFlexItem, {
378
- grow: false
379
- }, ___EmotionJSX(EuiSuperUpdateButton, _extends({
371
+ return ___EmotionJSX(EuiSuperUpdateButton, _extends({
380
372
  needsUpdate: _this.state.hasChanged,
381
373
  showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
382
374
  isLoading: isLoading,
383
- isDisabled: isDisabled || _this.state.isInvalid,
375
+ isDisabled: !!isDisabled || _this.state.isInvalid,
384
376
  onClick: _this.handleClickUpdateButton,
385
377
  "data-test-subj": "superDatePickerApplyTimeButton",
386
378
  size: compressed ? 's' : 'm',
387
379
  iconOnly: showUpdateButton === 'iconOnly'
388
- }, updateButtonProps)));
380
+ }, updateButtonProps));
389
381
  });
390
382
  return _this;
391
383
  }
@@ -404,30 +396,32 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
404
396
  isQuickSelectOnly = _this$props6.isQuickSelectOnly,
405
397
  compressed = _this$props6.compressed,
406
398
  className = _this$props6.className;
399
+ var _this$state2 = this.state,
400
+ hasChanged = _this$state2.hasChanged,
401
+ isInvalid = _this$state2.isInvalid;
407
402
 
408
403
  // Force reduction in width if showing quick select only
409
404
  var width = isQuickSelectOnly ? 'auto' : _width;
410
- var flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', {
411
- 'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
412
- 'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
413
- 'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
414
- 'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
415
- 'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
405
+ var classes = classNames('euiSuperDatePicker', className, {
406
+ 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
407
+ 'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
408
+ 'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
409
+ 'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
410
+ 'euiSuperDatePicker--fullWidth': width === 'full',
411
+ 'euiSuperDatePicker--autoWidth': width === 'auto'
416
412
  });
417
- return ___EmotionJSX(EuiFlexGroup, {
418
- gutterSize: "s",
419
- responsive: false,
420
- className: flexWrapperClasses
421
- }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiAutoRefresh, {
413
+ return ___EmotionJSX("div", {
414
+ className: classes,
415
+ "data-test-subj": dataTestSubj
416
+ }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiAutoRefresh, {
422
417
  isPaused: isPaused,
423
418
  refreshInterval: refreshInterval,
424
419
  onRefreshChange: onRefreshChange,
425
420
  fullWidth: width === 'full',
426
421
  compressed: compressed,
427
- isDisabled: isDisabled,
428
- "data-test-subj": dataTestSubj,
422
+ isDisabled: !!isDisabled,
429
423
  className: className
430
- })) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
424
+ }) : ___EmotionJSX(React.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
431
425
  }
432
426
  }], [{
433
427
  key: "getDerivedStateFromProps",
@@ -501,7 +495,15 @@ EuiSuperDatePickerInternal.propTypes = {
501
495
  * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
502
496
  */
503
497
  isAutoRefreshOnly: PropTypes.bool,
504
- isDisabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.bool.isRequired]),
498
+ /**
499
+ * Accepts either a true/false boolean or an object configuration.
500
+ *
501
+ * The configuration will render the component as disabled, and allow you to
502
+ * customize the displayed disabled text.
503
+ */
504
+ isDisabled: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
505
+ display: PropTypes.node.isRequired
506
+ }).isRequired]),
505
507
  isLoading: PropTypes.bool,
506
508
  isPaused: PropTypes.oneOfType([PropTypes.bool, PropTypes.bool.isRequired]),
507
509
  /**
@@ -699,7 +701,15 @@ EuiSuperDatePicker.propTypes = {
699
701
  * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
700
702
  */
701
703
  isAutoRefreshOnly: PropTypes.bool,
702
- isDisabled: PropTypes.bool,
704
+ /**
705
+ * Accepts either a true/false boolean or an object configuration.
706
+ *
707
+ * The configuration will render the component as disabled, and allow you to
708
+ * customize the displayed disabled text.
709
+ */
710
+ isDisabled: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
711
+ display: PropTypes.node.isRequired
712
+ }).isRequired]),
703
713
  isLoading: PropTypes.bool,
704
714
  isPaused: PropTypes.bool,
705
715
  /**
package/eui.d.ts CHANGED
@@ -14536,7 +14536,15 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
14536
14536
  * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
14537
14537
  */
14538
14538
  isAutoRefreshOnly?: boolean;
14539
- isDisabled?: boolean;
14539
+ /**
14540
+ * Accepts either a true/false boolean or an object configuration.
14541
+ *
14542
+ * The configuration will render the component as disabled, and allow you to
14543
+ * customize the displayed disabled text.
14544
+ */
14545
+ isDisabled?: boolean | {
14546
+ display: ReactNode;
14547
+ };
14540
14548
  isLoading?: boolean;
14541
14549
  isPaused?: boolean;
14542
14550
  /**
@@ -14608,7 +14616,6 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
14608
14616
  dateFormat: string;
14609
14617
  timeFormat: string;
14610
14618
  isPaused: boolean;
14611
- isDisabled: boolean;
14612
14619
  };
14613
14620
  interface EuiSuperDatePickerState {
14614
14621
  end: ShortDate;
package/lib/components/date_picker/super_date_picker/super_date_picker.js CHANGED
@@ -9,10 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _moment = _interopRequireDefault(require("moment"));
11
11
  var _datemath = _interopRequireDefault(require("@elastic/datemath"));
12
+ var _predicate = require("../../../services/predicate");
12
13
  var _context = require("../../context");
13
14
  var _date_picker_range = require("../date_picker_range");
14
15
  var _form = require("../../form");
15
- var _flex = require("../../flex");
16
16
  var _time_options = require("./time_options");
17
17
  var _pretty_duration = require("./pretty_duration");
18
18
  var _async_interval = require("./async_interval");
@@ -233,7 +233,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
233
233
  customQuickSelectRender: customQuickSelectRender,
234
234
  dateFormat: dateFormat,
235
235
  end: end,
236
- isDisabled: isDisabled,
236
+ isDisabled: !!isDisabled,
237
237
  isPaused: isPaused,
238
238
  recentlyUsedRanges: recentlyUsedRanges,
239
239
  refreshInterval: refreshInterval,
@@ -264,41 +264,38 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
264
264
  timeFormat = _this$props3.timeFormat,
265
265
  utcOffset = _this$props3.utcOffset,
266
266
  compressed = _this$props3.compressed,
267
- onFocus = _this$props3.onFocus,
268
- className = _this$props3.className,
269
- dataTestSubj = _this$props3['data-test-subj'];
267
+ onFocus = _this$props3.onFocus;
270
268
  var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
271
269
  refreshInterval: refreshInterval,
272
- isDisabled: isDisabled,
270
+ isDisabled: !!isDisabled,
273
271
  isPaused: isPaused,
274
272
  onRefreshChange: _this.onRefreshChange,
275
273
  shortHand: true
276
274
  }) : undefined;
277
275
  var formControlLayoutProps = {
278
- className: (0, _classnames.default)('euiSuperDatePicker', className),
279
276
  compressed: compressed,
280
277
  isInvalid: isInvalid,
281
278
  isLoading: isLoading && !showUpdateButton,
282
- disabled: isDisabled,
279
+ disabled: !!isDisabled,
283
280
  prepend: _this.renderQuickSelect(),
284
- append: autoRefreshAppend,
285
- 'data-test-subj': dataTestSubj
281
+ append: autoRefreshAppend
286
282
  };
287
283
  if (isQuickSelectOnly) {
288
284
  return (0, _react2.jsx)(_form.EuiFormControlLayout, _extends({
289
285
  iconsPosition: "static"
290
286
  }, formControlLayoutProps));
291
287
  }
292
- if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
288
+ var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
289
+ if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
293
290
  return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
294
291
  className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
295
292
  'euiSuperDatePicker__prettyFormat--disabled': isDisabled
296
293
  }),
297
294
  "data-test-subj": "superDatePickerShowDatesButton",
298
- disabled: isDisabled,
295
+ disabled: !!isDisabled,
299
296
  onClick: _this.hidePrettyDuration,
300
297
  onFocus: onFocus
301
- }, (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
298
+ }, isDisabledDisplay ? isDisabled.display : (0, _react2.jsx)(_pretty_duration.PrettyDuration, {
302
299
  timeFrom: start,
303
300
  timeTo: end,
304
301
  quickRanges: commonlyUsedRanges,
@@ -308,9 +305,6 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
308
305
  return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
309
306
  var contextLocale = _ref4.locale;
310
307
  return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, _extends({}, formControlLayoutProps, {
311
- className: (0, _classnames.default)(formControlLayoutProps.className, {
312
- 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
313
- }),
314
308
  isCustom: true,
315
309
  iconType: false,
316
310
  startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
@@ -319,7 +313,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
319
313
  position: "start",
320
314
  needsUpdating: hasChanged,
321
315
  isInvalid: isInvalid,
322
- isDisabled: isDisabled,
316
+ isDisabled: !!isDisabled,
323
317
  onChange: _this.setStart,
324
318
  value: start,
325
319
  dateFormat: dateFormat,
@@ -339,7 +333,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
339
333
  compressed: compressed,
340
334
  needsUpdating: hasChanged,
341
335
  isInvalid: isInvalid,
342
- isDisabled: isDisabled,
336
+ isDisabled: !!isDisabled,
343
337
  onChange: _this.setEnd,
344
338
  value: end,
345
339
  dateFormat: dateFormat,
@@ -381,18 +375,16 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
381
375
  showUpdateButton = _this$props5.showUpdateButton,
382
376
  compressed = _this$props5.compressed;
383
377
  if (!showUpdateButton) return null;
384
- return (0, _react2.jsx)(_flex.EuiFlexItem, {
385
- grow: false
386
- }, (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, _extends({
378
+ return (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, _extends({
387
379
  needsUpdate: _this.state.hasChanged,
388
380
  showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
389
381
  isLoading: isLoading,
390
- isDisabled: isDisabled || _this.state.isInvalid,
382
+ isDisabled: !!isDisabled || _this.state.isInvalid,
391
383
  onClick: _this.handleClickUpdateButton,
392
384
  "data-test-subj": "superDatePickerApplyTimeButton",
393
385
  size: compressed ? 's' : 'm',
394
386
  iconOnly: showUpdateButton === 'iconOnly'
395
- }, updateButtonProps)));
387
+ }, updateButtonProps));
396
388
  });
397
389
  return _this;
398
390
  }
@@ -411,30 +403,32 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
411
403
  isQuickSelectOnly = _this$props6.isQuickSelectOnly,
412
404
  compressed = _this$props6.compressed,
413
405
  className = _this$props6.className;
406
+ var _this$state2 = this.state,
407
+ hasChanged = _this$state2.hasChanged,
408
+ isInvalid = _this$state2.isInvalid;
414
409
 
415
410
  // Force reduction in width if showing quick select only
416
411
  var width = isQuickSelectOnly ? 'auto' : _width;
417
- var flexWrapperClasses = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
418
- 'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
419
- 'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
420
- 'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
421
- 'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
422
- 'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
412
+ var classes = (0, _classnames.default)('euiSuperDatePicker', className, {
413
+ 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
414
+ 'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
415
+ 'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
416
+ 'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
417
+ 'euiSuperDatePicker--fullWidth': width === 'full',
418
+ 'euiSuperDatePicker--autoWidth': width === 'auto'
423
419
  });
424
- return (0, _react2.jsx)(_flex.EuiFlexGroup, {
425
- gutterSize: "s",
426
- responsive: false,
427
- className: flexWrapperClasses
428
- }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
420
+ return (0, _react2.jsx)("div", {
421
+ className: classes,
422
+ "data-test-subj": dataTestSubj
423
+ }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
429
424
  isPaused: isPaused,
430
425
  refreshInterval: refreshInterval,
431
426
  onRefreshChange: onRefreshChange,
432
427
  fullWidth: width === 'full',
433
428
  compressed: compressed,
434
- isDisabled: isDisabled,
435
- "data-test-subj": dataTestSubj,
429
+ isDisabled: !!isDisabled,
436
430
  className: className
437
- })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
431
+ }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
438
432
  }
439
433
  }], [{
440
434
  key: "getDerivedStateFromProps",
@@ -507,7 +501,15 @@ EuiSuperDatePickerInternal.propTypes = {
507
501
  * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
508
502
  */
509
503
  isAutoRefreshOnly: _propTypes.default.bool,
510
- isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool.isRequired]),
504
+ /**
505
+ * Accepts either a true/false boolean or an object configuration.
506
+ *
507
+ * The configuration will render the component as disabled, and allow you to
508
+ * customize the displayed disabled text.
509
+ */
510
+ isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
511
+ display: _propTypes.default.node.isRequired
512
+ }).isRequired]),
511
513
  isLoading: _propTypes.default.bool,
512
514
  isPaused: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool.isRequired]),
513
515
  /**
@@ -706,7 +708,15 @@ EuiSuperDatePicker.propTypes = {
706
708
  * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
707
709
  */
708
710
  isAutoRefreshOnly: _propTypes.default.bool,
709
- isDisabled: _propTypes.default.bool,
711
+ /**
712
+ * Accepts either a true/false boolean or an object configuration.
713
+ *
714
+ * The configuration will render the component as disabled, and allow you to
715
+ * customize the displayed disabled text.
716
+ */
717
+ isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
718
+ display: _propTypes.default.node.isRequired
719
+ }).isRequired]),
710
720
  isLoading: _propTypes.default.bool,
711
721
  isPaused: _propTypes.default.bool,
712
722
  /**
package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js CHANGED
@@ -20,10 +20,10 @@ import React, { Component } from 'react';
20
20
  import classNames from 'classnames';
21
21
  import moment from 'moment'; // eslint-disable-line import/named
22
22
  import dateMath from '@elastic/datemath';
23
+ import { isObject } from '../../../services/predicate';
23
24
  import { EuiI18nConsumer } from '../../context';
24
25
  import { EuiDatePickerRange } from '../date_picker_range';
25
26
  import { EuiFormControlLayout } from '../../form';
26
- import { EuiFlexGroup, EuiFlexItem } from '../../flex';
27
27
  import { RenderI18nTimeOptions } from './time_options';
28
28
  import { PrettyDuration, showPrettyDuration } from './pretty_duration';
29
29
  import { AsyncInterval } from './async_interval';
@@ -220,7 +220,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
220
220
  customQuickSelectRender: customQuickSelectRender,
221
221
  dateFormat: dateFormat,
222
222
  end: end,
223
- isDisabled: isDisabled,
223
+ isDisabled: !!isDisabled,
224
224
  isPaused: isPaused,
225
225
  recentlyUsedRanges: recentlyUsedRanges,
226
226
  refreshInterval: refreshInterval,
@@ -251,41 +251,38 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
251
251
  timeFormat = _this$props3.timeFormat,
252
252
  utcOffset = _this$props3.utcOffset,
253
253
  compressed = _this$props3.compressed,
254
- onFocus = _this$props3.onFocus,
255
- className = _this$props3.className,
256
- dataTestSubj = _this$props3['data-test-subj'];
254
+ onFocus = _this$props3.onFocus;
257
255
  var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
258
256
  refreshInterval: refreshInterval,
259
- isDisabled: isDisabled,
257
+ isDisabled: !!isDisabled,
260
258
  isPaused: isPaused,
261
259
  onRefreshChange: _this.onRefreshChange,
262
260
  shortHand: true
263
261
  }) : undefined;
264
262
  var formControlLayoutProps = {
265
- className: classNames('euiSuperDatePicker', className),
266
263
  compressed: compressed,
267
264
  isInvalid: isInvalid,
268
265
  isLoading: isLoading && !showUpdateButton,
269
- disabled: isDisabled,
266
+ disabled: !!isDisabled,
270
267
  prepend: _this.renderQuickSelect(),
271
- append: autoRefreshAppend,
272
- 'data-test-subj': dataTestSubj
268
+ append: autoRefreshAppend
273
269
  };
274
270
  if (isQuickSelectOnly) {
275
271
  return ___EmotionJSX(EuiFormControlLayout, _extends({
276
272
  iconsPosition: "static"
277
273
  }, formControlLayoutProps));
278
274
  }
279
- if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
275
+ var isDisabledDisplay = isObject(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
276
+ if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
280
277
  return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, ___EmotionJSX("button", {
281
278
  className: classNames('euiSuperDatePicker__prettyFormat', {
282
279
  'euiSuperDatePicker__prettyFormat--disabled': isDisabled
283
280
  }),
284
281
  "data-test-subj": "superDatePickerShowDatesButton",
285
- disabled: isDisabled,
282
+ disabled: !!isDisabled,
286
283
  onClick: _this.hidePrettyDuration,
287
284
  onFocus: onFocus
288
- }, ___EmotionJSX(PrettyDuration, {
285
+ }, isDisabledDisplay ? isDisabled.display : ___EmotionJSX(PrettyDuration, {
289
286
  timeFrom: start,
290
287
  timeTo: end,
291
288
  quickRanges: commonlyUsedRanges,
@@ -295,9 +292,6 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
295
292
  return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
296
293
  var contextLocale = _ref4.locale;
297
294
  return ___EmotionJSX(EuiDatePickerRange, _extends({}, formControlLayoutProps, {
298
- className: classNames(formControlLayoutProps.className, {
299
- 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
300
- }),
301
295
  isCustom: true,
302
296
  iconType: false,
303
297
  startDateControl: ___EmotionJSX(EuiDatePopoverButton, {
@@ -306,7 +300,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
306
300
  position: "start",
307
301
  needsUpdating: hasChanged,
308
302
  isInvalid: isInvalid,
309
- isDisabled: isDisabled,
303
+ isDisabled: !!isDisabled,
310
304
  onChange: _this.setStart,
311
305
  value: start,
312
306
  dateFormat: dateFormat,
@@ -326,7 +320,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
326
320
  compressed: compressed,
327
321
  needsUpdating: hasChanged,
328
322
  isInvalid: isInvalid,
329
- isDisabled: isDisabled,
323
+ isDisabled: !!isDisabled,
330
324
  onChange: _this.setEnd,
331
325
  value: end,
332
326
  dateFormat: dateFormat,
@@ -368,18 +362,16 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
368
362
  showUpdateButton = _this$props5.showUpdateButton,
369
363
  compressed = _this$props5.compressed;
370
364
  if (!showUpdateButton) return null;
371
- return ___EmotionJSX(EuiFlexItem, {
372
- grow: false
373
- }, ___EmotionJSX(EuiSuperUpdateButton, _extends({
365
+ return ___EmotionJSX(EuiSuperUpdateButton, _extends({
374
366
  needsUpdate: _this.state.hasChanged,
375
367
  showTooltip: !_this.state.isStartDatePopoverOpen && !_this.state.isEndDatePopoverOpen,
376
368
  isLoading: isLoading,
377
- isDisabled: isDisabled || _this.state.isInvalid,
369
+ isDisabled: !!isDisabled || _this.state.isInvalid,
378
370
  onClick: _this.handleClickUpdateButton,
379
371
  "data-test-subj": "superDatePickerApplyTimeButton",
380
372
  size: compressed ? 's' : 'm',
381
373
  iconOnly: showUpdateButton === 'iconOnly'
382
- }, updateButtonProps)));
374
+ }, updateButtonProps));
383
375
  });
384
376
  return _this;
385
377
  }
@@ -398,30 +390,32 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
398
390
  isQuickSelectOnly = _this$props6.isQuickSelectOnly,
399
391
  compressed = _this$props6.compressed,
400
392
  className = _this$props6.className;
393
+ var _this$state2 = this.state,
394
+ hasChanged = _this$state2.hasChanged,
395
+ isInvalid = _this$state2.isInvalid;
401
396
 
402
397
  // Force reduction in width if showing quick select only
403
398
  var width = isQuickSelectOnly ? 'auto' : _width;
404
- var flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', {
405
- 'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
406
- 'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
407
- 'euiSuperDatePicker__flexWrapper--isQuickSelectOnly': isQuickSelectOnly,
408
- 'euiSuperDatePicker__flexWrapper--fullWidth': width === 'full',
409
- 'euiSuperDatePicker__flexWrapper--autoWidth': width === 'auto'
399
+ var classes = classNames('euiSuperDatePicker', className, {
400
+ 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid,
401
+ 'euiSuperDatePicker--noUpdateButton': !showUpdateButton,
402
+ 'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly,
403
+ 'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly,
404
+ 'euiSuperDatePicker--fullWidth': width === 'full',
405
+ 'euiSuperDatePicker--autoWidth': width === 'auto'
410
406
  });
411
- return ___EmotionJSX(EuiFlexGroup, {
412
- gutterSize: "s",
413
- responsive: false,
414
- className: flexWrapperClasses
415
- }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiAutoRefresh, {
407
+ return ___EmotionJSX("div", {
408
+ className: classes,
409
+ "data-test-subj": dataTestSubj
410
+ }, isAutoRefreshOnly && onRefreshChange ? ___EmotionJSX(EuiAutoRefresh, {
416
411
  isPaused: isPaused,
417
412
  refreshInterval: refreshInterval,
418
413
  onRefreshChange: onRefreshChange,
419
414
  fullWidth: width === 'full',
420
415
  compressed: compressed,
421
- isDisabled: isDisabled,
422
- "data-test-subj": dataTestSubj,
416
+ isDisabled: !!isDisabled,
423
417
  className: className
424
- })) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
418
+ }) : ___EmotionJSX(React.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
425
419
  }
426
420
  }], [{
427
421
  key: "getDerivedStateFromProps",