@elastic/eui 74.1.0 → 75.1.0

package/optimize/es/components/flyout/flyout.js

@@ -1,8 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,9 +16,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -25,6 +26,7 @@ import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TYPES = ['push', 'overlay'];
@@ -48,7 +50,6 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$hideCloseButton = _ref.hideCloseButton,
       hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
       closeButtonProps = _ref.closeButtonProps,
-      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       _ref$closeButtonPosit = _ref.closeButtonPosition,
       closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
       onClose = _ref.onClose,
@@ -67,11 +68,12 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'overlay' : _ref$type,
       outsideClickCloses = _ref.outsideClickCloses,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'dialog' : _ref$role,
       _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
       pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-      focusTrapProps = _ref.focusTrapProps,
+      _ref$focusTrapProps = _ref.focusTrapProps,
+      _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+      _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
+      includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var Element = as || defaultElement;
@@ -164,7 +166,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
-        "aria-label": closeButtonAriaLabel || closeAriaLabel,
+        "aria-label": closeAriaLabel,
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
@@ -177,24 +179,61 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }));
     });
   }
+  /*
+   * If not disabled, automatically add fixed EuiHeaders as shards
+   * to EuiFlyout focus traps, to prevent focus fighting
+   */
 
-  var hasOverlayMask = ownFocus && !isPushed;
 
-  var onClickOutside = function onClickOutside(event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
+  var flyoutToggle = useRef(document.activeElement);
 
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  useEffect(function () {
+    if (includeFixedHeadersInFocusTrap) {
+      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
+      setFixedHeaders(Array.from(fixedHeaderEls)); // Flyouts that are toggled from fixed headers do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+
+      fixedHeaderEls.forEach(function (header) {
+        if (header.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.focus();
+        }
+      });
     } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      // Clear existing headers if necessary, e.g. switching to `false`
+      setFixedHeaders(function (headers) {
+        return headers.length ? [] : headers;
+      });
+    }
+  }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
+  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
+  });
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
 
-    return undefined;
-  };
+
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = useGeneratedHtmlId();
+
+  var screenReaderDescription = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: descriptionId
+  }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderModalDialog",
+    default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+  }) : ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderFixedHeaders",
+    default: "You can still continue tabbing through the page headers in addition to the dialog."
+  })));
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
    * the flyout won't return focus to the originating button.
@@ -209,6 +248,22 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
 
 
+  var onClickOutside = function onClickOutside(event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+
+
+    return undefined;
+  };
+
   var flyout = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
     clickOutsideDisables: !ownFocus,
@@ -216,12 +271,14 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
     css: cssStyles
   }, rest, {
-    role: role,
+    role: "dialog",
     className: classes,
-    tabIndex: -1,
+    tabIndex: 0,
+    "data-autofocus": true,
+    "aria-describedby": !isPushed ? descriptionId : undefined,
     style: newStyle,
     ref: setRef
-  }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+  }), !isPushed && screenReaderDescription, closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {
@@ -237,7 +294,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     flyout = ___EmotionJSX(EuiPortal, null, flyout);
   }
 
-  return ___EmotionJSX(Fragment, null, ___EmotionJSX(EuiWindowEvent, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);

package/optimize/es/components/form/range/range_track.js

@@ -85,7 +85,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   }, [showTicks, ticks, min, max, tickInterval, step]);
   var euiTheme = useEuiTheme();
   var styles = euiRangeTrackStyles(euiTheme);
-  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, (tickSequence || ticks) && styles.hasTicks];
+  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),

package/optimize/es/components/header/header.js

@@ -87,6 +87,8 @@ export var EuiHeader = function EuiHeader(_ref) {
   }
 
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    "data-fixed-header": position === 'fixed' || undefined // Used by EuiFlyouts as a query selector
+
   }, rest), contents);
 };

package/optimize/es/components/icon/assets/app_agent.js

@@ -27,18 +27,10 @@ var EuiIconAppAgent = function EuiIconAppAgent(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
-  }), ___EmotionJSX("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
-  }), ___EmotionJSX("path", {
-    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
+    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
   }), ___EmotionJSX("path", {
     className: "euiIcon__fillSecondary",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
+    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
   }));
 };
 

package/optimize/es/components/icon/assets/app_fleet.js

@@ -27,10 +27,18 @@ var EuiIconAppFleet = function EuiIconAppFleet(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
+    className: "euiIcon__fillSecondary",
+    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
+  }), ___EmotionJSX("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
+  }), ___EmotionJSX("path", {
+    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
   }), ___EmotionJSX("path", {
     className: "euiIcon__fillSecondary",
-    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
   }));
 };
 

package/optimize/es/components/search_bar/filters/field_value_selection_filter.js

@@ -251,16 +251,16 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       if (!multiSelect && autoClose) {
         this.closePopover();
 
-        var _query = checked ? this.props.query.removeSimpleFieldClauses(field) : this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator);
+        var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
 
         this.props.onChange(_query);
       } else {
         if (multiSelect === 'or') {
-          var _query2 = checked ? this.props.query.removeOrFieldValue(field, value) : this.props.query.addOrFieldValue(field, value, true, operator);
+          var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
 
           this.props.onChange(_query2);
         } else {
-          var _query3 = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
+          var _query3 = checked ? this.props.query.addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldValue(field, value);
 
           this.props.onChange(_query3);
         }
@@ -370,13 +370,9 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         listProps: {
           isVirtualized: isOverSearchThreshold || false
         },
-        onChange: function onChange(options) {
-          var diff = items.find(function (item, index) {
-            return item.checked !== options[index].checked;
-          });
-
-          if (diff) {
-            _this5.onOptionClick(diff.data.optionField, diff.data.value, diff.checked);
+        onChange: function onChange(options, event, changedOption) {
+          if (changedOption.data) {
+            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
           }
         }
       }, searchProps), function (list, search) {

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -99,6 +99,22 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -142,9 +158,6 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
@@ -165,8 +178,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -323,6 +336,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

package/optimize/es/components/steps/step.js

@@ -13,6 +13,8 @@ import classNames from 'classnames';
 import React, { createElement } from 'react';
 import { EuiTitle } from '../title';
 import { EuiStepNumber } from './step_number';
+import { useEuiTheme } from '../../services';
+import { euiStepStyles, euiStepContentStyles, euiStepTitleStyles } from './step.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStep = function EuiStep(_ref) {
   var className = _ref.className,
@@ -27,26 +29,31 @@ export var EuiStep = function EuiStep(_ref) {
       status = _ref.status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiStep', {
-    'euiStep--small': titleSize === 'xs',
-    'euiStep-isDisabled': status === 'disabled'
-  }, className);
-  var numberClasses = classNames('euiStep__circle', {
-    'euiStepNumber--small': titleSize === 'xs'
-  });
+  var classes = classNames('euiStep', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepStyles(euiTheme);
+  var cssStyles = [styles.euiStep, styles[titleSize]];
+  var contentStyles = euiStepContentStyles(euiTheme);
+  var cssContentStyles = [contentStyles.euiStep__content, contentStyles[titleSize]];
+  var titleStyles = euiStepTitleStyles(euiTheme);
+  var cssStepTitleStyles = [titleStyles.euiStep__title, status === 'disabled' && titleStyles.isDisabled, titleStyles[titleSize]];
+  var cssTitleWrapperStyles = titleStyles.euiStep__titleWrapper;
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), ___EmotionJSX("div", {
-    className: "euiStep__titleWrapper"
+    className: "euiStep__titleWrapper",
+    css: cssTitleWrapperStyles
   }, ___EmotionJSX(EuiStepNumber, {
-    className: numberClasses,
     number: step,
     status: status,
     titleSize: titleSize
   }), ___EmotionJSX(EuiTitle, {
     size: titleSize,
-    className: "euiStep__title"
+    className: "euiStep__title",
+    css: cssStepTitleStyles
   }, /*#__PURE__*/createElement(headingElement, null, title))), ___EmotionJSX("div", {
-    className: "euiStep__content"
+    className: "euiStep__content",
+    css: cssContentStyles
   }, children));
 };

package/optimize/es/components/steps/step.styles.js

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits, logicalCSS } from '../../global_styling';
+export var euiStepVariables = function euiStepVariables(euiTheme) {
+  return {
+    numberSize: euiTheme.size.xl,
+    numberXSSize: euiTheme.size.l,
+    numberMargin: euiTheme.size.base
+  };
+};
+export var euiStepStyles = function euiStepStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme); // the vertical line is centered on the number, so we need to offset the line
+  // by half of the number size & half of the line size to center it
+
+  var lineStartPosition = mathWithUnits([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 - y / 2;
+  });
+  var lineEndPosition = mathWithUnits([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 + y / 2;
+  });
+  var lineGradient = "linear-gradient(to right,\n    transparent 0,\n    transparent ".concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineEndPosition, ",\n    transparent ").concat(lineEndPosition, ",\n    transparent 100%)");
+  return {
+    euiStep: /*#__PURE__*/css("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
+    // Sizes
+    m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
+    s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
+    xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
+  };
+};
+export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  var styles = {
+    euiStep__content: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.s), " ", logicalCSS('padding-top', euiTheme.size.base), " ", logicalCSS('padding-bottom', mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+      return x + y;
+    })), " ", logicalCSS('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
+    // Sizes
+    m: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), logicalCSS('margin-left', mathWithUnits(euiStep.numberSize, function (x) {
+      return x / 2;
+    })), ";;label:m;"),
+    s: /*#__PURE__*/css(";label:s;"),
+    // s is the same as m, so we'll programmatically duplicate it below
+    xs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
+      return x / 2;
+    })), ";;label:xs;")
+  };
+  styles.s = styles.m;
+  return styles;
+};
+export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  return {
+    euiStep__titleWrapper: /*#__PURE__*/css("display:flex;gap:", euiStep.numberMargin, ";;label:euiStep__titleWrapper;"),
+    euiStep__title: /*#__PURE__*/css(";label:euiStep__title;"),
+    isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:isDisabled;"),
+    // Sizes
+    m: /*#__PURE__*/css(";label:m;"),
+    s: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), ";;label:s;"),
+    xs: /*#__PURE__*/css(";label:xs;")
+  };
+};

package/optimize/es/components/steps/step_horizontal.js

@@ -12,7 +12,9 @@ var _excluded = ["className", "step", "title", "onClick", "disabled", "status"];
 import classNames from 'classnames';
 import React from 'react';
 import { EuiStepNumber } from './step_number';
-import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep } from './step_strings';
+import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nErrorsStep, useI18nLoadingStep } from './step_strings';
+import { useEuiTheme } from '../../services';
+import { euiStepHorizontalStyles, euiStepHorizontalNumberStyles, euiStepHorizontalTitleStyles } from './step_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
   var className = _ref.className,
@@ -25,43 +27,50 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
       status = _ref$status === void 0 ? 'incomplete' : _ref$status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var buttonTitle = useI18nStep({
-    number: step,
-    title: title
-  });
-  var completeTitle = useI18nCompleteStep({
-    number: step,
-    title: title
-  });
-  var disabledTitle = useI18nDisabledStep({
-    number: step,
-    title: title
-  });
-  var incompleteTitle = useI18nIncompleteStep({
-    number: step,
-    title: title
-  });
-  var warningTitle = useI18nWarningStep({
-    number: step,
-    title: title
-  });
-  var currentTitle = useI18nCurrentStep({
-    number: step,
-    title: title
-  });
   if (disabled) status = 'disabled';
-  var classes = classNames('euiStepHorizontal', className, {
-    'euiStepHorizontal-isSelected': status === 'current',
-    'euiStepHorizontal-isComplete': status === 'complete',
-    'euiStepHorizontal-isIncomplete': status === 'incomplete',
-    'euiStepHorizontal-isDisabled': status === 'disabled'
-  });
-  var stepTitle = buttonTitle;
-  if (status === 'disabled') stepTitle = disabledTitle;
-  if (status === 'complete') stepTitle = completeTitle;
-  if (status === 'incomplete') stepTitle = incompleteTitle;
-  if (status === 'warning') stepTitle = warningTitle;
-  if (status === 'current') stepTitle = currentTitle;
+  var classes = classNames('euiStepHorizontal', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepHorizontalStyles(euiTheme);
+  var cssStyles = [styles.euiStepHorizontal, status === 'disabled' ? styles.disabled : styles.enabled];
+  var numberStyles = euiStepHorizontalNumberStyles(euiTheme);
+  var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
+  var titleStyles = euiStepHorizontalTitleStyles(euiTheme);
+  var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
+  var titleAttrsMap = {
+    step: useI18nStep({
+      number: step,
+      title: title
+    }),
+    current: useI18nCurrentStep({
+      number: step,
+      title: title
+    }),
+    disabled: useI18nDisabledStep({
+      number: step,
+      title: title
+    }),
+    incomplete: useI18nIncompleteStep({
+      number: step,
+      title: title
+    }),
+    complete: useI18nCompleteStep({
+      number: step,
+      title: title
+    }),
+    warning: useI18nWarningStep({
+      number: step,
+      title: title
+    }),
+    danger: useI18nErrorsStep({
+      number: step,
+      title: title
+    }),
+    loading: useI18nLoadingStep({
+      number: step,
+      title: title
+    })
+  };
+  var titleAttr = titleAttrsMap[status || 'step'];
 
   var onStepClick = function onStepClick(event) {
     if (!disabled) onClick(event);
@@ -69,14 +78,18 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
 
   return ___EmotionJSX("button", _extends({
     className: classes,
-    title: stepTitle,
+    title: titleAttr,
     onClick: onStepClick,
-    disabled: disabled
+    disabled: disabled,
+    css: cssStyles,
+    "data-step-status": status
   }, rest), ___EmotionJSX(EuiStepNumber, {
     className: "euiStepHorizontal__number",
     status: status,
-    number: step
+    number: step,
+    css: cssNumberStyles
   }), ___EmotionJSX("span", {
-    className: "euiStepHorizontal__title"
+    className: "euiStepHorizontal__title",
+    css: cssTitleStyles
   }, title));
 };

package/optimize/es/components/steps/step_horizontal.styles.js

@@ -0,0 +1,55 @@
+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)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { euiBreakpoint, logicalShorthandCSS, euiFocusRing, euiCanAnimate, mathWithUnits } from '../../global_styling/';
+import { euiTitle } from '../title/title.styles';
+import { euiStepVariables } from './step.styles';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;"
+} : {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  /**
+   * 1. Ensure the connecting lines stays behind the number
+   * 2. Make the content of each step align to the top, even if the steps are of varying heights,
+   *    e.g. due to some of their titles wrapping to multiple lines
+   */
+
+  return {
+    euiStepHorizontal: /*#__PURE__*/css(logicalShorthandCSS('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";inline-size:calc(50% - (", euiStep.numberSize, " / 2));inset-block-start:", mathWithUnits([euiTheme.size.l, euiStep.numberSize], function (x, y) {
+      return x + y / 2;
+    }), ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
+    // Note: these selectors must be nested because focus/hover state
+    // is on the parent container, but affects specific children
+    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;"),
+    disabled: _ref
+  };
+};
+export var euiStepHorizontalNumberStyles = function euiStepHorizontalNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__number: /*#__PURE__*/css("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
+  };
+};
+export var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", euiBreakpoint(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
+    disabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+  };
+};