@elastic/eui 72.0.0 → 72.2.0

package/lib/components/image/image.js

@@ -25,7 +25,7 @@ var _image_types = require("./image_types");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin"];
+var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin", "onFullScreen"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -72,6 +72,7 @@ var EuiImage = function EuiImage(_ref) {
       caption = _ref.caption,
       float = _ref.float,
       margin = _ref.margin,
+      onFullScreen = _ref.onFullScreen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -103,7 +104,8 @@ var EuiImage = function EuiImage(_ref) {
     alt: alt,
     caption: caption,
     float: float,
-    margin: margin
+    margin: margin,
+    onFullScreen: onFullScreen
   };
 
   var commonImgProps = _objectSpread({
@@ -177,6 +179,11 @@ EuiImage.propTypes = {
        */
   allowFullScreen: _propTypes.default.bool,
 
+  /**
+       * Callback when the image is clicked and `allowFullScreen` is `true`
+       */
+  onFullScreen: _propTypes.default.func,
+
   /**
        * Changes the color of the icon that floats above the image when it can be clicked to fullscreen.
        * The default value of `light` is fine unless your image has a white background, in which case you should change it to `dark`.

package/lib/components/image/image_fullscreen_wrapper.js

@@ -55,7 +55,8 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       isFullWidth = _ref.isFullWidth,
-      fullScreenIconColor = _ref.fullScreenIconColor;
+      fullScreenIconColor = _ref.fullScreenIconColor,
+      onFullScreen = _ref.onFullScreen;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _image_fullscreen_wrapper.euiImageFullscreenWrapperStyles)(euiTheme);
   var cssStyles = [styles.euiImageFullscreenWrapper];
@@ -71,6 +72,7 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
 
   var closeFullScreen = function closeFullScreen() {
     setIsFullScreen(false);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(false);
   };
 
   var _useInnerText = (0, _inner_text.useInnerText)(),

package/lib/components/image/image_wrapper.js

@@ -50,10 +50,12 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       fullScreenIconColor = _ref.fullScreenIconColor,
-      isFullWidth = _ref.isFullWidth;
+      isFullWidth = _ref.isFullWidth,
+      onFullScreen = _ref.onFullScreen;
 
   var openFullScreen = function openFullScreen() {
     setIsFullScreen(true);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(true);
   };
 
   var classes = (0, _classnames.default)('euiImageWrapper', wrapperProps && wrapperProps.className);

package/lib/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,163 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _key_pad_menu = require("./key_pad_menu");
+
+var _key_pad_menu_item = require("./key_pad_menu_item");
+
+var _icon = require("../icon");
+
+var _services = require("../../services");
+
+var _react2 = require("@emotion/react");
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var KeyPadMenu = function KeyPadMenu() {
+  var keypadButtonId__1 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'first'
+  });
+  var keypadButtonId__2 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'second'
+  });
+  var keypadButtonId__3 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'third'
+  });
+  var keypadButtonId__4 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'fourth'
+  });
+  var keypadButtonId__5 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'fifth'
+  });
+  var keypadButtonId__6 = (0, _services.useGeneratedHtmlId)({
+    prefix: 'keypadButton',
+    suffix: 'sixth'
+  });
+
+  var _useState = (0, _react.useState)(keypadButtonId__6),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedID = _useState2[0],
+      setSelectedID = _useState2[1];
+
+  return (0, _react2.jsx)("div", {
+    "aria-label": "Menu keypad"
+  }, (0, _react2.jsx)(_key_pad_menu.EuiKeyPadMenu, null, (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-1",
+    id: keypadButtonId__1,
+    label: "Button 1",
+    isSelected: selectedID === keypadButtonId__1,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__1);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-2",
+    id: keypadButtonId__2,
+    label: "Button 2",
+    isSelected: selectedID === keypadButtonId__2,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__2);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-3",
+    id: keypadButtonId__3,
+    label: "Button 3",
+    isSelected: selectedID === keypadButtonId__3,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__3);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-1",
+    id: keypadButtonId__4,
+    label: "Link 1",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__4,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__4);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-2",
+    id: keypadButtonId__5,
+    label: "Link 2",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__5,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__5);
+    }
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  })), (0, _react2.jsx)(_key_pad_menu_item.EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-3",
+    id: keypadButtonId__6,
+    label: "Disabled Link 3",
+    isDisabled: true,
+    isSelected: selectedID === keypadButtonId__6
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "link",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount((0, _react2.jsx)(KeyPadMenu, null));
+  cy.get('div[aria-label="Menu keypad"]').should('exist');
+});
+describe('EuiKeyPadMenu', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on item click', function () {
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+    it('has zero violations on item keypress', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+      cy.realPress(['Shift', 'Tab']);
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+  });
+});

package/lib/components/markdown_editor/markdown_format.styles.js

@@ -29,16 +29,13 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var measurement = options.measurement;
   var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight; // Custom scales
 
-  var blockQuoteBorderWidth = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
-    return x / 4;
-  });
   var tablePaddingVertical = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 4;
   });
   var tablePaddingHorizontal = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ".concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/lib/components/popover/popover.js

@@ -535,13 +535,13 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = (0, _react.jsx)(_portal.EuiPortal, {
           insert: insert
         }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, _extends({
-          clickOutsideDisables: true
+          clickOutsideDisables: true,
+          onClickOutside: this.onClickOutside
         }, focusTrapProps, {
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
           onDeactivation: onTrapDeactivation,
-          onClickOutside: this.onClickOutside,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
         }), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, _extends({}, panelProps, {

package/lib/components/table/table_footer_cell.js

@@ -58,6 +58,6 @@ EuiTableFooterCell.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
   width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired])
 };

package/lib/components/table/table_header_cell.js

@@ -151,7 +151,7 @@ EuiTableHeaderCell.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
   isSortAscending: _propTypes.default.bool,
   isSorted: _propTypes.default.bool,
 

package/lib/components/table/table_row_cell.js

@@ -211,7 +211,7 @@ EuiTableRowCell.propTypes = {
     /**
        * Horizontal alignment of the text in the cell
        */
-    align: _propTypes.default.oneOf(["left", "right", "center"]),
+    align: _propTypes.default.any,
 
     /**
        * _Should only be used for action cells_
@@ -233,7 +233,7 @@ EuiTableRowCell.propTypes = {
   /**
      * Horizontal alignment of the text in the cell
      */
-  align: _propTypes.default.oneOf(["left", "right", "center"]),
+  align: _propTypes.default.any,
 
   /**
      * _Should only be used for action cells_

package/lib/components/text/text.styles.js

@@ -66,7 +66,10 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
     return x * 2;
   });
   var headingMarginBottom = marginSize;
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
+  var blockQuoteBorderWidth = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
+    return x / 4;
+  });
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; // 90% of parent font size\n    }\n    ").concat( // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
   _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };
 /**
@@ -77,7 +80,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " ", (0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('left', '25%'), " ", (0, _global_styling.logicalCSS)('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", (0, _global_styling.logicalCSS)('top', '0'), ";}&:after{", (0, _global_styling.logicalCSS)('bottom', '0'), ";}}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), ";clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/lib/components/tool_tip/icon_tip.js

@@ -93,6 +93,14 @@ EuiIconTip.propTypes = {
      */
   id: _propTypes.default.string,
 
+  /**
+     * When `true`, the tooltip's position is re-calculated when the user
+     * scrolls. This supports having fixed-position tooltip anchors.
+     *
+     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+     */
+  repositionOnScroll: _propTypes.default.bool,
+
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/lib/components/tool_tip/tool_tip.js

@@ -31,7 +31,7 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _react3 = require("@emotion/react");
 
-var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -266,18 +266,32 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
+
+      if (this.props.repositionOnScroll) {
+        window.addEventListener('scroll', this.positionToolTip, true);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.clearAnimationTimeout();
       this._isMounted = false;
+      window.removeEventListener('scroll', this.positionToolTip, true);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (prevState.visible === false && this.state.visible === true) {
         requestAnimationFrame(this.testAnchor);
+      } // update scroll listener
+
+
+      if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
+        if (this.props.repositionOnScroll) {
+          window.addEventListener('scroll', this.positionToolTip, true);
+        } else {
+          window.removeEventListener('scroll', this.positionToolTip, true);
+        }
       }
     }
   }, {
@@ -292,6 +306,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
           title = _this$props.title,
           delay = _this$props.delay,
           display = _this$props.display,
+          repositionOnScroll = _this$props.repositionOnScroll,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var _this$state = this.state,
@@ -402,6 +417,14 @@ EuiToolTip.propTypes = {
      */
   position: _propTypes.default.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+  /**
+     * When `true`, the tooltip's position is re-calculated when the user
+     * scrolls. This supports having fixed-position tooltip anchors.
+     *
+     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+     */
+  repositionOnScroll: _propTypes.default.bool,
+
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/lib/components/tour/tour.styles.js

@@ -67,7 +67,7 @@ var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
     euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
     // Elements
     euiTourHeader__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', 0), ";;label:euiTourHeader__title;"),
-    euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+    euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
   };
 };
 

package/lib/services/color/manipulation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = exports.brighten = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -134,5 +134,17 @@ exports.lightness = lightness;
 var darken = function darken(color, amount) {
   return (0, _chromaJs.default)(color).darken(amount).hex();
 };
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.darken = darken;
+
+var brighten = function brighten(color, amount) {
+  return (0, _chromaJs.default)(color).brighten(amount).hex();
+};
 
-exports.darken = darken;
+exports.brighten = brighten;