@elastic/eui 77.2.0 → 77.2.2

package/es/components/focus_trap/focus_trap.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -28,6 +28,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import { FocusOn } from 'react-focus-on';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { findElementBySelectorOrRef } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
@@ -116,17 +117,25 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = _objectWithoutProperties(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return ___EmotionJSX(FocusOn, focusOnProps, children);
+      return ___EmotionJSX(FocusOn, focusOnProps, children, scrollLock && ___EmotionJSX(RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -136,7 +145,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });
 EuiFocusTrap.propTypes = {
   className: PropTypes.string,
@@ -157,5 +167,11 @@ EuiFocusTrap.propTypes = {
      */
   initialFocus: PropTypes.any,
   style: PropTypes.any,
+  /**
+     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+     * `margin` instead of `padding`.
+     */
+  gapMode: PropTypes.oneOf(["padding", "margin"]),
   disabled: PropTypes.bool
 };

package/es/components/form/field_number/field_number.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,10 +16,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useCombinedRefs } from '../../../services';
 import { EuiValidatableControl } from '../validatable_control';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -48,29 +47,28 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
-    _onKeyDown = props.onKeyDown,
+    _onKeyUp = props.onKeyUp,
     rest = _objectWithoutProperties(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  var _useState = useState(false),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-  var validityRef = useRef(null);
-  var setRefs = useCombinedRefs([validityRef, inputRef]);
 
   // Note that we can't use hook into `onChange` because browsers don't emit change events
   // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyDown = useCallback(function (e) {
-    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    // Wait a beat before checking validity - we can't use `e.target` as it's stale
-    requestAnimationFrame(function () {
-      setIsNativelyInvalid(!validityRef.current.validity.valid);
-    });
-  }, [_onKeyDown]);
+  var onKeyUp = useCallback(function (e) {
+    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+    var _ref = e.target,
+      validity = _ref.validity;
+    // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+    var isInvalid = !validity.valid || undefined;
+    setIsNativelyInvalid(isInvalid);
+  }, [_onKeyUp]);
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -94,9 +92,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: setRefs,
-    onKeyDown: onKeyDown,
-    "aria-invalid": isInvalid || isNativelyInvalid
+    ref: inputRef,
+    onKeyUp: onKeyUp,
+    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
   }, rest)));
   if (controlOnly) {
     return control;

package/eui.d.ts

@@ -4266,6 +4266,12 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
 	     */
 	    initialFocus?: FocusTarget;
 	    style?: CSSProperties;
+	    /**
+	     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+	     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+	     * `margin` instead of `padding`.
+	     */
+	    gapMode?: 'padding' | 'margin';
 	    disabled?: boolean;
 	}
 	export interface EuiFocusTrapProps extends CommonProps, Omit<ReactFocusOnProps, 'enabled'>, // Inverted `disabled` prop used instead
@@ -4281,6 +4287,7 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
 	        returnFocus: boolean;
 	        noIsolation: boolean;
 	        scrollLock: boolean;
+	        gapMode: string;
 	    };
 	    state: State;
 	    lastInterceptedEvent: Event | null;

package/lib/components/focus_trap/focus_trap.js

@@ -7,9 +7,10 @@ exports.EuiFocusTrap = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFocusOn = require("react-focus-on");
+var _reactRemoveScrollBar = require("react-remove-scroll-bar");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -117,17 +118,25 @@ var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = _objectWithoutProperties(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children);
+      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children, scrollLock && (0, _react2.jsx)(_reactRemoveScrollBar.RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -138,7 +147,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });
 EuiFocusTrap.propTypes = {
   className: _propTypes.default.string,
@@ -159,5 +169,11 @@ EuiFocusTrap.propTypes = {
      */
   initialFocus: _propTypes.default.any,
   style: _propTypes.default.any,
+  /**
+     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+     * `margin` instead of `padding`.
+     */
+  gapMode: _propTypes.default.oneOf(["padding", "margin"]),
   disabled: _propTypes.default.bool
 };

package/lib/components/form/field_number/field_number.js

@@ -8,13 +8,12 @@ exports.EuiFieldNumber = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../../services");
 var _validatable_control = require("../validatable_control");
 var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,29 +49,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
-    _onKeyDown = props.onKeyDown,
+    _onKeyUp = props.onKeyUp,
     rest = _objectWithoutProperties(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-  var validityRef = (0, _react.useRef)(null);
-  var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
 
   // Note that we can't use hook into `onChange` because browsers don't emit change events
   // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    // Wait a beat before checking validity - we can't use `e.target` as it's stale
-    requestAnimationFrame(function () {
-      setIsNativelyInvalid(!validityRef.current.validity.valid);
-    });
-  }, [_onKeyDown]);
+  var onKeyUp = (0, _react.useCallback)(function (e) {
+    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+    var _ref = e.target,
+      validity = _ref.validity;
+    // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+    var isInvalid = !validity.valid || undefined;
+    setIsNativelyInvalid(isInvalid);
+  }, [_onKeyUp]);
   var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -96,9 +94,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: setRefs,
-    onKeyDown: onKeyDown,
-    "aria-invalid": isInvalid || isNativelyInvalid
+    ref: inputRef,
+    onKeyUp: onKeyUp,
+    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
   }, rest)));
   if (controlOnly) {
     return control;

package/optimize/es/components/focus_trap/focus_trap.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -21,6 +21,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import { FocusOn } from 'react-focus-on';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { findElementBySelectorOrRef } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
@@ -109,17 +110,25 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = _objectWithoutProperties(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return ___EmotionJSX(FocusOn, focusOnProps, children);
+      return ___EmotionJSX(FocusOn, focusOnProps, children, scrollLock && ___EmotionJSX(RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -129,5 +138,6 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });

package/optimize/es/components/form/field_number/field_number.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,9 +10,8 @@ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max",
  * Side Public License, v 1.
  */
 
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import classNames from 'classnames';
-import { useCombinedRefs } from '../../../services';
 import { EuiValidatableControl } from '../validatable_control';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -41,29 +40,28 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
-    _onKeyDown = props.onKeyDown,
+    _onKeyUp = props.onKeyUp,
     rest = _objectWithoutProperties(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  var _useState = useState(false),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-  var validityRef = useRef(null);
-  var setRefs = useCombinedRefs([validityRef, inputRef]);
 
   // Note that we can't use hook into `onChange` because browsers don't emit change events
   // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyDown = useCallback(function (e) {
-    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    // Wait a beat before checking validity - we can't use `e.target` as it's stale
-    requestAnimationFrame(function () {
-      setIsNativelyInvalid(!validityRef.current.validity.valid);
-    });
-  }, [_onKeyDown]);
+  var onKeyUp = useCallback(function (e) {
+    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+    var _ref = e.target,
+      validity = _ref.validity;
+    // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+    var isInvalid = !validity.valid || undefined;
+    setIsNativelyInvalid(isInvalid);
+  }, [_onKeyUp]);
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -87,9 +85,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: setRefs,
-    onKeyDown: onKeyDown,
-    "aria-invalid": isInvalid || isNativelyInvalid
+    ref: inputRef,
+    onKeyUp: onKeyUp,
+    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
   }, rest)));
   if (controlOnly) {
     return control;

package/optimize/lib/components/focus_trap/focus_trap.js

@@ -16,9 +16,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactFocusOn = require("react-focus-on");
+var _reactRemoveScrollBar = require("react-remove-scroll-bar");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -111,17 +112,25 @@ var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children);
+      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children, scrollLock && (0, _react2.jsx)(_reactRemoveScrollBar.RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -132,5 +141,6 @@ exports.EuiFocusTrap = EuiFocusTrap;
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });

package/optimize/lib/components/form/field_number/field_number.js

@@ -11,13 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../../services");
 var _validatable_control = require("../validatable_control");
 var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiFieldNumber = function EuiFieldNumber(props) {
@@ -43,29 +42,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
-    _onKeyDown = props.onKeyDown,
+    _onKeyUp = props.onKeyUp,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-  var validityRef = (0, _react.useRef)(null);
-  var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
 
   // Note that we can't use hook into `onChange` because browsers don't emit change events
   // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    // Wait a beat before checking validity - we can't use `e.target` as it's stale
-    requestAnimationFrame(function () {
-      setIsNativelyInvalid(!validityRef.current.validity.valid);
-    });
-  }, [_onKeyDown]);
+  var onKeyUp = (0, _react.useCallback)(function (e) {
+    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+    var _ref = e.target,
+      validity = _ref.validity;
+    // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+    var isInvalid = !validity.valid || undefined;
+    setIsNativelyInvalid(isInvalid);
+  }, [_onKeyUp]);
   var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -89,9 +87,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: setRefs,
-    onKeyDown: onKeyDown,
-    "aria-invalid": isInvalid || isNativelyInvalid
+    ref: inputRef,
+    onKeyUp: onKeyUp,
+    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
   }, rest)));
   if (controlOnly) {
     return control;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "77.2.0",
+  "version": "77.2.2",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -80,6 +80,7 @@
     "react-focus-on": "^3.7.0",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
+    "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "refractor": "^3.5.0",

package/test-env/components/form/field_number/field_number.js

@@ -12,13 +12,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../../services");
 var _validatable_control = require("../validatable_control");
 var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiFieldNumber = function EuiFieldNumber(props) {
@@ -44,29 +43,28 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
-    _onKeyDown = props.onKeyDown,
+    _onKeyUp = props.onKeyUp,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-  var validityRef = (0, _react.useRef)(null);
-  var setRefs = (0, _services.useCombinedRefs)([validityRef, inputRef]);
 
   // Note that we can't use hook into `onChange` because browsers don't emit change events
   // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
-    // Wait a beat before checking validity - we can't use `e.target` as it's stale
-    requestAnimationFrame(function () {
-      setIsNativelyInvalid(!validityRef.current.validity.valid);
-    });
-  }, [_onKeyDown]);
+  var onKeyUp = (0, _react.useCallback)(function (e) {
+    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+    var _ref = e.target,
+      validity = _ref.validity;
+    // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+    var isInvalid = !validity.valid || undefined;
+    setIsNativelyInvalid(isInvalid);
+  }, [_onKeyUp]);
   var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -90,9 +88,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: setRefs,
-    onKeyDown: onKeyDown,
-    "aria-invalid": isInvalid || isNativelyInvalid
+    ref: inputRef,
+    onKeyUp: onKeyUp,
+    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
   }, rest)));
   if (controlOnly) {
     return control;