@elastic/eui 76.2.0 → 76.4.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/es/components/key_pad_menu/key_pad_menu.js

@@ -19,6 +19,8 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiFormLabel } from '../form/form_label/form_label';
+import { useEuiTheme } from '../../services';
+import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
   var children = _ref.children,
@@ -27,13 +29,20 @@ export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = useEuiTheme();
+  var styles = euiKeyPadMenuStyles(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? ___EmotionJSX("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : ___EmotionJSX("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), React.Children.map(children, function (child) {
     return ___EmotionJSX("li", null, child);

package/es/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+export var euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+export var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/css("display:flex;flex-direction:row;flex-wrap:wrap;", logicalCSS('width', mathWithUnits([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", logicalCSS('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};

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
@@ -15610,6 +15614,18 @@ declare module '@elastic/eui/src/components/image' {
 	export type { EuiImageProps } from '@elastic/eui/src/components/image/image_types';
 	export { EuiImage } from '@elastic/eui/src/components/image/image';
 
+}
+declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiKeyPadMenuVariables: ({ euiTheme }: UseEuiTheme) => {
+	    euiKeyPadMenuSize: string;
+	    euiKeyPadMenuMarginSize: string;
+	};
+	export const euiKeyPadMenuStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiKeyPadMenu: import("@emotion/utils").SerializedStyles;
+	    euiKeyPadMenu__legend: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';

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/lib/components/key_pad_menu/key_pad_menu.js

@@ -13,6 +13,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -34,13 +38,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

package/lib/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

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/es/components/key_pad_menu/key_pad_menu.js

@@ -13,6 +13,8 @@ var _excluded = ["children", "className", "checkable"];
 import React from 'react';
 import classNames from 'classnames';
 import { EuiFormLabel } from '../form/form_label/form_label';
+import { useEuiTheme } from '../../services';
+import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
   var children = _ref.children,
@@ -21,13 +23,20 @@ export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = useEuiTheme();
+  var styles = euiKeyPadMenuStyles(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? ___EmotionJSX("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : ___EmotionJSX("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), React.Children.map(children, function (child) {
     return ___EmotionJSX("li", null, child);

package/optimize/es/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+export var euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+export var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/css("display:flex;flex-direction:row;flex-wrap:wrap;", logicalCSS('width', mathWithUnits([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", logicalCSS('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};

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/optimize/lib/components/key_pad_menu/key_pad_menu.js

@@ -19,6 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -29,13 +33,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       checkable = _ref.checkable,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     "aria-label": (0, _typeof2.default)(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

package/optimize/lib/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

package/package.json

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

package/src/components/key_pad_menu/_index.scss

@@ -2,5 +2,4 @@
 
 @import 'variables';
 
-@import 'key_pad_menu';
 @import 'key_pad_menu_item';

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,