@elastic/eui 67.1.2 → 69.0.0

package/optimize/es/components/resizable_container/resizable_container.js

@@ -2,7 +2,7 @@ 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 = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed"];
+var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed", "onResizeStart", "onResizeEnd"];
 
 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; }
 
@@ -44,6 +44,8 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       className = _ref.className,
       onPanelWidthChange = _ref.onPanelWidthChange,
       onToggleCollapsed = _ref.onToggleCollapsed,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = useRef(null);
@@ -73,6 +75,26 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       initialize();
     }
   }, [initialize, containerSize]);
+  var resizeContext = useRef({});
+  var resizeEnd = useCallback(function () {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    resizeContext.current = {};
+  }, [onResizeEnd]);
+  var resizeStart = useCallback(function (trigger, keyMoveDirection) {
+    // If another resize starts while the previous one is still in progress
+    // (e.g. user presses opposite arrow to change direction while the first
+    // is still held down, or user presses an arrow while dragging with the
+    // mouse), we want to signal the end of the previous resize first.
+    if (resizeContext.current.trigger) {
+      resizeEnd();
+    }
+
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(trigger);
+    resizeContext.current = {
+      trigger: trigger,
+      keyMoveDirection: keyMoveDirection
+    };
+  }, [onResizeStart, resizeEnd]);
   var onMouseDown = useCallback(function (event) {
     var currentTarget = event.currentTarget;
     var prevPanel = currentTarget.previousElementSibling;
@@ -81,12 +103,13 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
     var prevPanelId = prevPanel.id;
     var nextPanelId = nextPanel.id;
     var position = getPosition(event, isHorizontal);
+    resizeStart('pointer');
     actions.dragStart({
       position: position,
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal]);
+  }, [actions, isHorizontal, resizeStart]);
   var onMouseMove = useCallback(function (event) {
     if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
     var position = getPosition(event, isHorizontal);
@@ -96,24 +119,29 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       nextPanelId: reducerState.nextPanelId
     });
   }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+  var getKeyMoveDirection = useCallback(function (key) {
+    var direction = null;
+
+    if (isHorizontal && key === keys.ARROW_LEFT || !isHorizontal && key === keys.ARROW_UP) {
+      direction = 'backward';
+    } else if (isHorizontal && key === keys.ARROW_RIGHT || !isHorizontal && key === keys.ARROW_DOWN) {
+      direction = 'forward';
+    }
+
+    return direction;
+  }, [isHorizontal]);
   var onKeyDown = useCallback(function (event) {
     var key = event.key,
         currentTarget = event.currentTarget;
-    var shouldResizeHorizontalPanel = isHorizontal && (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT);
-    var shouldResizeVerticalPanel = !isHorizontal && (key === keys.ARROW_UP || key === keys.ARROW_DOWN);
+    var direction = getKeyMoveDirection(key);
     var prevPanelId = currentTarget.previousElementSibling.id;
     var nextPanelId = currentTarget.nextElementSibling.id;
-    var direction;
-
-    if (key === keys.ARROW_DOWN || key === keys.ARROW_RIGHT) {
-      direction = 'forward';
-    }
 
-    if (key === keys.ARROW_UP || key === keys.ARROW_LEFT) {
-      direction = 'backward';
-    }
+    if (direction && prevPanelId && nextPanelId) {
+      if (!event.repeat) {
+        resizeStart('key', direction);
+      }
 
-    if (direction === 'forward' || direction === 'backward' && (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) && prevPanelId && nextPanelId) {
       event.preventDefault();
       actions.keyMove({
         direction: direction,
@@ -121,17 +149,40 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
         nextPanelId: nextPanelId
       });
     }
-  }, [actions, isHorizontal]);
+  }, [actions, getKeyMoveDirection, resizeStart]);
+  var onKeyUp = useCallback(function (_ref2) {
+    var key = _ref2.key;
+
+    // We only want to signal the end of a resize if the key that was released
+    // is the same as the one that started the resize. This prevents the end
+    // of a resize if the user presses one arrow key, then presses the opposite
+    // arrow key to change direction, then releases the first arrow key.
+    if (resizeContext.current.trigger === 'key' && resizeContext.current.keyMoveDirection === getKeyMoveDirection(key)) {
+      resizeEnd();
+    }
+  }, [getKeyMoveDirection, resizeEnd]);
   var onMouseUp = useCallback(function () {
+    if (resizeContext.current.trigger === 'pointer') {
+      resizeEnd();
+    }
+
     actions.reset();
-  }, [actions]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, resizeEnd]);
+  var onBlur = useCallback(function () {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+
+    actions.resizerBlur();
+  }, [actions, resizeEnd]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var EuiResizableButton = useCallback(euiResizableButtonWithControls({
     onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onFocus: actions.resizerFocus,
-    onBlur: actions.resizerBlur,
+    onBlur: onBlur,
     isHorizontal: isHorizontal,
     registration: {
       register: actions.registerResizer,

package/optimize/es/components/resizable_container/resizable_panel.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "style", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
+var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
 
 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; }
 
@@ -72,8 +72,6 @@ export var EuiResizablePanel = function EuiResizablePanel(_ref) {
       minSize = _ref$minSize === void 0 ? '0px' : _ref$minSize,
       _ref$scrollable = _ref.scrollable,
       scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
       mode = _ref.mode,
       registration = _ref.registration,
       onToggleCollapsed = _ref.onToggleCollapsed,
@@ -182,7 +180,7 @@ export var EuiResizablePanel = function EuiResizablePanel(_ref) {
     };
   }
 
-  var styles = _objectSpread(_objectSpread({}, style), dimensions);
+  var styles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), dimensions);
 
   useEffect(function () {
     if (!registration) return;

package/optimize/es/components/tool_tip/tool_tip_anchor.js

@@ -35,9 +35,9 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classes = classNames('euiToolTipAnchor', className);
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ___EmotionJSX("span", _extends({
-      ref: ref
+      ref: ref,
+      css: cssStyles
     }, rest, {
-      css: cssStyles,
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut

package/optimize/es/services/color/manipulation.js

@@ -88,4 +88,13 @@ export var desaturate = function desaturate(color, amount) {
 
 export var lightness = function lightness(color) {
   return chroma(color).get('hsl.l') * 100;
+};
+/**
+ * Returns the darken value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+export var darken = function darken(color, amount) {
+  return chroma(color).darken(amount).hex();
 };

package/optimize/es/services/index.js

@@ -11,7 +11,7 @@ export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
 export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
-export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin } from './color';
+export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';

package/optimize/es/test/rtl/component_helpers.d.ts

@@ -5,3 +5,6 @@
  */
 export declare const waitForEuiPopoverOpen: () => Promise<void>;
 export declare const waitForEuiPopoverClose: () => Promise<void>;
+
+export declare const waitForEuiToolTipVisible: () => Promise<void>;
+export declare const waitForEuiToolTipHidden: () => Promise<void>;

package/optimize/es/test/rtl/component_helpers.js

@@ -84,7 +84,10 @@ export var waitForEuiToolTipVisible = /*#__PURE__*/function () {
             return waitFor(function () {
               var tooltip = document.querySelector('.euiToolTipPopover');
               expect(tooltip).toBeVisible();
-            });
+            }, {
+              timeout: 1500
+            } // Account for long delay on tooltips
+            );
 
           case 2:
             return _context3.abrupt("return", _context3.sent);

package/optimize/lib/components/accessibility/skip_link/skip_link.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,11 +11,11 @@ exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -29,68 +31,88 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "fallbackDestination", "overrideLinkBehavior", "tabIndex", "position", "children", "className", "onClick"];
 
-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; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var POSITIONS = ['static', 'fixed', 'absolute'];
 exports.POSITIONS = POSITIONS;
 
 var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      _ref$fallbackDestinat = _ref.fallbackDestination,
+      fallbackDestination = _ref$fallbackDestinat === void 0 ? 'main' : _ref$fallbackDestinat,
       overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
       children = _ref.children,
       className = _ref.className,
+      _onClick = _ref.onClick,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _skip_link.euiSkipLinkStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiSkipLink', className);
-  var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
-
-  var optionalProps = {};
-
-  if (destinationId) {
-    optionalProps = {
-      href: "#".concat(destinationId)
-    };
-  }
-
-  if (overrideLinkBehavior) {
-    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
-      onClick: function onClick(e) {
-        e.preventDefault();
-        var destinationEl = document.getElementById(destinationId);
-        if (!destinationEl) return; // Scroll to the top of the destination content only if it's ~mostly out of view
-
-        var destinationY = destinationEl.getBoundingClientRect().top;
-        var halfOfViewportHeight = window.innerHeight / 2;
-
-        if (destinationY >= halfOfViewportHeight || window.scrollY >= destinationY + halfOfViewportHeight) {
-          destinationEl.scrollIntoView();
-        } // Ensure the destination content is focusable
-
-
-        if (!(0, _tabbable.isTabbable)(destinationEl)) {
-          destinationEl.tabIndex = -1;
-          destinationEl.addEventListener('blur', function () {
-            return destinationEl.removeAttribute('tabindex');
-          }, {
-            once: true
-          });
-        }
-
-        destinationEl.focus({
-          preventScroll: true
-        }); // Scrolling is already handled above, and focus autoscroll behaves oddly on Chrome around fixed headers
+  var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined];
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      destinationEl = _useState2[0],
+      setDestinationEl = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      hasValidId = _useState4[0],
+      setHasValidId = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var idEl = document.getElementById(destinationId);
+
+    if (idEl) {
+      setHasValidId(true);
+      setDestinationEl(idEl);
+      return;
+    }
+
+    setHasValidId(false); // If no valid element via ID is available, use the fallback query selectors
+
+    var fallbackEl = document.querySelector(fallbackDestination);
+
+    if (fallbackEl) {
+      setDestinationEl(fallbackEl);
+    }
+  }, [destinationId, fallbackDestination]);
+  var onClick = (0, _react.useCallback)(function (e) {
+    if (overrideLinkBehavior || !hasValidId) {
+      if (!destinationEl) return;
+      e.preventDefault(); // Scroll to the top of the destination content only if it's ~mostly out of view
+
+      var destinationY = destinationEl.getBoundingClientRect().top;
+      var halfOfViewportHeight = window.innerHeight / 2;
+
+      if (destinationY >= halfOfViewportHeight || window.scrollY >= destinationY + halfOfViewportHeight) {
+        destinationEl.scrollIntoView();
+      } // Ensure the destination content is focusable
+
+
+      if (!(0, _tabbable.isTabbable)(destinationEl)) {
+        destinationEl.tabIndex = -1;
+        destinationEl.addEventListener('blur', function () {
+          return destinationEl.removeAttribute('tabindex');
+        }, {
+          once: true
+        });
       }
-    });
-  }
 
+      destinationEl.focus({
+        preventScroll: true
+      }); // Scrolling is already handled above, and focus autoscroll behaves oddly on Chrome around fixed headers
+    }
+
+    _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
+  }, [overrideLinkBehavior, hasValidId, destinationEl, _onClick]);
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
@@ -98,8 +120,10 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     className: classes,
     tabIndex: position === 'fixed' ? 0 : tabIndex,
     size: "s",
-    fill: true
-  }, optionalProps, rest), children));
+    fill: true,
+    href: "#".concat(destinationId),
+    onClick: onClick
+  }, rest), children));
 };
 
 exports.EuiSkipLink = EuiSkipLink;

package/optimize/lib/components/badge/badge_group/badge_group.js

@@ -17,7 +17,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../../common");
+var _services = require("../../../services");
+
+var _badge_group = require("./badge_group.styles");
 
 var _react2 = require("@emotion/react");
 
@@ -27,12 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var gutterSizeToClassNameMap = {
-  none: null,
-  xs: 'euiBadgeGroup--gutterExtraSmall',
-  s: 'euiBadgeGroup--gutterSmall'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var GUTTER_SIZES = ['none', 'xs', 's'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 var EuiBadgeGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
@@ -40,15 +37,15 @@ var EuiBadgeGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$gutterSize = _ref.gutterSize,
       gutterSize = _ref$gutterSize === void 0 ? 'xs' : _ref$gutterSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiBadgeGroup', gutterSizeToClassNameMap[gutterSize], className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _badge_group.euiBadgeGroupStyles)(euiTheme);
+  var cssStyles = [styles.euiBadgeGroup, styles[gutterSize]];
+  var classes = (0, _classnames.default)('euiBadgeGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     ref: ref
-  }, rest), _react.default.Children.map(children, function (child) {
-    return (0, _react2.jsx)("span", {
-      className: "euiBadgeGroup__item"
-    }, child);
-  }));
+  }, rest), children);
 });
 exports.EuiBadgeGroup = EuiBadgeGroup;
 EuiBadgeGroup.displayName = 'EuiBadgeGroup';

package/optimize/lib/components/badge/badge_group/badge_group.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBadgeGroupStyles = 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 euiBadgeGroupStyles = function euiBadgeGroupStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiBadgeGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('max-width', '100%'), ".euiBadge{", (0, _global_styling.logicalCSS)('margin-left', 0), ";};label:euiBadgeGroup;"),
+    // Gutter sizes
+    none: /*#__PURE__*/(0, _react.css)(";label:none;"),
+    s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xs;")
+  };
+};
+
+exports.euiBadgeGroupStyles = euiBadgeGroupStyles;

package/optimize/lib/components/badge/beta_badge/beta_badge.js

@@ -7,7 +7,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToClassMap = exports.SIZES = exports.EuiBetaBadge = exports.COLORS = void 0;
+exports.SIZES = exports.EuiBetaBadge = exports.COLORS = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -19,14 +19,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../../common");
-
 var _services = require("../../../services");
 
 var _tool_tip = require("../../tool_tip");
 
 var _icon = require("../../icon");
 
+var _beta_badge = require("./beta_badge.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPosition", "anchorProps", "title", "iconType", "onClick", "onClickAriaLabel", "href", "rel", "target", "size"];
@@ -35,19 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var colorToClassMap = {
-  accent: 'euiBetaBadge--accent',
-  subdued: 'euiBetaBadge--subdued',
-  hollow: 'euiBetaBadge--hollow'
-};
-var COLORS = (0, _common.keysOf)(colorToClassMap);
+var COLORS = ['accent', 'subdued', 'hollow'];
 exports.COLORS = COLORS;
-var sizeToClassMap = {
-  s: 'euiBetaBadge--small',
-  m: null
-};
-exports.sizeToClassMap = sizeToClassMap;
-var SIZES = (0, _common.keysOf)(sizeToClassMap);
+var SIZES = ['s', 'm'];
 exports.SIZES = SIZES;
 
 var EuiBetaBadge = function EuiBetaBadge(_ref) {
@@ -69,21 +59,17 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var singleLetter = false;
-
-  if (typeof label === 'string' && label.length === 1) {
-    singleLetter = true;
-  }
-
-  var classes = (0, _classnames.default)('euiBetaBadge', {
-    'euiBetaBadge--iconOnly': iconType,
-    'euiBetaBadge--singleLetter': singleLetter,
-    'euiBetaBadge-isClickable': onClick || href
-  }, colorToClassMap[color], sizeToClassMap[size], className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var singleLetter = !!(typeof label === 'string' && label.length === 1);
+  var isCircular = iconType || singleLetter;
+  var classes = (0, _classnames.default)('euiBetaBadge', className);
+  var styles = (0, _beta_badge.euiBetaBadgeStyles)(euiTheme);
+  var cssStyles = [styles.euiBetaBadge, styles[color], styles[size], isCircular ? styles.badgeSizes.circle[size] : styles.badgeSizes.default[size]];
   var icon;
 
   if (iconType) {
     icon = (0, _react2.jsx)(_icon.EuiIcon, {
+      css: styles.euiBetaBadge__icon,
       className: "euiBetaBadge__icon",
       type: iconType,
       size: size === 'm' ? 'm' : 's',
@@ -115,6 +101,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
   if (onClick || href) {
     content = (0, _react2.jsx)(Element, (0, _extends2.default)({
       "aria-label": onClickAriaLabel,
+      css: cssStyles,
       className: classes,
       title: typeof label === 'string' ? label : title
     }, relObj, rest), icon || label);
@@ -138,6 +125,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, (0, _react2.jsx)("span", (0, _extends2.default)({
         tabIndex: 0,
+        css: cssStyles,
         className: classes,
         role: "button"
       }, rest), icon || label));
@@ -149,6 +137,7 @@ var EuiBetaBadge = function EuiBetaBadge(_ref) {
       }
 
       return (0, _react2.jsx)("span", (0, _extends2.default)({
+        css: cssStyles,
         className: classes,
         title: spanTitle
       }, rest), icon || label);