@elastic/eui 74.1.0 → 75.1.0

package/lib/components/code/code_block_annotations.js

@@ -0,0 +1,113 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCodeBlockAnnotation = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _services = require("../../services");
+
+var _i18n = require("../i18n");
+
+var _popover = require("../popover");
+
+var _icon = require("../icon");
+
+var _button = require("../../themes/amsterdam/global_styling/mixins/button");
+
+var _code_block_annotations = require("./code_block_annotations.style");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
+  var lineNumber = _ref.lineNumber,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var ariaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockAnnotations.ariaLabel', 'Click to view a code annotation for line {lineNumber}', {
+    lineNumber: lineNumber
+  });
+
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+      euiTheme = _useEuiTheme.euiTheme,
+      colorMode = _useEuiTheme.colorMode;
+
+  var styles = (0, _code_block_annotations.euiCodeBlockAnnotationsStyles)(euiTheme);
+  var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
+  var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
+  var isDarkMode = colorMode === 'DARK';
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    isOpen: isOpen,
+    closePopover: function closePopover() {
+      return setIsOpen(false);
+    },
+    button: (0, _react2.jsx)("button", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-label": ariaLabel,
+      css: cssButtonIconStyles,
+      "data-test-subj": "euiCodeBlockAnnotationIcon"
+    }, (0, _react2.jsx)(_icon.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);
+};
+
+exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
+EuiCodeBlockAnnotation.propTypes = {
+  lineNumber: _propTypes.default.number.isRequired
+};
+
+var AnnotationInfoIcon = function AnnotationInfoIcon(props) {
+  return (0, _react2.jsx)("svg", _extends({
+    width: 11,
+    height: 11,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), (0, _react2.jsx)("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/lib/components/code/code_block_annotations.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCodeBlockAnnotationsStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(euiTheme) {
+  var buttonIconSize = (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+    return x - 1.5;
+  });
+  return {
+    euiCodeBlockAnnotation: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+  };
+};
+
+exports.euiCodeBlockAnnotationsStyles = euiCodeBlockAnnotationsStyles;

package/lib/components/code/code_block_full_screen.js

@@ -58,9 +58,15 @@ var useFullScreen = function useFullScreen(_ref) {
   }, []);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === _services.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/lib/components/code/code_block_line.styles.js

@@ -33,11 +33,12 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.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__*/(0, _css.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__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.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__*/(0, _css.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__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/lib/components/code/utils.js

@@ -13,6 +13,8 @@ var _refractor = require("refractor");
 
 var _css = require("@emotion/css");
 
+var _code_block_annotations = require("./code_block_annotations");
+
 var _code_block_line = require("./code_block_line.styles");
 
 var _react2 = require("@emotion/react");
@@ -66,7 +68,15 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
       key: key,
       className: (0, _css.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
+        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          lineNumber: el.lineNumber,
+          children: el.annotation,
+          key: i
+        }) // prettier-ignore
+        : nodeToHtml(el, i, nodes, depth + 1)
+      );
     }));
   }
 
@@ -174,31 +184,61 @@ function wrapLines(nodes, options, euiTheme) {
     var lineStyles = (0, _css.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 = (0, _css.cx)([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
-      var lineNumberStyles = (0, _css.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 = (0, _css.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 = (0, _css.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({
@@ -218,7 +258,8 @@ var highlightByLine = function highlightByLine(children, language, data, euiThem
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
-    highlight: data.highlight
+    highlight: data.highlight,
+    annotations: data.annotations
   }, euiTheme);
 };
 

package/lib/components/collapsible_nav/collapsible_nav.js

@@ -19,7 +19,7 @@ var _flyout = require("../flyout");
 
 var _react2 = require("@emotion/react");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -70,8 +70,6 @@ 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,
@@ -120,7 +118,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,
@@ -229,13 +226,6 @@ EuiCollapsibleNav.propTypes = {
      */
   side: _propTypes.default.any,
 
-  /**
-     * 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: _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.string.isRequired]),
-
   /**
      * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking
      */
@@ -249,6 +239,15 @@ EuiCollapsibleNav.propTypes = {
      */
   focusTrapProps: _propTypes.default.any,
 
+  /**
+     * 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: _propTypes.default.bool,
+
   /**
      * ReactNode to render as this component's content
      */

package/lib/components/flyout/flyout.js

@@ -27,11 +27,13 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
+var _accessibility = require("../accessibility");
+
 var _flyout = require("./flyout.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonAriaLabel", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "role", "pushMinBreakpoint", "focusTrapProps"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +41,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function 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; }
@@ -88,7 +98,6 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$hideCloseButton = _ref.hideCloseButton,
       hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
       closeButtonProps = _ref.closeButtonProps,
-      closeButtonAriaLabel = _ref.closeButtonAriaLabel,
       _ref$closeButtonPosit = _ref.closeButtonPosition,
       closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
       onClose = _ref.onClose,
@@ -107,11 +116,12 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'overlay' : _ref$type,
       outsideClickCloses = _ref.outsideClickCloses,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'dialog' : _ref$role,
       _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
       pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-      focusTrapProps = _ref.focusTrapProps,
+      _ref$focusTrapProps = _ref.focusTrapProps,
+      _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+      _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
+      includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var Element = as || defaultElement;
@@ -204,7 +214,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
-        "aria-label": closeButtonAriaLabel || closeAriaLabel,
+        "aria-label": closeAriaLabel,
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
@@ -217,24 +227,60 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }));
     });
   }
+  /*
+   * If not disabled, automatically add fixed EuiHeaders as shards
+   * to EuiFlyout focus traps, to prevent focus fighting
+   */
 
-  var hasOverlayMask = ownFocus && !isPushed;
 
-  var onClickOutside = function onClickOutside(event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
+  var flyoutToggle = (0, _react.useRef)(document.activeElement);
 
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (includeFixedHeadersInFocusTrap) {
+      var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
+      setFixedHeaders(Array.from(fixedHeaderEls)); // Flyouts that are toggled from fixed headers do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+
+      fixedHeaderEls.forEach(function (header) {
+        if (header.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 ? void 0 : resizeRef.focus();
+        }
+      });
     } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+      // Clear existing headers if necessary, e.g. switching to `false`
+      setFixedHeaders(function (headers) {
+        return headers.length ? [] : headers;
+      });
+    }
+  }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
+  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
+  });
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
 
-    return undefined;
-  };
+
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var screenReaderDescription = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: descriptionId
+  }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderModalDialog",
+    default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+  }) : (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyout.screenReaderFixedHeaders",
+    default: "You can still continue tabbing through the page headers in addition to the dialog."
+  })));
   /*
    * Trap focus even when `ownFocus={false}`, otherwise closing
    * the flyout won't return focus to the originating button.
@@ -248,6 +294,21 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    * (both mousedown and mouseup) the overlay mask.
    */
 
+  var onClickOutside = function onClickOutside(event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    } // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+
+
+    return undefined;
+  };
 
   var flyout = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     disabled: isPushed,
@@ -256,12 +317,14 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, _extends({
     css: cssStyles
   }, rest, {
-    role: role,
+    role: "dialog",
     className: classes,
-    tabIndex: -1,
+    tabIndex: 0,
+    "data-autofocus": true,
+    "aria-describedby": !isPushed ? descriptionId : undefined,
     style: newStyle,
     ref: setRef
-  }), closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+  }), !isPushed && screenReaderDescription, closeButton, children)); // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
 
   var mergedMaskProps = _objectSpread(_objectSpread({}, maskProps), {}, {
     maskRef: (0, _services.useCombinedRefs)([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
@@ -276,7 +339,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     flyout = (0, _react2.jsx)(_portal.EuiPortal, null, flyout);
   }
 
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_services.EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);

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

@@ -118,7 +118,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
   }, [showTicks, ticks, min, max, tickInterval, step]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_track.euiRangeTrackStyles)(euiTheme);
-  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, (tickSequence || ticks) && styles.hasTicks];
+  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),

package/lib/components/header/header.js

@@ -106,7 +106,9 @@ var EuiHeader = function EuiHeader(_ref) {
   }
 
   return (0, _react2.jsx)("div", _extends({
-    className: classes
+    className: classes,
+    "data-fixed-header": position === 'fixed' || undefined // Used by EuiFlyouts as a query selector
+
   }, rest), contents);
 };
 

package/lib/components/icon/assets/app_agent.js

@@ -37,18 +37,10 @@ var EuiIconAppAgent = function EuiIconAppAgent(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
-  }), (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
-  }), (0, _react2.jsx)("path", {
-    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
+    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
   }), (0, _react2.jsx)("path", {
     className: "euiIcon__fillSecondary",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
+    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
   }));
 };
 

package/lib/components/icon/assets/app_fleet.js

@@ -37,10 +37,18 @@ var EuiIconAppFleet = function EuiIconAppFleet(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
+    className: "euiIcon__fillSecondary",
+    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
+  }), (0, _react2.jsx)("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
+  }), (0, _react2.jsx)("path", {
+    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
   }), (0, _react2.jsx)("path", {
     className: "euiIcon__fillSecondary",
-    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
   }));
 };
 

package/lib/components/icon/svgs/app_agent.svg

@@ -1,6 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
-<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
-<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
-<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
+<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
+<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
 </svg>

package/lib/components/icon/svgs/app_fleet.svg

@@ -1,4 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
-<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
+<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
+<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
+<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
+<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
 </svg>