react-focus-on 3.6.0 → 3.7.0

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.
package/README.md CHANGED
@@ -61,6 +61,7 @@ import {FocusOn} from 'react-focus-on';
61
61
  - `[noIsolation]` - disables aria-hidden isolation
62
62
  - `[inert]` - enables pointer-events isolation (☠️ dangerous, use to disable "parent scrollbars", refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation)
63
63
  - `[allowPinchZoom]` - enables "pinch-n-zoom" behavior. By default it might be prevented, refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation
64
+ - `[preventScrollOnFocus]` - prevents a [side effect of a programatic page scroll](https://github.com/theKashey/react-focus-on/issues/62) caused by focusing elements. Especially useful to address modal animations.
64
65
  ---
65
66
  - `[onActivation]` - on activation callback
66
67
  - `[onDeactivation]` - on deactivation callback
package/dist/es2015/UI.js CHANGED
@@ -5,7 +5,7 @@ import ReactFocusLock from 'react-focus-lock/UI';
5
5
  import { effectCar } from './medium';
6
6
  export var FocusOn = React.forwardRef(function (props, parentRef) {
7
7
  var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
8
- var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, style = props.style, as = props.as, rest = __rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
8
+ var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, preventScrollOnFocus = props.preventScrollOnFocus, style = props.style, as = props.as, rest = __rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as"]);
9
9
  var SideCar = sideCar;
10
10
  var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = __rest(lockProps, ["onActivation", "onDeactivation"]);
11
11
  var appliedLockProps = __assign(__assign({}, restProps), { sideCar: sideCar,
@@ -15,7 +15,7 @@ export var FocusOn = React.forwardRef(function (props, parentRef) {
15
15
  inert: inert,
16
16
  style: style, enabled: enabled && scrollLock });
17
17
  return (React.createElement(React.Fragment, null,
18
- React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, as: RemoveScroll }, children),
18
+ React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: RemoveScroll }, children),
19
19
  enabled && (React.createElement(SideCar, __assign({}, rest, { sideCar: effectCar, setLockProps: setLockProps, shards: shards })))));
20
20
  });
21
21
  export * from './reExports';
@@ -0,0 +1,2 @@
1
+ import { ReactFocusOnSideProps } from "./types";
2
+ export declare function ReactFocusOn(props: ReactFocusOnSideProps): JSX.Element;
@@ -0,0 +1,12 @@
1
+ import * as React from 'react';
2
+ import { RemoveScroll } from 'react-remove-scroll/UI';
3
+ import ReactFocusLock from 'react-focus-lock/UI';
4
+ var extractRef = function (ref) { return (('current' in ref) ? ref.current : ref); };
5
+ export function ReactFocusOn(props) {
6
+ var _a = React.useState(null), lockProps = _a[0], setLockProps = _a[1];
7
+ var _b = this.props, children = _b.children, autoFocus = _b.autoFocus, shards = _b.shards, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.scrollLock, scrollLock = _d === void 0 ? true : _d, _e = _b.focusLock, focusLock = _e === void 0 ? true : _e, sideCar = _b.sideCar;
8
+ return (React.createElement(React.Fragment, null,
9
+ React.createElement(RemoveScroll, { sideCar: enabled && sideCar, enabled: enabled && scrollLock, shards: shards },
10
+ enabled && React.createElement(Effect, null),
11
+ React.createElement(ReactFocusLock, { sideCar: enabled && sideCar, disabled: !(this.state.lockProps && enabled && focusLock), returnFocus: true, autoFocus: autoFocus, onActivation: this.onActivation, onDeactivation: this.onDeactivation, shards: shards, lockProps: lockProps }, children))));
12
+ }
@@ -70,6 +70,11 @@ export interface ReactFocusOnProps extends CommonProps {
70
70
  * @default true
71
71
  */
72
72
  returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | undefined;
73
+ /**
74
+ * [focus-lock] prevents scroll on focus via focusOptions
75
+ * @default false
76
+ */
77
+ preventScrollOnFocus?: boolean | undefined;
73
78
  /**
74
79
  * [focus-lock] allows "ignoring" focus on some elements
75
80
  * @see {@link https://github.com/theKashey/react-focus-lock#api}
package/dist/es5/UI.js CHANGED
@@ -8,7 +8,7 @@ var UI_2 = require("react-focus-lock/UI");
8
8
  var medium_1 = require("./medium");
9
9
  exports.FocusOn = React.forwardRef(function (props, parentRef) {
10
10
  var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
11
- var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, style = props.style, as = props.as, rest = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
11
+ var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, preventScrollOnFocus = props.preventScrollOnFocus, style = props.style, as = props.as, rest = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as"]);
12
12
  var SideCar = sideCar;
13
13
  var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = tslib_1.__rest(lockProps, ["onActivation", "onDeactivation"]);
14
14
  var appliedLockProps = tslib_1.__assign(tslib_1.__assign({}, restProps), { sideCar: sideCar,
@@ -18,7 +18,7 @@ exports.FocusOn = React.forwardRef(function (props, parentRef) {
18
18
  inert: inert,
19
19
  style: style, enabled: enabled && scrollLock });
20
20
  return (React.createElement(React.Fragment, null,
21
- React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, as: UI_1.RemoveScroll }, children),
21
+ React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: UI_1.RemoveScroll }, children),
22
22
  enabled && (React.createElement(SideCar, tslib_1.__assign({}, rest, { sideCar: medium_1.effectCar, setLockProps: setLockProps, shards: shards })))));
23
23
  });
24
24
  tslib_1.__exportStar(require("./reExports"), exports);
@@ -0,0 +1,2 @@
1
+ import { ReactFocusOnSideProps } from "./types";
2
+ export declare function ReactFocusOn(props: ReactFocusOnSideProps): JSX.Element;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var React = require("react");
4
+ var UI_1 = require("react-remove-scroll/UI");
5
+ var UI_2 = require("react-focus-lock/UI");
6
+ var InteractivityDisabler_1 = require("./InteractivityDisabler");
7
+ var extractRef = function (ref) { return (('current' in ref) ? ref.current : ref); };
8
+ function ReactFocusOn(props) {
9
+ var _a = React.useState(null), lockProps = _a[0], setLockProps = _a[1];
10
+ var _b = this.props, children = _b.children, autoFocus = _b.autoFocus, shards = _b.shards, _c = _b.enabled, enabled = _c === void 0 ? true : _c, _d = _b.scrollLock, scrollLock = _d === void 0 ? true : _d, _e = _b.focusLock, focusLock = _e === void 0 ? true : _e, sideCar = _b.sideCar;
11
+ return (React.createElement(React.Fragment, null,
12
+ React.createElement(UI_1.RemoveScroll, { sideCar: enabled && sideCar, enabled: enabled && scrollLock, shards: shards },
13
+ enabled && React.createElement(InteractivityDisabler_1.InteractivityDisabler, null),
14
+ React.createElement(UI_2.default, { sideCar: enabled && sideCar, disabled: !(this.state.lockProps && enabled && focusLock), returnFocus: true, autoFocus: autoFocus, onActivation: this.onActivation, onDeactivation: this.onDeactivation, shards: shards, lockProps: lockProps }, children))));
15
+ }
16
+ exports.ReactFocusOn = ReactFocusOn;
@@ -70,6 +70,11 @@ export interface ReactFocusOnProps extends CommonProps {
70
70
  * @default true
71
71
  */
72
72
  returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | undefined;
73
+ /**
74
+ * [focus-lock] prevents scroll on focus via focusOptions
75
+ * @default false
76
+ */
77
+ preventScrollOnFocus?: boolean | undefined;
73
78
  /**
74
79
  * [focus-lock] allows "ignoring" focus on some elements
75
80
  * @see {@link https://github.com/theKashey/react-focus-lock#api}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-focus-on",
3
- "version": "3.6.0",
3
+ "version": "3.7.0",
4
4
  "description": "The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.",
5
5
  "main": "dist/es5/index.js",
6
6
  "scripts": {
@@ -44,9 +44,9 @@
44
44
  "ts-react-toolbox": "^0.2.10"
45
45
  },
46
46
  "dependencies": {
47
- "aria-hidden": "^1.1.3",
48
- "react-focus-lock": "^2.9.0",
49
- "react-remove-scroll": "^2.5.2",
47
+ "aria-hidden": "^1.2.2",
48
+ "react-focus-lock": "^2.9.2",
49
+ "react-remove-scroll": "^2.5.5",
50
50
  "react-style-singleton": "^2.2.0",
51
51
  "tslib": "^2.3.1",
52
52
  "use-callback-ref": "^1.3.0",
package/CHANGELOG.md DELETED
@@ -1,240 +0,0 @@
1
- # [3.6.0](https://github.com/theKashey/react-focus-on/compare/v3.5.4...v3.6.0) (2022-05-01)
2
-
3
-
4
- ### Bug Fixes
5
-
6
- * update underlaying packages; brings React 18 and Shadow DOM support ([5bd7b5c](https://github.com/theKashey/react-focus-on/commit/5bd7b5c))
7
-
8
-
9
-
10
- ## [3.5.4](https://github.com/theKashey/react-focus-on/compare/v3.5.3...v3.5.4) (2021-11-09)
11
-
12
-
13
-
14
- ## [3.5.3](https://github.com/theKashey/react-focus-on/compare/v3.5.2...v3.5.3) (2021-11-09)
15
-
16
-
17
- ### Bug Fixes
18
-
19
- * add tslib as dependency, fixes [#54](https://github.com/theKashey/react-focus-on/issues/54) ([ce204cd](https://github.com/theKashey/react-focus-on/commit/ce204cd))
20
-
21
-
22
-
23
- ## [3.5.2](https://github.com/theKashey/react-focus-on/compare/v3.5.1...v3.5.2) (2021-03-28)
24
-
25
-
26
-
27
- ## [3.5.1](https://github.com/theKashey/react-focus-on/compare/v3.5.0...v3.5.1) (2020-11-27)
28
-
29
-
30
-
31
- # [3.5.0](https://github.com/theKashey/react-focus-on/compare/v3.4.1...v3.5.0) (2020-08-13)
32
-
33
-
34
- ### Features
35
-
36
- * add 'as' and 'style' props ([d1a79e4](https://github.com/theKashey/react-focus-on/commit/d1a79e4))
37
- * expose whitelist prop ([fa5fe87](https://github.com/theKashey/react-focus-on/commit/fa5fe87))
38
-
39
-
40
-
41
- ## [3.4.1](https://github.com/theKashey/react-focus-on/compare/v3.4.0...v3.4.1) (2020-04-17)
42
-
43
-
44
- ### Bug Fixes
45
-
46
- * update focus-lock, fixes [#35](https://github.com/theKashey/react-focus-on/issues/35) ([280d4a5](https://github.com/theKashey/react-focus-on/commit/280d4a5))
47
-
48
-
49
-
50
- # [3.4.0](https://github.com/theKashey/react-focus-on/compare/v3.3.0...v3.4.0) (2020-04-16)
51
-
52
-
53
- ### Features
54
-
55
- * support CSP ([67739a4](https://github.com/theKashey/react-focus-on/commit/67739a4))
56
-
57
-
58
-
59
- # [3.3.0](https://github.com/theKashey/react-focus-on/compare/v3.2.0...v3.3.0) (2019-10-17)
60
-
61
-
62
- ### Features
63
-
64
- * add allowPinchZoom ([ad396d7](https://github.com/theKashey/react-focus-on/commit/ad396d7))
65
-
66
-
67
-
68
- # [3.2.0](https://github.com/theKashey/react-focus-on/compare/v3.1.5...v3.2.0) (2019-10-13)
69
-
70
-
71
- ### Features
72
-
73
- * allow ref forwarding ([d379b3c](https://github.com/theKashey/react-focus-on/commit/d379b3c))
74
-
75
-
76
-
77
- ## [3.1.5](https://github.com/theKashey/react-focus-on/compare/v3.1.4...v3.1.5) (2019-10-06)
78
-
79
-
80
-
81
- ## [3.1.4](https://github.com/theKashey/react-focus-on/compare/v3.1.3...v3.1.4) (2019-10-05)
82
-
83
-
84
-
85
- ## [3.1.3](https://github.com/theKashey/react-focus-on/compare/v3.1.2...v3.1.3) (2019-10-01)
86
-
87
-
88
- ### Bug Fixes
89
-
90
- * deactivation sequence, fixes [#24](https://github.com/theKashey/react-focus-on/issues/24) ([32ed7d7](https://github.com/theKashey/react-focus-on/commit/32ed7d7))
91
-
92
-
93
-
94
- ## [3.1.2](https://github.com/theKashey/react-focus-on/compare/v3.1.1...v3.1.2) (2019-09-28)
95
-
96
-
97
-
98
- ## [3.1.1](https://github.com/theKashey/react-focus-on/compare/v3.1.0...v3.1.1) (2019-09-21)
99
-
100
-
101
- ### Bug Fixes
102
-
103
- * update hooks when users changes callbacks, fixes [#17](https://github.com/theKashey/react-focus-on/issues/17) ([127a303](https://github.com/theKashey/react-focus-on/commit/127a303))
104
-
105
-
106
-
107
- # [3.1.0](https://github.com/theKashey/react-focus-on/compare/v3.0.7...v3.1.0) (2019-09-13)
108
-
109
-
110
- ### Features
111
-
112
- * support returnOption=preventScroll FocusLock option ([ff2dad3](https://github.com/theKashey/react-focus-on/commit/ff2dad3))
113
-
114
-
115
-
116
- ## [3.0.7](https://github.com/theKashey/react-focus-on/compare/v3.0.6...v3.0.7) (2019-09-11)
117
-
118
-
119
-
120
- ## [3.0.6](https://github.com/theKashey/react-focus-on/compare/v3.0.5...v3.0.6) (2019-08-15)
121
-
122
-
123
- ### Bug Fixes
124
-
125
- * fixes onClickOutside on iOS devices. fixes [#13](https://github.com/theKashey/react-focus-on/issues/13) ([96d0756](https://github.com/theKashey/react-focus-on/commit/96d0756))
126
-
127
-
128
-
129
- ## [3.0.5](https://github.com/theKashey/react-focus-on/compare/v3.0.4...v3.0.5) (2019-07-16)
130
-
131
-
132
- ### Bug Fixes
133
-
134
- * handle Esc in IE compatible way, fixes [#10](https://github.com/theKashey/react-focus-on/issues/10) ([f897bea](https://github.com/theKashey/react-focus-on/commit/f897bea))
135
-
136
-
137
-
138
- ## [3.0.4](https://github.com/theKashey/react-focus-on/compare/v3.0.3...v3.0.4) (2019-07-16)
139
-
140
-
141
- ### Bug Fixes
142
-
143
- * expose returnFocus prop, fixes [#11](https://github.com/theKashey/react-focus-on/issues/11) ([b25b5b5](https://github.com/theKashey/react-focus-on/commit/b25b5b5))
144
-
145
-
146
-
147
- ## [3.0.3](https://github.com/theKashey/react-focus-on/compare/v3.0.1...v3.0.3) (2019-07-03)
148
-
149
-
150
-
151
- ## [3.0.1](https://github.com/theKashey/react-focus-on/compare/v3.0.0...v3.0.1) (2019-07-02)
152
-
153
-
154
- ### Bug Fixes
155
-
156
- * aria-hidden broken in v3, fixes [#8](https://github.com/theKashey/react-focus-on/issues/8) ([f7570e5](https://github.com/theKashey/react-focus-on/commit/f7570e5))
157
-
158
-
159
-
160
- # [3.0.0](https://github.com/theKashey/react-focus-on/compare/v2.0.2...v3.0.0) (2019-06-29)
161
-
162
-
163
- ### Features
164
-
165
- * introduce sidecar ([0588039](https://github.com/theKashey/react-focus-on/commit/0588039))
166
-
167
-
168
-
169
- ## [2.0.2](https://github.com/theKashey/react-focus-on/compare/v2.0.1...v2.0.2) (2019-05-05)
170
-
171
-
172
-
173
- ## [2.0.1](https://github.com/theKashey/react-focus-on/compare/v2.0.0...v2.0.1) (2019-04-10)
174
-
175
-
176
- ### Bug Fixes
177
-
178
- * dont prevent internal clicks, fixes [#3](https://github.com/theKashey/react-focus-on/issues/3) ([229eaad](https://github.com/theKashey/react-focus-on/commit/229eaad))
179
-
180
-
181
-
182
- # [2.0.0](https://github.com/theKashey/react-focus-on/compare/v1.3.2...v2.0.0) (2019-03-11)
183
-
184
-
185
- ### Features
186
-
187
- * shards and remove-scroll ([dbd4d5f](https://github.com/theKashey/react-focus-on/commit/dbd4d5f))
188
- * shards and remove-scroll ([0f5d421](https://github.com/theKashey/react-focus-on/commit/0f5d421))
189
-
190
-
191
-
192
- ## [1.3.2](https://github.com/theKashey/react-focus-on/compare/v1.3.1...v1.3.2) (2019-01-21)
193
-
194
-
195
- ### Bug Fixes
196
-
197
- * return focus by default ([a525b4c](https://github.com/theKashey/react-focus-on/commit/a525b4c))
198
-
199
-
200
-
201
- ## [1.3.1](https://github.com/theKashey/react-focus-on/compare/v1.3.0...v1.3.1) (2018-12-31)
202
-
203
-
204
- ### Bug Fixes
205
-
206
- * Escape on body ([e551925](https://github.com/theKashey/react-focus-on/commit/e551925))
207
-
208
-
209
-
210
- # [1.3.0](https://github.com/theKashey/react-focus-on/compare/v1.2.1...v1.3.0) (2018-11-13)
211
-
212
-
213
- ### Features
214
-
215
- * expose gapMode ([0298cc8](https://github.com/theKashey/react-focus-on/commit/0298cc8))
216
-
217
-
218
-
219
- ## [1.2.1](https://github.com/theKashey/react-focus-on/compare/v1.2.0...v1.2.1) (2018-11-13)
220
-
221
-
222
-
223
- # [1.2.0](https://github.com/theKashey/react-focus-on/compare/v1.1.0...v1.2.0) (2018-11-12)
224
-
225
-
226
- ### Features
227
-
228
- * onEscapeKey ([7fb17d7](https://github.com/theKashey/react-focus-on/commit/7fb17d7))
229
-
230
-
231
-
232
- # [1.1.0](https://github.com/theKashey/react-focus-on/compare/ed4d62b...v1.1.0) (2018-11-07)
233
-
234
-
235
- ### Features
236
-
237
- * onClickOutside event ([ed4d62b](https://github.com/theKashey/react-focus-on/commit/ed4d62b))
238
-
239
-
240
-