@atlaskit/react-select 2.2.1 → 2.3.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/CHANGELOG.md +15 -0
- package/dist/cjs/compiled/components/containers.compiled.css +26 -0
- package/dist/cjs/compiled/components/containers.js +119 -0
- package/dist/cjs/compiled/components/control.compiled.css +51 -0
- package/dist/cjs/compiled/components/control.js +66 -0
- package/dist/cjs/compiled/components/group.compiled.css +12 -0
- package/dist/cjs/compiled/components/group.js +81 -0
- package/dist/cjs/compiled/components/indicators.compiled.css +24 -0
- package/dist/cjs/compiled/components/indicators.js +157 -0
- package/dist/cjs/compiled/components/input.compiled.css +49 -0
- package/dist/cjs/compiled/components/input.js +69 -0
- package/dist/cjs/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/cjs/compiled/components/internal/a11y-text.js +23 -0
- package/dist/cjs/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/cjs/compiled/components/internal/dummy-input.js +30 -0
- package/dist/cjs/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/cjs/compiled/components/internal/required-input.js +34 -0
- package/dist/cjs/compiled/components/live-region.js +177 -0
- package/dist/cjs/compiled/components/menu.compiled.css +19 -0
- package/dist/cjs/compiled/components/menu.js +491 -0
- package/dist/cjs/compiled/components/multi-value.compiled.css +56 -0
- package/dist/cjs/compiled/components/multi-value.js +199 -0
- package/dist/cjs/compiled/components/option.compiled.css +22 -0
- package/dist/cjs/compiled/components/option.js +57 -0
- package/dist/cjs/compiled/components/placeholder.compiled.css +7 -0
- package/dist/cjs/compiled/components/placeholder.js +45 -0
- package/dist/cjs/compiled/components/single-value.compiled.css +13 -0
- package/dist/cjs/compiled/components/single-value.js +46 -0
- package/dist/cjs/components/containers.js +12 -72
- package/dist/cjs/components/control.js +11 -96
- package/dist/cjs/components/group.js +15 -53
- package/dist/cjs/components/indicators.js +15 -107
- package/dist/cjs/components/input.js +12 -81
- package/dist/cjs/components/internal/a11y-text.js +6 -25
- package/dist/cjs/components/internal/dummy-input.js +8 -36
- package/dist/cjs/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/cjs/components/internal/required-input.js +7 -31
- package/dist/cjs/components/internal/scroll-manager.js +19 -17
- package/dist/cjs/components/live-region.js +6 -164
- package/dist/cjs/components/menu.js +26 -181
- package/dist/cjs/components/multi-value.js +21 -197
- package/dist/cjs/components/option.js +11 -68
- package/dist/cjs/components/placeholder.js +11 -20
- package/dist/cjs/components/single-value.js +11 -26
- package/dist/cjs/emotion/components/containers.js +2 -0
- package/dist/cjs/emotion/components/control.js +2 -0
- package/dist/cjs/emotion/components/group.js +1 -0
- package/dist/cjs/emotion/components/indicators.js +1 -0
- package/dist/cjs/emotion/components/input.js +1 -1
- package/dist/cjs/emotion/components/internal/a11y-text.js +1 -0
- package/dist/cjs/emotion/components/internal/dummy-input.js +1 -0
- package/dist/cjs/emotion/components/internal/required-input.js +2 -0
- package/dist/cjs/emotion/components/live-region.js +1 -1
- package/dist/cjs/emotion/components/menu.js +1 -1
- package/dist/cjs/emotion/components/multi-value.js +1 -1
- package/dist/cjs/emotion/components/option.js +2 -0
- package/dist/cjs/emotion/components/placeholder.js +2 -0
- package/dist/cjs/emotion/components/single-value.js +2 -0
- package/dist/cjs/utils.js +2 -1
- package/dist/es2019/compiled/components/containers.compiled.css +26 -0
- package/dist/es2019/compiled/components/containers.js +115 -0
- package/dist/es2019/compiled/components/control.compiled.css +51 -0
- package/dist/es2019/compiled/components/control.js +58 -0
- package/dist/es2019/compiled/components/group.compiled.css +12 -0
- package/dist/es2019/compiled/components/group.js +72 -0
- package/dist/es2019/compiled/components/indicators.compiled.css +24 -0
- package/dist/es2019/compiled/components/indicators.js +144 -0
- package/dist/es2019/compiled/components/input.compiled.css +49 -0
- package/dist/es2019/compiled/components/input.js +59 -0
- package/dist/es2019/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/es2019/compiled/components/internal/a11y-text.js +11 -0
- package/dist/es2019/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/es2019/compiled/components/internal/dummy-input.js +19 -0
- package/dist/es2019/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/es2019/compiled/components/internal/required-input.js +23 -0
- package/dist/es2019/compiled/components/live-region.js +171 -0
- package/dist/es2019/compiled/components/menu.compiled.css +19 -0
- package/dist/es2019/compiled/components/menu.js +478 -0
- package/dist/es2019/compiled/components/multi-value.compiled.css +56 -0
- package/dist/es2019/compiled/components/multi-value.js +190 -0
- package/dist/es2019/compiled/components/option.compiled.css +22 -0
- package/dist/es2019/compiled/components/option.js +48 -0
- package/dist/es2019/compiled/components/placeholder.compiled.css +7 -0
- package/dist/es2019/compiled/components/placeholder.js +36 -0
- package/dist/es2019/compiled/components/single-value.compiled.css +13 -0
- package/dist/es2019/compiled/components/single-value.js +37 -0
- package/dist/es2019/components/containers.js +10 -87
- package/dist/es2019/components/control.js +8 -103
- package/dist/es2019/components/group.js +9 -54
- package/dist/es2019/components/indicators.js +11 -113
- package/dist/es2019/components/input.js +7 -83
- package/dist/es2019/components/internal/a11y-text.js +6 -26
- package/dist/es2019/components/internal/dummy-input.js +7 -36
- package/dist/es2019/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/es2019/components/internal/required-input.js +6 -32
- package/dist/es2019/components/internal/scroll-manager.js +16 -16
- package/dist/es2019/components/live-region.js +5 -168
- package/dist/es2019/components/menu.js +14 -192
- package/dist/es2019/components/multi-value.js +12 -216
- package/dist/es2019/components/option.js +7 -75
- package/dist/es2019/components/placeholder.js +7 -25
- package/dist/es2019/components/single-value.js +7 -31
- package/dist/es2019/emotion/components/containers.js +1 -0
- package/dist/es2019/emotion/components/control.js +1 -0
- package/dist/es2019/emotion/components/group.js +1 -0
- package/dist/es2019/emotion/components/indicators.js +1 -0
- package/dist/es2019/emotion/components/input.js +1 -0
- package/dist/es2019/emotion/components/internal/a11y-text.js +1 -0
- package/dist/es2019/emotion/components/internal/dummy-input.js +1 -0
- package/dist/es2019/emotion/components/internal/required-input.js +1 -0
- package/dist/es2019/emotion/components/live-region.js +2 -0
- package/dist/es2019/emotion/components/menu.js +2 -0
- package/dist/es2019/emotion/components/multi-value.js +1 -0
- package/dist/es2019/emotion/components/option.js +1 -0
- package/dist/es2019/emotion/components/placeholder.js +1 -0
- package/dist/es2019/emotion/components/single-value.js +1 -0
- package/dist/es2019/utils.js +1 -0
- package/dist/esm/compiled/components/containers.compiled.css +26 -0
- package/dist/esm/compiled/components/containers.js +110 -0
- package/dist/esm/compiled/components/control.compiled.css +51 -0
- package/dist/esm/compiled/components/control.js +57 -0
- package/dist/esm/compiled/components/group.compiled.css +12 -0
- package/dist/esm/compiled/components/group.js +71 -0
- package/dist/esm/compiled/components/indicators.compiled.css +24 -0
- package/dist/esm/compiled/components/indicators.js +148 -0
- package/dist/esm/compiled/components/input.compiled.css +49 -0
- package/dist/esm/compiled/components/input.js +59 -0
- package/dist/esm/compiled/components/internal/a11y-text.compiled.css +15 -0
- package/dist/esm/compiled/components/internal/a11y-text.js +13 -0
- package/dist/esm/compiled/components/internal/dummy-input.compiled.css +17 -0
- package/dist/esm/compiled/components/internal/dummy-input.js +20 -0
- package/dist/esm/compiled/components/internal/required-input.compiled.css +8 -0
- package/dist/esm/compiled/components/internal/required-input.js +24 -0
- package/dist/esm/compiled/components/live-region.js +168 -0
- package/dist/esm/compiled/components/menu.compiled.css +19 -0
- package/dist/esm/compiled/components/menu.js +485 -0
- package/dist/esm/compiled/components/multi-value.compiled.css +56 -0
- package/dist/esm/compiled/components/multi-value.js +187 -0
- package/dist/esm/compiled/components/option.compiled.css +22 -0
- package/dist/esm/compiled/components/option.js +47 -0
- package/dist/esm/compiled/components/placeholder.compiled.css +7 -0
- package/dist/esm/compiled/components/placeholder.js +35 -0
- package/dist/esm/compiled/components/single-value.compiled.css +13 -0
- package/dist/esm/compiled/components/single-value.js +36 -0
- package/dist/esm/components/containers.js +12 -73
- package/dist/esm/components/control.js +8 -97
- package/dist/esm/components/group.js +11 -54
- package/dist/esm/components/indicators.js +15 -109
- package/dist/esm/components/input.js +8 -83
- package/dist/esm/components/internal/a11y-text.js +6 -26
- package/dist/esm/components/internal/dummy-input.js +7 -37
- package/dist/esm/components/internal/notify-open-layer-observer.js +1 -0
- package/dist/esm/components/internal/required-input.js +7 -32
- package/dist/esm/components/internal/scroll-manager.js +16 -16
- package/dist/esm/components/live-region.js +5 -163
- package/dist/esm/components/menu.js +24 -182
- package/dist/esm/components/multi-value.js +17 -199
- package/dist/esm/components/option.js +8 -69
- package/dist/esm/components/placeholder.js +8 -21
- package/dist/esm/components/single-value.js +8 -27
- package/dist/esm/emotion/components/containers.js +1 -0
- package/dist/esm/emotion/components/control.js +1 -0
- package/dist/esm/emotion/components/group.js +1 -0
- package/dist/esm/emotion/components/indicators.js +1 -0
- package/dist/esm/emotion/components/input.js +1 -0
- package/dist/esm/emotion/components/internal/a11y-text.js +1 -0
- package/dist/esm/emotion/components/internal/dummy-input.js +1 -0
- package/dist/esm/emotion/components/internal/required-input.js +1 -0
- package/dist/esm/emotion/components/live-region.js +2 -0
- package/dist/esm/emotion/components/menu.js +2 -0
- package/dist/esm/emotion/components/multi-value.js +1 -0
- package/dist/esm/emotion/components/option.js +1 -0
- package/dist/esm/emotion/components/placeholder.js +1 -0
- package/dist/esm/emotion/components/single-value.js +1 -0
- package/dist/esm/utils.js +2 -1
- package/dist/types/compiled/components/containers.d.ts +53 -0
- package/dist/types/compiled/components/control.d.ts +41 -0
- package/dist/types/compiled/components/group.d.ts +54 -0
- package/dist/types/compiled/components/indicators.d.ts +72 -0
- package/dist/types/compiled/components/input.d.ts +36 -0
- package/dist/types/compiled/components/internal/a11y-text.d.ts +3 -0
- package/dist/types/compiled/components/internal/dummy-input.d.ts +8 -0
- package/dist/types/compiled/components/internal/required-input.d.ts +10 -0
- package/dist/types/compiled/components/live-region.d.ts +19 -0
- package/dist/types/compiled/components/menu.d.ts +115 -0
- package/dist/types/compiled/components/multi-value.d.ts +57 -0
- package/dist/types/compiled/components/option.d.ts +48 -0
- package/dist/types/compiled/components/placeholder.d.ts +21 -0
- package/dist/types/compiled/components/single-value.d.ts +27 -0
- package/dist/types/components/containers.d.ts +6 -11
- package/dist/types/components/control.d.ts +4 -9
- package/dist/types/components/group.d.ts +8 -10
- package/dist/types/components/index.d.ts +21 -21
- package/dist/types/components/indicators.d.ts +7 -12
- package/dist/types/components/input.d.ts +3 -8
- package/dist/types/components/internal/a11y-text.d.ts +2 -7
- package/dist/types/components/internal/dummy-input.d.ts +3 -8
- package/dist/types/components/internal/required-input.d.ts +0 -4
- package/dist/types/components/internal/scroll-manager.d.ts +2 -7
- package/dist/types/components/live-region.d.ts +2 -8
- package/dist/types/components/menu.d.ts +10 -15
- package/dist/types/components/multi-value.d.ts +19 -13
- package/dist/types/components/option.d.ts +3 -8
- package/dist/types/components/placeholder.d.ts +3 -8
- package/dist/types/components/single-value.d.ts +3 -8
- package/dist/types/select.d.ts +21 -21
- package/dist/types/types.d.ts +3 -0
- package/dist/types-ts4.5/compiled/components/containers.d.ts +53 -0
- package/dist/types-ts4.5/compiled/components/control.d.ts +41 -0
- package/dist/types-ts4.5/compiled/components/group.d.ts +54 -0
- package/dist/types-ts4.5/compiled/components/indicators.d.ts +72 -0
- package/dist/types-ts4.5/compiled/components/input.d.ts +36 -0
- package/dist/types-ts4.5/compiled/components/internal/a11y-text.d.ts +3 -0
- package/dist/types-ts4.5/compiled/components/internal/dummy-input.d.ts +8 -0
- package/dist/types-ts4.5/compiled/components/internal/required-input.d.ts +10 -0
- package/dist/types-ts4.5/compiled/components/live-region.d.ts +19 -0
- package/dist/types-ts4.5/compiled/components/menu.d.ts +115 -0
- package/dist/types-ts4.5/compiled/components/multi-value.d.ts +57 -0
- package/dist/types-ts4.5/compiled/components/option.d.ts +48 -0
- package/dist/types-ts4.5/compiled/components/placeholder.d.ts +21 -0
- package/dist/types-ts4.5/compiled/components/single-value.d.ts +27 -0
- package/dist/types-ts4.5/components/containers.d.ts +6 -11
- package/dist/types-ts4.5/components/control.d.ts +4 -9
- package/dist/types-ts4.5/components/group.d.ts +8 -10
- package/dist/types-ts4.5/components/index.d.ts +21 -21
- package/dist/types-ts4.5/components/indicators.d.ts +7 -12
- package/dist/types-ts4.5/components/input.d.ts +3 -8
- package/dist/types-ts4.5/components/internal/a11y-text.d.ts +2 -7
- package/dist/types-ts4.5/components/internal/dummy-input.d.ts +3 -8
- package/dist/types-ts4.5/components/internal/required-input.d.ts +0 -4
- package/dist/types-ts4.5/components/internal/scroll-manager.d.ts +2 -7
- package/dist/types-ts4.5/components/live-region.d.ts +2 -8
- package/dist/types-ts4.5/components/menu.d.ts +10 -15
- package/dist/types-ts4.5/components/multi-value.d.ts +19 -13
- package/dist/types-ts4.5/components/option.d.ts +3 -8
- package/dist/types-ts4.5/components/placeholder.d.ts +3 -8
- package/dist/types-ts4.5/components/single-value.d.ts +3 -8
- package/dist/types-ts4.5/select.d.ts +21 -21
- package/dist/types-ts4.5/types.d.ts +3 -0
- package/package.json +10 -2
- package/dist/cjs/emotion/components/index.js +0 -52
- package/dist/cjs/emotion/components/internal/index.js +0 -34
- package/dist/cjs/emotion/components/internal/notify-open-layer-observer.js +0 -21
- package/dist/cjs/emotion/components/internal/scroll-manager.js +0 -57
- package/dist/cjs/emotion/components/internal/use-scroll-capture.js +0 -132
- package/dist/cjs/emotion/components/internal/use-scroll-lock.js +0 -149
- package/dist/es2019/emotion/components/index.js +0 -41
- package/dist/es2019/emotion/components/internal/index.js +0 -4
- package/dist/es2019/emotion/components/internal/notify-open-layer-observer.js +0 -16
- package/dist/es2019/emotion/components/internal/scroll-manager.js +0 -49
- package/dist/es2019/emotion/components/internal/use-scroll-capture.js +0 -128
- package/dist/es2019/emotion/components/internal/use-scroll-lock.js +0 -143
- package/dist/esm/emotion/components/index.js +0 -43
- package/dist/esm/emotion/components/internal/index.js +0 -4
- package/dist/esm/emotion/components/internal/notify-open-layer-observer.js +0 -15
- package/dist/esm/emotion/components/internal/scroll-manager.js +0 -49
- package/dist/esm/emotion/components/internal/use-scroll-capture.js +0 -126
- package/dist/esm/emotion/components/internal/use-scroll-lock.js +0 -143
- package/dist/types/emotion/components/index.d.ts +0 -67
- package/dist/types/emotion/components/internal/index.d.ts +0 -4
- package/dist/types/emotion/components/internal/notify-open-layer-observer.d.ts +0 -11
- package/dist/types/emotion/components/internal/scroll-manager.d.ts +0 -17
- package/dist/types/emotion/components/internal/use-scroll-capture.d.ts +0 -12
- package/dist/types/emotion/components/internal/use-scroll-lock.d.ts +0 -9
- package/dist/types-ts4.5/emotion/components/index.d.ts +0 -67
- package/dist/types-ts4.5/emotion/components/internal/index.d.ts +0 -4
- package/dist/types-ts4.5/emotion/components/internal/notify-open-layer-observer.d.ts +0 -11
- package/dist/types-ts4.5/emotion/components/internal/scroll-manager.d.ts +0 -17
- package/dist/types-ts4.5/emotion/components/internal/use-scroll-capture.d.ts +0 -12
- package/dist/types-ts4.5/emotion/components/internal/use-scroll-lock.d.ts +0 -9
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
-
import { supportsPassiveEvents } from '../../../utils';
|
|
3
|
-
const cancelScroll = event => {
|
|
4
|
-
if (event.cancelable) {
|
|
5
|
-
event.preventDefault();
|
|
6
|
-
}
|
|
7
|
-
event.stopPropagation();
|
|
8
|
-
};
|
|
9
|
-
// TODO: Fill in the hook {description}.
|
|
10
|
-
/**
|
|
11
|
-
* {description}.
|
|
12
|
-
*/
|
|
13
|
-
export default function useScrollCapture({
|
|
14
|
-
isEnabled,
|
|
15
|
-
onBottomArrive,
|
|
16
|
-
onBottomLeave,
|
|
17
|
-
onTopArrive,
|
|
18
|
-
onTopLeave
|
|
19
|
-
}) {
|
|
20
|
-
const isBottom = useRef(false);
|
|
21
|
-
const isTop = useRef(false);
|
|
22
|
-
const touchStart = useRef(0);
|
|
23
|
-
const scrollTarget = useRef(null);
|
|
24
|
-
const handleEventDelta = useCallback((event, delta) => {
|
|
25
|
-
if (scrollTarget.current === null) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
const {
|
|
29
|
-
scrollTop,
|
|
30
|
-
scrollHeight,
|
|
31
|
-
clientHeight
|
|
32
|
-
} = scrollTarget.current;
|
|
33
|
-
const target = scrollTarget.current;
|
|
34
|
-
const isDeltaPositive = delta > 0;
|
|
35
|
-
const availableScroll = scrollHeight - clientHeight - scrollTop;
|
|
36
|
-
let shouldCancelScroll = false;
|
|
37
|
-
|
|
38
|
-
// reset bottom/top flags
|
|
39
|
-
if (availableScroll > delta && isBottom.current) {
|
|
40
|
-
if (onBottomLeave) {
|
|
41
|
-
onBottomLeave(event);
|
|
42
|
-
}
|
|
43
|
-
isBottom.current = false;
|
|
44
|
-
}
|
|
45
|
-
if (isDeltaPositive && isTop.current) {
|
|
46
|
-
if (onTopLeave) {
|
|
47
|
-
onTopLeave(event);
|
|
48
|
-
}
|
|
49
|
-
isTop.current = false;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// bottom limit
|
|
53
|
-
if (isDeltaPositive && delta > availableScroll) {
|
|
54
|
-
if (onBottomArrive && !isBottom.current) {
|
|
55
|
-
onBottomArrive(event);
|
|
56
|
-
}
|
|
57
|
-
target.scrollTop = scrollHeight;
|
|
58
|
-
shouldCancelScroll = true;
|
|
59
|
-
isBottom.current = true;
|
|
60
|
-
|
|
61
|
-
// top limit
|
|
62
|
-
} else if (!isDeltaPositive && -delta > scrollTop) {
|
|
63
|
-
if (onTopArrive && !isTop.current) {
|
|
64
|
-
onTopArrive(event);
|
|
65
|
-
}
|
|
66
|
-
target.scrollTop = 0;
|
|
67
|
-
shouldCancelScroll = true;
|
|
68
|
-
isTop.current = true;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// cancel scroll
|
|
72
|
-
if (shouldCancelScroll) {
|
|
73
|
-
cancelScroll(event);
|
|
74
|
-
}
|
|
75
|
-
}, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
|
|
76
|
-
const onWheel = useCallback(event => {
|
|
77
|
-
handleEventDelta(event, event.deltaY);
|
|
78
|
-
}, [handleEventDelta]);
|
|
79
|
-
const onTouchStart = useCallback(event => {
|
|
80
|
-
// set touch start so we can calculate touchmove delta
|
|
81
|
-
touchStart.current = event.changedTouches[0].clientY;
|
|
82
|
-
}, []);
|
|
83
|
-
const onTouchMove = useCallback(event => {
|
|
84
|
-
const deltaY = touchStart.current - event.changedTouches[0].clientY;
|
|
85
|
-
handleEventDelta(event, deltaY);
|
|
86
|
-
}, [handleEventDelta]);
|
|
87
|
-
const startListening = useCallback(el => {
|
|
88
|
-
// bail early if no element is available to attach to
|
|
89
|
-
if (!el) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
const notPassive = supportsPassiveEvents ? {
|
|
93
|
-
passive: false
|
|
94
|
-
} : false;
|
|
95
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
96
|
-
el.addEventListener('wheel', onWheel, notPassive);
|
|
97
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
98
|
-
el.addEventListener('touchstart', onTouchStart, notPassive);
|
|
99
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
100
|
-
el.addEventListener('touchmove', onTouchMove, notPassive);
|
|
101
|
-
}, [onTouchMove, onTouchStart, onWheel]);
|
|
102
|
-
const stopListening = useCallback(el => {
|
|
103
|
-
// bail early if no element is available to detach from
|
|
104
|
-
if (!el) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
109
|
-
el.removeEventListener('wheel', onWheel, false);
|
|
110
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
111
|
-
el.removeEventListener('touchstart', onTouchStart, false);
|
|
112
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
113
|
-
el.removeEventListener('touchmove', onTouchMove, false);
|
|
114
|
-
}, [onTouchMove, onTouchStart, onWheel]);
|
|
115
|
-
useEffect(() => {
|
|
116
|
-
if (!isEnabled) {
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
const element = scrollTarget.current;
|
|
120
|
-
startListening(element);
|
|
121
|
-
return () => {
|
|
122
|
-
stopListening(element);
|
|
123
|
-
};
|
|
124
|
-
}, [isEnabled, startListening, stopListening]);
|
|
125
|
-
return element => {
|
|
126
|
-
scrollTarget.current = element;
|
|
127
|
-
};
|
|
128
|
-
}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
-
const STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
|
|
3
|
-
const LOCK_STYLES = {
|
|
4
|
-
boxSizing: 'border-box',
|
|
5
|
-
// account for possible declaration `width: 100%;` on body
|
|
6
|
-
overflow: 'hidden',
|
|
7
|
-
position: 'relative',
|
|
8
|
-
height: '100%'
|
|
9
|
-
};
|
|
10
|
-
function preventTouchMove(e) {
|
|
11
|
-
e.preventDefault();
|
|
12
|
-
}
|
|
13
|
-
function allowTouchMove(e) {
|
|
14
|
-
e.stopPropagation();
|
|
15
|
-
}
|
|
16
|
-
function preventInertiaScroll() {
|
|
17
|
-
const top = this.scrollTop;
|
|
18
|
-
const totalScroll = this.scrollHeight;
|
|
19
|
-
const currentScroll = top + this.offsetHeight;
|
|
20
|
-
if (top === 0) {
|
|
21
|
-
this.scrollTop = 1;
|
|
22
|
-
} else if (currentScroll === totalScroll) {
|
|
23
|
-
this.scrollTop = top - 1;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// `ontouchstart` check works on most browsers
|
|
28
|
-
// `maxTouchPoints` works on IE10/11 and Surface
|
|
29
|
-
function isTouchDevice() {
|
|
30
|
-
// eslint-disable-next-line compat/compat
|
|
31
|
-
return 'ontouchstart' in window || navigator.maxTouchPoints;
|
|
32
|
-
}
|
|
33
|
-
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
34
|
-
let activeScrollLocks = 0;
|
|
35
|
-
const listenerOptions = {
|
|
36
|
-
capture: false,
|
|
37
|
-
passive: false
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// TODO: Fill in the hook {description}.
|
|
41
|
-
/**
|
|
42
|
-
* {description}.
|
|
43
|
-
*/
|
|
44
|
-
export default function useScrollLock({
|
|
45
|
-
isEnabled,
|
|
46
|
-
accountForScrollbars = true
|
|
47
|
-
}) {
|
|
48
|
-
const originalStyles = useRef({});
|
|
49
|
-
const scrollTarget = useRef(null);
|
|
50
|
-
const addScrollLock = useCallback(touchScrollTarget => {
|
|
51
|
-
if (!canUseDOM) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const target = document.body;
|
|
55
|
-
const targetStyle = target && target.style;
|
|
56
|
-
if (accountForScrollbars) {
|
|
57
|
-
// store any styles already applied to the body
|
|
58
|
-
STYLE_KEYS.forEach(key => {
|
|
59
|
-
const val = targetStyle && targetStyle[key];
|
|
60
|
-
originalStyles.current[key] = val;
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// apply the lock styles and padding if this is the first scroll lock
|
|
65
|
-
if (accountForScrollbars && activeScrollLocks < 1) {
|
|
66
|
-
const currentPadding = parseInt(originalStyles.current.paddingRight, 10) || 0;
|
|
67
|
-
const clientWidth = document.body ? document.body.clientWidth : 0;
|
|
68
|
-
const adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
|
|
69
|
-
Object.keys(LOCK_STYLES).forEach(key => {
|
|
70
|
-
const val = LOCK_STYLES[key];
|
|
71
|
-
if (targetStyle) {
|
|
72
|
-
targetStyle[key] = val;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
if (targetStyle) {
|
|
76
|
-
targetStyle.paddingRight = `${adjustedPadding}px`;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// account for touch devices
|
|
81
|
-
if (target && isTouchDevice()) {
|
|
82
|
-
// Mobile Safari ignores { overflow: hidden } declaration on the body.
|
|
83
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
84
|
-
target.addEventListener('touchmove', preventTouchMove, listenerOptions);
|
|
85
|
-
|
|
86
|
-
// Allow scroll on provided target
|
|
87
|
-
if (touchScrollTarget) {
|
|
88
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
89
|
-
touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, listenerOptions);
|
|
90
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
91
|
-
touchScrollTarget.addEventListener('touchmove', allowTouchMove, listenerOptions);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// increment active scroll locks
|
|
96
|
-
activeScrollLocks += 1;
|
|
97
|
-
}, [accountForScrollbars]);
|
|
98
|
-
const removeScrollLock = useCallback(touchScrollTarget => {
|
|
99
|
-
if (!canUseDOM) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
const target = document.body;
|
|
103
|
-
const targetStyle = target && target.style;
|
|
104
|
-
|
|
105
|
-
// safely decrement active scroll locks
|
|
106
|
-
activeScrollLocks = Math.max(activeScrollLocks - 1, 0);
|
|
107
|
-
|
|
108
|
-
// reapply original body styles, if any
|
|
109
|
-
if (accountForScrollbars && activeScrollLocks < 1) {
|
|
110
|
-
STYLE_KEYS.forEach(key => {
|
|
111
|
-
const val = originalStyles.current[key];
|
|
112
|
-
if (targetStyle) {
|
|
113
|
-
targetStyle[key] = val;
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// remove touch listeners
|
|
119
|
-
if (target && isTouchDevice()) {
|
|
120
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
121
|
-
target.removeEventListener('touchmove', preventTouchMove, listenerOptions);
|
|
122
|
-
if (touchScrollTarget) {
|
|
123
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
124
|
-
touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, listenerOptions);
|
|
125
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
126
|
-
touchScrollTarget.removeEventListener('touchmove', allowTouchMove, listenerOptions);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}, [accountForScrollbars]);
|
|
130
|
-
useEffect(() => {
|
|
131
|
-
if (!isEnabled) {
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
const element = scrollTarget.current;
|
|
135
|
-
addScrollLock(element);
|
|
136
|
-
return () => {
|
|
137
|
-
removeScrollLock(element);
|
|
138
|
-
};
|
|
139
|
-
}, [isEnabled, addScrollLock, removeScrollLock]);
|
|
140
|
-
return element => {
|
|
141
|
-
scrollTarget.current = element;
|
|
142
|
-
};
|
|
143
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import { IndicatorsContainer, SelectContainer, ValueContainer } from './containers';
|
|
5
|
-
import Control from './control';
|
|
6
|
-
import Group, { GroupHeading } from './group';
|
|
7
|
-
import { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
|
|
8
|
-
import Input from './input';
|
|
9
|
-
import Menu, { LoadingMessage, MenuList, MenuPortal, NoOptionsMessage } from './menu';
|
|
10
|
-
import MultiValue, { MultiValueContainer, MultiValueLabel, MultiValueRemove } from './multi-value';
|
|
11
|
-
import Option from './option';
|
|
12
|
-
import Placeholder from './placeholder';
|
|
13
|
-
import SingleValue from './single-value';
|
|
14
|
-
|
|
15
|
-
// Required export for external packages
|
|
16
|
-
|
|
17
|
-
export var components = {
|
|
18
|
-
ClearIndicator: ClearIndicator,
|
|
19
|
-
Control: Control,
|
|
20
|
-
DropdownIndicator: DropdownIndicator,
|
|
21
|
-
Group: Group,
|
|
22
|
-
GroupHeading: GroupHeading,
|
|
23
|
-
IndicatorsContainer: IndicatorsContainer,
|
|
24
|
-
Input: Input,
|
|
25
|
-
LoadingIndicator: LoadingIndicator,
|
|
26
|
-
Menu: Menu,
|
|
27
|
-
MenuList: MenuList,
|
|
28
|
-
MenuPortal: MenuPortal,
|
|
29
|
-
LoadingMessage: LoadingMessage,
|
|
30
|
-
NoOptionsMessage: NoOptionsMessage,
|
|
31
|
-
MultiValue: MultiValue,
|
|
32
|
-
MultiValueContainer: MultiValueContainer,
|
|
33
|
-
MultiValueLabel: MultiValueLabel,
|
|
34
|
-
MultiValueRemove: MultiValueRemove,
|
|
35
|
-
Option: Option,
|
|
36
|
-
Placeholder: Placeholder,
|
|
37
|
-
SelectContainer: SelectContainer,
|
|
38
|
-
SingleValue: SingleValue,
|
|
39
|
-
ValueContainer: ValueContainer
|
|
40
|
-
};
|
|
41
|
-
export var defaultComponents = function defaultComponents(props) {
|
|
42
|
-
return _objectSpread(_objectSpread({}, components), props.components);
|
|
43
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
2
|
-
/**
|
|
3
|
-
* Functional component wrapper around `useNotifyOpenLayerObserver`.
|
|
4
|
-
*
|
|
5
|
-
* This is needed as Select is a class component, which cannot use hooks directly.
|
|
6
|
-
*/
|
|
7
|
-
export function NotifyOpenLayerObserver(_ref) {
|
|
8
|
-
var isOpen = _ref.isOpen,
|
|
9
|
-
onClose = _ref.onClose;
|
|
10
|
-
useNotifyOpenLayerObserver({
|
|
11
|
-
isOpen: isOpen,
|
|
12
|
-
onClose: onClose
|
|
13
|
-
});
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { Fragment } from 'react';
|
|
6
|
-
import { css, jsx } from '@emotion/react';
|
|
7
|
-
import useScrollCapture from './use-scroll-capture';
|
|
8
|
-
import useScrollLock from './use-scroll-lock';
|
|
9
|
-
var styles = css({
|
|
10
|
-
position: 'fixed',
|
|
11
|
-
insetBlockEnd: 0,
|
|
12
|
-
insetBlockStart: 0,
|
|
13
|
-
insetInlineEnd: 0,
|
|
14
|
-
insetInlineStart: 0
|
|
15
|
-
});
|
|
16
|
-
var blurSelectInput = function blurSelectInput(event) {
|
|
17
|
-
var element = event.target;
|
|
18
|
-
return element.ownerDocument.activeElement && element.ownerDocument.activeElement.blur();
|
|
19
|
-
};
|
|
20
|
-
export default function ScrollManager(_ref) {
|
|
21
|
-
var children = _ref.children,
|
|
22
|
-
lockEnabled = _ref.lockEnabled,
|
|
23
|
-
_ref$captureEnabled = _ref.captureEnabled,
|
|
24
|
-
captureEnabled = _ref$captureEnabled === void 0 ? true : _ref$captureEnabled,
|
|
25
|
-
onBottomArrive = _ref.onBottomArrive,
|
|
26
|
-
onBottomLeave = _ref.onBottomLeave,
|
|
27
|
-
onTopArrive = _ref.onTopArrive,
|
|
28
|
-
onTopLeave = _ref.onTopLeave;
|
|
29
|
-
var setScrollCaptureTarget = useScrollCapture({
|
|
30
|
-
isEnabled: captureEnabled,
|
|
31
|
-
onBottomArrive: onBottomArrive,
|
|
32
|
-
onBottomLeave: onBottomLeave,
|
|
33
|
-
onTopArrive: onTopArrive,
|
|
34
|
-
onTopLeave: onTopLeave
|
|
35
|
-
});
|
|
36
|
-
var setScrollLockTarget = useScrollLock({
|
|
37
|
-
isEnabled: lockEnabled
|
|
38
|
-
});
|
|
39
|
-
var targetRef = function targetRef(element) {
|
|
40
|
-
setScrollCaptureTarget(element);
|
|
41
|
-
setScrollLockTarget(element);
|
|
42
|
-
};
|
|
43
|
-
return jsx(Fragment, null, lockEnabled &&
|
|
44
|
-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
45
|
-
jsx("div", {
|
|
46
|
-
onClick: blurSelectInput,
|
|
47
|
-
css: styles
|
|
48
|
-
}), children(targetRef));
|
|
49
|
-
}
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
-
import { supportsPassiveEvents } from '../../../utils';
|
|
3
|
-
var cancelScroll = function cancelScroll(event) {
|
|
4
|
-
if (event.cancelable) {
|
|
5
|
-
event.preventDefault();
|
|
6
|
-
}
|
|
7
|
-
event.stopPropagation();
|
|
8
|
-
};
|
|
9
|
-
// TODO: Fill in the hook {description}.
|
|
10
|
-
/**
|
|
11
|
-
* {description}.
|
|
12
|
-
*/
|
|
13
|
-
export default function useScrollCapture(_ref) {
|
|
14
|
-
var isEnabled = _ref.isEnabled,
|
|
15
|
-
onBottomArrive = _ref.onBottomArrive,
|
|
16
|
-
onBottomLeave = _ref.onBottomLeave,
|
|
17
|
-
onTopArrive = _ref.onTopArrive,
|
|
18
|
-
onTopLeave = _ref.onTopLeave;
|
|
19
|
-
var isBottom = useRef(false);
|
|
20
|
-
var isTop = useRef(false);
|
|
21
|
-
var touchStart = useRef(0);
|
|
22
|
-
var scrollTarget = useRef(null);
|
|
23
|
-
var handleEventDelta = useCallback(function (event, delta) {
|
|
24
|
-
if (scrollTarget.current === null) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
var _scrollTarget$current = scrollTarget.current,
|
|
28
|
-
scrollTop = _scrollTarget$current.scrollTop,
|
|
29
|
-
scrollHeight = _scrollTarget$current.scrollHeight,
|
|
30
|
-
clientHeight = _scrollTarget$current.clientHeight;
|
|
31
|
-
var target = scrollTarget.current;
|
|
32
|
-
var isDeltaPositive = delta > 0;
|
|
33
|
-
var availableScroll = scrollHeight - clientHeight - scrollTop;
|
|
34
|
-
var shouldCancelScroll = false;
|
|
35
|
-
|
|
36
|
-
// reset bottom/top flags
|
|
37
|
-
if (availableScroll > delta && isBottom.current) {
|
|
38
|
-
if (onBottomLeave) {
|
|
39
|
-
onBottomLeave(event);
|
|
40
|
-
}
|
|
41
|
-
isBottom.current = false;
|
|
42
|
-
}
|
|
43
|
-
if (isDeltaPositive && isTop.current) {
|
|
44
|
-
if (onTopLeave) {
|
|
45
|
-
onTopLeave(event);
|
|
46
|
-
}
|
|
47
|
-
isTop.current = false;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// bottom limit
|
|
51
|
-
if (isDeltaPositive && delta > availableScroll) {
|
|
52
|
-
if (onBottomArrive && !isBottom.current) {
|
|
53
|
-
onBottomArrive(event);
|
|
54
|
-
}
|
|
55
|
-
target.scrollTop = scrollHeight;
|
|
56
|
-
shouldCancelScroll = true;
|
|
57
|
-
isBottom.current = true;
|
|
58
|
-
|
|
59
|
-
// top limit
|
|
60
|
-
} else if (!isDeltaPositive && -delta > scrollTop) {
|
|
61
|
-
if (onTopArrive && !isTop.current) {
|
|
62
|
-
onTopArrive(event);
|
|
63
|
-
}
|
|
64
|
-
target.scrollTop = 0;
|
|
65
|
-
shouldCancelScroll = true;
|
|
66
|
-
isTop.current = true;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// cancel scroll
|
|
70
|
-
if (shouldCancelScroll) {
|
|
71
|
-
cancelScroll(event);
|
|
72
|
-
}
|
|
73
|
-
}, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
|
|
74
|
-
var onWheel = useCallback(function (event) {
|
|
75
|
-
handleEventDelta(event, event.deltaY);
|
|
76
|
-
}, [handleEventDelta]);
|
|
77
|
-
var onTouchStart = useCallback(function (event) {
|
|
78
|
-
// set touch start so we can calculate touchmove delta
|
|
79
|
-
touchStart.current = event.changedTouches[0].clientY;
|
|
80
|
-
}, []);
|
|
81
|
-
var onTouchMove = useCallback(function (event) {
|
|
82
|
-
var deltaY = touchStart.current - event.changedTouches[0].clientY;
|
|
83
|
-
handleEventDelta(event, deltaY);
|
|
84
|
-
}, [handleEventDelta]);
|
|
85
|
-
var startListening = useCallback(function (el) {
|
|
86
|
-
// bail early if no element is available to attach to
|
|
87
|
-
if (!el) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
var notPassive = supportsPassiveEvents ? {
|
|
91
|
-
passive: false
|
|
92
|
-
} : false;
|
|
93
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
94
|
-
el.addEventListener('wheel', onWheel, notPassive);
|
|
95
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
96
|
-
el.addEventListener('touchstart', onTouchStart, notPassive);
|
|
97
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
98
|
-
el.addEventListener('touchmove', onTouchMove, notPassive);
|
|
99
|
-
}, [onTouchMove, onTouchStart, onWheel]);
|
|
100
|
-
var stopListening = useCallback(function (el) {
|
|
101
|
-
// bail early if no element is available to detach from
|
|
102
|
-
if (!el) {
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
107
|
-
el.removeEventListener('wheel', onWheel, false);
|
|
108
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
109
|
-
el.removeEventListener('touchstart', onTouchStart, false);
|
|
110
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
111
|
-
el.removeEventListener('touchmove', onTouchMove, false);
|
|
112
|
-
}, [onTouchMove, onTouchStart, onWheel]);
|
|
113
|
-
useEffect(function () {
|
|
114
|
-
if (!isEnabled) {
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
var element = scrollTarget.current;
|
|
118
|
-
startListening(element);
|
|
119
|
-
return function () {
|
|
120
|
-
stopListening(element);
|
|
121
|
-
};
|
|
122
|
-
}, [isEnabled, startListening, stopListening]);
|
|
123
|
-
return function (element) {
|
|
124
|
-
scrollTarget.current = element;
|
|
125
|
-
};
|
|
126
|
-
}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
-
var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
|
|
3
|
-
var LOCK_STYLES = {
|
|
4
|
-
boxSizing: 'border-box',
|
|
5
|
-
// account for possible declaration `width: 100%;` on body
|
|
6
|
-
overflow: 'hidden',
|
|
7
|
-
position: 'relative',
|
|
8
|
-
height: '100%'
|
|
9
|
-
};
|
|
10
|
-
function preventTouchMove(e) {
|
|
11
|
-
e.preventDefault();
|
|
12
|
-
}
|
|
13
|
-
function allowTouchMove(e) {
|
|
14
|
-
e.stopPropagation();
|
|
15
|
-
}
|
|
16
|
-
function preventInertiaScroll() {
|
|
17
|
-
var top = this.scrollTop;
|
|
18
|
-
var totalScroll = this.scrollHeight;
|
|
19
|
-
var currentScroll = top + this.offsetHeight;
|
|
20
|
-
if (top === 0) {
|
|
21
|
-
this.scrollTop = 1;
|
|
22
|
-
} else if (currentScroll === totalScroll) {
|
|
23
|
-
this.scrollTop = top - 1;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// `ontouchstart` check works on most browsers
|
|
28
|
-
// `maxTouchPoints` works on IE10/11 and Surface
|
|
29
|
-
function isTouchDevice() {
|
|
30
|
-
// eslint-disable-next-line compat/compat
|
|
31
|
-
return 'ontouchstart' in window || navigator.maxTouchPoints;
|
|
32
|
-
}
|
|
33
|
-
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
34
|
-
var activeScrollLocks = 0;
|
|
35
|
-
var listenerOptions = {
|
|
36
|
-
capture: false,
|
|
37
|
-
passive: false
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// TODO: Fill in the hook {description}.
|
|
41
|
-
/**
|
|
42
|
-
* {description}.
|
|
43
|
-
*/
|
|
44
|
-
export default function useScrollLock(_ref) {
|
|
45
|
-
var isEnabled = _ref.isEnabled,
|
|
46
|
-
_ref$accountForScroll = _ref.accountForScrollbars,
|
|
47
|
-
accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
|
|
48
|
-
var originalStyles = useRef({});
|
|
49
|
-
var scrollTarget = useRef(null);
|
|
50
|
-
var addScrollLock = useCallback(function (touchScrollTarget) {
|
|
51
|
-
if (!canUseDOM) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
var target = document.body;
|
|
55
|
-
var targetStyle = target && target.style;
|
|
56
|
-
if (accountForScrollbars) {
|
|
57
|
-
// store any styles already applied to the body
|
|
58
|
-
STYLE_KEYS.forEach(function (key) {
|
|
59
|
-
var val = targetStyle && targetStyle[key];
|
|
60
|
-
originalStyles.current[key] = val;
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// apply the lock styles and padding if this is the first scroll lock
|
|
65
|
-
if (accountForScrollbars && activeScrollLocks < 1) {
|
|
66
|
-
var currentPadding = parseInt(originalStyles.current.paddingRight, 10) || 0;
|
|
67
|
-
var clientWidth = document.body ? document.body.clientWidth : 0;
|
|
68
|
-
var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
|
|
69
|
-
Object.keys(LOCK_STYLES).forEach(function (key) {
|
|
70
|
-
var val = LOCK_STYLES[key];
|
|
71
|
-
if (targetStyle) {
|
|
72
|
-
targetStyle[key] = val;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
if (targetStyle) {
|
|
76
|
-
targetStyle.paddingRight = "".concat(adjustedPadding, "px");
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// account for touch devices
|
|
81
|
-
if (target && isTouchDevice()) {
|
|
82
|
-
// Mobile Safari ignores { overflow: hidden } declaration on the body.
|
|
83
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
84
|
-
target.addEventListener('touchmove', preventTouchMove, listenerOptions);
|
|
85
|
-
|
|
86
|
-
// Allow scroll on provided target
|
|
87
|
-
if (touchScrollTarget) {
|
|
88
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
89
|
-
touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, listenerOptions);
|
|
90
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
91
|
-
touchScrollTarget.addEventListener('touchmove', allowTouchMove, listenerOptions);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// increment active scroll locks
|
|
96
|
-
activeScrollLocks += 1;
|
|
97
|
-
}, [accountForScrollbars]);
|
|
98
|
-
var removeScrollLock = useCallback(function (touchScrollTarget) {
|
|
99
|
-
if (!canUseDOM) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
var target = document.body;
|
|
103
|
-
var targetStyle = target && target.style;
|
|
104
|
-
|
|
105
|
-
// safely decrement active scroll locks
|
|
106
|
-
activeScrollLocks = Math.max(activeScrollLocks - 1, 0);
|
|
107
|
-
|
|
108
|
-
// reapply original body styles, if any
|
|
109
|
-
if (accountForScrollbars && activeScrollLocks < 1) {
|
|
110
|
-
STYLE_KEYS.forEach(function (key) {
|
|
111
|
-
var val = originalStyles.current[key];
|
|
112
|
-
if (targetStyle) {
|
|
113
|
-
targetStyle[key] = val;
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// remove touch listeners
|
|
119
|
-
if (target && isTouchDevice()) {
|
|
120
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
121
|
-
target.removeEventListener('touchmove', preventTouchMove, listenerOptions);
|
|
122
|
-
if (touchScrollTarget) {
|
|
123
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
124
|
-
touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, listenerOptions);
|
|
125
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
126
|
-
touchScrollTarget.removeEventListener('touchmove', allowTouchMove, listenerOptions);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}, [accountForScrollbars]);
|
|
130
|
-
useEffect(function () {
|
|
131
|
-
if (!isEnabled) {
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
var element = scrollTarget.current;
|
|
135
|
-
addScrollLock(element);
|
|
136
|
-
return function () {
|
|
137
|
-
removeScrollLock(element);
|
|
138
|
-
};
|
|
139
|
-
}, [isEnabled, addScrollLock, removeScrollLock]);
|
|
140
|
-
return function (element) {
|
|
141
|
-
scrollTarget.current = element;
|
|
142
|
-
};
|
|
143
|
-
}
|