@elastic/eui 123.0.0 → 123.1.0

package/optimize/es/components/call_out/call_out.js

@@ -80,13 +80,8 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var borderColors = useEuiBorderColorCSS();
   var styles = useEuiMemoizedStyles(euiCallOutStyles);
   var cssStyles = [styles.euiCallOut, borderColors[color], onDismiss && styles.hasDismissButton];
-  var highlightColorToken = getTokenName('borderStrong', color);
-  var typeColor = euiTheme.colors[highlightColorToken];
-  var cssVariables = useMemo(function () {
-    return {
-      '--euiCallOutTypeColor': typeColor
-    };
-  }, [typeColor]);
+  var iconColorToken = getTokenName('borderStrong', color);
+  var typeColor = euiTheme.colors[iconColorToken];
   var classes = classNames('euiCallOut', _defineProperty({}, "euiCallOut--".concat(color), color), className);
   var dismissButton = useMemo(function () {
     if (!onDismiss) return;
@@ -184,7 +179,7 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: classes,
     panelRef: panelRef,
     grow: false,
-    style: _objectSpread(_objectSpread({}, cssVariables), style),
+    style: style,
     "data-size": size,
     "data-test-subj": dataTestSubj
   }, rest), ___EmotionJSX("div", {

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

@@ -7,32 +7,21 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, mathWithUnits, preventForcedColors } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, mathWithUnits } from '../../global_styling';
 /** Maximum reading width for `text` and `children` slots. */
 var TEXT_MAX_WIDTH = 1200;
 export var 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 = 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 = mathWithUnits([highlightOffset], function (x) {
-    return x * 2;
-  });
   var separatorSize = mathWithUnits([euiTheme.size.s, euiTheme.size.xxs], function (x, y) {
     return x + y;
   });
-  var highlightClipSize = mathWithUnits([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
-    return x + y;
-  });
   return {
-    euiCallOut: /*#__PURE__*/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;", 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']){", logicalShorthandCSS('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
+    euiCallOut: /*#__PURE__*/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']){", logicalShorthandCSS('padding', "".concat(paddingSizes.s, " ").concat(paddingSizes.m)), ";}&:where([data-size='m']){padding:", paddingSizes.m, ";};label:euiCallOut;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/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/es/components/flyout/flyout.component.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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"];
 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; }
 /*
@@ -148,6 +148,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth = _usePropsWithComponen.minWidth,
     onResize = _usePropsWithComponen.onResize,
     onAnimationEnd = _usePropsWithComponen.onAnimationEnd,
+    scrollContainerRef = _usePropsWithComponen.scrollContainerRef,
     containerProp = _usePropsWithComponen.container,
     rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
   var container = resolveContainer(containerProp);
@@ -791,7 +792,8 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX("div", {
     className: "euiFlyout__content",
     css: styles.content,
-    "data-test-subj": "euiFlyoutContent"
+    "data-test-subj": "euiFlyoutContent",
+    ref: scrollContainerRef
   }, ___EmotionJSX(EuiFlyoutParentProvider, null, children)))));
 }
 // React.forwardRef interferes with the inferred element type

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

@@ -9,12 +9,12 @@ var _excluded = ["children", "className"];
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { euiFlyoutFooterStyles } from './flyout_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
+export var EuiFlyoutFooter = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -23,5 +23,8 @@ export var EuiFlyoutFooter = function EuiFlyoutFooter(_ref) {
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: styles.euiFlyoutFooter
-  }, rest), children);
-};
+  }, rest, {
+    ref: ref
+  }), children);
+});
+EuiFlyoutFooter.displayName = 'EuiFlyoutFooter';

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

@@ -9,12 +9,12 @@ var _excluded = ["children", "className", "hasBorder"];
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { euiFlyoutHeaderStyles } from './flyout_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
+export var EuiFlyoutHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$hasBorder = _ref.hasBorder,
@@ -26,5 +26,8 @@ export var EuiFlyoutHeader = function EuiFlyoutHeader(_ref) {
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles
-  }, rest), children);
-};
+  }, rest, {
+    ref: ref
+  }), children);
+});
+EuiFlyoutHeader.displayName = 'EuiFlyoutHeader';

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { highContrastModeStyles } from '../../../global_styling';
+import { highContrastModeStyles, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiScreenReaderOnly } from '../../accessibility';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1kqtial-euiFlyoutMenu__actions",
@@ -18,14 +18,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__
+};
 export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var topOffset = mathWithUnits([euiTheme.size.m, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
+  var containerHeight = mathWithUnits([euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
+    return x * 3 + y * 2;
+  });
   return {
-    euiFlyoutMenu__container: /*#__PURE__*/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__*/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{", 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__*/css(highContrastModeStyles(euiThemeContext, {
-      preferred: 'block-size: 100%;'
-    }), ";;label:euiFlyoutMenu__controls;"),
+    euiFlyoutMenu__controls: _ref2,
     euiFlyoutMenu__spacer: /*#__PURE__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
     euiFlyoutMenu__actions: _ref,
     euiFlyoutMenu__hiddenTitle: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:euiFlyoutMenu__hiddenTitle;"),

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormLabelAppendStyles } from './form_label_append.styles';
+import { EuiText } from '../../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFormLabelAppend = function EuiFormLabelAppend(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEuiMemoizedStyles(euiFormLabelAppendStyles);
+  if (typeof children !== 'string') {
+    return ___EmotionJSX(EuiText, _extends({
+      size: "xs",
+      className: className
+    }, rest), children);
+  }
+  var classes = classNames('euiFormLabelAppend', className);
+  return ___EmotionJSX("span", _extends({
+    css: styles.euiFormLabelAppend,
+    className: classes
+  }, rest), children);
+};

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

@@ -0,0 +1,16 @@
+/*
+ * 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 { euiFontSize } from '../../../global_styling';
+export var euiFormLabelAppendStyles = function euiFormLabelAppendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLabelAppend: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiFormLabelAppend;")
+  };
+};

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

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiFormLabelAppend } from './form_label_append';

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

@@ -18,6 +18,7 @@ import { EuiSpacer } from '../../spacer';
 import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
+import { EuiFormLabelAppend } from '../form_label_append';
 import { useFormContext } from '../eui_form_context';
 import { euiFormRowStyles } from './form_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -144,7 +145,9 @@ export var EuiFormRow = function EuiFormRow(_ref) {
   } : {
     type: labelType,
     htmlFor: hasChildLabel ? id : undefined
-  }), label), labelAppend && ' ', labelAppend) : hasEmptyLabelSpace && ___EmotionJSX(EuiSpacer, {
+  }), label), labelAppend && ___EmotionJSX(React.Fragment, null, ' ', ___EmotionJSX(EuiFormLabelAppend, {
+    className: "euiFormRow__labelAppend"
+  }, labelAppend))) : hasEmptyLabelSpace && ___EmotionJSX(EuiSpacer, {
     size: "m",
     className: "euiFormRow__labelWrapper"
   }), ___EmotionJSX("div", {