@elastic/eui 74.1.0 → 75.0.0

package/optimize/lib/components/flyout/flyout.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TYPES = exports.SIZES = exports.SIDES = exports.PADDING_SIZES = exports.EuiFlyout = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -37,11 +39,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 _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); }
 
@@ -76,7 +80,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,
@@ -95,12 +98,14 @@ 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
   var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
@@ -191,7 +196,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,
@@ -204,24 +209,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 = (0, _slicedToArray2.default)(_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((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)(_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.
@@ -235,6 +276,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, (0, _extends2.default)({
     disabled: isPushed,
@@ -243,12 +299,14 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
     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])
@@ -263,7 +321,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/optimize/lib/components/header/header.js

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

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -273,16 +273,16 @@ 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);
         }
@@ -390,13 +390,9 @@ 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/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -116,6 +116,19 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaSetSize", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaPosInSetMap", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListRow", /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -158,9 +171,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, (0, _extends2.default)({
         key: id,
@@ -181,8 +191,8 @@ 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,
@@ -333,6 +343,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           textWrap = _this$props7.textWrap,
           rest = (0, _objectWithoutProperties2.default)(_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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "74.1.0",
+  "version": "75.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -246,7 +246,7 @@
     "webpack-dev-server": "^4.10.0",
     "yargs": "^17.2.1",
     "yeoman-generator": "^4.12.0",
-    "yo": "^3.1.1"
+    "yo": "^4.3.1"
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",

package/test-env/components/collapsible_nav/collapsible_nav.js

@@ -29,7 +29,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 _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); }
 
@@ -58,8 +58,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,
@@ -108,7 +106,6 @@ var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     as: as,
     size: size,
     side: side,
-    role: role,
     ownFocus: ownFocus,
     outsideClickCloses: outsideClickCloses,
     closeButtonPosition: closeButtonPosition,
@@ -217,13 +214,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
      */
@@ -237,6 +227,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/test-env/components/header/header.js

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

package/test-env/components/search_bar/filters/field_value_selection_filter.js

@@ -275,16 +275,16 @@ 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);
         }
@@ -392,13 +392,9 @@ 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/test-env/components/selectable/selectable_list/selectable_list.js

@@ -118,6 +118,19 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaSetSize", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaPosInSetMap", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListRow", /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -160,9 +173,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, (0, _extends2.default)({
         key: id,
@@ -183,8 +193,8 @@ 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,
@@ -335,6 +345,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           textWrap = _this$props7.textWrap,
           rest = (0, _objectWithoutProperties2.default)(_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