@elastic/eui 95.1.0 → 95.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 (86) hide show
  1. package/dist/eui_theme_dark.css +0 -240
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +0 -240
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  6. package/es/components/context_menu/context_menu_item.js +1 -1
  7. package/es/components/form/file_picker/file_picker.js +49 -35
  8. package/es/components/form/file_picker/file_picker.styles.js +98 -0
  9. package/es/components/icon/assets/app_cases.js +9 -7
  10. package/es/components/icon/assets/logo_elastic_stack.js +6 -12
  11. package/es/components/steps/step.js +5 -3
  12. package/es/components/steps/step.styles.js +13 -5
  13. package/es/components/steps/step_horizontal.js +8 -3
  14. package/es/components/steps/step_horizontal.styles.js +1 -0
  15. package/es/components/steps/step_number.js +48 -24
  16. package/es/components/steps/step_number.styles.js +4 -2
  17. package/es/components/steps/steps.js +3 -1
  18. package/es/components/steps/steps_horizontal.js +1 -1
  19. package/es/services/theme/warning.js +7 -2
  20. package/eui.d.ts +72 -20
  21. package/i18ntokens.json +16 -16
  22. package/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  23. package/lib/components/context_menu/context_menu_item.js +1 -1
  24. package/lib/components/form/file_picker/file_picker.js +51 -37
  25. package/lib/components/form/file_picker/file_picker.styles.js +102 -0
  26. package/lib/components/icon/assets/app_cases.js +9 -7
  27. package/lib/components/icon/assets/logo_elastic_stack.js +6 -12
  28. package/lib/components/icon/svgs/app_cases.svg +6 -5
  29. package/lib/components/icon/svgs/logo_elastic_stack.svg +4 -7
  30. package/lib/components/steps/step.js +5 -3
  31. package/lib/components/steps/step.styles.js +13 -5
  32. package/lib/components/steps/step_horizontal.js +8 -3
  33. package/lib/components/steps/step_horizontal.styles.js +1 -0
  34. package/lib/components/steps/step_number.js +48 -24
  35. package/lib/components/steps/step_number.styles.js +3 -1
  36. package/lib/components/steps/steps.js +3 -1
  37. package/lib/components/steps/steps_horizontal.js +1 -1
  38. package/lib/services/theme/warning.js +7 -2
  39. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  40. package/optimize/es/components/form/file_picker/file_picker.js +40 -34
  41. package/optimize/es/components/form/file_picker/file_picker.styles.js +98 -0
  42. package/optimize/es/components/icon/assets/app_cases.js +9 -7
  43. package/optimize/es/components/icon/assets/logo_elastic_stack.js +6 -12
  44. package/optimize/es/components/steps/step.js +2 -2
  45. package/optimize/es/components/steps/step.styles.js +13 -5
  46. package/optimize/es/components/steps/step_horizontal.js +8 -3
  47. package/optimize/es/components/steps/step_horizontal.styles.js +1 -0
  48. package/optimize/es/components/steps/step_number.js +44 -22
  49. package/optimize/es/components/steps/step_number.styles.js +4 -2
  50. package/optimize/es/components/steps/steps_horizontal.js +1 -1
  51. package/optimize/es/services/theme/warning.js +7 -2
  52. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  53. package/optimize/lib/components/form/file_picker/file_picker.js +42 -36
  54. package/optimize/lib/components/form/file_picker/file_picker.styles.js +102 -0
  55. package/optimize/lib/components/icon/assets/app_cases.js +9 -7
  56. package/optimize/lib/components/icon/assets/logo_elastic_stack.js +6 -12
  57. package/optimize/lib/components/icon/svgs/app_cases.svg +6 -5
  58. package/optimize/lib/components/icon/svgs/logo_elastic_stack.svg +4 -7
  59. package/optimize/lib/components/steps/step.js +2 -2
  60. package/optimize/lib/components/steps/step.styles.js +13 -5
  61. package/optimize/lib/components/steps/step_horizontal.js +8 -3
  62. package/optimize/lib/components/steps/step_horizontal.styles.js +1 -0
  63. package/optimize/lib/components/steps/step_number.js +44 -22
  64. package/optimize/lib/components/steps/step_number.styles.js +3 -1
  65. package/optimize/lib/components/steps/steps_horizontal.js +1 -1
  66. package/optimize/lib/services/theme/warning.js +7 -2
  67. package/package.json +1 -1
  68. package/src/components/form/_index.scss +0 -1
  69. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  70. package/test-env/components/context_menu/context_menu_item.js +1 -1
  71. package/test-env/components/form/file_picker/file_picker.js +46 -37
  72. package/test-env/components/form/file_picker/file_picker.styles.js +102 -0
  73. package/test-env/components/icon/assets/app_cases.js +9 -7
  74. package/test-env/components/icon/assets/logo_elastic_stack.js +6 -12
  75. package/test-env/components/steps/step.js +5 -3
  76. package/test-env/components/steps/step.styles.js +13 -5
  77. package/test-env/components/steps/step_horizontal.js +8 -3
  78. package/test-env/components/steps/step_horizontal.styles.js +1 -0
  79. package/test-env/components/steps/step_number.js +48 -24
  80. package/test-env/components/steps/step_number.styles.js +3 -1
  81. package/test-env/components/steps/steps.js +3 -1
  82. package/test-env/components/steps/steps_horizontal.js +1 -1
  83. package/test-env/services/theme/warning.js +7 -2
  84. package/src/components/form/file_picker/_file_picker.scss +0 -212
  85. package/src/components/form/file_picker/_index.scss +0 -2
  86. package/src/components/form/file_picker/_variables.scss +0 -1
@@ -1,4 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
4
5
  import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
6
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
8
  import _inherits from "@babel/runtime/helpers/inherits";
8
9
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
- var _excluded = ["id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
10
+ var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
10
11
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
11
12
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
12
13
  /*
@@ -19,29 +20,25 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
19
20
 
20
21
  import React, { Component } from 'react';
21
22
  import classNames from 'classnames';
22
- import { keysOf } from '../../common';
23
- import { EuiValidatableControl } from '../validatable_control';
23
+ import { withEuiStylesMemoizer, htmlIdGenerator } from '../../../services';
24
24
  import { EuiButtonEmpty } from '../../button';
25
25
  import { EuiProgress } from '../../progress';
26
26
  import { EuiIcon } from '../../icon';
27
27
  import { EuiI18n } from '../../i18n';
28
28
  import { EuiLoadingSpinner } from '../../loading';
29
- import { htmlIdGenerator } from '../../../services/accessibility';
30
29
  import { FormContext } from '../eui_form_context';
30
+ import { EuiValidatableControl } from '../validatable_control';
31
+ import { EuiFormControlLayoutClearButton } from '../form_control_layout/form_control_layout_clear_button';
32
+ import { euiFilePickerStyles } from './file_picker.styles';
31
33
  import { jsx as ___EmotionJSX } from "@emotion/react";
32
- var displayToClassNameMap = {
33
- default: null,
34
- large: 'euiFilePicker--large'
35
- };
36
- export var DISPLAYS = keysOf(displayToClassNameMap);
37
- export var EuiFilePicker = /*#__PURE__*/function (_Component) {
38
- function EuiFilePicker() {
34
+ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
35
+ function EuiFilePickerClass() {
39
36
  var _this;
40
- _classCallCheck(this, EuiFilePicker);
37
+ _classCallCheck(this, EuiFilePickerClass);
41
38
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
42
39
  args[_key] = arguments[_key];
43
40
  }
44
- _this = _callSuper(this, EuiFilePicker, [].concat(args));
41
+ _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
45
42
  _defineProperty(_this, "state", {
46
43
  promptText: null,
47
44
  isHoveringDrop: false
@@ -97,8 +94,8 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
97
94
  });
98
95
  return _this;
99
96
  }
100
- _inherits(EuiFilePicker, _Component);
101
- return _createClass(EuiFilePicker, [{
97
+ _inherits(EuiFilePickerClass, _Component);
98
+ return _createClass(EuiFilePickerClass, [{
102
99
  key: "render",
103
100
  value: function render() {
104
101
  var _this2 = this;
@@ -109,6 +106,7 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
109
106
  default: "Clear selected files"
110
107
  }, function (clearSelectedFiles) {
111
108
  var _this2$props = _this2.props,
109
+ stylesMemoizer = _this2$props.stylesMemoizer,
112
110
  id = _this2$props.id,
113
111
  name = _this2$props.name,
114
112
  initialPromptText = _this2$props.initialPromptText,
@@ -125,34 +123,39 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
125
123
  var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
126
124
  var isOverridingInitialPrompt = _this2.state.promptText != null;
127
125
  var normalFormControl = display === 'default';
128
- var classes = classNames('euiFilePicker', displayToClassNameMap[display], {
129
- euiFilePicker__showDrop: _this2.state.isHoveringDrop,
130
- 'euiFilePicker--compressed': compressed,
131
- 'euiFilePicker--fullWidth': fullWidth,
126
+ var classes = classNames('euiFilePicker', {
127
+ 'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
132
128
  'euiFilePicker-isInvalid': isInvalid,
133
129
  'euiFilePicker-isLoading': isLoading,
134
130
  'euiFilePicker-hasFiles': isOverridingInitialPrompt
135
131
  }, className);
132
+ var styles = stylesMemoizer(euiFilePickerStyles);
133
+ var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, _this2.state.isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
134
+ var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
135
+ var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat(_toConsumableArray(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
136
+ var iconStyles = [styles.icon.euiFilePicker__icon].concat(_toConsumableArray(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
137
+ var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
136
138
  var clearButton;
137
139
  if (isLoading && normalFormControl) {
138
140
  // Override clear button with loading spinner if it is in loading state
139
141
  clearButton = ___EmotionJSX(EuiLoadingSpinner, {
140
- className: "euiFilePicker__loadingSpinner"
142
+ css: rightIconStyles,
143
+ className: "euiFilePicker__loadingSpinner",
144
+ size: compressed ? 's' : 'm'
141
145
  });
142
146
  } else if (isOverridingInitialPrompt && !disabled) {
143
147
  if (normalFormControl) {
144
- clearButton = ___EmotionJSX("button", {
145
- type: "button",
148
+ clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
146
149
  "aria-label": clearSelectedFiles,
150
+ css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
147
151
  className: "euiFilePicker__clearButton",
148
- onClick: _this2.removeFiles
149
- }, ___EmotionJSX(EuiIcon, {
150
- className: "euiFilePicker__clearIcon",
151
- type: "cross"
152
- }));
152
+ onClick: _this2.removeFiles,
153
+ size: compressed ? 's' : 'm'
154
+ });
153
155
  } else {
154
156
  clearButton = ___EmotionJSX(EuiButtonEmpty, {
155
157
  "aria-label": clearSelectedFiles,
158
+ css: styles.euiFilePicker__clearButton,
156
159
  className: "euiFilePicker__clearButton",
157
160
  size: "xs",
158
161
  onClick: _this2.removeFiles
@@ -170,15 +173,15 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
170
173
  position: "absolute"
171
174
  });
172
175
  return ___EmotionJSX("div", {
176
+ css: cssStyles,
173
177
  className: classes
174
- }, ___EmotionJSX("div", {
175
- className: "euiFilePicker__wrap"
176
178
  }, ___EmotionJSX(EuiValidatableControl, {
177
179
  isInvalid: isInvalid
178
180
  }, ___EmotionJSX("input", _extends({
179
181
  type: "file",
180
182
  id: id,
181
183
  name: name,
184
+ css: inputStyles,
182
185
  className: "euiFilePicker__input",
183
186
  onChange: _this2.handleChange,
184
187
  ref: function ref(input) {
@@ -190,27 +193,30 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
190
193
  disabled: disabled,
191
194
  "aria-describedby": promptId
192
195
  }, rest))), ___EmotionJSX("div", {
196
+ css: promptStyles,
193
197
  className: "euiFilePicker__prompt",
194
198
  id: promptId
195
199
  }, ___EmotionJSX(EuiIcon, {
200
+ css: iconStyles,
196
201
  className: "euiFilePicker__icon",
197
202
  color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary',
198
203
  type: isInvalid ? 'alert' : 'importAction',
199
204
  size: normalFormControl ? 'm' : 'l',
200
205
  "aria-hidden": "true"
201
- }), ___EmotionJSX("div", {
206
+ }), ___EmotionJSX("span", {
202
207
  className: "euiFilePicker__promptText"
203
- }, _this2.state.promptText || initialPromptText), clearButton, loader)));
208
+ }, _this2.state.promptText || initialPromptText), clearButton, loader));
204
209
  });
205
210
  }
206
211
  }]);
207
212
  }(Component);
208
- _defineProperty(EuiFilePicker, "contextType", FormContext);
209
- _defineProperty(EuiFilePicker, "defaultProps", {
213
+ _defineProperty(EuiFilePickerClass, "contextType", FormContext);
214
+ _defineProperty(EuiFilePickerClass, "defaultProps", {
210
215
  initialPromptText: ___EmotionJSX(EuiI18n, {
211
216
  token: "euiFilePicker.promptText",
212
217
  default: "Select or drag and drop a file"
213
218
  }),
214
219
  compressed: false,
215
220
  display: 'large'
216
- });
221
+ });
222
+ export var EuiFilePicker = withEuiStylesMemoizer(EuiFilePickerClass);
@@ -0,0 +1,98 @@
1
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
+ /*
3
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
4
+ * or more contributor license agreements. Licensed under the Elastic License
5
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
6
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
7
+ * Side Public License, v 1.
8
+ */
9
+
10
+ import { css } from '@emotion/react';
11
+ import { euiCanAnimate, euiFontSize, euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
12
+ import { euiFormControlStyles, euiFormVariables } from '../form.styles';
13
+ var _ref = process.env.NODE_ENV === "production" ? {
14
+ name: "6h1iuq-euiFilePicker__clearButton",
15
+ styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;"
16
+ } : {
17
+ name: "6h1iuq-euiFilePicker__clearButton",
18
+ styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;",
19
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
20
+ };
21
+ var _ref2 = process.env.NODE_ENV === "production" ? {
22
+ name: "d8me89-euiFilePicker__rightIcon",
23
+ styles: "position:absolute;label:euiFilePicker__rightIcon;"
24
+ } : {
25
+ name: "d8me89-euiFilePicker__rightIcon",
26
+ styles: "position:absolute;label:euiFilePicker__rightIcon;",
27
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
28
+ };
29
+ var _ref3 = process.env.NODE_ENV === "production" ? {
30
+ name: "19x04ih-largeInteractive",
31
+ styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;"
32
+ } : {
33
+ name: "19x04ih-largeInteractive",
34
+ styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;",
35
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
36
+ };
37
+ var _ref4 = process.env.NODE_ENV === "production" ? {
38
+ name: "1j9s7hu-euiFilePicker__input",
39
+ styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;"
40
+ } : {
41
+ name: "1j9s7hu-euiFilePicker__input",
42
+ styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;",
43
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
44
+ };
45
+ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
46
+ var euiTheme = euiThemeContext.euiTheme;
47
+ var formStyles = euiFormControlStyles(euiThemeContext);
48
+ var formVariables = euiFormVariables(euiThemeContext);
49
+ var _euiFontSize = euiFontSize(euiThemeContext, 's'),
50
+ fontSize = _euiFontSize.fontSize,
51
+ lineHeight = _euiFontSize.lineHeight;
52
+ return {
53
+ euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;&:has(input:focus){--euiFormControlStateColor:", euiTheme.colors.primary, ";};label:euiFilePicker;"),
54
+ isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.primary, ";;label:isDroppingFile;"),
55
+ invalid: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.danger, ";;label:invalid;"),
56
+ hasFiles: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
57
+ loading: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
58
+ // Skip the css() on the default width to avoid generating a className
59
+ formWidth: formStyles.formWidth,
60
+ fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
61
+ // The input is an invisible dropzone / button
62
+ input: {
63
+ euiFilePicker__input: _ref4,
64
+ largeInteractive: _ref3
65
+ },
66
+ euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
67
+ disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
68
+ // Skip the css() on the default height to avoid generating a className
69
+ uncompressed: formStyles.uncompressed,
70
+ compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),
71
+ // Completely different rendering style from the normal form controls
72
+ large: {
73
+ large: /*#__PURE__*/css("padding-inline:", euiTheme.size.l, ";display:flex;flex-direction:column;align-items:center;justify-content:center;.euiFilePicker__promptText{", euiTextTruncate(), " line-height:", lineHeight, ";};label:large;"),
74
+ // Static heights so that surrounding contents don't shift around
75
+ uncompressed: "\n ".concat(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
76
+ return x * 8;
77
+ })), "\n border-radius: ").concat(formVariables.controlBorderRadius, ";\n "),
78
+ compressed: /*#__PURE__*/css(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
79
+ return x * 6.5;
80
+ })), " border-radius:", formVariables.controlCompressedBorderRadius, ";;label:compressed;")
81
+ },
82
+ icon: {
83
+ euiFilePicker__icon: /*#__PURE__*/css(";label:euiFilePicker__icon;"),
84
+ normal: /*#__PURE__*/css("position:absolute;", logicalCSS('top', 0), " ", logicalCSS('height', '100%'), ";;label:normal;"),
85
+ uncompressed: "\n ".concat(logicalCSS('left', euiTheme.size.m), "\n "),
86
+ compresssed: /*#__PURE__*/css(logicalCSS('left', euiTheme.size.s), " ", logicalCSS('width', euiTheme.size.m), ";;label:compresssed;"),
87
+ large: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), " ", euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
88
+ },
89
+ rightIcon: {
90
+ euiFilePicker__rightIcon: _ref2,
91
+ uncompressed: "\n ".concat(logicalCSS('top', euiTheme.size.m), "\n ").concat(logicalCSS('right', euiTheme.size.m), "\n "),
92
+ compressed: /*#__PURE__*/css(logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', '50%'), " ", logicalCSS('margin-top', mathWithUnits(euiTheme.size.m, function (x) {
93
+ return x / -2;
94
+ })), ";;label:compressed;")
95
+ },
96
+ euiFilePicker__clearButton: _ref
97
+ };
98
+ };
@@ -21,21 +21,23 @@ var EuiIconAppCases = function EuiIconAppCases(_ref) {
21
21
  xmlns: "http://www.w3.org/2000/svg",
22
22
  width: 32,
23
23
  height: 32,
24
- fill: "none",
25
24
  viewBox: "0 0 32 32",
26
25
  "aria-labelledby": titleId
27
26
  }, props), title ? ___EmotionJSX("title", {
28
27
  id: titleId
29
28
  }, title) : null, ___EmotionJSX("path", {
30
- fillRule: "evenodd",
31
- d: "M22.5 24a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0 2a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z"
29
+ d: "M4 6h22v7h-2V8H6v19H4V6Z",
30
+ className: "euiIcon__fillSecondary"
31
+ }), ___EmotionJSX("path", {
32
+ d: "M10 12H7v-2h3v2Zm1 0h12v-2H11v2Z",
33
+ className: "euiIcon__fillSecondary"
34
+ }), ___EmotionJSX("path", {
35
+ d: "M24 1H0v26h1l-1 .001v.026a2.256 2.256 0 0 0 .01.185 4.318 4.318 0 0 0 .563 1.792C1.194 30.064 2.399 31 4.5 31H17v-2H8.429a4.32 4.32 0 0 0 .57-1.927v-.062L9 27.005v-.003S9 27 8 27h1V16h21v3h2v-5H7v12.995l-.003.05a2.32 2.32 0 0 1-.298.95C6.442 28.436 5.898 29 4.5 29c-1.398 0-1.942-.564-2.199-1.004a2.32 2.32 0 0 1-.3-1.001L2 26.992V3h20v3h2V1Z"
32
36
  }), ___EmotionJSX("path", {
33
- d: "m30.293 27.707-4-4 1.414-1.414 4 4-1.414 1.414ZM6 4H2v27h25v-3h-2v1H4V6h2V4Zm19 6h2V4h-4v2h2v4Z"
37
+ d: "M23 21v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"
34
38
  }), ___EmotionJSX("path", {
35
39
  fillRule: "evenodd",
36
- d: "m16.381 3.024.538 1.158h2.274l.636 2.545H9.68l.637-2.545h2.558l.538-1.158c.292-.63.955-1.024 1.484-1.024.53 0 1.193.394 1.485 1.024Zm6.01 5.703-1.636-6.545h-2.56C17.6.898 16.262 0 14.897 0c-1.364 0-2.703.898-3.299 2.182H8.755L7.118 8.727h15.273ZM7 15h6v-2H7v2Zm6 5H7v-2h6v2Zm-6 5h6v-2H7v2Z",
37
- className: "euiIcon__fillSecondary",
38
- clipRule: "evenodd"
40
+ d: "M24 32a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-2a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z"
39
41
  }));
40
42
  };
41
43
  export var icon = EuiIconAppCases;
@@ -25,21 +25,15 @@ var EuiIconLogoElasticStack = function EuiIconLogoElasticStack(_ref) {
25
25
  "aria-labelledby": titleId
26
26
  }, props), title ? ___EmotionJSX("title", {
27
27
  id: titleId
28
- }, title) : null, ___EmotionJSX("g", {
29
- fill: "none",
30
- fillRule: "evenodd"
31
- }, ___EmotionJSX("path", {
28
+ }, title) : null, ___EmotionJSX("path", {
32
29
  fill: "#F04E98",
33
- d: "M32 9V2.5A2.5 2.5 0 0 0 29.5 0h-27A2.5 2.5 0 0 0 0 2.5V9h32Z"
30
+ d: "M0 2.37A2.37 2.37 0 0 1 2.37 0h27.26A2.37 2.37 0 0 1 32 2.37v6.52H0V2.37Z"
34
31
  }), ___EmotionJSX("path", {
35
32
  fill: "#00BFB3",
36
- d: "M0 20h32v-8H0z"
33
+ d: "M0 20.148h32v-8.296H0v8.296Z"
37
34
  }), ___EmotionJSX("path", {
38
- fill: "#0080D5",
39
- d: "M14.5 23H0v6.5A2.5 2.5 0 0 0 2.5 32h12v-9Z"
40
- }), ___EmotionJSX("path", {
41
- fill: "#FEC514",
42
- d: "M17.5 23v9h12a2.5 2.5 0 0 0 2.5-2.5V23H17.5Z"
43
- })));
35
+ fill: "#07C",
36
+ d: "M0 23.111h32v6.519A2.37 2.37 0 0 1 29.63 32H2.37A2.37 2.37 0 0 1 0 29.63v-6.52Z"
37
+ }));
44
38
  };
45
39
  export var icon = EuiIconLogoElasticStack;
@@ -46,9 +46,9 @@ export var EuiStep = function EuiStep(_ref) {
46
46
  }, ___EmotionJSX(EuiStepNumber, {
47
47
  number: step,
48
48
  status: status,
49
- titleSize: titleSize
49
+ titleSize: titleSize === 'xxs' ? 'none' : titleSize
50
50
  }), ___EmotionJSX(EuiTitle, {
51
- size: titleSize,
51
+ size: titleSize === 'xxs' ? 'xs' : titleSize,
52
52
  className: "euiStep__title",
53
53
  css: cssStepTitleStyles
54
54
  }, /*#__PURE__*/createElement(headingElement, null, title))), ___EmotionJSX("div", {
@@ -13,6 +13,7 @@ export var euiStepVariables = function euiStepVariables(euiTheme) {
13
13
  return {
14
14
  numberSize: euiTheme.size.xl,
15
15
  numberXSSize: euiTheme.size.l,
16
+ numberXXSSize: euiTheme.size.base,
16
17
  numberMargin: euiTheme.size.base
17
18
  };
18
19
  };
@@ -32,9 +33,10 @@ export var euiStepStyles = function euiStepStyles(euiThemeContext) {
32
33
  return {
33
34
  euiStep: /*#__PURE__*/css("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
34
35
  // Sizes
35
- m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
36
- s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
37
- xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
36
+ m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:m;"),
37
+ s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:s;"),
38
+ xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiStep.numberXSSize, ";};label:xs;"),
39
+ xxs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.s, " ", euiStep.numberXXSSize, ";};label:xxs;")
38
40
  };
39
41
  };
40
42
  export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
@@ -58,7 +60,12 @@ export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext)
58
60
  return x / 2 + y;
59
61
  })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
60
62
  return x / 2;
61
- })), ";;label:xs;")
63
+ })), ";;label:xs;"),
64
+ xxs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXXSSize, euiStep.numberMargin], function (x, y) {
65
+ return x / 2 + y;
66
+ })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXXSSize, function (x) {
67
+ return x / 2;
68
+ })), ";;label:xxs;")
62
69
  };
63
70
  };
64
71
  export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
@@ -71,6 +78,7 @@ export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
71
78
  // Sizes
72
79
  m: /*#__PURE__*/css(";label:m;"),
73
80
  s: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), ";;label:s;"),
74
- xs: /*#__PURE__*/css(";label:xs;")
81
+ xs: /*#__PURE__*/css(";label:xs;"),
82
+ xxs: /*#__PURE__*/css("line-height:", euiStep.numberXXSSize, ";;label:xxs;")
75
83
  };
76
84
  };
@@ -11,11 +11,17 @@ var _excluded = ["className", "step", "title", "onClick", "disabled", "status",
11
11
 
12
12
  import classNames from 'classnames';
13
13
  import React from 'react';
14
+ import { useEuiTheme } from '../../services';
14
15
  import { EuiStepNumber } from './step_number';
15
16
  import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nErrorsStep, useI18nLoadingStep } from './step_strings';
16
- import { useEuiTheme } from '../../services';
17
17
  import { euiStepHorizontalStyles, euiStepHorizontalNumberStyles, euiStepHorizontalTitleStyles } from './step_horizontal.styles';
18
18
  import { jsx as ___EmotionJSX } from "@emotion/react";
19
+ // The titleSize map is not 1 to 1; small == xs on the titleSize map
20
+ var stepNumberSizeMap = {
21
+ xs: 'none',
22
+ s: 'xs',
23
+ m: 'm'
24
+ };
19
25
  export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
20
26
  var className = _ref.className,
21
27
  _ref$step = _ref.step,
@@ -87,8 +93,7 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
87
93
  className: "euiStepHorizontal__number",
88
94
  status: status,
89
95
  number: step,
90
- titleSize: size === 's' ? 'xs' : 'm' // The titleSize map is not 1 to 1; small == xs on the titleSize map
91
- ,
96
+ titleSize: stepNumberSizeMap[size],
92
97
  css: cssNumberStyles
93
98
  }), ___EmotionJSX("span", {
94
99
  className: "euiStepHorizontal__title",
@@ -40,6 +40,7 @@ export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeCo
40
40
  // Adjust the size of the step number and connecting lines based on size
41
41
  m: _generateStepSizeAndInset(euiStep.numberSize),
42
42
  s: _generateStepSizeAndInset(euiStep.numberXSSize),
43
+ xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
43
44
  // Note: these selectors must be nested because focus/hover state
44
45
  // is on the parent container, but affects specific children
45
46
  enabled: /*#__PURE__*/css("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", euiFocusRing(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
@@ -13,9 +13,9 @@ import classNames from 'classnames';
13
13
  import React from 'react';
14
14
  import { EuiScreenReaderOnly } from '../accessibility';
15
15
  import { EuiIcon } from '../icon';
16
- import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
17
16
  import { EuiLoadingSpinner } from '../loading';
18
17
  import { useEuiTheme } from '../../services';
18
+ import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
19
19
  import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
20
20
  import { jsx as ___EmotionJSX } from "@emotion/react";
21
21
  export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
@@ -62,37 +62,59 @@ export var EuiStepNumber = function EuiStepNumber(_ref) {
62
62
  switch (status) {
63
63
  // Loading spinner
64
64
  case 'loading':
65
- screenReaderText = ariaLabelsMap.loading;
66
- content = ___EmotionJSX(EuiLoadingSpinner, {
67
- className: "euiStepNumber__loader",
68
- size: titleSize === 'xs' ? 'l' : 'xl'
69
- });
70
- break;
65
+ {
66
+ var iconSizeMap = {
67
+ none: 'm',
68
+ xs: 'l',
69
+ s: 'xl',
70
+ m: 'xl'
71
+ };
72
+ screenReaderText = ariaLabelsMap.loading;
73
+ content = ___EmotionJSX(EuiLoadingSpinner, {
74
+ className: "euiStepNumber__loader",
75
+ size: iconSizeMap[titleSize]
76
+ });
77
+ break;
78
+ }
71
79
  // Statuses with icons
72
80
  case 'danger':
73
81
  case 'warning':
74
82
  case 'complete':
75
- var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
76
- var iconTypeMap = {
77
- danger: 'cross',
78
- warning: 'warning',
79
- complete: 'check'
80
- };
81
- content = ___EmotionJSX(EuiIcon, {
82
- type: iconTypeMap[status],
83
- "aria-label": ariaLabelsMap[status],
84
- size: titleSize === 'xs' ? 's' : 'm',
85
- className: "euiStepNumber__icon",
86
- css: cssIconStyles
87
- });
88
- break;
83
+ {
84
+ var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
85
+ // EuiIcon does not support a xxs size so far,
86
+ // we use custom sizing here instead
87
+ titleSize === 'none' && contentStyles[titleSize]];
88
+ var iconTypeMap = {
89
+ danger: 'cross',
90
+ warning: 'warning',
91
+ complete: 'check'
92
+ };
93
+ var _iconSizeMap = {
94
+ xxs: 's',
95
+ xs: 's',
96
+ s: 'm',
97
+ m: 'm'
98
+ };
99
+ content = ___EmotionJSX(EuiIcon, {
100
+ type: iconTypeMap[status],
101
+ "aria-label": ariaLabelsMap[status],
102
+ size: _iconSizeMap[titleSize],
103
+ className: "euiStepNumber__icon",
104
+ css: cssIconStyles
105
+ });
106
+ break;
107
+ }
89
108
  // Statuses with numbers
90
109
  case 'incomplete':
91
110
  case 'current':
92
111
  case 'disabled':
93
112
  default:
94
- var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
95
113
  screenReaderText = ariaLabelsMap[status || 'step'];
114
+ if (titleSize === 'none') {
115
+ break;
116
+ }
117
+ var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
96
118
  content = ___EmotionJSX("span", {
97
119
  "aria-hidden": "true",
98
120
  className: "euiStepNumber__number",
@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
8
8
  */
9
9
 
10
10
  import { css } from '@emotion/react';
11
- import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
11
+ import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale, logicalSizeCSS } from '../../global_styling';
12
12
  import { euiStepVariables } from './step.styles';
13
13
  import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
14
14
  var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,6 +39,7 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
39
39
  m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
40
40
  s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
41
41
  xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
42
+ none: /*#__PURE__*/css(createStepsNumber(euiStep.numberXXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:none;"),
42
43
  // status
43
44
  incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
44
45
  disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), ";;label:disabled;"),
@@ -66,6 +67,7 @@ export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref
66
67
  incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
67
68
  loading: /*#__PURE__*/css(";label:loading;"),
68
69
  disabled: /*#__PURE__*/css(";label:disabled;"),
69
- current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
70
+ current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
71
+ none: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), ";label:none;")
70
72
  };
71
73
  };
@@ -14,7 +14,7 @@ import React from 'react';
14
14
  import { EuiStepHorizontal } from './step_horizontal';
15
15
  import { euiStepsHorizontalStyles } from './steps_horizontal.styles';
16
16
  import { jsx as ___EmotionJSX } from "@emotion/react";
17
- export var SIZES = ['s', 'm'];
17
+ export var SIZES = ['xs', 's', 'm'];
18
18
  export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
19
19
  var className = _ref.className,
20
20
  steps = _ref.steps,
@@ -7,8 +7,8 @@
7
7
  */
8
8
 
9
9
  var providerWarning = undefined;
10
- export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
11
- return providerWarning = level;
10
+ export var setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
11
+ return providerWarning = warningType;
12
12
  };
13
13
  export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
14
14
  return providerWarning;
@@ -16,6 +16,11 @@ export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
16
16
 
17
17
  // Not a public top-level EUI export, currently for internal use
18
18
  export var emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
19
+ // Handle callback types
20
+ if (typeof providerWarning === 'function') {
21
+ return providerWarning(providerMessage);
22
+ }
23
+ // Handle level types
19
24
  switch (providerWarning) {
20
25
  case 'log':
21
26
  console.log(providerMessage);
@@ -293,7 +293,8 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
293
293
  },
294
294
  placeholder: showPlaceholder ? placeholder : undefined,
295
295
  value: this.searchValue,
296
- autoFocus: autoFocus
296
+ autoFocus: autoFocus,
297
+ autoComplete: "off"
297
298
  // Force the menu to re-open on every input click - only necessary when plain text
298
299
  ,
299
300
  onClick: this.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same