@elastic/eui 72.0.0 → 72.2.0

package/optimize/es/components/form/range/range_highlight.styles.js

@@ -17,7 +17,7 @@ export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeCo
 export var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 export var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

package/optimize/es/components/form/range/range_levels.styles.js

@@ -18,7 +18,7 @@ export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext)
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(transparentize(stripeColor, 0.5), ",\n    ").concat(transparentize(stripeColor, 0.5), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 50%,\n    ").concat(transparentize(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/css("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.s, " ", euiTheme.size.s, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    hasRange: /*#__PURE__*/css("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
     hasTicks: /*#__PURE__*/css("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };

package/optimize/es/components/form/range/range_track.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange"];
+var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,6 +11,7 @@ var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tic
  * Side Public License, v 1.
  */
 import React, { useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
 import range from 'lodash/range';
 import { useEuiTheme, isEvenlyDivisibleBy } from '../../../services';
 import { EuiRangeLevels } from './range_levels';
@@ -31,6 +32,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       value = _ref.value,
       compressed = _ref.compressed,
       showRange = _ref.showRange,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   useEffect(function () {
@@ -90,8 +92,9 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       trackWidth = _useState2[0],
       setTrackWidth = _useState2[1];
 
+  var classes = classNames('euiRangeTrack', className);
   return ___EmotionJSX("div", _extends({
-    className: "euiRangeTrack",
+    className: classes,
     css: cssStyles
   }, rest, {
     ref: function ref(node) {

package/optimize/es/components/image/image.a11y.js

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiImage } from './image';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Image = function Image() {
+  return ___EmotionJSX(EuiImage, {
+    size: "m",
+    hasShadow: true,
+    allowFullScreen: true,
+    caption: "Albert Einstein, theoretical physicist",
+    alt: "" // Because this image is sufficiently described by its caption, there is no need to repeat it via alt text
+    ,
+    src: "https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg"
+  });
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(Image, null));
+  cy.get('figure[aria-label="Albert Einstein, theoretical physicist"]').should('exist');
+});
+describe('EuiImage', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on fullscreen render', function () {
+      cy.get('button[data-test-subj="activateFullScreenButton"]').realClick();
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
+      cy.checkAxe();
+      cy.get('div[data-test-subj="fullScreenOverlayMask"]').realClick();
+      cy.checkAxe();
+    });
+    it('has zero violations on keyboard interaction', function () {
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('exist');
+      cy.get('button[data-test-subj="deactivateFullScreenButton"]').should('have.focus');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('button[data-test-subj="activateFullScreenButton"]').should('have.focus');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/image/image.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 = ["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 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; }
 
@@ -38,6 +38,7 @@ export var EuiImage = function EuiImage(_ref) {
       caption = _ref.caption,
       float = _ref.float,
       margin = _ref.margin,
+      onFullScreen = _ref.onFullScreen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
@@ -68,7 +69,8 @@ export var EuiImage = function EuiImage(_ref) {
     alt: alt,
     caption: caption,
     float: float,
-    margin: margin
+    margin: margin,
+    onFullScreen: onFullScreen
   };
 
   var commonImgProps = _objectSpread({

package/optimize/es/components/image/image_fullscreen_wrapper.js

@@ -28,7 +28,8 @@ export 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 = useEuiTheme();
   var styles = euiImageFullscreenWrapperStyles(euiTheme);
   var cssStyles = [styles.euiImageFullscreenWrapper];
@@ -44,6 +45,7 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
 
   var closeFullScreen = function closeFullScreen() {
     setIsFullScreen(false);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(false);
   };
 
   var _useInnerText = useInnerText(),

package/optimize/es/components/image/image_wrapper.js

@@ -27,10 +27,12 @@ export 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 = classNames('euiImageWrapper', wrapperProps && wrapperProps.className);

package/optimize/es/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,148 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiKeyPadMenu } from './key_pad_menu';
+import { EuiKeyPadMenuItem } from './key_pad_menu_item';
+import { EuiIcon } from '../icon';
+import { useGeneratedHtmlId } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var KeyPadMenu = function KeyPadMenu() {
+  var keypadButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'first'
+  });
+  var keypadButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'second'
+  });
+  var keypadButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'third'
+  });
+  var keypadButtonId__4 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fourth'
+  });
+  var keypadButtonId__5 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fifth'
+  });
+  var keypadButtonId__6 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'sixth'
+  });
+
+  var _useState = useState(keypadButtonId__6),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedID = _useState2[0],
+      setSelectedID = _useState2[1];
+
+  return ___EmotionJSX("div", {
+    "aria-label": "Menu keypad"
+  }, ___EmotionJSX(EuiKeyPadMenu, null, ___EmotionJSX(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);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(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);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(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);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(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);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(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);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-3",
+    id: keypadButtonId__6,
+    label: "Disabled Link 3",
+    isDisabled: true,
+    isSelected: selectedID === keypadButtonId__6
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(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/optimize/es/components/markdown_editor/markdown_format.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 /**
  * Mixins
  */
@@ -20,16 +20,13 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var measurement = options.measurement;
   var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight; // Custom scales
 
-  var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
-    return x / 4;
-  });
   var tablePaddingVertical = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
   var tablePaddingHorizontal = mathWithUnits(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(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(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(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(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/optimize/es/components/popover/popover.js

@@ -471,13 +471,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = ___EmotionJSX(EuiPortal, {
           insert: insert
         }, ___EmotionJSX(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
         }), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 /**
@@ -50,7 +50,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(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    dd + dt {\n      ").concat(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(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(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 = 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(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(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(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    ul,\n    ol,\n    dl,\n    blockquote,\n    img,\n    pre {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(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(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(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(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      // ensures when only one character the shape looks like a square\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 /**
@@ -61,7 +64,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -228,18 +228,32 @@ export 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);
+        }
       }
     }
   }, {
@@ -254,6 +268,7 @@ export 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,

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

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

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

@@ -97,4 +97,13 @@ export var lightness = function lightness(color) {
 
 export var darken = function darken(color, amount) {
   return chroma(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.
+ */
+
+export var brighten = function brighten(color, amount) {
+  return chroma(color).brighten(amount).hex();
 };

package/optimize/es/services/index.js

@@ -7,25 +7,25 @@
  */
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-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, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin } from './color';
+export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
+export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
 export * from './findElement';
-export { formatAuto, formatBoolean, formatDate, formatNumber, formatText, dateFormatAliases } from './format';
+export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
+export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
+export { calculatePopoverPosition, findPopoverPosition } from './popover';
 export { Random } from './random';
 export { getSecureRelForTarget } from './security';
-export { toSentenceCase, toInitials, slugify } from './string';
-export { PropertySortType, SortDirectionType, SortDirection, SortableProperties, Comparators } from './sort';
-export { calculatePopoverPosition, findPopoverPosition } from './popover';
+export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType } from './sort';
+export { slugify, toInitials, toSentenceCase } from './string';
+export * from './theme';
+export { throttle } from './throttle';
 export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame } from './transition';
 export { EuiWindowEvent } from './window_event';
-export * from './hooks';
-export { throttle } from './throttle';
-export * from './theme';
+export { keys };

package/optimize/lib/components/accordion/accordion.js

@@ -242,7 +242,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           css: cssSpinnerStyles
         }), (0, _react2.jsx)(_text.EuiText, {
           size: "s"
-        }, (0, _react2.jsx)("p", null, isLoadingMessage && isLoadingMessage !== true ? isLoadingMessage : (0, _react2.jsx)(_i18n.EuiI18n, {
+        }, (0, _react2.jsx)("p", null, isLoadingMessage !== true ? isLoadingMessage : (0, _react2.jsx)(_i18n.EuiI18n, {
           token: "euiAccordion.isLoading",
           default: "Loading"
         }))));