@elastic/eui 74.1.0 → 75.0.0

package/es/components/collapsible_nav/collapsible_nav.js

@@ -1,4 +1,4 @@
-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 _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); }
 
@@ -57,8 +57,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,
@@ -108,7 +106,6 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,
@@ -216,13 +213,6 @@ EuiCollapsibleNav.propTypes = {
      */
   side: PropTypes.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.oneOfType([PropTypes.oneOf([null]), PropTypes.string.isRequired]),
-
   /**
      * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking
      */
@@ -236,6 +226,15 @@ EuiCollapsibleNav.propTypes = {
      */
   focusTrapProps: PropTypes.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.bool,
+
   /**
      * ReactNode to render as this component's content
      */

package/es/components/flyout/flyout.js

@@ -1,4 +1,12 @@
-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 _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); }
 
@@ -31,9 +39,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useRef, useState, forwardRef, Fragment } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -41,6 +49,7 @@ import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TYPES = ['push', 'overlay'];
@@ -64,7 +73,6 @@ export var EuiFlyout = /*#__PURE__*/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,
@@ -83,11 +91,12 @@ export var EuiFlyout = /*#__PURE__*/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;
@@ -180,7 +189,7 @@ export var EuiFlyout = /*#__PURE__*/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,
@@ -193,24 +202,61 @@ export var EuiFlyout = /*#__PURE__*/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 = 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 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedHeaders = _useState4[0],
+      setFixedHeaders = _useState4[1];
+
+  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 = useGeneratedHtmlId();
+
+  var screenReaderDescription = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: descriptionId
+  }, hasOverlayMask ? ___EmotionJSX(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."
+  }) : ___EmotionJSX(EuiI18n, {
+    token: "euiFlyout.screenReaderNonModalDialog",
+    default: "You are in a non-modal dialog. To close the dialog, press Escape."
+  }), ' ', fixedHeaders.length > 0 && ___EmotionJSX(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.
@@ -225,6 +271,22 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
 
 
+  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 = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
     clickOutsideDisables: !ownFocus,
@@ -232,12 +294,14 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, focusTrapProps), ___EmotionJSX(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), {}, {
@@ -253,7 +317,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     flyout = ___EmotionJSX(EuiPortal, null, flyout);
   }
 
-  return ___EmotionJSX(Fragment, null, ___EmotionJSX(EuiWindowEvent, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiWindowEvent, {
     event: "keydown",
     handler: onKeyDown
   }), flyout);

package/es/components/header/header.js

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

package/es/components/search_bar/filters/field_value_selection_filter.js

@@ -276,16 +276,16 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       if (!multiSelect && autoClose) {
         this.closePopover();
 
-        var _query = checked ? this.props.query.removeSimpleFieldClauses(field) : this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator);
+        var _query = checked ? this.props.query.removeSimpleFieldClauses(field).addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldClauses(field);
 
         this.props.onChange(_query);
       } else {
         if (multiSelect === 'or') {
-          var _query2 = checked ? this.props.query.removeOrFieldValue(field, value) : this.props.query.addOrFieldValue(field, value, true, operator);
+          var _query2 = checked ? this.props.query.addOrFieldValue(field, value, true, operator) : this.props.query.removeOrFieldValue(field, value);
 
           this.props.onChange(_query2);
         } else {
-          var _query3 = checked ? this.props.query.removeSimpleFieldValue(field, value) : this.props.query.addSimpleFieldValue(field, value, true, operator);
+          var _query3 = checked ? this.props.query.addSimpleFieldValue(field, value, true, operator) : this.props.query.removeSimpleFieldValue(field, value);
 
           this.props.onChange(_query3);
         }
@@ -395,13 +395,9 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         listProps: {
           isVirtualized: isOverSearchThreshold || false
         },
-        onChange: function onChange(options) {
-          var diff = items.find(function (item, index) {
-            return item.checked !== options[index].checked;
-          });
-
-          if (diff) {
-            _this5.onOptionClick(diff.data.optionField, diff.data.value, diff.checked);
+        onChange: function onChange(options, event, changedOption) {
+          if (changedOption.data) {
+            _this5.onOptionClick(changedOption.data.optionField, changedOption.data.value, changedOption.checked);
           }
         }
       }, searchProps), function (list, search) {

package/es/components/selectable/selectable_list/selectable_list.js

@@ -117,6 +117,22 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -160,9 +176,6 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
@@ -183,8 +196,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -341,6 +354,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

package/eui.d.ts

@@ -9765,11 +9765,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 +9797,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 +9809,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 +9898,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 +18235,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;
@@ -26146,6 +26146,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

@@ -4085,16 +4085,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.",

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
      */