@elastic/eui 123.0.0 → 123.1.0

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "singleSelection", "onFocusBadge", "role", "searchable", "toolTipContent", "toolTipProps", "title"],
+var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "hasAriaDisabled", "prepend", "append", "allowExclusions", "singleSelection", "onFocusBadge", "role", "searchable", "toolTipContent", "toolTipProps", "title"],
   _excluded2 = ["children", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -28,6 +28,7 @@ export var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
     isFocused = _ref.isFocused,
     _ref$showIcons = _ref.showIcons,
     showIcons = _ref$showIcons === void 0 ? true : _ref$showIcons,
+    hasAriaDisabled = _ref.hasAriaDisabled,
     prepend = _ref.prepend,
     append = _ref.append,
     allowExclusions = _ref.allowExclusions,
@@ -129,17 +130,19 @@ export var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
         instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
         break;
     }
-    return state || instructions ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions)) : null;
-  }, [checked, searchable, allowExclusions]);
-  var hasToolTip = !!toolTipContent && !disabled;
-  var showOnFocusBadge = isFocused && !disabled && !!onFocusBadgeNode;
+    var enabledInstructions = disabled ? undefined : instructions;
+    return state || enabledInstructions ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || enabledInstructions ? '. ' : null, state, state && enabledInstructions ? ' ' : null, enabledInstructions)) : null;
+  }, [checked, disabled, searchable, allowExclusions]);
+  var hasToolTip = !!toolTipContent && (!disabled || hasAriaDisabled);
+  var showOnFocusBadge = isFocused && (!disabled || hasAriaDisabled) && !!onFocusBadgeNode;
   var listItemLayoutProps = _objectSpread({
     element: 'li',
     role: role,
     className: classes,
     checked: checked,
     isDisabled: disabled,
-    isFocused: !disabled && isFocused,
+    hasAriaDisabled: hasAriaDisabled,
+    isFocused: (!disabled || hasAriaDisabled) && isFocused,
     isSelected: checked !== undefined,
     isSingleSelection: singleSelection,
     selectionMode: allowExclusions || checked === 'mixed' ? 'checked' : undefined,

package/optimize/lib/components/call_out/call_out.js

@@ -89,13 +89,8 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
   var borderColors = (0, _global_styling.useEuiBorderColorCSS)();
   var styles = (0, _services.useEuiMemoizedStyles)(_call_out.euiCallOutStyles);
   var cssStyles = [styles.euiCallOut, borderColors[color], onDismiss && styles.hasDismissButton];
-  var highlightColorToken = (0, _euiThemeCommon.getTokenName)('borderStrong', color);
-  var typeColor = euiTheme.colors[highlightColorToken];
-  var cssVariables = (0, _react.useMemo)(function () {
-    return {
-      '--euiCallOutTypeColor': typeColor
-    };
-  }, [typeColor]);
+  var iconColorToken = (0, _euiThemeCommon.getTokenName)('borderStrong', color);
+  var typeColor = euiTheme.colors[iconColorToken];
   var classes = (0, _classnames.default)('euiCallOut', (0, _defineProperty2.default)({}, "euiCallOut--".concat(color), color), className);
   var dismissButton = (0, _react.useMemo)(function () {
     if (!onDismiss) return;
@@ -193,7 +188,7 @@ var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(functi
     className: classes,
     panelRef: panelRef,
     grow: false,
-    style: _objectSpread(_objectSpread({}, cssVariables), style),
+    style: style,
     "data-size": size,
     "data-test-subj": dataTestSubj
   }, rest), (0, _react2.jsx)("div", {

package/optimize/lib/components/call_out/call_out.styles.js

@@ -17,28 +17,17 @@ var _global_styling = require("../../global_styling");
 /** Maximum reading width for `text` and `children` slots. */
 var TEXT_MAX_WIDTH = 1200;
 var euiCallOutStyles = exports.euiCallOutStyles = function euiCallOutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var paddingSizes = {
     s: euiTheme.size.m,
     m: euiTheme.size.base
   };
   var borderRadius = euiTheme.border.radius.panel;
-  var highlightSize = (0, _global_styling.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
-    return highContrastMode ? x * 2 + y : x + y;
-  });
-  var highlightOffset = euiTheme.border.width.thin;
-  var highlightSizeOffset = (0, _global_styling.mathWithUnits)([highlightOffset], function (x) {
-    return x * 2;
-  });
   var separatorSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
     return x + y;
   });
-  var highlightClipSize = (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
-    return x + y;
-  });
   return {
-    euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&::before{content:'';position:absolute;inset-block-start:-", highlightOffset, ";inset-inline-start:-", highlightOffset, ";block-size:calc(100% + ", highlightSizeOffset, ");inline-size:100%;border-radius:", borderRadius, ";border-inline-start:", highlightSize, " solid var(--euiCallOutTypeColor);clip-path:polygon(\n          0 0,\n          ", highlightClipSize, " 0,\n          ", highlightClipSize, " 100%,\n          0 100%\n        );pointer-events:none;", (0, _global_styling.preventForcedColors)(euiThemeContext), ";}[dir='rtl'] &::before{clip-path:polygon(\n          calc(100% - ", highlightClipSize, ") 0,\n          100% 0,\n          100% 100%,\n          calc(100% - ", highlightClipSize, ") 100%\n        );}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
+    euiCallOut: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;max-inline-size:100%;align-items:center;border:", euiTheme.border.width.thin, " solid;border-radius:", borderRadius, ";&:focus{outline-offset:2px;}&:where([data-size='s']){", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;inline-size:100%;&:where([data-size='s'] &){gap:", euiTheme.size.s, ";}&:where([data-size='m'] &){gap:", euiTheme.size.m, ";}&:where([data-layout='wide'] &){flex-direction:row;gap:", euiTheme.size.xxl, ";};label:wrapper;"),
     // handles icon + text layout

package/optimize/lib/components/flyout/flyout.component.js

@@ -33,7 +33,7 @@ var _use_flyout_z_index = require("./use_flyout_z_index");
 var _flyout_parent_context = require("./flyout_parent_context");
 var _use_flyout_menu = require("./use_flyout_menu");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "flyoutMenuDisplayMode", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "hasAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd", "container"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "flyoutMenuDisplayMode", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "hasAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd", "scrollContainerRef", "container"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -156,6 +156,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     minWidth = _usePropsWithComponen.minWidth,
     onResize = _usePropsWithComponen.onResize,
     onAnimationEnd = _usePropsWithComponen.onAnimationEnd,
+    scrollContainerRef = _usePropsWithComponen.scrollContainerRef,
     containerProp = _usePropsWithComponen.container,
     rest = (0, _objectWithoutProperties2.default)(_usePropsWithComponen, _excluded);
   var container = resolveContainer(containerProp);
@@ -799,7 +800,8 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   }), (0, _react2.jsx)("div", {
     className: "euiFlyout__content",
     css: styles.content,
-    "data-test-subj": "euiFlyoutContent"
+    "data-test-subj": "euiFlyoutContent",
+    ref: scrollContainerRef
   }, (0, _react2.jsx)(_flyout_parent_context.EuiFlyoutParentProvider, null, children)))));
 }
 // React.forwardRef interferes with the inferred element type

package/optimize/lib/components/flyout/flyout_footer.js

@@ -1,13 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFlyoutFooter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_footer = require("./flyout_footer.styles");
@@ -20,7 +21,9 @@ var _excluded = ["children", "className"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiFlyoutFooter = exports.EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
+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); }
+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; }
+var EuiFlyoutFooter = exports.EuiFlyoutFooter = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -29,5 +32,8 @@ var EuiFlyoutFooter = exports.EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: styles.euiFlyoutFooter
-  }, rest), children);
-};
+  }, rest, {
+    ref: ref
+  }), children);
+});
+EuiFlyoutFooter.displayName = 'EuiFlyoutFooter';

package/optimize/lib/components/flyout/flyout_header.js

@@ -1,13 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFlyoutHeader = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_header = require("./flyout_header.styles");
@@ -20,7 +21,9 @@ var _excluded = ["children", "className", "hasBorder"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiFlyoutHeader = exports.EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
+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); }
+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; }
+var EuiFlyoutHeader = exports.EuiFlyoutHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$hasBorder = _ref.hasBorder,
@@ -32,5 +35,8 @@ var EuiFlyoutHeader = exports.EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles
-  }, rest), children);
-};
+  }, rest, {
+    ref: ref
+  }), children);
+});
+EuiFlyoutHeader.displayName = 'EuiFlyoutHeader';

package/optimize/lib/components/flyout/flyout_menu/flyout_menu.styles.js

@@ -22,14 +22,26 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "align-self:center;label:euiFlyoutMenu__actions;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "2o24qf-euiFlyoutMenu__controls",
+  styles: "block-size:100%;label:euiFlyoutMenu__controls;"
+} : {
+  name: "2o24qf-euiFlyoutMenu__controls",
+  styles: "block-size:100%;label:euiFlyoutMenu__controls;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var topOffset = (0, _global_styling.mathWithUnits)([euiTheme.size.m, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
+  var containerHeight = (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
+    return x * 3 + y * 2;
+  });
   return {
-    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:", containerHeight, ";flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiFlyout__closeButton{", (0, _global_styling.logicalCSS)('top', topOffset), ";}.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
     // Full height in high contrast mode so dividers can bleed to the container edges.
-    euiFlyoutMenu__controls: /*#__PURE__*/(0, _react.css)((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
-      preferred: 'block-size: 100%;'
-    }), ";;label:euiFlyoutMenu__controls;"),
+    euiFlyoutMenu__controls: _ref2,
     euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
     euiFlyoutMenu__actions: _ref,
     euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;"),

package/optimize/lib/components/form/form_label_append/form_label_append.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFormLabelAppend = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_label_append = require("./form_label_append.styles");
+var _text = require("../../text");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className"];
+/*
+ * 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.
+ */
+var EuiFormLabelAppend = exports.EuiFormLabelAppend = function EuiFormLabelAppend(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_label_append.euiFormLabelAppendStyles);
+  if (typeof children !== 'string') {
+    return (0, _react2.jsx)(_text.EuiText, (0, _extends2.default)({
+      size: "xs",
+      className: className
+    }, rest), children);
+  }
+  var classes = (0, _classnames.default)('euiFormLabelAppend', className);
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
+    css: styles.euiFormLabelAppend,
+    className: classes
+  }, rest), children);
+};

package/optimize/lib/components/form/form_label_append/form_label_append.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormLabelAppendStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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.
+ */
+
+var euiFormLabelAppendStyles = exports.euiFormLabelAppendStyles = function euiFormLabelAppendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLabelAppend: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiFormLabelAppend;")
+  };
+};

package/optimize/lib/components/form/form_label_append/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiFormLabelAppend", {
+  enumerable: true,
+  get: function get() {
+    return _form_label_append.EuiFormLabelAppend;
+  }
+});
+var _form_label_append = require("./form_label_append");

package/optimize/lib/components/form/form_row/form_row.js

@@ -17,6 +17,7 @@ var _spacer = require("../../spacer");
 var _form_help_text = require("../form_help_text");
 var _form_error_text = require("../form_error_text");
 var _form_label = require("../form_label");
+var _form_label_append = require("../form_label_append");
 var _eui_form_context = require("../eui_form_context");
 var _form_row = require("./form_row.styles");
 var _react2 = require("@emotion/react");
@@ -153,7 +154,9 @@ var EuiFormRow = exports.EuiFormRow = function EuiFormRow(_ref) {
   } : {
     type: labelType,
     htmlFor: hasChildLabel ? id : undefined
-  }), label), labelAppend && ' ', labelAppend) : hasEmptyLabelSpace && (0, _react2.jsx)(_spacer.EuiSpacer, {
+  }), label), labelAppend && (0, _react2.jsx)(_react.default.Fragment, null, ' ', (0, _react2.jsx)(_form_label_append.EuiFormLabelAppend, {
+    className: "euiFormRow__labelAppend"
+  }, labelAppend))) : hasEmptyLabelSpace && (0, _react2.jsx)(_spacer.EuiSpacer, {
     size: "m",
     className: "euiFormRow__labelWrapper"
   }), (0, _react2.jsx)("div", {