@elastic/eui 76.2.0 → 76.3.0

package/es/components/accessibility/skip_link/skip_link.js

@@ -47,7 +47,14 @@ export var EuiSkipLink = function EuiSkipLink(_ref) {
     var hasValidId = !!destinationEl; // Check the fallback destination if not
 
     if (!destinationEl && fallbackDestination) {
-      destinationEl = document.querySelector(fallbackDestination);
+      if (Array.isArray(fallbackDestination)) {
+        for (var i = 0; i < fallbackDestination.length; i++) {
+          destinationEl = document.querySelector(fallbackDestination[i]);
+          if (destinationEl) break; // Stop once the first fallback has been found
+        }
+      } else {
+        destinationEl = document.querySelector(fallbackDestination);
+      }
     }
 
     if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
@@ -108,11 +115,15 @@ EuiSkipLink.propTypes = {
   destinationId: PropTypes.string.isRequired,
 
   /**
-     * If no destination ID element exists or can be found, you may provide a string of
-     * query selectors to fall back to (e.g. a `main` or `role="main"` element)
+     * If no destination ID element exists or can be found, you may provide a query selector
+     * string to fall back to.
+     *
+     * For complex applications with potentially variable layouts per page, an array of
+     * query selectors can be passed, e.g. `['main', '[role=main]', '.appWrapper']`, which
+     * prioritizes looking for multiple fallbacks based on array order.
      * @default main
      */
-  fallbackDestination: PropTypes.string,
+  fallbackDestination: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired).isRequired]),
 
   /**
      * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),

package/es/components/code/code_block_full_screen.js

@@ -88,6 +88,8 @@ export var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrappe
   var cssStyles = [styles.euiCodeBlock, styles.l, // Force fullscreen to use large font
   styles.isFullScreen];
   return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     clickOutsideDisables: true
   }, ___EmotionJSX("div", {
     className: "euiCodeBlockFullScreen",

package/es/components/flyout/flyout.js

@@ -289,6 +289,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var flyout = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
+    scrollLock: ownFocus,
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), ___EmotionJSX(Element, _extends({

package/es/components/image/image_fullscreen_wrapper.js

@@ -70,6 +70,8 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
   return ___EmotionJSX(EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, ___EmotionJSX(EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, ___EmotionJSX(React.Fragment, null, ___EmotionJSX("figure", _extends({
     "aria-label": optionalCaptionText,

package/eui.d.ts

@@ -8115,11 +8115,15 @@ declare module '@elastic/eui/src/components/accessibility/skip_link/skip_link' {
 	     */
 	    destinationId: string;
 	    /**
-	     * If no destination ID element exists or can be found, you may provide a string of
-	     * query selectors to fall back to (e.g. a `main` or `role="main"` element)
+	     * If no destination ID element exists or can be found, you may provide a query selector
+	     * string to fall back to.
+	     *
+	     * For complex applications with potentially variable layouts per page, an array of
+	     * query selectors can be passed, e.g. `['main', '[role=main]', '.appWrapper']`, which
+	     * prioritizes looking for multiple fallbacks based on array order.
 	     * @default main
 	     */
-	    fallbackDestination?: string;
+	    fallbackDestination?: string | string[];
 	    /**
 	     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
 	     * setting this flag to true will manually scroll to and focus the destination element

package/lib/components/accessibility/skip_link/skip_link.js

@@ -66,7 +66,14 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     var hasValidId = !!destinationEl; // Check the fallback destination if not
 
     if (!destinationEl && fallbackDestination) {
-      destinationEl = document.querySelector(fallbackDestination);
+      if (Array.isArray(fallbackDestination)) {
+        for (var i = 0; i < fallbackDestination.length; i++) {
+          destinationEl = document.querySelector(fallbackDestination[i]);
+          if (destinationEl) break; // Stop once the first fallback has been found
+        }
+      } else {
+        destinationEl = document.querySelector(fallbackDestination);
+      }
     }
 
     if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
@@ -129,11 +136,15 @@ EuiSkipLink.propTypes = {
   destinationId: _propTypes.default.string.isRequired,
 
   /**
-     * If no destination ID element exists or can be found, you may provide a string of
-     * query selectors to fall back to (e.g. a `main` or `role="main"` element)
+     * If no destination ID element exists or can be found, you may provide a query selector
+     * string to fall back to.
+     *
+     * For complex applications with potentially variable layouts per page, an array of
+     * query selectors can be passed, e.g. `['main', '[role=main]', '.appWrapper']`, which
+     * prioritizes looking for multiple fallbacks based on array order.
      * @default main
      */
-  fallbackDestination: _propTypes.default.string,
+  fallbackDestination: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired]),
 
   /**
      * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),

package/lib/components/code/code_block_full_screen.js

@@ -104,6 +104,8 @@ var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2
   var cssStyles = [styles.euiCodeBlock, styles.l, // Force fullscreen to use large font
   styles.isFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     clickOutsideDisables: true
   }, (0, _react2.jsx)("div", {
     className: "euiCodeBlockFullScreen",

package/lib/components/flyout/flyout.js

@@ -312,6 +312,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var flyout = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
     disabled: isPushed,
+    scrollLock: ownFocus,
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), (0, _react2.jsx)(Element, _extends({

package/lib/components/image/image_fullscreen_wrapper.js

@@ -85,6 +85,8 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", _extends({
     "aria-label": optionalCaptionText,

package/optimize/es/components/accessibility/skip_link/skip_link.js

@@ -42,7 +42,14 @@ export var EuiSkipLink = function EuiSkipLink(_ref) {
     var hasValidId = !!destinationEl; // Check the fallback destination if not
 
     if (!destinationEl && fallbackDestination) {
-      destinationEl = document.querySelector(fallbackDestination);
+      if (Array.isArray(fallbackDestination)) {
+        for (var i = 0; i < fallbackDestination.length; i++) {
+          destinationEl = document.querySelector(fallbackDestination[i]);
+          if (destinationEl) break; // Stop once the first fallback has been found
+        }
+      } else {
+        destinationEl = document.querySelector(fallbackDestination);
+      }
     }
 
     if ((overrideLinkBehavior || !hasValidId) && destinationEl) {

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

@@ -78,6 +78,8 @@ export var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrappe
   var cssStyles = [styles.euiCodeBlock, styles.l, // Force fullscreen to use large font
   styles.isFullScreen];
   return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     clickOutsideDisables: true
   }, ___EmotionJSX("div", {
     className: "euiCodeBlockFullScreen",

package/optimize/es/components/flyout/flyout.js

@@ -266,6 +266,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var flyout = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
+    scrollLock: ownFocus,
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), ___EmotionJSX(Element, _extends({

package/optimize/es/components/image/image_fullscreen_wrapper.js

@@ -58,6 +58,8 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
   return ___EmotionJSX(EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, ___EmotionJSX(EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, ___EmotionJSX(React.Fragment, null, ___EmotionJSX("figure", _extends({
     "aria-label": optionalCaptionText,

package/optimize/lib/components/accessibility/skip_link/skip_link.js

@@ -61,7 +61,14 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     var hasValidId = !!destinationEl; // Check the fallback destination if not
 
     if (!destinationEl && fallbackDestination) {
-      destinationEl = document.querySelector(fallbackDestination);
+      if (Array.isArray(fallbackDestination)) {
+        for (var i = 0; i < fallbackDestination.length; i++) {
+          destinationEl = document.querySelector(fallbackDestination[i]);
+          if (destinationEl) break; // Stop once the first fallback has been found
+        }
+      } else {
+        destinationEl = document.querySelector(fallbackDestination);
+      }
     }
 
     if ((overrideLinkBehavior || !hasValidId) && destinationEl) {

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

@@ -104,6 +104,8 @@ var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2
   var cssStyles = [styles.euiCodeBlock, styles.l, // Force fullscreen to use large font
   styles.isFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     clickOutsideDisables: true
   }, (0, _react2.jsx)("div", {
     className: "euiCodeBlockFullScreen",

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

@@ -294,6 +294,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var flyout = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     disabled: isPushed,
+    scrollLock: ownFocus,
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({

package/optimize/lib/components/image/image_fullscreen_wrapper.js

@@ -80,6 +80,8 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", (0, _extends2.default)({
     "aria-label": optionalCaptionText,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "76.2.0",
+  "version": "76.3.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -63,7 +63,14 @@ var EuiSkipLink = function EuiSkipLink(_ref) {
     var hasValidId = !!destinationEl; // Check the fallback destination if not
 
     if (!destinationEl && fallbackDestination) {
-      destinationEl = document.querySelector(fallbackDestination);
+      if (Array.isArray(fallbackDestination)) {
+        for (var i = 0; i < fallbackDestination.length; i++) {
+          destinationEl = document.querySelector(fallbackDestination[i]);
+          if (destinationEl) break; // Stop once the first fallback has been found
+        }
+      } else {
+        destinationEl = document.querySelector(fallbackDestination);
+      }
     }
 
     if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
@@ -126,11 +133,15 @@ EuiSkipLink.propTypes = {
   destinationId: _propTypes.default.string.isRequired,
 
   /**
-     * If no destination ID element exists or can be found, you may provide a string of
-     * query selectors to fall back to (e.g. a `main` or `role="main"` element)
+     * If no destination ID element exists or can be found, you may provide a query selector
+     * string to fall back to.
+     *
+     * For complex applications with potentially variable layouts per page, an array of
+     * query selectors can be passed, e.g. `['main', '[role=main]', '.appWrapper']`, which
+     * prioritizes looking for multiple fallbacks based on array order.
      * @default main
      */
-  fallbackDestination: _propTypes.default.string,
+  fallbackDestination: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired]),
 
   /**
      * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),

package/test-env/components/code/code_block_full_screen.js

@@ -104,6 +104,8 @@ var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2
   var cssStyles = [styles.euiCodeBlock, styles.l, // Force fullscreen to use large font
   styles.isFullScreen];
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     clickOutsideDisables: true
   }, (0, _react2.jsx)("div", {
     className: "euiCodeBlockFullScreen",

package/test-env/components/image/image_fullscreen_wrapper.js

@@ -82,6 +82,8 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
   return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, {
     "data-test-subj": "fullScreenOverlayMask"
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+    scrollLock: true,
+    preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", (0, _extends2.default)({
     "aria-label": optionalCaptionText,