@elastic/eui 74.1.0 → 75.1.0

package/lib/components/steps/step_number.styles.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+var _step = require("./step.styles");
+
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;"
+} : {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;"
+} : {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = (0, _step.euiStepVariables)(euiTheme);
+
+  var createStepsNumber = function createStepsNumber(size, fontSize) {
+    return "\n      display: inline-block;\n      line-height: ".concat(size, ";\n      border-radius: ").concat(size, ";\n      ").concat((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.logicalCSS)('height', size), ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n    ");
+  };
+
+  return {
+    euiStepNumber: _ref2,
+    // sizes
+    m: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
+    // status
+    incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled').backgroundColor, ";;label:disabled;"),
+    loading: _ref,
+    warning: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/(0, _react.css)("color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').color, ";background-color:", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success').backgroundColor, ";", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/(0, _react.css)(";label:current;")
+  };
+};
+
+exports.euiStepNumberStyles = euiStepNumberStyles;
+
+var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Statuses with icon content
+    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    complete: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:complete;"),
+    danger: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:danger;"),
+    warning: /*#__PURE__*/(0, _react.css)("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
+    // Statuses with number content
+    euiStepNumber__number: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__number;"),
+    incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
+    loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
+    current: /*#__PURE__*/(0, _react.css)(";label:current;")
+  };
+};
+
+exports.euiStepNumberContentStyles = euiStepNumberContentStyles;

package/lib/components/steps/steps_horizontal.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _step_horizontal = require("./step_horizontal");
 
+var _steps_horizontal = require("./steps_horizontal.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "steps"];
@@ -31,16 +33,19 @@ var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiStepsHorizontal', className);
+  var styles = (0, _steps_horizontal.euiStepsHorizontalStyles)();
+  var cssStyles = styles.euiStepsHorizontal;
+  var cssItemStyles = styles.euiStepsHorizontal__item;
   return (0, _react2.jsx)("ol", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), steps.map(function (stepProps, index) {
-    var isCurrent = stepProps.status === 'current' ? {
-      'aria-current': 'step'
-    } : {};
-    return (0, _react2.jsx)("li", _extends({
+    return (0, _react2.jsx)("li", {
       key: index,
-      className: "euiStepHorizontal__item"
-    }, isCurrent), (0, _react2.jsx)(_step_horizontal.EuiStepHorizontal, _extends({
+      className: "euiStepsHorizontal__item",
+      css: cssItemStyles,
+      "aria-current": stepProps.status === 'current' ? 'step' : undefined
+    }, (0, _react2.jsx)(_step_horizontal.EuiStepHorizontal, _extends({
       step: index + 1
     }, stepProps)));
   }));

package/lib/components/steps/steps_horizontal.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepsHorizontalStyles = void 0;
+
+var _react = require("@emotion/react");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1pmkwst-euiStepsHorizontal__item",
+  styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;"
+} : {
+  name: "1pmkwst-euiStepsHorizontal__item",
+  styles: "flex-grow:1;flex-basis:0%;&:first-of-type>.euiStepHorizontal::before,&:last-of-type>.euiStepHorizontal::after{display:none;};label:euiStepsHorizontal__item;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "44yl7r-euiStepsHorizontal",
+  styles: "display:flex;align-items:stretch;label:euiStepsHorizontal;"
+} : {
+  name: "44yl7r-euiStepsHorizontal",
+  styles: "display:flex;align-items:stretch;label:euiStepsHorizontal;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+//  1. Make each step the same width
+var euiStepsHorizontalStyles = function euiStepsHorizontalStyles() {
+  return {
+    euiStepsHorizontal: _ref2,
+    euiStepsHorizontal__item: _ref
+  };
+};
+
+exports.euiStepsHorizontalStyles = euiStepsHorizontalStyles;

package/lib/components/steps/sub_steps.js

@@ -11,6 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _sub_steps = require("./sub_steps.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className"];
@@ -29,8 +33,12 @@ var EuiSubSteps = function EuiSubSteps(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiSubSteps', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _sub_steps.euiSubStepsStyles)(euiTheme);
+  var cssStyles = [styles.euiSubSteps];
   return (0, _react2.jsx)("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 

package/lib/components/steps/sub_steps.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSubStepsStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * 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 euiSubStepsStyles = function euiSubStepsStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+  };
+};
+
+exports.euiSubStepsStyles = euiSubStepsStyles;

package/lib/components/tour/tour_step_indicator.js

@@ -54,7 +54,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isActive) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isActive,
         color: "success",
         "aria-current": "step"
@@ -67,7 +66,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isComplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isComplete,
         color: "subdued"
       });
@@ -79,7 +77,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isIncomplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isIncomplete,
         color: "subdued"
       });

package/lib/global_styling/utility/animations.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimScale = exports.euiAnimFadeIn = void 0;
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
@@ -21,7 +21,9 @@ var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
 exports.euiAnimSlideInUp = euiAnimSlideInUp;
 
 var euiAnimSlideX = function euiAnimSlideX(size) {
-  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
+  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n\n  }\n"])), size);
 };
 
-exports.euiAnimSlideX = euiAnimSlideX;
+exports.euiAnimSlideX = euiAnimSlideX;
+var euiAnimScale = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  1% {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+exports.euiAnimScale = euiAnimScale;

package/optimize/es/components/code/code_block_annotations.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+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.
+ */
+import React, { useState } from 'react';
+import { useEuiTheme } from '../../services';
+import { useEuiI18n } from '../i18n';
+import { EuiPopover } from '../popover';
+import { EuiIcon } from '../icon';
+import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { euiCodeBlockAnnotationsStyles } from './code_block_annotations.style';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
+  var lineNumber = _ref.lineNumber,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var ariaLabel = useEuiI18n('euiCodeBlockAnnotations.ariaLabel', 'Click to view a code annotation for line {lineNumber}', {
+    lineNumber: lineNumber
+  });
+
+  var _useEuiTheme = useEuiTheme(),
+      euiTheme = _useEuiTheme.euiTheme,
+      colorMode = _useEuiTheme.colorMode;
+
+  var styles = euiCodeBlockAnnotationsStyles(euiTheme);
+  var buttonIconFocusStyle = useEuiButtonFocusCSS();
+  var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
+  var isDarkMode = colorMode === 'DARK';
+  return ___EmotionJSX(EuiPopover, {
+    isOpen: isOpen,
+    closePopover: function closePopover() {
+      return setIsOpen(false);
+    },
+    button: ___EmotionJSX("button", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-label": ariaLabel,
+      css: cssButtonIconStyles,
+      "data-test-subj": "euiCodeBlockAnnotationIcon"
+    }, ___EmotionJSX(EuiIcon, {
+      type: AnnotationInfoIcon,
+      size: "s",
+      color: isDarkMode ? euiTheme.colors.ink : 'ghost'
+    })),
+    css: styles.euiCodeBlockAnnotation,
+    zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
+    ,
+    anchorPosition: "leftCenter",
+    panelProps: {
+      'data-test-subj': 'euiCodeBlockAnnotationPopover'
+    }
+  }, children);
+};
+
+var AnnotationInfoIcon = function AnnotationInfoIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    width: 11,
+    height: 11,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.139 14l-.052-6.007H5V6.28h4.111l.052 6.007h1.915V14h-3.94zM6.712 3.38c0-.396.118-.725.354-.987S7.639 2 8.077 2c.438 0 .777.131 1.016.393.24.262.359.591.359.987 0 .39-.12.714-.359.972s-.578.388-1.016.388c-.438 0-.775-.13-1.011-.388-.236-.258-.354-.582-.354-.972z"
+  }));
+};

package/optimize/es/components/code/code_block_annotations.style.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+export var euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(euiTheme) {
+  var buttonIconSize = mathWithUnits(euiTheme.size.base, function (x) {
+    return x - 1.5;
+  });
+  return {
+    euiCodeBlockAnnotation: /*#__PURE__*/css("position:absolute;", logicalCSS('right', 0), " ", logicalCSS('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/css(logicalSizeCSS(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+  };
+};

package/optimize/es/components/code/code_block_full_screen.js

@@ -35,9 +35,15 @@ export var useFullScreen = function useFullScreen(_ref) {
   }, []);
   var onKeyDown = useCallback(function (event) {
     if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      setIsFullScreen(false);
+      // We need to make sure annotation Escape keypresses don't also cause fullscreen mode to close
+      var focus = document.activeElement;
+      var isAnnotationPopover = !!(focus !== null && focus !== void 0 && focus.dataset.popoverOpen) || !!(focus !== null && focus !== void 0 && focus.closest('[data-popover-open]'));
+
+      if (!isAnnotationPopover) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullScreen(false);
+      }
     }
   }, []);
 

package/optimize/es/components/code/code_block_line.styles.js

@@ -39,11 +39,12 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.s, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
+      euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
       isHighlighted: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumber: /*#__PURE__*/css("flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.s, ";box-sizing:content-box;&:before{content:attr(data-line-number);color:", euiTheme.colors.subduedText, ";text-align:end;display:block;};label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
+      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/optimize/es/components/code/utils.js

@@ -14,6 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { createElement } from 'react';
 import { listLanguages, highlight } from 'refractor';
 import { cx } from '@emotion/css';
+import { EuiCodeBlockAnnotation } from './code_block_annotations';
 import { euiCodeBlockLineStyles } from './code_block_line.styles';
 /**
  * Utils shared between EuiCode and EuiCodeBlock
@@ -47,7 +48,15 @@ export var nodeToHtml = function nodeToHtml(node, idx, nodes) {
       key: key,
       className: cx(properties.className)
     }), children && children.map(function (el, i) {
-      return nodeToHtml(el, i, nodes, depth + 1);
+      return (// @ts-ignore - using a custom type here to handle JSX annotations
+        el.type === 'annotation' ? // @ts-ignore - custom keys are passed by annotationElement below
+        ___EmotionJSX(EuiCodeBlockAnnotation, {
+          lineNumber: el.lineNumber,
+          children: el.annotation,
+          key: i
+        }) // prettier-ignore
+        : nodeToHtml(el, i, nodes, depth + 1)
+      );
     }));
   }
 
@@ -151,31 +160,61 @@ function wrapLines(nodes, options, euiTheme) {
     var lineStyles = cx([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
 
     if (options.showLineNumbers) {
-      var _properties;
+      var _properties, _options$annotations;
 
       var lineNumber = i + 1;
       var digits = grouped.length.toString().length;
-      var width = digits * CHAR_SIZE;
+      var width = digits * CHAR_SIZE; // Line text element and highlights
+
       var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
       var lineTextStyles = cx([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
-      var lineNumberStyles = cx(styles.lineNumber.euiCodeBlock__lineNumber);
-      children = [{
+      var lineTextElement = {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['euiCodeBlock__lineText', lineTextStyles]
+        },
+        children: node
+      }; // Line number column/wrapper
+
+      var lineNumberWrapperStyles = cx(styles.lineNumber.euiCodeBlock__lineNumberWrapper);
+      var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
         properties: (_properties = {
           style: {
             inlineSize: width
           }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
         children: []
-      }, {
+      }; // Line number element
+
+      var lineNumberStyles = cx(styles.lineNumber.euiCodeBlock__lineNumber);
+      var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: {
-          className: ['euiCodeBlock__lineText', lineTextStyles]
-        },
-        children: node
-      }];
+        properties: _defineProperty({
+          className: [lineNumberStyles]
+        }, 'aria-hidden', true),
+        children: [{
+          type: 'text',
+          value: String(lineNumber)
+        }]
+      };
+      lineNumberWrapperElement.children.push(lineNumberElement); // Annotation element
+
+      var hasAnnotation = (_options$annotations = options.annotations) === null || _options$annotations === void 0 ? void 0 : _options$annotations.hasOwnProperty(lineNumber);
+
+      if (hasAnnotation) {
+        var annotationElement = {
+          type: 'annotation',
+          annotation: options.annotations[lineNumber],
+          lineNumber: lineNumber
+        };
+        lineNumberWrapperElement.children.push(annotationElement);
+      }
+
+      children = [lineNumberWrapperElement, lineTextElement];
     }
 
     wrapped.push({
@@ -195,6 +234,7 @@ export var highlightByLine = function highlightByLine(children, language, data,
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
-    highlight: data.highlight
+    highlight: data.highlight,
+    annotations: data.annotations
   }, euiTheme);
 };

package/optimize/es/components/collapsible_nav/collapsible_nav.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "role", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
+var _excluded = ["id", "children", "className", "isDocked", "isOpen", "button", "showButtonIfDocked", "dockedBreakpoint", "as", "size", "side", "ownFocus", "outsideClickCloses", "closeButtonPosition", "paddingSize", "focusTrapProps"];
 
 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; }
 
@@ -40,8 +40,6 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
       size = _ref$size === void 0 ? 320 : _ref$size,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'left' : _ref$side,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? null : _ref$role,
       _ref$ownFocus = _ref.ownFocus,
       ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
       _ref$outsideClickClos = _ref.outsideClickCloses,
@@ -91,7 +89,6 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,