@elastic/eui 77.1.1 → 77.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/es/components/focus_trap/focus_trap.js +21 -5
  2. package/eui.d.ts +7 -0
  3. package/lib/components/focus_trap/focus_trap.js +21 -5
  4. package/optimize/es/components/focus_trap/focus_trap.js +15 -5
  5. package/optimize/lib/components/focus_trap/focus_trap.js +15 -5
  6. package/package.json +2 -1
package/es/components/focus_trap/focus_trap.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
1
+ var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
2
2
  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); }
3
3
  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; }
4
4
  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 ==
28
28
  import React, { Component } from 'react';
29
29
  import PropTypes from "prop-types";
30
30
  import { FocusOn } from 'react-focus-on';
31
+ import { RemoveScrollBar } from 'react-remove-scroll-bar';
31
32
  import { findElementBySelectorOrRef } from '../../services';
32
33
  import { jsx as ___EmotionJSX } from "@emotion/react";
33
34
  export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
@@ -116,17 +117,25 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
116
117
  returnFocus = _this$props3.returnFocus,
117
118
  noIsolation = _this$props3.noIsolation,
118
119
  scrollLock = _this$props3.scrollLock,
120
+ gapMode = _this$props3.gapMode,
119
121
  rest = _objectWithoutProperties(_this$props3, _excluded);
120
122
  var isDisabled = disabled || this.state.hasBeenDisabledByClick;
121
123
  var focusOnProps = _objectSpread(_objectSpread({
122
124
  returnFocus: returnFocus,
123
125
  noIsolation: noIsolation,
124
- scrollLock: scrollLock,
125
126
  enabled: !isDisabled
126
127
  }, rest), {}, {
127
- onClickOutside: this.handleOutsideClick
128
+ onClickOutside: this.handleOutsideClick,
129
+ /**
130
+ * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
131
+ * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
132
+ * @see https://github.com/theKashey/react-focus-on/issues/49
133
+ */
134
+ scrollLock: false
128
135
  });
129
- return ___EmotionJSX(FocusOn, focusOnProps, children);
136
+ return ___EmotionJSX(FocusOn, focusOnProps, children, scrollLock && ___EmotionJSX(RemoveScrollBar, {
137
+ gapMode: gapMode
138
+ }));
130
139
  }
131
140
  }]);
132
141
  return EuiFocusTrap;
@@ -136,7 +145,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
136
145
  disabled: false,
137
146
  returnFocus: true,
138
147
  noIsolation: true,
139
- scrollLock: false
148
+ scrollLock: false,
149
+ gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
140
150
  });
141
151
  EuiFocusTrap.propTypes = {
142
152
  className: PropTypes.string,
@@ -157,5 +167,11 @@ EuiFocusTrap.propTypes = {
157
167
  */
158
168
  initialFocus: PropTypes.any,
159
169
  style: PropTypes.any,
170
+ /**
171
+ * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
172
+ * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
173
+ * `margin` instead of `padding`.
174
+ */
175
+ gapMode: PropTypes.oneOf(["padding", "margin"]),
160
176
  disabled: PropTypes.bool
161
177
  };
package/eui.d.ts CHANGED
@@ -4261,6 +4261,12 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
4261
4261
  */
4262
4262
  initialFocus?: FocusTarget;
4263
4263
  style?: CSSProperties;
4264
+ /**
4265
+ * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
4266
+ * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
4267
+ * `margin` instead of `padding`.
4268
+ */
4269
+ gapMode?: 'padding' | 'margin';
4264
4270
  disabled?: boolean;
4265
4271
  }
4266
4272
  export interface EuiFocusTrapProps extends CommonProps, Omit<ReactFocusOnProps, 'enabled'>, // Inverted `disabled` prop used instead
@@ -4276,6 +4282,7 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
4276
4282
  returnFocus: boolean;
4277
4283
  noIsolation: boolean;
4278
4284
  scrollLock: boolean;
4285
+ gapMode: string;
4279
4286
  };
4280
4287
  state: State;
4281
4288
  lastInterceptedEvent: Event | null;
package/lib/components/focus_trap/focus_trap.js CHANGED
@@ -7,9 +7,10 @@ exports.EuiFocusTrap = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _reactFocusOn = require("react-focus-on");
10
+ var _reactRemoveScrollBar = require("react-remove-scroll-bar");
10
11
  var _services = require("../../services");
11
12
  var _react2 = require("@emotion/react");
12
- var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
13
+ var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
15
  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); }
15
16
  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) {
117
118
  returnFocus = _this$props3.returnFocus,
118
119
  noIsolation = _this$props3.noIsolation,
119
120
  scrollLock = _this$props3.scrollLock,
121
+ gapMode = _this$props3.gapMode,
120
122
  rest = _objectWithoutProperties(_this$props3, _excluded);
121
123
  var isDisabled = disabled || this.state.hasBeenDisabledByClick;
122
124
  var focusOnProps = _objectSpread(_objectSpread({
123
125
  returnFocus: returnFocus,
124
126
  noIsolation: noIsolation,
125
- scrollLock: scrollLock,
126
127
  enabled: !isDisabled
127
128
  }, rest), {}, {
128
- onClickOutside: this.handleOutsideClick
129
+ onClickOutside: this.handleOutsideClick,
130
+ /**
131
+ * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
132
+ * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
133
+ * @see https://github.com/theKashey/react-focus-on/issues/49
134
+ */
135
+ scrollLock: false
129
136
  });
130
- return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children);
137
+ return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children, scrollLock && (0, _react2.jsx)(_reactRemoveScrollBar.RemoveScrollBar, {
138
+ gapMode: gapMode
139
+ }));
131
140
  }
132
141
  }]);
133
142
  return EuiFocusTrap;
@@ -138,7 +147,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
138
147
  disabled: false,
139
148
  returnFocus: true,
140
149
  noIsolation: true,
141
- scrollLock: false
150
+ scrollLock: false,
151
+ gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
142
152
  });
143
153
  EuiFocusTrap.propTypes = {
144
154
  className: _propTypes.default.string,
@@ -159,5 +169,11 @@ EuiFocusTrap.propTypes = {
159
169
  */
160
170
  initialFocus: _propTypes.default.any,
161
171
  style: _propTypes.default.any,
172
+ /**
173
+ * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
174
+ * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
175
+ * `margin` instead of `padding`.
176
+ */
177
+ gapMode: _propTypes.default.oneOf(["padding", "margin"]),
162
178
  disabled: _propTypes.default.bool
163
179
  };
package/optimize/es/components/focus_trap/focus_trap.js CHANGED
@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
7
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
- var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
9
+ var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
10
10
  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; }
11
11
  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; }
12
12
  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
21
21
 
22
22
  import React, { Component } from 'react';
23
23
  import { FocusOn } from 'react-focus-on';
24
+ import { RemoveScrollBar } from 'react-remove-scroll-bar';
24
25
  import { findElementBySelectorOrRef } from '../../services';
25
26
  import { jsx as ___EmotionJSX } from "@emotion/react";
26
27
  export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
@@ -109,17 +110,25 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
109
110
  returnFocus = _this$props3.returnFocus,
110
111
  noIsolation = _this$props3.noIsolation,
111
112
  scrollLock = _this$props3.scrollLock,
113
+ gapMode = _this$props3.gapMode,
112
114
  rest = _objectWithoutProperties(_this$props3, _excluded);
113
115
  var isDisabled = disabled || this.state.hasBeenDisabledByClick;
114
116
  var focusOnProps = _objectSpread(_objectSpread({
115
117
  returnFocus: returnFocus,
116
118
  noIsolation: noIsolation,
117
- scrollLock: scrollLock,
118
119
  enabled: !isDisabled
119
120
  }, rest), {}, {
120
- onClickOutside: this.handleOutsideClick
121
+ onClickOutside: this.handleOutsideClick,
122
+ /**
123
+ * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
124
+ * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
125
+ * @see https://github.com/theKashey/react-focus-on/issues/49
126
+ */
127
+ scrollLock: false
121
128
  });
122
- return ___EmotionJSX(FocusOn, focusOnProps, children);
129
+ return ___EmotionJSX(FocusOn, focusOnProps, children, scrollLock && ___EmotionJSX(RemoveScrollBar, {
130
+ gapMode: gapMode
131
+ }));
123
132
  }
124
133
  }]);
125
134
  return EuiFocusTrap;
@@ -129,5 +138,6 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
129
138
  disabled: false,
130
139
  returnFocus: true,
131
140
  noIsolation: true,
132
- scrollLock: false
141
+ scrollLock: false,
142
+ gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
133
143
  });
package/optimize/lib/components/focus_trap/focus_trap.js CHANGED
@@ -16,9 +16,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
16
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
17
  var _react = _interopRequireWildcard(require("react"));
18
18
  var _reactFocusOn = require("react-focus-on");
19
+ var _reactRemoveScrollBar = require("react-remove-scroll-bar");
19
20
  var _services = require("../../services");
20
21
  var _react2 = require("@emotion/react");
21
- var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
22
+ var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
22
23
  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); }
23
24
  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; }
24
25
  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) {
111
112
  returnFocus = _this$props3.returnFocus,
112
113
  noIsolation = _this$props3.noIsolation,
113
114
  scrollLock = _this$props3.scrollLock,
115
+ gapMode = _this$props3.gapMode,
114
116
  rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
115
117
  var isDisabled = disabled || this.state.hasBeenDisabledByClick;
116
118
  var focusOnProps = _objectSpread(_objectSpread({
117
119
  returnFocus: returnFocus,
118
120
  noIsolation: noIsolation,
119
- scrollLock: scrollLock,
120
121
  enabled: !isDisabled
121
122
  }, rest), {}, {
122
- onClickOutside: this.handleOutsideClick
123
+ onClickOutside: this.handleOutsideClick,
124
+ /**
125
+ * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
126
+ * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
127
+ * @see https://github.com/theKashey/react-focus-on/issues/49
128
+ */
129
+ scrollLock: false
123
130
  });
124
- return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children);
131
+ return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children, scrollLock && (0, _react2.jsx)(_reactRemoveScrollBar.RemoveScrollBar, {
132
+ gapMode: gapMode
133
+ }));
125
134
  }
126
135
  }]);
127
136
  return EuiFocusTrap;
@@ -132,5 +141,6 @@ exports.EuiFocusTrap = EuiFocusTrap;
132
141
  disabled: false,
133
142
  returnFocus: true,
134
143
  noIsolation: true,
135
- scrollLock: false
144
+ scrollLock: false,
145
+ gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
136
146
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "77.1.1",
4
+ "version": "77.1.2",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -80,6 +80,7 @@
80
80
  "react-focus-on": "^3.7.0",
81
81
  "react-input-autosize": "^3.0.0",
82
82
  "react-is": "^17.0.2",
83
+ "react-remove-scroll-bar": "^2.3.4",
83
84
  "react-virtualized-auto-sizer": "^1.0.6",
84
85
  "react-window": "^1.8.6",
85
86
  "refractor": "^3.5.0",