@elastic/eui 74.1.0 → 75.1.0

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

@@ -0,0 +1,35 @@
+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)."; }
+
+/*
+ * 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'; //  1. Make each step the same width
+
+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__
+};
+
+export var euiStepsHorizontalStyles = function euiStepsHorizontalStyles() {
+  return {
+    euiStepsHorizontal: _ref2,
+    euiStepsHorizontal__item: _ref
+  };
+};

package/es/components/steps/sub_steps.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiSubStepsStyles } from './sub_steps.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSubSteps = function EuiSubSteps(_ref) {
   var children = _ref.children,
@@ -23,8 +25,12 @@ export var EuiSubSteps = function EuiSubSteps(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiSubSteps', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiSubStepsStyles(euiTheme);
+  var cssStyles = [styles.euiSubSteps];
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 EuiSubSteps.propTypes = {

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

@@ -0,0 +1,14 @@
+/*
+ * 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';
+export var euiSubStepsStyles = function euiSubStepsStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiSubSteps: /*#__PURE__*/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;")
+  };
+};

package/es/components/tour/tour_step_indicator.js

@@ -49,7 +49,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isActive) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isActive,
         color: "success",
         "aria-current": "step"
@@ -62,7 +61,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isComplete) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isComplete,
         color: "subdued"
       });
@@ -74,7 +72,6 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isIncomplete) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isIncomplete,
         color: "subdued"
       });

package/es/global_styling/utility/animations.js

@@ -1,4 +1,4 @@
-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) } })); }
 
@@ -15,5 +15,6 @@ export var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
   return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
 };
 export var euiAnimSlideX = function euiAnimSlideX(size) {
-  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
-};
+  return keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n\n  }\n"])), size);
+};
+export var euiAnimScale = 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"])));

package/eui.d.ts

@@ -1733,6 +1733,7 @@ declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
 	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
 	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
+	export const euiAnimScale: import("@emotion/serialize").Keyframes;
 
 }
 declare module '@elastic/eui/src/components/skeleton/utils' {
@@ -9216,6 +9217,22 @@ declare module '@elastic/eui/src/components/card' {
 	export type { EuiCheckableCardProps } from '@elastic/eui/src/components/card/checkable_card';
 	export { EuiCheckableCard } from '@elastic/eui/src/components/card/checkable_card';
 
+}
+declare module '@elastic/eui/src/components/code/code_block_annotations.style' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCodeBlockAnnotationsStyles: (euiTheme: UseEuiTheme['euiTheme']) => {
+	    euiCodeBlockAnnotation: import("@emotion/utils").SerializedStyles;
+	    euiCodeBlockAnnotation__buttonIcon: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/code/code_block_annotations' {
+	import { FunctionComponent, ReactNode } from 'react';
+	export type LineAnnotationMap = Record<number, ReactNode>;
+	export const EuiCodeBlockAnnotation: FunctionComponent<{
+	    lineNumber: number;
+	}>;
+
 }
 declare module '@elastic/eui/src/components/code/code_block_line.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -9227,6 +9244,7 @@ declare module '@elastic/eui/src/components/code/code_block_line.styles' {
 	        isHighlighted: string;
 	    };
 	    lineNumber: {
+	        euiCodeBlock__lineNumberWrapper: string;
 	        euiCodeBlock__lineNumber: string;
 	    };
 	};
@@ -9237,6 +9255,7 @@ declare module '@elastic/eui/src/components/code/utils' {
 	import { AST, RefractorNode } from 'refractor';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { LineAnnotationMap } from '@elastic/eui/src/components/code/code_block_annotations';
 	/**
 	 * Utils shared between EuiCode and EuiCodeBlock
 	 */
@@ -9258,6 +9277,7 @@ declare module '@elastic/eui/src/components/code/utils' {
 	    start: number;
 	    show: boolean;
 	    highlight?: string;
+	    annotations?: LineAnnotationMap;
 	}
 	export const parseLineRanges: (ranges: string) => number[];
 	export const highlightByLine: (children: string, language: string, data: LineNumbersConfig, euiTheme: UseEuiTheme) => RefractorNode[];
@@ -9547,6 +9567,7 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	import { FunctionComponent } from 'react';
 	import { ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { EuiCodeSharedProps } from '@elastic/eui/src/components/code/utils';
+	import { LineAnnotationMap } from '@elastic/eui/src/components/code/code_block_annotations';
 	export const FONT_SIZES: readonly ["s", "m", "l"];
 	export type EuiCodeBlockFontSize = typeof FONT_SIZES[number];
 	export const PADDING_SIZES: readonly ["none", "s", "m", "l"];
@@ -9562,6 +9583,7 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	interface LineNumbersConfig {
 	    start?: number;
 	    highlight?: string;
+	    annotations?: LineAnnotationMap;
 	}
 	export type EuiCodeBlockProps = EuiCodeSharedProps & {
 	    paddingSize?: EuiCodeBlockPaddingSize;
@@ -9578,8 +9600,9 @@ declare module '@elastic/eui/src/components/code/code_block' {
 	    isCopyable?: boolean;
 	    /**
 	     * Displays line numbers.
-	     * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges:
-	     * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
+	     * Optionally accepts a configuration object for setting the starting number,
+	     * visually highlighting ranges, or annotating specific lines:
+	     * `{ start: 100, highlight: '1, 5-10, 20-30, 40', annotations: { 6: 'A special note about this line' } }`
 	     */
 	    lineNumbers?: boolean | LineNumbersConfig;
 	    /**
@@ -9765,11 +9788,6 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * @default false
 	     */
 	    hideCloseButton?: boolean;
-	    /**
-	     * Specify a custom aria-label for the close button of the flyout.
-	     * @default "Close this dialog"
-	     */
-	    closeButtonAriaLabel?: string;
 	    /**
 	     * Extends EuiButtonIconProps onto the close button
 	     */
@@ -9802,12 +9820,6 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * @default right
 	     */
 	    side?: _EuiFlyoutSide;
-	    /**
-	     * Defaults to `dialog` which is best for most cases of the flyout.
-	     * Otherwise pass in your own, aria-role, or `null` to remove it and use the semantic `as` element instead
-	     * @default dialog
-	     */
-	    role?: null | string;
 	    /**
 	     * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
 	     * @default l
@@ -9820,6 +9832,14 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	     * `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior.
 	     */
 	    focusTrapProps?: Pick<EuiFocusTrapProps, 'closeOnMouseup' | 'shards'>;
+	    /**
+	     * By default, EuiFlyout will consider any fixed `EuiHeader`s that sit alongside or above the EuiFlyout
+	     * as part of the flyout's focus trap. This prevents focus fighting with interactive elements
+	     * within fixed headers.
+	     *
+	     * Set this to `false` if you need to disable this behavior for a specific reason.
+	     */
+	    includeFixedHeadersInFocusTrap?: boolean;
 	} const defaultElement = "div"; type Props<T extends ElementType> = CommonProps & {
 	    /**
 	     * Sets the HTML element for `EuiFlyout`
@@ -9901,7 +9921,7 @@ declare module '@elastic/eui/src/components/flyout' {
 declare module '@elastic/eui/src/components/collapsible_nav/collapsible_nav' {
 	import { FunctionComponent, ReactElement, ReactNode } from 'react';
 	import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout';
-	export type EuiCollapsibleNavProps = Omit<EuiFlyoutProps, 'closeButtonAriaLabel' | 'type' | 'pushBreakpoint'> & {
+	export type EuiCollapsibleNavProps = Omit<EuiFlyoutProps, 'type' | 'pushBreakpoint'> & {
 	    /**
 	     * ReactNode to render as this component's content
 	     */
@@ -18238,6 +18258,9 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	    setListBoxRef: (ref: HTMLUListElement | null) => void;
 	    componentDidUpdate(): void;
 	    constructor(props: EuiSelectableListProps<T>);
+	    ariaSetSize: number;
+	    ariaPosInSetMap: Record<number, number>;
+	    calculateAriaSetAttrs: (optionArray: Array<EuiSelectableOption<T>>) => void;
 	    ListRow: React.MemoExoticComponent<({ data, index, style }: ListChildComponentProps<T>) => JSX.Element>;
 	    render(): JSX.Element;
 	    onAddOrRemoveOption: (option: EuiSelectableOption<T>, event: EuiSelectableOnChangeEvent) => void;
@@ -19048,12 +19071,69 @@ declare module '@elastic/eui/src/components/steps/step_strings' {
 	export const useI18nCurrentStep: ({ number, title }: Props) => string;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/steps/step.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepVariables: (euiTheme: UseEuiTheme['euiTheme']) => {
+	    numberSize: string;
+	    numberXSSize: string;
+	    numberMargin: string;
+	};
+	export const euiStepStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepContentStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep__content: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStep__titleWrapper: import("@emotion/utils").SerializedStyles;
+	    euiStep__title: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/steps/step_number.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepNumberStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepNumber: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    incomplete: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    loading: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    complete: import("@emotion/utils").SerializedStyles;
+	    current: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepNumberContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiStepNumber__icon: import("@emotion/utils").SerializedStyles;
+	    complete: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    euiStepNumber__number: import("@emotion/utils").SerializedStyles;
+	    incomplete: import("@emotion/utils").SerializedStyles;
+	    loading: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	    current: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/step_number' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiStepProps } from '@elastic/eui/src/components/steps/step';
-	export const STATUS: ("warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete")[];
+	export const STATUS: readonly ["incomplete", "disabled", "loading", "warning", "danger", "complete", "current"];
 	export type EuiStepStatus = typeof STATUS[number];
 	export interface EuiStepNumberProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	    /**
@@ -19126,6 +19206,13 @@ declare module '@elastic/eui/src/components/steps/steps' {
 	}
 	export const EuiSteps: FunctionComponent<EuiStepsProps>;
 
+}
+declare module '@elastic/eui/src/components/steps/sub_steps.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSubStepsStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiSubSteps: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/sub_steps' {
 	import { HTMLAttributes, FunctionComponent } from 'react';
@@ -19133,6 +19220,22 @@ declare module '@elastic/eui/src/components/steps/sub_steps' {
 	export type EuiSubStepsProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiSubSteps: EuiSubStepsProps;
 
+}
+declare module '@elastic/eui/src/components/steps/step_horizontal.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiStepHorizontalStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal: import("@emotion/utils").SerializedStyles;
+	    enabled: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepHorizontalNumberStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal__number: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiStepHorizontalTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiStepHorizontal__title: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from 'react';
@@ -19152,12 +19255,19 @@ declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	    /**
 	     * Visual representation of the step number indicator.
 	     * May replace the number provided in props.step with alternate styling.
-	     * The `isSelected`, `isComplete`, and `disabled` props will override these.
+	     * The `disabled` prop will override this.
 	     */
 	    status?: EuiStepStatus;
 	}
 	export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps>;
 
+}
+declare module '@elastic/eui/src/components/steps/steps_horizontal.styles' {
+	export const euiStepsHorizontalStyles: () => {
+	    euiStepsHorizontal: import("@emotion/utils").SerializedStyles;
+	    euiStepsHorizontal__item: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/steps/steps_horizontal' {
 	import { FunctionComponent, OlHTMLAttributes } from 'react';
@@ -25913,6 +26023,7 @@ declare module '@elastic/eui' {
 "euiCardSelect.selected": any;
 "euiCardSelect.unavailable": any;
 "euiCardSelect.select": any;
+"euiCodeBlockAnnotations.ariaLabel": any;
 "euiCodeBlockCopy.copy": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;
@@ -26146,6 +26257,9 @@ declare module '@elastic/eui' {
 "euiFilterButton.filterBadgeActiveAriaLabel": any;
 "euiFilterButton.filterBadgeAvailableAriaLabel": any;
 "euiFlyout.closeAriaLabel": any;
+"euiFlyout.screenReaderModalDialog": any;
+"euiFlyout.screenReaderNonModalDialog": any;
+"euiFlyout.screenReaderFixedHeaders": any;
 "euiFieldPassword.showPassword": any;
 "euiFieldPassword.maskPassword": any;
 "euiFilePicker.promptText": any;

package/i18ntokens.json

@@ -303,6 +303,22 @@
     },
     "filepath": "src/components/card/card_select/card_select.tsx"
   },
+  {
+    "token": "euiCodeBlockAnnotations.ariaLabel",
+    "defString": "Click to view a code annotation for line {lineNumber}",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 26,
+        "column": 20
+      },
+      "end": {
+        "line": 30,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/code/code_block_annotations.tsx"
+  },
   {
     "token": "euiCodeBlockCopy.copy",
     "defString": "Copy",
@@ -325,11 +341,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 47,
+        "line": 54,
         "column": 49
       },
       "end": {
-        "line": 53,
+        "line": 60,
         "column": 3
       }
     },
@@ -341,11 +357,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 47,
+        "line": 54,
         "column": 49
       },
       "end": {
-        "line": 53,
+        "line": 60,
         "column": 3
       }
     },
@@ -4085,16 +4101,64 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 299,
+        "line": 296,
         "column": 8
       },
       "end": {
-        "line": 299,
+        "line": 296,
         "column": 78
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
   },
+  {
+    "token": "euiFlyout.screenReaderModalDialog",
+    "defString": "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 359,
+        "column": 12
+      },
+      "end": {
+        "line": 362,
+        "column": 14
+      }
+    },
+    "filepath": "src/components/flyout/flyout.tsx"
+  },
+  {
+    "token": "euiFlyout.screenReaderNonModalDialog",
+    "defString": "You are in a non-modal dialog. To close the dialog, press Escape.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 364,
+        "column": 12
+      },
+      "end": {
+        "line": 367,
+        "column": 14
+      }
+    },
+    "filepath": "src/components/flyout/flyout.tsx"
+  },
+  {
+    "token": "euiFlyout.screenReaderFixedHeaders",
+    "defString": "You can still continue tabbing through the page headers in addition to the dialog.",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 370,
+        "column": 12
+      },
+      "end": {
+        "line": 373,
+        "column": 14
+      }
+    },
+    "filepath": "src/components/flyout/flyout.tsx"
+  },
   {
     "token": "euiFieldPassword.showPassword",
     "defString": "Show password as plain text. Note: this will visually expose your password on the screen.",
@@ -6053,11 +6117,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 52,
+        "line": 51,
         "column": 6
       },
       "end": {
-        "line": 52,
+        "line": 51,
         "column": 74
       }
     },
@@ -6069,11 +6133,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 65,
+        "line": 59,
         "column": 6
       },
       "end": {
-        "line": 65,
+        "line": 59,
         "column": 78
       }
     },
@@ -6085,11 +6149,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 79,
+        "line": 68,
         "column": 4
       },
       "end": {
-        "line": 83,
+        "line": 72,
         "column": 5
       }
     },

package/lib/components/code/code_block.js

@@ -242,12 +242,14 @@ EuiCodeBlock.propTypes = {
 
   /**
      * Displays line numbers.
-     * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges:
-     * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
+     * Optionally accepts a configuration object for setting the starting number,
+     * visually highlighting ranges, or annotating specific lines:
+     * `{ start: 100, highlight: '1, 5-10, 20-30, 40', annotations: { 6: 'A special note about this line' } }`
      */
   lineNumbers: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
     start: _propTypes.default.number,
-    highlight: _propTypes.default.string
+    highlight: _propTypes.default.string,
+    annotations: _propTypes.default.any
   }).isRequired]),
 
   /**