@elastic/eui 86.0.0 → 87.1.0

package/lib/components/form/range/dual_range.js

@@ -27,7 +27,7 @@ var _range = require("./range.styles");
 var _dual_range = require("./dual_range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _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; }
@@ -273,9 +273,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -392,6 +394,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = _objectWithoutProperties(_this$props, _excluded);
@@ -632,8 +635,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: (0, _react2.jsx)(_form_control_layout.EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -652,7 +655,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);
@@ -773,14 +776,38 @@ EuiDualRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+    /**
+       * Alignment of the popover relative to the input
+       */
+    anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
+    inputRef: _propTypes.default.any,
+    onPanelResize: _propTypes.default.func,
+    /**
+       * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+       * However, if the input width is too small, you can pass a minimum panel width
+       * (that should be based on the popover content).
+       */
+    panelMinWidth: _propTypes.default.number
+  })
 };
 var EuiDualRange = (0, _services.withEuiTheme)(EuiDualRangeClass);
 exports.EuiDualRange = EuiDualRange;

package/lib/components/form/range/range.js

@@ -22,7 +22,7 @@ var _range_wrapper = require("./range_wrapper");
 var _range = require("./range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _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; }
@@ -128,6 +128,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -240,8 +241,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -249,7 +250,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);
@@ -369,14 +370,21 @@ EuiRangeClass.propTypes = {
      * @default false
      */
   fullWidth: _propTypes.default.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: _propTypes.default.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: _propTypes.default.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: _propTypes.default.bool
+  inputPopoverProps: _propTypes.default.any
 };
 var EuiRange = (0, _services.withEuiTheme)(EuiRangeClass);
 exports.EuiRange = EuiRange;

package/lib/components/form/super_select/super_select.js

@@ -360,7 +360,7 @@ EuiSuperSelect.propTypes = {
        */
   isOpen: _propTypes.default.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

package/lib/components/header/header.a11y.js

@@ -100,11 +100,7 @@ var Header = function Header() {
   });
   return (0, _react2.jsx)(_header.EuiHeader, null, (0, _react2.jsx)(_header_section.EuiHeaderSection, {
     grow: false
-  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-    border: "right"
-  }, renderLogo()), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-    border: "right"
-  }, (0, _react2.jsx)(HeaderSpacesMenu, null))), renderBreadcrumbs(), (0, _react2.jsx)(_header_section.EuiHeaderSection, {
+  }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, renderLogo()), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderSpacesMenu, null))), renderBreadcrumbs(), (0, _react2.jsx)(_header_section.EuiHeaderSection, {
     side: "right"
   }, (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, search), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderUserMenu, null)), (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, null, (0, _react2.jsx)(HeaderAppMenu, null))));
 };

package/lib/components/header/header.js

@@ -27,14 +27,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function createHeaderSection(sections, border) {
+var createHeaderSection = function createHeaderSection(sections) {
   return sections.map(function (section, index) {
     return (0, _react2.jsx)(_header_section.EuiHeaderSectionItem, {
-      key: index,
-      border: border
+      key: index
     }, section);
   });
-}
+};
 // Start a counter to manage the total number of fixed headers that need the body class
 var euiHeaderFixedCounter = 0;
 var EuiHeader = function EuiHeader(_ref) {
@@ -78,7 +77,7 @@ var EuiHeader = function EuiHeader(_ref) {
         // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
         content.push((0, _react2.jsx)(_header_section.EuiHeaderSection, {
           key: "items-".concat(index)
-        }, createHeaderSection(section.items, section.borders)));
+        }, createHeaderSection(section.items)));
       }
       if (section.breadcrumbs) {
         content.push(
@@ -117,10 +116,6 @@ EuiHeader.propTypes = {
        * An arry of items that will be wrapped in a #EuiHeaderSectionItem
        */
     items: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
-    /**
-       * Apply the passed border side to each #EuiHeaderSectionItem
-       */
-    borders: _propTypes.default.oneOf(["left", "right", "none"]),
     /**
        * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects

package/lib/components/header/header.styles.js

@@ -21,7 +21,8 @@ var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     height: euiTheme.size.xxxl,
-    childHeight: euiTheme.size.xxl
+    childHeight: euiTheme.size.xxl,
+    padding: euiTheme.size.s
   };
 };
 exports.euiHeaderVariables = euiHeaderVariables;
@@ -29,13 +30,14 @@ var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
-    height = _euiHeaderVariables.height;
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
 
   // Curated border color to fade into the shadow without looking too much like a border
   // It adds separation between the header and flyout
   var borderColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " &+[data-fixed-header]{", (0, _global_styling.logicalCSS)('top', height), ";};label:fixed;"),
@@ -62,5 +64,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultB
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
   var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderSectionItem {\n      &::after {\n        background-color: ").concat(colorMode === 'DARK' ? euiTheme.colors.lightestShade : euiTheme.colors.darkShade, ";\n      }\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat((0, _services.shade)(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat((0, _services.transparentize)(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat((0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/lib/components/header/header_alert/header_alert.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _flex = require("../../flex");
 var _services = require("../../../services");
+var _header_alert = require("./header_alert.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["action", "className", "date", "text", "title", "badge"];
 /*
@@ -30,24 +31,31 @@ var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header_alert.euiHeaderAlertStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiHeaderAlert', className);
   var ariaId = (0, _services.useGeneratedHtmlId)();
   return (0, _react2.jsx)("article", _extends({
     "aria-labelledby": "".concat(ariaId, "-title"),
-    className: classes
+    className: classes,
+    css: styles.euiHeaderAlert
   }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
     justifyContent: "spaceBetween"
   }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__date"
+    className: "euiHeaderAlert__date",
+    css: styles.euiHeaderAlert__date
   }, date)), badge && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, badge)), (0, _react2.jsx)("h3", {
     id: "".concat(ariaId, "-title"),
-    className: "euiHeaderAlert__title"
+    className: "euiHeaderAlert__title",
+    css: styles.euiHeaderAlert__title
   }, title), (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__text"
+    className: "euiHeaderAlert__text",
+    css: styles.euiHeaderAlert__text
   }, text), action && (0, _react2.jsx)("div", {
-    className: "euiHeaderAlert__action euiLink"
+    className: "euiHeaderAlert__action",
+    css: styles.euiHeaderAlert__action
   }, action));
 };
 exports.EuiHeaderAlert = EuiHeaderAlert;

package/lib/components/header/header_alert/header_alert.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiHeaderAlertStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+/*
+ * 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 euiHeaderAlertStyles = function euiHeaderAlertStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderAlert: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('min-width', '300px'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " &:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";};label:euiHeaderAlert;"),
+    euiHeaderAlert__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiHeaderAlert__title;"),
+    euiHeaderAlert__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:euiHeaderAlert__text;"),
+    euiHeaderAlert__action: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:euiHeaderAlert__action;"),
+    euiHeaderAlert__date: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiHeaderAlert__date;")
+  };
+};
+exports.euiHeaderAlertStyles = euiHeaderAlertStyles;

package/lib/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -87,13 +87,25 @@ EuiHeaderBreadcrumbs.propTypes = {
          */
     truncate: _propTypes.default.bool,
     /**
-         * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
+         * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
          */
     color: _propTypes.default.any,
     /**
          * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
          */
-    "aria-current": _propTypes.default.any
+    "aria-current": _propTypes.default.any,
+    /**
+         * Creates a breadcrumb that toggles a popover dialog
+         *
+         * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
+         * click behavior should only trigger a popover.
+         */
+    popoverContent: _propTypes.default.node,
+    /**
+         * Allows customizing the popover if necessary. Accepts any props that
+         * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
+         */
+    popoverProps: _propTypes.default.any
   }).isRequired).isRequired,
   /**
      * Determines breadcrumbs appearance, with `page` being the default styling.

package/lib/components/header/header_links/header_links.js

@@ -8,12 +8,13 @@ exports.GUTTER_SIZES = exports.EuiHeaderLinks = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
+var _services = require("../../../services");
 var _icon = require("../../icon");
 var _popover = require("../../popover");
 var _i18n = require("../../i18n");
 var _header_section = require("../header_section");
 var _responsive = require("../../responsive");
+var _header_links = require("./header_links.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "popoverButtonProps", "popoverProps"],
   _excluded2 = ["onClick", "iconType"];
@@ -36,13 +37,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var gutterSizeToClassNameMap = {
-  xs: '--gutterXS',
-  s: '--gutterS',
-  m: '--gutterM',
-  l: '--gutterL'
-};
-var GUTTER_SIZES = (0, _common.keysOf)(gutterSizeToClassNameMap);
+var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
@@ -54,6 +49,8 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header_links.euiHeaderLinksStyles)(euiTheme);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -77,7 +74,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     return function () {
       window.removeEventListener('resize', closeMenu);
     };
-  });
+  }, [closeMenu]);
   var classes = (0, _classnames.default)('euiHeaderLinks', className);
   var button = (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiHeaderLinks.openNavigationMenu",
@@ -97,11 +94,13 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   }, function (appNavigation) {
     return (0, _react2.jsx)("nav", _extends({
       className: classes,
+      css: styles.euiHeaderLinks,
       "aria-label": appNavigation
     }, rest), (0, _react2.jsx)(_responsive.EuiHideFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)("div", {
-      className: (0, _classnames.default)('euiHeaderLinks__list', ["euiHeaderLinks__list".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__list",
+      css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
     }, children)), (0, _react2.jsx)(_responsive.EuiShowFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)(_popover.EuiPopover, _extends({
@@ -112,7 +111,8 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       panelPaddingSize: "none",
       repositionOnScroll: true
     }, popoverProps), (0, _react2.jsx)("div", {
-      className: (0, _classnames.default)('euiHeaderLinks__mobileList', ["euiHeaderLinks__mobileList".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__mobileList",
+      css: styles.euiHeaderLinks__mobileList
     }, children))));
   });
 };
@@ -125,7 +125,7 @@ EuiHeaderLinks.propTypes = {
   /**
        * Spacing between direct children
        */
-  gutterSize: _propTypes.default.oneOf(["xs", "s", "m", "l"]),
+  gutterSize: _propTypes.default.any,
   /**
        * A list of named breakpoints at which to show the popover version
        */
@@ -140,158 +140,5 @@ EuiHeaderLinks.propTypes = {
   /**
        * Extend the functionality of the EuiPopover
        */
-  popoverProps: _propTypes.default.shape({
-    /**
-       * Class name passed to the direct parent of the button
-       */
-    anchorClassName: _propTypes.default.string,
-    /**
-       * Alignment of the popover and arrow relative to the button
-       */
-    anchorPosition: _propTypes.default.any,
-    /**
-       * Style and position alteration for arrow-less, left-aligned
-       * attachment. Intended for use with inputs as anchors, e.g.
-       * EuiInputPopover
-       */
-    attachToAnchor: _propTypes.default.bool,
-    buttonRef: _propTypes.default.any,
-    /**
-       * Restrict the popover's position within this element
-       */
-    container: _propTypes.default.any,
-    /**
-       * CSS display type for both the popover and anchor
-       */
-    display: _propTypes.default.any,
-    /**
-       * Object of props passed to EuiFocusTrap
-       */
-    focusTrapProps: _propTypes.default.any,
-    /**
-       * Show arrow indicating to originating button
-       */
-    hasArrow: _propTypes.default.bool,
-    /**
-       * Specifies what element should initially have focus; Can be a DOM
-       * node, or a selector string (which will be passed to
-       * document.querySelector() to find the DOM node), or a function that
-       * returns a DOM node.
-       *
-       * If not passed, initial focus defaults to the popover panel.
-       */
-    initialFocus: _propTypes.default.any,
-    /**
-       * Passed directly to EuiPortal for DOM positioning. Both properties are
-       * required if prop is specified
-       */
-    insert: _propTypes.default.shape({
-      sibling: _propTypes.default.any.isRequired,
-      position: _propTypes.default.oneOf(["before", "after"]).isRequired
-    }),
-    /**
-       * Visibility state of the popover
-       */
-    isOpen: _propTypes.default.bool,
-    /**
-       * Traps tab focus within the popover contents
-       */
-    ownFocus: _propTypes.default.bool,
-    /**
-       * Custom class added to the EuiPanel containing the popover contents
-       */
-    panelClassName: _propTypes.default.string,
-    /**
-       * EuiPanel padding on all sides
-       */
-    panelPaddingSize: _propTypes.default.any,
-    /**
-       * Standard DOM `style` attribute. Passed to the EuiPanel
-       */
-    panelStyle: _propTypes.default.any,
-    /**
-       * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
-       */
-    panelProps: _propTypes.default.shape({
-      element: _propTypes.default.oneOf(["div"]),
-      /**
-         * Padding for all four sides
-         */
-      paddingSize: _propTypes.default.any,
-      /**
-         * Corner border radius
-         */
-      borderRadius: _propTypes.default.any,
-      /**
-         * When true the panel will grow in height to match `EuiFlexItem`
-         */
-      grow: _propTypes.default.bool,
-      panelRef: _propTypes.default.any,
-      /**
-         * Background color of the panel;
-         * Usually a lightened form of the brand colors
-         */
-      color: _propTypes.default.any,
-      className: _propTypes.default.string,
-      "aria-label": _propTypes.default.string,
-      "data-test-subj": _propTypes.default.string,
-      css: _propTypes.default.any
-    }),
-    panelRef: _propTypes.default.any,
-    /**
-       * Optional screen reader instructions to announce upon popover open,
-       * in addition to EUI's default popover instructions for Escape on close.
-       * Useful for popovers that may have additional keyboard capabilities such as
-       * arrow navigation.
-       */
-    popoverScreenReaderText: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.node.isRequired]),
-    popoverRef: _propTypes.default.any,
-    /**
-       * When `true`, the popover's position is re-calculated when the user
-       * scrolls, this supports having fixed-position popover anchors. When nesting
-       * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
-       */
-    repositionOnScroll: _propTypes.default.bool,
-    /**
-       * Must be set to true if using `EuiDragDropContext` within a popover,
-       * otherwise your nested drag & drop will have incorrect positioning
-       */
-    hasDragDrop: _propTypes.default.bool,
-    /**
-       * By default, popover content inherits the z-index of the anchor
-       * component; pass `zIndex` to override
-       */
-    zIndex: _propTypes.default.number,
-    /**
-       * Distance away from the anchor that the popover will render
-       */
-    offset: _propTypes.default.number,
-    /**
-       * Minimum distance between the popover and the bounding container;
-       * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
-       * Default is 16
-       */
-    buffer: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.any.isRequired]),
-    /**
-       * Element to pass as the child element of the arrow;
-       * Use case is typically limited to an accompanying `EuiBeacon`
-       */
-    arrowChildren: _propTypes.default.node,
-    /**
-       * Provide a name to the popover panel
-       */
-    "aria-label": _propTypes.default.string,
-    /**
-       * Alternative option to `aria-label` that takes an `id`.
-       * Usually takes the `id` of the popover title
-       */
-    "aria-labelledby": _propTypes.default.string,
-    /**
-       * Function callback for when the popover positon changes
-       */
-    onPositionChange: _propTypes.default.func,
-    className: _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any
-  })
+  popoverProps: _propTypes.default.any
 };