@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
@@ -13,8 +13,8 @@ exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.em
13
13
  */
14
14
 
15
15
  var providerWarning = undefined;
16
- var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
17
- return providerWarning = level;
16
+ var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
17
+ return providerWarning = warningType;
18
18
  };
19
19
  var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEuiDevProviderWarning() {
20
20
  return providerWarning;
@@ -22,6 +22,11 @@ var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEu
22
22
 
23
23
  // Not a public top-level EUI export, currently for internal use
24
24
  var emitEuiProviderWarning = exports.emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
25
+ // Handle callback types
26
+ if (typeof providerWarning === 'function') {
27
+ return providerWarning(providerMessage);
28
+ }
29
+ // Handle level types
25
30
  switch (providerWarning) {
26
31
  case 'log':
27
32
  console.log(providerMessage);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "95.1.0",
4
+ "version": "95.2.0",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -1,6 +1,5 @@
1
1
  @import 'checkbox/index';
2
2
  @import 'described_form_group/index';
3
- @import 'file_picker/index';
4
3
  @import 'form';
5
4
  @import 'form_control_layout/index';
6
5
  @import 'form_error_text/index';
@@ -294,7 +294,8 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
294
294
  },
295
295
  placeholder: showPlaceholder ? placeholder : undefined,
296
296
  value: this.searchValue,
297
- autoFocus: autoFocus
297
+ autoFocus: autoFocus,
298
+ autoComplete: "off"
298
299
  // Force the menu to re-open on every input click - only necessary when plain text
299
300
  ,
300
301
  onClick: this.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
@@ -125,7 +125,7 @@ EuiContextMenuItem.propTypes = {
125
125
  "aria-label": _propTypes.default.string,
126
126
  "data-test-subj": _propTypes.default.string,
127
127
  css: _propTypes.default.any,
128
- icon: _propTypes.default.oneOfType([_propTypes.default.element.isRequired, _propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
128
+ icon: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired, _propTypes.default.element.isRequired, _propTypes.default.any.isRequired]),
129
129
  hasPanel: _propTypes.default.bool,
130
130
  disabled: _propTypes.default.bool,
131
131
  onClick: _propTypes.default.func,
@@ -5,8 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.EuiFilePicker = exports.DISPLAYS = void 0;
8
+ exports.EuiFilePickerClass = exports.EuiFilePicker = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
12
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
13
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,17 +18,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
17
18
  var _react = _interopRequireWildcard(require("react"));
18
19
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
20
  var _classnames = _interopRequireDefault(require("classnames"));
20
- var _common = require("../../common");
21
- var _validatable_control = require("../validatable_control");
21
+ var _services = require("../../../services");
22
22
  var _button = require("../../button");
23
23
  var _progress = require("../../progress");
24
24
  var _icon = require("../../icon");
25
25
  var _i18n = require("../../i18n");
26
26
  var _loading = require("../../loading");
27
- var _accessibility = require("../../../services/accessibility");
28
27
  var _eui_form_context = require("../eui_form_context");
28
+ var _validatable_control = require("../validatable_control");
29
+ var _form_control_layout_clear_button = require("../form_control_layout/form_control_layout_clear_button");
30
+ var _file_picker = require("./file_picker.styles");
29
31
  var _react2 = require("@emotion/react");
30
- var _excluded = ["id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
32
+ var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
31
33
  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); }
32
34
  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; }
33
35
  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)); }
@@ -38,25 +40,20 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
38
40
  * in compliance with, at your election, the Elastic License 2.0 or the Server
39
41
  * Side Public License, v 1.
40
42
  */
41
- var displayToClassNameMap = {
42
- default: null,
43
- large: 'euiFilePicker--large'
44
- };
45
- var DISPLAYS = exports.DISPLAYS = (0, _common.keysOf)(displayToClassNameMap);
46
- var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
47
- function EuiFilePicker() {
43
+ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Component) {
44
+ function EuiFilePickerClass() {
48
45
  var _this;
49
- (0, _classCallCheck2.default)(this, EuiFilePicker);
46
+ (0, _classCallCheck2.default)(this, EuiFilePickerClass);
50
47
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
51
48
  args[_key] = arguments[_key];
52
49
  }
53
- _this = _callSuper(this, EuiFilePicker, [].concat(args));
50
+ _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
54
51
  (0, _defineProperty2.default)(_this, "state", {
55
52
  promptText: null,
56
53
  isHoveringDrop: false
57
54
  });
58
55
  (0, _defineProperty2.default)(_this, "fileInput", null);
59
- (0, _defineProperty2.default)(_this, "generatedId", (0, _accessibility.htmlIdGenerator)()());
56
+ (0, _defineProperty2.default)(_this, "generatedId", (0, _services.htmlIdGenerator)()());
60
57
  (0, _defineProperty2.default)(_this, "handleChange", function () {
61
58
  if (!_this.fileInput) return;
62
59
  if (_this.fileInput.files && _this.fileInput.files.length > 1) {
@@ -106,8 +103,8 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
106
103
  });
107
104
  return _this;
108
105
  }
109
- (0, _inherits2.default)(EuiFilePicker, _Component);
110
- return (0, _createClass2.default)(EuiFilePicker, [{
106
+ (0, _inherits2.default)(EuiFilePickerClass, _Component);
107
+ return (0, _createClass2.default)(EuiFilePickerClass, [{
111
108
  key: "render",
112
109
  value: function render() {
113
110
  var _this2 = this;
@@ -118,6 +115,7 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
118
115
  default: "Clear selected files"
119
116
  }, function (clearSelectedFiles) {
120
117
  var _this2$props = _this2.props,
118
+ stylesMemoizer = _this2$props.stylesMemoizer,
121
119
  id = _this2$props.id,
122
120
  name = _this2$props.name,
123
121
  initialPromptText = _this2$props.initialPromptText,
@@ -134,34 +132,39 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
134
132
  var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
135
133
  var isOverridingInitialPrompt = _this2.state.promptText != null;
136
134
  var normalFormControl = display === 'default';
137
- var classes = (0, _classnames.default)('euiFilePicker', displayToClassNameMap[display], {
138
- euiFilePicker__showDrop: _this2.state.isHoveringDrop,
139
- 'euiFilePicker--compressed': compressed,
140
- 'euiFilePicker--fullWidth': fullWidth,
135
+ var classes = (0, _classnames.default)('euiFilePicker', {
136
+ 'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
141
137
  'euiFilePicker-isInvalid': isInvalid,
142
138
  'euiFilePicker-isLoading': isLoading,
143
139
  'euiFilePicker-hasFiles': isOverridingInitialPrompt
144
140
  }, className);
141
+ var styles = stylesMemoizer(_file_picker.euiFilePickerStyles);
142
+ 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];
143
+ var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
144
+ var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat((0, _toConsumableArray2.default)(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
145
+ var iconStyles = [styles.icon.euiFilePicker__icon].concat((0, _toConsumableArray2.default)(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
146
+ var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
145
147
  var clearButton;
146
148
  if (isLoading && normalFormControl) {
147
149
  // Override clear button with loading spinner if it is in loading state
148
150
  clearButton = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
149
- className: "euiFilePicker__loadingSpinner"
151
+ css: rightIconStyles,
152
+ className: "euiFilePicker__loadingSpinner",
153
+ size: compressed ? 's' : 'm'
150
154
  });
151
155
  } else if (isOverridingInitialPrompt && !disabled) {
152
156
  if (normalFormControl) {
153
- clearButton = (0, _react2.jsx)("button", {
154
- type: "button",
157
+ clearButton = (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, {
155
158
  "aria-label": clearSelectedFiles,
159
+ css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
156
160
  className: "euiFilePicker__clearButton",
157
- onClick: _this2.removeFiles
158
- }, (0, _react2.jsx)(_icon.EuiIcon, {
159
- className: "euiFilePicker__clearIcon",
160
- type: "cross"
161
- }));
161
+ onClick: _this2.removeFiles,
162
+ size: compressed ? 's' : 'm'
163
+ });
162
164
  } else {
163
165
  clearButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
164
166
  "aria-label": clearSelectedFiles,
167
+ css: styles.euiFilePicker__clearButton,
165
168
  className: "euiFilePicker__clearButton",
166
169
  size: "xs",
167
170
  onClick: _this2.removeFiles
@@ -179,15 +182,15 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
179
182
  position: "absolute"
180
183
  });
181
184
  return (0, _react2.jsx)("div", {
185
+ css: cssStyles,
182
186
  className: classes
183
- }, (0, _react2.jsx)("div", {
184
- className: "euiFilePicker__wrap"
185
187
  }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
186
188
  isInvalid: isInvalid
187
189
  }, (0, _react2.jsx)("input", (0, _extends2.default)({
188
190
  type: "file",
189
191
  id: id,
190
192
  name: name,
193
+ css: inputStyles,
191
194
  className: "euiFilePicker__input",
192
195
  onChange: _this2.handleChange,
193
196
  ref: function ref(input) {
@@ -199,23 +202,25 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
199
202
  disabled: disabled,
200
203
  "aria-describedby": promptId
201
204
  }, rest))), (0, _react2.jsx)("div", {
205
+ css: promptStyles,
202
206
  className: "euiFilePicker__prompt",
203
207
  id: promptId
204
208
  }, (0, _react2.jsx)(_icon.EuiIcon, {
209
+ css: iconStyles,
205
210
  className: "euiFilePicker__icon",
206
211
  color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary',
207
212
  type: isInvalid ? 'alert' : 'importAction',
208
213
  size: normalFormControl ? 'm' : 'l',
209
214
  "aria-hidden": "true"
210
- }), (0, _react2.jsx)("div", {
215
+ }), (0, _react2.jsx)("span", {
211
216
  className: "euiFilePicker__promptText"
212
- }, _this2.state.promptText || initialPromptText), clearButton, loader)));
217
+ }, _this2.state.promptText || initialPromptText), clearButton, loader));
213
218
  });
214
219
  }
215
220
  }]);
216
221
  }(_react.Component);
217
- (0, _defineProperty2.default)(EuiFilePicker, "contextType", _eui_form_context.FormContext);
218
- (0, _defineProperty2.default)(EuiFilePicker, "defaultProps", {
222
+ (0, _defineProperty2.default)(EuiFilePickerClass, "contextType", _eui_form_context.FormContext);
223
+ (0, _defineProperty2.default)(EuiFilePickerClass, "defaultProps", {
219
224
  initialPromptText: (0, _react2.jsx)(_i18n.EuiI18n, {
220
225
  token: "euiFilePicker.promptText",
221
226
  default: "Select or drag and drop a file"
@@ -223,12 +228,13 @@ var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/function (_Component) {
223
228
  compressed: false,
224
229
  display: 'large'
225
230
  });
226
- EuiFilePicker.propTypes = {
231
+ EuiFilePickerClass.propTypes = {
227
232
  id: _propTypes.default.string,
228
233
  name: _propTypes.default.string,
229
234
  className: _propTypes.default.string,
230
235
  /**
231
236
  * The content that appears in the dropzone if no file is attached
237
+ * @default 'Select or drag and drop a file'
232
238
  */
233
239
  initialPromptText: _propTypes.default.node,
234
240
  /**
@@ -237,12 +243,14 @@ EuiFilePicker.propTypes = {
237
243
  onChange: _propTypes.default.func,
238
244
  /**
239
245
  * Reduces the size to a typical (compressed) input
246
+ * @default false
240
247
  */
241
248
  compressed: _propTypes.default.bool,
242
249
  /**
243
250
  * Size or type of display;
244
251
  * `default` for normal height, similar to other controls;
245
252
  * `large` for taller size
253
+ * @default large
246
254
  */
247
255
  display: _propTypes.default.oneOf(["default", "large"]),
248
256
  /**
@@ -257,4 +265,5 @@ EuiFilePicker.propTypes = {
257
265
  "aria-label": _propTypes.default.string,
258
266
  "data-test-subj": _propTypes.default.string,
259
267
  css: _propTypes.default.any
260
- };
268
+ };
269
+ var EuiFilePicker = exports.EuiFilePicker = (0, _services.withEuiStylesMemoizer)(EuiFilePickerClass);
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.euiFilePickerStyles = void 0;
7
+ var _react = require("@emotion/react");
8
+ var _global_styling = require("../../../global_styling");
9
+ var _form = require("../form.styles");
10
+ 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)."; } /*
11
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
12
+ * or more contributor license agreements. Licensed under the Elastic License
13
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
14
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
15
+ * Side Public License, v 1.
16
+ */
17
+ var _ref = process.env.NODE_ENV === "production" ? {
18
+ name: "6h1iuq-euiFilePicker__clearButton",
19
+ styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;"
20
+ } : {
21
+ name: "6h1iuq-euiFilePicker__clearButton",
22
+ styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;",
23
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
24
+ };
25
+ var _ref2 = process.env.NODE_ENV === "production" ? {
26
+ name: "d8me89-euiFilePicker__rightIcon",
27
+ styles: "position:absolute;label:euiFilePicker__rightIcon;"
28
+ } : {
29
+ name: "d8me89-euiFilePicker__rightIcon",
30
+ styles: "position:absolute;label:euiFilePicker__rightIcon;",
31
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
32
+ };
33
+ var _ref3 = process.env.NODE_ENV === "production" ? {
34
+ name: "19x04ih-largeInteractive",
35
+ styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;"
36
+ } : {
37
+ name: "19x04ih-largeInteractive",
38
+ styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;",
39
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
40
+ };
41
+ var _ref4 = process.env.NODE_ENV === "production" ? {
42
+ name: "1j9s7hu-euiFilePicker__input",
43
+ styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;"
44
+ } : {
45
+ name: "1j9s7hu-euiFilePicker__input",
46
+ styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;",
47
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
48
+ };
49
+ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
50
+ var euiTheme = euiThemeContext.euiTheme;
51
+ var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
52
+ var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
53
+ var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
54
+ fontSize = _euiFontSize.fontSize,
55
+ lineHeight = _euiFontSize.lineHeight;
56
+ return {
57
+ euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;&:has(input:focus){--euiFormControlStateColor:", euiTheme.colors.primary, ";};label:euiFilePicker;"),
58
+ isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.primary, ";;label:isDroppingFile;"),
59
+ invalid: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.danger, ";;label:invalid;"),
60
+ hasFiles: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
61
+ loading: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
62
+ // Skip the css() on the default width to avoid generating a className
63
+ formWidth: formStyles.formWidth,
64
+ fullWidth: /*#__PURE__*/(0, _react.css)(formStyles.fullWidth, ";label:fullWidth;"),
65
+ // The input is an invisible dropzone / button
66
+ input: {
67
+ euiFilePicker__input: _ref4,
68
+ largeInteractive: _ref3
69
+ },
70
+ euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
71
+ disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
72
+ // Skip the css() on the default height to avoid generating a className
73
+ uncompressed: formStyles.uncompressed,
74
+ compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),
75
+ // Completely different rendering style from the normal form controls
76
+ large: {
77
+ large: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.l, ";display:flex;flex-direction:column;align-items:center;justify-content:center;.euiFilePicker__promptText{", (0, _global_styling.euiTextTruncate)(), " line-height:", lineHeight, ";};label:large;"),
78
+ // Static heights so that surrounding contents don't shift around
79
+ uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
80
+ return x * 8;
81
+ })), "\n border-radius: ").concat(formVariables.controlBorderRadius, ";\n "),
82
+ compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
83
+ return x * 6.5;
84
+ })), " border-radius:", formVariables.controlCompressedBorderRadius, ";;label:compressed;")
85
+ },
86
+ icon: {
87
+ euiFilePicker__icon: /*#__PURE__*/(0, _react.css)(";label:euiFilePicker__icon;"),
88
+ normal: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:normal;"),
89
+ uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('left', euiTheme.size.m), "\n "),
90
+ compresssed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.m), ";;label:compresssed;"),
91
+ large: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " ", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
92
+ },
93
+ rightIcon: {
94
+ euiFilePicker__rightIcon: _ref2,
95
+ uncompressed: "\n ".concat((0, _global_styling.logicalCSS)('top', euiTheme.size.m), "\n ").concat((0, _global_styling.logicalCSS)('right', euiTheme.size.m), "\n "),
96
+ compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', '50%'), " ", (0, _global_styling.logicalCSS)('margin-top', (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
97
+ return x / -2;
98
+ })), ";;label:compressed;")
99
+ },
100
+ euiFilePicker__clearButton: _ref
101
+ };
102
+ };
@@ -29,21 +29,23 @@ var EuiIconAppCases = function EuiIconAppCases(_ref) {
29
29
  xmlns: "http://www.w3.org/2000/svg",
30
30
  width: 32,
31
31
  height: 32,
32
- fill: "none",
33
32
  viewBox: "0 0 32 32",
34
33
  "aria-labelledby": titleId
35
34
  }, props), title ? (0, _react2.jsx)("title", {
36
35
  id: titleId
37
36
  }, title) : null, (0, _react2.jsx)("path", {
38
- fillRule: "evenodd",
39
- 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"
37
+ d: "M4 6h22v7h-2V8H6v19H4V6Z",
38
+ className: "euiIcon__fillSecondary"
39
+ }), (0, _react2.jsx)("path", {
40
+ d: "M10 12H7v-2h3v2Zm1 0h12v-2H11v2Z",
41
+ className: "euiIcon__fillSecondary"
42
+ }), (0, _react2.jsx)("path", {
43
+ 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"
40
44
  }), (0, _react2.jsx)("path", {
41
- d: "m30.293 27.707-4-4 1.414-1.414 4 4-1.414 1.414ZM6 4H2v27h25v-3h-2v1H4V6h2V4Zm19 6h2V4h-4v2h2v4Z"
45
+ d: "M23 21v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"
42
46
  }), (0, _react2.jsx)("path", {
43
47
  fillRule: "evenodd",
44
- 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",
45
- className: "euiIcon__fillSecondary",
46
- clipRule: "evenodd"
48
+ 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"
47
49
  }));
48
50
  };
49
51
  var icon = exports.icon = EuiIconAppCases;
@@ -33,21 +33,15 @@ var EuiIconLogoElasticStack = function EuiIconLogoElasticStack(_ref) {
33
33
  "aria-labelledby": titleId
34
34
  }, props), title ? (0, _react2.jsx)("title", {
35
35
  id: titleId
36
- }, title) : null, (0, _react2.jsx)("g", {
37
- fill: "none",
38
- fillRule: "evenodd"
39
- }, (0, _react2.jsx)("path", {
36
+ }, title) : null, (0, _react2.jsx)("path", {
40
37
  fill: "#F04E98",
41
- d: "M32 9V2.5A2.5 2.5 0 0 0 29.5 0h-27A2.5 2.5 0 0 0 0 2.5V9h32Z"
38
+ 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"
42
39
  }), (0, _react2.jsx)("path", {
43
40
  fill: "#00BFB3",
44
- d: "M0 20h32v-8H0z"
41
+ d: "M0 20.148h32v-8.296H0v8.296Z"
45
42
  }), (0, _react2.jsx)("path", {
46
- fill: "#0080D5",
47
- d: "M14.5 23H0v6.5A2.5 2.5 0 0 0 2.5 32h12v-9Z"
48
- }), (0, _react2.jsx)("path", {
49
- fill: "#FEC514",
50
- d: "M17.5 23v9h12a2.5 2.5 0 0 0 2.5-2.5V23H17.5Z"
51
- })));
43
+ fill: "#07C",
44
+ 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"
45
+ }));
52
46
  };
53
47
  var icon = exports.icon = EuiIconLogoElasticStack;
@@ -56,9 +56,9 @@ var EuiStep = exports.EuiStep = function EuiStep(_ref) {
56
56
  }, (0, _react2.jsx)(_step_number.EuiStepNumber, {
57
57
  number: step,
58
58
  status: status,
59
- titleSize: titleSize
59
+ titleSize: titleSize === 'xxs' ? 'none' : titleSize
60
60
  }), (0, _react2.jsx)(_title.EuiTitle, {
61
- size: titleSize,
61
+ size: titleSize === 'xxs' ? 'xs' : titleSize,
62
62
  className: "euiStep__title",
63
63
  css: cssStepTitleStyles
64
64
  }, /*#__PURE__*/(0, _react.createElement)(headingElement, null, title))), (0, _react2.jsx)("div", {
@@ -89,7 +89,9 @@ EuiStep.propTypes = {
89
89
  */
90
90
  status: _propTypes.default.any,
91
91
  /**
92
- * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
92
+ * Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
93
+ * The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
94
+ * @default s
93
95
  */
94
96
  titleSize: _propTypes.default.any
95
97
  };
@@ -19,6 +19,7 @@ var euiStepVariables = exports.euiStepVariables = function euiStepVariables(euiT
19
19
  return {
20
20
  numberSize: euiTheme.size.xl,
21
21
  numberXSSize: euiTheme.size.l,
22
+ numberXXSSize: euiTheme.size.base,
22
23
  numberMargin: euiTheme.size.base
23
24
  };
24
25
  };
@@ -38,9 +39,10 @@ var euiStepStyles = exports.euiStepStyles = function euiStepStyles(euiThemeConte
38
39
  return {
39
40
  euiStep: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
40
41
  // Sizes
41
- m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
42
- s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
43
- xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
42
+ m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:m;"),
43
+ s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:s;"),
44
+ xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiStep.numberXSSize, ";};label:xs;"),
45
+ xxs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.s, " ", euiStep.numberXXSSize, ";};label:xxs;")
44
46
  };
45
47
  };
46
48
  var euiStepContentStyles = exports.euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
@@ -64,7 +66,12 @@ var euiStepContentStyles = exports.euiStepContentStyles = function euiStepConten
64
66
  return x / 2 + y;
65
67
  })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
66
68
  return x / 2;
67
- })), ";;label:xs;")
69
+ })), ";;label:xs;"),
70
+ xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXXSSize, euiStep.numberMargin], function (x, y) {
71
+ return x / 2 + y;
72
+ })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXXSSize, function (x) {
73
+ return x / 2;
74
+ })), ";;label:xxs;")
68
75
  };
69
76
  };
70
77
  var euiStepTitleStyles = exports.euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
@@ -77,6 +84,7 @@ var euiStepTitleStyles = exports.euiStepTitleStyles = function euiStepTitleStyle
77
84
  // Sizes
78
85
  m: /*#__PURE__*/(0, _react.css)(";label:m;"),
79
86
  s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), ";;label:s;"),
80
- xs: /*#__PURE__*/(0, _react.css)(";label:xs;")
87
+ xs: /*#__PURE__*/(0, _react.css)(";label:xs;"),
88
+ xxs: /*#__PURE__*/(0, _react.css)("line-height:", euiStep.numberXXSSize, ";;label:xxs;")
81
89
  };
82
90
  };
@@ -10,9 +10,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _react = _interopRequireDefault(require("react"));
13
+ var _services = require("../../services");
13
14
  var _step_number = require("./step_number");
14
15
  var _step_strings = require("./step_strings");
15
- var _services = require("../../services");
16
16
  var _step_horizontal = require("./step_horizontal.styles");
17
17
  var _react2 = require("@emotion/react");
18
18
  var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
@@ -23,6 +23,12 @@ var _excluded = ["className", "step", "title", "onClick", "disabled", "status",
23
23
  * in compliance with, at your election, the Elastic License 2.0 or the Server
24
24
  * Side Public License, v 1.
25
25
  */
26
+ // The titleSize map is not 1 to 1; small == xs on the titleSize map
27
+ var stepNumberSizeMap = {
28
+ xs: 'none',
29
+ s: 'xs',
30
+ m: 'm'
31
+ };
26
32
  var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_ref) {
27
33
  var className = _ref.className,
28
34
  _ref$step = _ref.step,
@@ -94,8 +100,7 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
94
100
  className: "euiStepHorizontal__number",
95
101
  status: status,
96
102
  number: step,
97
- titleSize: size === 's' ? 'xs' : 'm' // The titleSize map is not 1 to 1; small == xs on the titleSize map
98
- ,
103
+ titleSize: stepNumberSizeMap[size],
99
104
  css: cssNumberStyles
100
105
  }), (0, _react2.jsx)("span", {
101
106
  className: "euiStepHorizontal__title",
@@ -44,6 +44,7 @@ var euiStepHorizontalStyles = exports.euiStepHorizontalStyles = function euiStep
44
44
  // Adjust the size of the step number and connecting lines based on size
45
45
  m: _generateStepSizeAndInset(euiStep.numberSize),
46
46
  s: _generateStepSizeAndInset(euiStep.numberXSSize),
47
+ xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
47
48
  // Note: these selectors must be nested because focus/hover state
48
49
  // is on the parent container, but affects specific children
49
50
  enabled: /*#__PURE__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),