@elastic/eui 104.0.2 → 104.1.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 (42) hide show
  1. package/es/components/basic_table/in_memory_table.js +18 -2
  2. package/es/components/code/code.styles.js +1 -1
  3. package/es/components/code/code_syntax.styles.js +1 -0
  4. package/es/components/date_picker/date_picker.js +2 -1
  5. package/es/components/date_picker/date_picker_range.js +18 -16
  6. package/es/components/date_picker/super_date_picker/super_date_picker.js +5 -9
  7. package/es/components/form/form_control_layout/form_control_layout_delimited.js +4 -4
  8. package/es/themes/amsterdam/global_styling/variables/_components.js +315 -310
  9. package/eui.d.ts +14 -5
  10. package/lib/components/basic_table/in_memory_table.js +18 -2
  11. package/lib/components/code/code.styles.js +1 -1
  12. package/lib/components/code/code_syntax.styles.js +1 -0
  13. package/lib/components/date_picker/date_picker.js +2 -1
  14. package/lib/components/date_picker/date_picker_range.js +18 -16
  15. package/lib/components/date_picker/super_date_picker/super_date_picker.js +5 -9
  16. package/lib/components/form/form_control_layout/form_control_layout_delimited.js +4 -4
  17. package/lib/themes/amsterdam/global_styling/variables/_components.js +315 -310
  18. package/optimize/es/components/basic_table/in_memory_table.js +3 -2
  19. package/optimize/es/components/code/code.styles.js +1 -1
  20. package/optimize/es/components/code/code_syntax.styles.js +1 -0
  21. package/optimize/es/components/date_picker/date_picker.js +2 -1
  22. package/optimize/es/components/date_picker/date_picker_range.js +16 -14
  23. package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +5 -9
  24. package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.js +2 -2
  25. package/optimize/es/themes/amsterdam/global_styling/variables/_components.js +315 -310
  26. package/optimize/lib/components/basic_table/in_memory_table.js +3 -2
  27. package/optimize/lib/components/code/code.styles.js +1 -1
  28. package/optimize/lib/components/code/code_syntax.styles.js +1 -0
  29. package/optimize/lib/components/date_picker/date_picker.js +2 -1
  30. package/optimize/lib/components/date_picker/date_picker_range.js +16 -14
  31. package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +5 -9
  32. package/optimize/lib/components/form/form_control_layout/form_control_layout_delimited.js +2 -2
  33. package/optimize/lib/themes/amsterdam/global_styling/variables/_components.js +315 -310
  34. package/package.json +4 -4
  35. package/test-env/components/basic_table/in_memory_table.js +18 -2
  36. package/test-env/components/code/code.styles.js +1 -1
  37. package/test-env/components/code/code_syntax.styles.js +1 -0
  38. package/test-env/components/date_picker/date_picker.js +2 -1
  39. package/test-env/components/date_picker/date_picker_range.js +18 -16
  40. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +5 -9
  41. package/test-env/components/form/form_control_layout/form_control_layout_delimited.js +4 -4
  42. package/test-env/themes/amsterdam/global_styling/variables/_components.js +315 -310
@@ -26,7 +26,7 @@ var _component_defaults = require("../provider/component_defaults");
26
26
  var _react2 = require("@emotion/react");
27
27
  var _excluded = ["schema"],
28
28
  _excluded2 = ["onChange"],
29
- _excluded3 = ["columns", "loading", "message", "error", "selection", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
29
+ _excluded3 = ["columns", "loading", "message", "noItemsMessage", "error", "selection", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
30
30
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
31
31
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
32
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -374,6 +374,7 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
374
374
  columns = _this$props2.columns,
375
375
  loading = _this$props2.loading,
376
376
  message = _this$props2.message,
377
+ noItemsMessage = _this$props2.noItemsMessage,
377
378
  error = _this$props2.error,
378
379
  selection = _this$props2.selection,
379
380
  compressed = _this$props2.compressed,
@@ -435,7 +436,7 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
435
436
  onChange: this.onTableChange,
436
437
  error: error,
437
438
  loading: loading,
438
- noItemsMessage: message,
439
+ noItemsMessage: noItemsMessage || message,
439
440
  tableLayout: tableLayout,
440
441
  compressed: compressed,
441
442
  itemIdToExpandedRowMap: itemIdToExpandedRowMap
@@ -29,7 +29,7 @@ var euiCodeStyles = exports.euiCodeStyles = function euiCodeStyles(euiThemeConte
29
29
  /*
30
30
  * 1. Size the code against the text its embedded within.
31
31
  */
32
- euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background-color:", codeSyntaxVariables.backgroundColor, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
32
+ euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background-color:", codeSyntaxVariables.inlineBackgroundColor, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
33
33
  forced: "\n border: ".concat(euiTheme.border.thin, ";\n ")
34
34
  }), " border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
35
35
  transparentBackground: _ref
@@ -32,6 +32,7 @@ var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSy
32
32
  return {
33
33
  backgroundColor: backgroundColor,
34
34
  color: color,
35
+ inlineBackgroundColor: euiTheme.components.codeInlineBackground,
35
36
  inlineCodeColor: euiTheme.components.codeInlineColor,
36
37
  selectedBackgroundColor: euiTheme.components.codeBackgroundSelected,
37
38
  commentColor: euiTheme.components.codeCommentColor,
@@ -61,6 +61,7 @@ var unsupportedProps = [
61
61
  // An internal EUI styling concern that consumers shouldn't need to access
62
62
  'defaultInputProps'];
63
63
  var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
64
+ var _selected$isValid;
64
65
  var _ref$adjustDateOnChan = _ref.adjustDateOnChange,
65
66
  adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
66
67
  append = _ref.append,
@@ -112,7 +113,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
112
113
  utcOffset = _ref.utcOffset,
113
114
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
114
115
  // Check for whether the passed `selected` moment date is valid
115
- var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
116
+ var isInvalid = _isInvalid || ((selected === null || selected === void 0 || (_selected$isValid = selected.isValid) === null || _selected$isValid === void 0 ? void 0 : _selected$isValid.call(selected)) === false ? true : undefined);
116
117
  var styles = (0, _services.useEuiMemoizedStyles)(_date_picker.euiDatePickerStyles);
117
118
  var cssStyles = [styles.euiDatePicker].concat((0, _toConsumableArray2.default)(inline ? [styles.inline.inline, isInvalid && !(disabled || readOnly) && styles.inline.invalid, shadow ? styles.inline.shadow : styles.inline.noShadow, disabled && styles.inline.disabled, readOnly && styles.inline.readOnly] : []));
118
119
  var calendarStyles = (0, _services.useEuiMemoizedStyles)(_react_date_picker.euiReactDatePickerStyles);
@@ -14,7 +14,7 @@ var _form = require("../form");
14
14
  var _services = require("../../services");
15
15
  var _date_picker_range = require("./date_picker_range.styles");
16
16
  var _react2 = require("@emotion/react");
17
- var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
17
+ var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend", "delimiter"];
18
18
  /*
19
19
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
20
20
  * or more contributor license agreements. Licensed under the Elastic License
@@ -45,6 +45,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
45
45
  _onBlur = _ref.onBlur,
46
46
  append = _ref.append,
47
47
  prepend = _ref.prepend,
48
+ delimiter = _ref.delimiter,
48
49
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
49
50
  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
50
51
  var fullWidth = _fullWidth && !inline;
@@ -53,50 +54,50 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
53
54
  var inlineStyles = (0, _services.useEuiMemoizedStyles)(_date_picker_range.euiDatePickerRangeInlineStyles);
54
55
  var cssStyles = !inline ? _date_picker_range.euiDatePickerRangeStyles.euiDatePickerRange : [inlineStyles.euiDatePickerRangeInline,
55
56
  // Determine the inline container query to use based on the width of the react-datepicker
56
- startDateControl.props.showTimeSelect || endDateControl.props.showTimeSelect ? inlineStyles.responsiveWithTimeSelect : inlineStyles.responsive, shadow && inlineStyles.shadow];
57
+ startDateControl !== null && startDateControl !== void 0 && startDateControl.props.showTimeSelect || endDateControl !== null && endDateControl !== void 0 && endDateControl.props.showTimeSelect ? inlineStyles.responsiveWithTimeSelect : inlineStyles.responsive, shadow && inlineStyles.shadow];
57
58
  var startControl = startDateControl;
58
59
  var endControl = endDateControl;
59
60
  if (!isCustom) {
60
- startControl = /*#__PURE__*/(0, _react.cloneElement)(startDateControl, {
61
+ startControl = startControl && /*#__PURE__*/(0, _react.cloneElement)(startDateControl, {
61
62
  controlOnly: true,
62
63
  showIcon: false,
63
64
  inline: inline,
64
65
  compressed: compressed,
65
66
  fullWidth: fullWidth,
66
67
  readOnly: readOnly,
67
- disabled: disabled || startDateControl.props.disabled,
68
- isInvalid: isInvalid || startDateControl.props.isInvalid,
69
- className: (0, _classnames.default)('euiDatePickerRange__start', startDateControl.props.className),
68
+ disabled: disabled || (startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.disabled),
69
+ isInvalid: isInvalid || (startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.isInvalid),
70
+ className: (0, _classnames.default)('euiDatePickerRange__start', startDateControl === null || startDateControl === void 0 ? void 0 : startDateControl.props.className),
70
71
  onBlur: function onBlur(event) {
71
72
  var _startDateControl$pro, _startDateControl$pro2;
72
- (_startDateControl$pro = startDateControl.props) === null || _startDateControl$pro === void 0 || (_startDateControl$pro2 = _startDateControl$pro.onBlur) === null || _startDateControl$pro2 === void 0 || _startDateControl$pro2.call(_startDateControl$pro, event);
73
+ startDateControl === null || startDateControl === void 0 || (_startDateControl$pro = startDateControl.props) === null || _startDateControl$pro === void 0 || (_startDateControl$pro2 = _startDateControl$pro.onBlur) === null || _startDateControl$pro2 === void 0 || _startDateControl$pro2.call(_startDateControl$pro, event);
73
74
  _onBlur === null || _onBlur === void 0 || _onBlur(event);
74
75
  },
75
76
  onFocus: function onFocus(event) {
76
77
  var _startDateControl$pro3, _startDateControl$pro4;
77
- (_startDateControl$pro3 = startDateControl.props) === null || _startDateControl$pro3 === void 0 || (_startDateControl$pro4 = _startDateControl$pro3.onFocus) === null || _startDateControl$pro4 === void 0 || _startDateControl$pro4.call(_startDateControl$pro3, event);
78
+ startDateControl === null || startDateControl === void 0 || (_startDateControl$pro3 = startDateControl.props) === null || _startDateControl$pro3 === void 0 || (_startDateControl$pro4 = _startDateControl$pro3.onFocus) === null || _startDateControl$pro4 === void 0 || _startDateControl$pro4.call(_startDateControl$pro3, event);
78
79
  _onFocus === null || _onFocus === void 0 || _onFocus(event);
79
80
  }
80
81
  });
81
- endControl = /*#__PURE__*/(0, _react.cloneElement)(endDateControl, {
82
+ endControl = endControl && /*#__PURE__*/(0, _react.cloneElement)(endDateControl, {
82
83
  controlOnly: true,
83
84
  showIcon: false,
84
85
  inline: inline,
85
86
  compressed: compressed,
86
87
  fullWidth: fullWidth,
87
88
  readOnly: readOnly,
88
- disabled: disabled || endDateControl.props.disabled,
89
- isInvalid: isInvalid || endDateControl.props.isInvalid,
89
+ disabled: disabled || (endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.disabled),
90
+ isInvalid: isInvalid || (endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.isInvalid),
90
91
  popoverPlacement: 'downRight',
91
- className: (0, _classnames.default)('euiDatePickerRange__end', endDateControl.props.className),
92
+ className: (0, _classnames.default)('euiDatePickerRange__end', endDateControl === null || endDateControl === void 0 ? void 0 : endDateControl.props.className),
92
93
  onBlur: function onBlur(event) {
93
94
  var _endDateControl$props, _endDateControl$props2;
94
- (_endDateControl$props = endDateControl.props) === null || _endDateControl$props === void 0 || (_endDateControl$props2 = _endDateControl$props.onBlur) === null || _endDateControl$props2 === void 0 || _endDateControl$props2.call(_endDateControl$props, event);
95
+ endDateControl === null || endDateControl === void 0 || (_endDateControl$props = endDateControl.props) === null || _endDateControl$props === void 0 || (_endDateControl$props2 = _endDateControl$props.onBlur) === null || _endDateControl$props2 === void 0 || _endDateControl$props2.call(_endDateControl$props, event);
95
96
  _onBlur === null || _onBlur === void 0 || _onBlur(event);
96
97
  },
97
98
  onFocus: function onFocus(event) {
98
99
  var _endDateControl$props3, _endDateControl$props4;
99
- (_endDateControl$props3 = endDateControl.props) === null || _endDateControl$props3 === void 0 || (_endDateControl$props4 = _endDateControl$props3.onFocus) === null || _endDateControl$props4 === void 0 || _endDateControl$props4.call(_endDateControl$props3, event);
100
+ endDateControl === null || endDateControl === void 0 || (_endDateControl$props3 = endDateControl.props) === null || _endDateControl$props3 === void 0 || (_endDateControl$props4 = _endDateControl$props3.onFocus) === null || _endDateControl$props4 === void 0 || _endDateControl$props4.call(_endDateControl$props3, event);
100
101
  _onFocus === null || _onFocus === void 0 || _onFocus(event);
101
102
  }
102
103
  });
@@ -111,6 +112,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
111
112
  className: classes,
112
113
  css: cssStyles
113
114
  }, rest), (0, _react2.jsx)(_form.EuiFormControlLayoutDelimited, {
115
+ delimiter: delimiter,
114
116
  icon: icon,
115
117
  startControl: startControl,
116
118
  endControl: endControl,
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.EuiSuperDatePickerInternal = exports.EuiSuperDatePicker = void 0;
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
13
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -296,14 +296,9 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
296
296
  fullWidth: true,
297
297
  css: [styles.states.euiSuperDatePicker__formControlLayout, isDisabled ? styles.states.disabled : isInvalid ? styles.states.invalid : hasChanged ? styles.states.needsUpdating : styles.states.default]
298
298
  };
299
- if (isQuickSelectOnly) {
300
- return (0, _react2.jsx)(_form.EuiFormControlLayout, (0, _extends2.default)({
301
- iconsPosition: "static"
302
- }, formControlLayoutProps));
303
- }
304
299
  var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
305
300
  if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
306
- return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
301
+ return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, !isQuickSelectOnly && (0, _react2.jsx)("button", {
307
302
  type: "button",
308
303
  css: styles.euiSuperDatePicker__prettyFormat,
309
304
  className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
@@ -334,7 +329,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
334
329
  css: rangeCssStyles,
335
330
  isCustom: true,
336
331
  iconType: false,
337
- startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
332
+ delimiter: isQuickSelectOnly ? '' : undefined,
333
+ startDateControl: isQuickSelectOnly ? undefined : (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
338
334
  css: styles.euiSuperDatePicker__rangeInput,
339
335
  className: "euiSuperDatePicker__startPopoverButton",
340
336
  compressed: compressed,
@@ -359,7 +355,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
359
355
  onFocus: onFocus
360
356
  }
361
357
  }),
362
- endDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
358
+ endDateControl: isQuickSelectOnly ? undefined : (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
363
359
  css: styles.euiSuperDatePicker__rangeInput,
364
360
  position: "end",
365
361
  compressed: compressed,
@@ -63,10 +63,10 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
63
63
  value: {
64
64
  defaultFullWidth: fullWidth
65
65
  }
66
- }, addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
66
+ }, startControl && addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
67
67
  delimiter: delimiter,
68
68
  isInvalid: showInvalidState
69
- }), addClassesToControl(endControl)));
69
+ }), endControl && addClassesToControl(endControl)));
70
70
  };
71
71
  var addClassesToControl = function addClassesToControl(control) {
72
72
  return (0, _services.cloneElementWithCss)(control, {