@atlaskit/react-select 2.7.6 → 3.0.1
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 +33 -0
- package/dist/cjs/components/containers.compiled.css +26 -0
- package/dist/cjs/components/containers.js +80 -13
- package/dist/cjs/components/control.js +50 -9
- package/dist/cjs/components/group.js +60 -12
- package/dist/cjs/components/indicators.js +128 -15
- package/dist/cjs/components/input.js +50 -9
- package/dist/cjs/components/internal/a11y-text.js +14 -7
- package/dist/cjs/components/internal/dummy-input.js +21 -7
- package/dist/cjs/components/internal/required-input.js +24 -8
- package/dist/cjs/components/live-region.js +101 -7
- package/dist/cjs/components/menu.js +436 -27
- package/dist/cjs/components/multi-value.js +148 -22
- package/dist/cjs/components/option.js +41 -9
- package/dist/cjs/components/placeholder.js +29 -9
- package/dist/cjs/components/single-value.js +30 -9
- package/dist/cjs/select.js +1 -1
- package/dist/es2019/components/containers.compiled.css +26 -0
- package/dist/es2019/components/containers.js +93 -10
- package/dist/es2019/components/control.js +54 -8
- package/dist/es2019/components/group.js +67 -9
- package/dist/es2019/components/indicators.js +131 -11
- package/dist/es2019/components/input.js +53 -7
- package/dist/es2019/components/internal/a11y-text.js +12 -6
- package/dist/es2019/components/internal/dummy-input.js +19 -7
- package/dist/es2019/components/internal/required-input.js +22 -6
- package/dist/es2019/components/live-region.js +104 -6
- package/dist/es2019/components/menu.js +444 -19
- package/dist/es2019/components/multi-value.js +157 -15
- package/dist/es2019/components/option.js +45 -7
- package/dist/es2019/components/placeholder.js +33 -7
- package/dist/es2019/components/single-value.js +34 -7
- package/dist/es2019/select.js +1 -1
- package/dist/esm/components/containers.compiled.css +26 -0
- package/dist/esm/components/containers.js +78 -12
- package/dist/esm/components/control.js +51 -8
- package/dist/esm/components/group.js +60 -11
- package/dist/esm/components/indicators.js +127 -15
- package/dist/esm/components/input.js +50 -8
- package/dist/esm/components/internal/a11y-text.js +12 -6
- package/dist/esm/components/internal/dummy-input.js +20 -7
- package/dist/esm/components/internal/required-input.js +22 -7
- package/dist/esm/components/live-region.js +99 -6
- package/dist/esm/components/menu.js +437 -27
- package/dist/esm/components/multi-value.js +148 -21
- package/dist/esm/components/option.js +41 -8
- package/dist/esm/components/placeholder.js +29 -8
- package/dist/esm/components/single-value.js +30 -8
- package/dist/esm/select.js +1 -1
- package/dist/types/components/containers.d.ts +12 -8
- package/dist/types/components/control.d.ts +7 -3
- package/dist/types/components/group.d.ts +10 -6
- package/dist/types/components/index.d.ts +21 -21
- package/dist/types/components/indicators.d.ts +12 -8
- package/dist/types/components/input.d.ts +8 -4
- package/dist/types/components/internal/a11y-text.d.ts +2 -2
- package/dist/types/components/internal/dummy-input.d.ts +7 -3
- package/dist/types/components/internal/required-input.d.ts +4 -0
- package/dist/types/components/live-region.d.ts +0 -2
- package/dist/types/components/menu.d.ts +17 -13
- package/dist/types/components/multi-value.d.ts +13 -9
- package/dist/types/components/option.d.ts +8 -4
- package/dist/types/components/placeholder.d.ts +8 -4
- package/dist/types/components/single-value.d.ts +8 -4
- package/dist/types/select.d.ts +23 -25
- package/dist/types-ts4.5/components/containers.d.ts +12 -8
- package/dist/types-ts4.5/components/control.d.ts +7 -3
- package/dist/types-ts4.5/components/group.d.ts +10 -6
- package/dist/types-ts4.5/components/index.d.ts +21 -21
- package/dist/types-ts4.5/components/indicators.d.ts +12 -8
- package/dist/types-ts4.5/components/input.d.ts +8 -4
- package/dist/types-ts4.5/components/internal/a11y-text.d.ts +2 -2
- package/dist/types-ts4.5/components/internal/dummy-input.d.ts +7 -3
- package/dist/types-ts4.5/components/internal/required-input.d.ts +4 -0
- package/dist/types-ts4.5/components/live-region.d.ts +0 -2
- package/dist/types-ts4.5/components/menu.d.ts +17 -13
- package/dist/types-ts4.5/components/multi-value.d.ts +13 -9
- package/dist/types-ts4.5/components/option.d.ts +8 -4
- package/dist/types-ts4.5/components/placeholder.d.ts +8 -4
- package/dist/types-ts4.5/components/single-value.d.ts +8 -4
- package/dist/types-ts4.5/select.d.ts +23 -25
- package/package.json +3 -3
- package/dist/cjs/compiled/components/control.js +0 -65
- package/dist/cjs/compiled/components/group.js +0 -80
- package/dist/cjs/compiled/components/indicators.js +0 -158
- package/dist/cjs/compiled/components/input.js +0 -65
- package/dist/cjs/compiled/components/internal/a11y-text.js +0 -24
- package/dist/cjs/compiled/components/internal/dummy-input.js +0 -30
- package/dist/cjs/compiled/components/internal/required-input.js +0 -35
- package/dist/cjs/compiled/components/live-region.js +0 -117
- package/dist/cjs/compiled/components/menu.js +0 -489
- package/dist/cjs/compiled/components/multi-value.js +0 -173
- package/dist/cjs/compiled/components/option.js +0 -56
- package/dist/cjs/compiled/components/placeholder.js +0 -44
- package/dist/cjs/compiled/components/single-value.js +0 -45
- package/dist/cjs/emotion/components/containers.js +0 -117
- package/dist/cjs/emotion/components/control.js +0 -112
- package/dist/cjs/emotion/components/group.js +0 -72
- package/dist/cjs/emotion/components/indicators.js +0 -140
- package/dist/cjs/emotion/components/input.js +0 -94
- package/dist/cjs/emotion/components/internal/a11y-text.js +0 -37
- package/dist/cjs/emotion/components/internal/dummy-input.js +0 -45
- package/dist/cjs/emotion/components/internal/index.js +0 -34
- package/dist/cjs/emotion/components/internal/required-input.js +0 -45
- package/dist/cjs/emotion/components/internal/scroll-manager.js +0 -59
- 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/cjs/emotion/components/live-region.js +0 -120
- package/dist/cjs/emotion/components/menu.js +0 -456
- package/dist/cjs/emotion/components/multi-value.js +0 -199
- package/dist/cjs/emotion/components/option.js +0 -84
- package/dist/cjs/emotion/components/placeholder.js +0 -36
- package/dist/cjs/emotion/components/single-value.js +0 -42
- package/dist/es2019/compiled/components/control.js +0 -58
- package/dist/es2019/compiled/components/group.js +0 -72
- package/dist/es2019/compiled/components/indicators.js +0 -146
- package/dist/es2019/compiled/components/input.js +0 -56
- package/dist/es2019/compiled/components/internal/a11y-text.js +0 -13
- package/dist/es2019/compiled/components/internal/dummy-input.js +0 -20
- package/dist/es2019/compiled/components/internal/required-input.js +0 -25
- package/dist/es2019/compiled/components/live-region.js +0 -112
- package/dist/es2019/compiled/components/menu.js +0 -477
- package/dist/es2019/compiled/components/multi-value.js +0 -165
- package/dist/es2019/compiled/components/option.js +0 -48
- package/dist/es2019/compiled/components/placeholder.js +0 -36
- package/dist/es2019/compiled/components/single-value.js +0 -37
- package/dist/es2019/emotion/components/containers.js +0 -114
- package/dist/es2019/emotion/components/control.js +0 -108
- package/dist/es2019/emotion/components/group.js +0 -60
- package/dist/es2019/emotion/components/indicators.js +0 -131
- package/dist/es2019/emotion/components/input.js +0 -87
- package/dist/es2019/emotion/components/internal/a11y-text.js +0 -28
- package/dist/es2019/emotion/components/internal/dummy-input.js +0 -38
- package/dist/es2019/emotion/components/internal/index.js +0 -4
- package/dist/es2019/emotion/components/internal/required-input.js +0 -36
- package/dist/es2019/emotion/components/internal/scroll-manager.js +0 -51
- 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/es2019/emotion/components/live-region.js +0 -120
- package/dist/es2019/emotion/components/menu.js +0 -452
- package/dist/es2019/emotion/components/multi-value.js +0 -203
- package/dist/es2019/emotion/components/option.js +0 -79
- package/dist/es2019/emotion/components/placeholder.js +0 -29
- package/dist/es2019/emotion/components/single-value.js +0 -35
- package/dist/esm/compiled/components/control.js +0 -57
- package/dist/esm/compiled/components/group.js +0 -71
- package/dist/esm/compiled/components/indicators.js +0 -150
- package/dist/esm/compiled/components/input.js +0 -56
- package/dist/esm/compiled/components/internal/a11y-text.js +0 -15
- package/dist/esm/compiled/components/internal/dummy-input.js +0 -21
- package/dist/esm/compiled/components/internal/required-input.js +0 -26
- package/dist/esm/compiled/components/live-region.js +0 -109
- package/dist/esm/compiled/components/menu.js +0 -484
- package/dist/esm/compiled/components/multi-value.js +0 -162
- package/dist/esm/compiled/components/option.js +0 -47
- package/dist/esm/compiled/components/placeholder.js +0 -35
- package/dist/esm/compiled/components/single-value.js +0 -36
- package/dist/esm/emotion/components/containers.js +0 -110
- package/dist/esm/emotion/components/control.js +0 -104
- package/dist/esm/emotion/components/group.js +0 -66
- package/dist/esm/emotion/components/indicators.js +0 -135
- package/dist/esm/emotion/components/input.js +0 -90
- package/dist/esm/emotion/components/internal/a11y-text.js +0 -30
- package/dist/esm/emotion/components/internal/dummy-input.js +0 -39
- package/dist/esm/emotion/components/internal/index.js +0 -4
- package/dist/esm/emotion/components/internal/required-input.js +0 -37
- package/dist/esm/emotion/components/internal/scroll-manager.js +0 -51
- 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/esm/emotion/components/live-region.js +0 -117
- package/dist/esm/emotion/components/menu.js +0 -456
- package/dist/esm/emotion/components/multi-value.js +0 -193
- package/dist/esm/emotion/components/option.js +0 -76
- package/dist/esm/emotion/components/placeholder.js +0 -28
- package/dist/esm/emotion/components/single-value.js +0 -34
- package/dist/types/compiled/components/control.d.ts +0 -41
- package/dist/types/compiled/components/group.d.ts +0 -54
- package/dist/types/compiled/components/indicators.d.ts +0 -72
- package/dist/types/compiled/components/input.d.ts +0 -36
- package/dist/types/compiled/components/internal/a11y-text.d.ts +0 -3
- package/dist/types/compiled/components/internal/dummy-input.d.ts +0 -8
- package/dist/types/compiled/components/internal/required-input.d.ts +0 -10
- package/dist/types/compiled/components/live-region.d.ts +0 -17
- package/dist/types/compiled/components/menu.d.ts +0 -115
- package/dist/types/compiled/components/multi-value.d.ts +0 -57
- package/dist/types/compiled/components/option.d.ts +0 -48
- package/dist/types/compiled/components/placeholder.d.ts +0 -21
- package/dist/types/compiled/components/single-value.d.ts +0 -27
- package/dist/types/emotion/components/containers.d.ts +0 -54
- package/dist/types/emotion/components/control.d.ts +0 -42
- package/dist/types/emotion/components/group.d.ts +0 -52
- package/dist/types/emotion/components/indicators.d.ts +0 -73
- package/dist/types/emotion/components/input.d.ts +0 -37
- package/dist/types/emotion/components/internal/a11y-text.d.ts +0 -8
- package/dist/types/emotion/components/internal/dummy-input.d.ts +0 -9
- package/dist/types/emotion/components/internal/index.d.ts +0 -4
- package/dist/types/emotion/components/internal/required-input.d.ts +0 -10
- 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/emotion/components/live-region.d.ts +0 -23
- package/dist/types/emotion/components/menu.d.ts +0 -116
- package/dist/types/emotion/components/multi-value.d.ts +0 -47
- package/dist/types/emotion/components/option.d.ts +0 -49
- package/dist/types/emotion/components/placeholder.d.ts +0 -22
- package/dist/types/emotion/components/single-value.d.ts +0 -28
- package/dist/types-ts4.5/compiled/components/control.d.ts +0 -41
- package/dist/types-ts4.5/compiled/components/group.d.ts +0 -54
- package/dist/types-ts4.5/compiled/components/indicators.d.ts +0 -72
- package/dist/types-ts4.5/compiled/components/input.d.ts +0 -36
- package/dist/types-ts4.5/compiled/components/internal/a11y-text.d.ts +0 -3
- package/dist/types-ts4.5/compiled/components/internal/dummy-input.d.ts +0 -8
- package/dist/types-ts4.5/compiled/components/internal/required-input.d.ts +0 -10
- package/dist/types-ts4.5/compiled/components/live-region.d.ts +0 -17
- package/dist/types-ts4.5/compiled/components/menu.d.ts +0 -115
- package/dist/types-ts4.5/compiled/components/multi-value.d.ts +0 -57
- package/dist/types-ts4.5/compiled/components/option.d.ts +0 -48
- package/dist/types-ts4.5/compiled/components/placeholder.d.ts +0 -21
- package/dist/types-ts4.5/compiled/components/single-value.d.ts +0 -27
- package/dist/types-ts4.5/emotion/components/containers.d.ts +0 -54
- package/dist/types-ts4.5/emotion/components/control.d.ts +0 -42
- package/dist/types-ts4.5/emotion/components/group.d.ts +0 -52
- package/dist/types-ts4.5/emotion/components/indicators.d.ts +0 -73
- package/dist/types-ts4.5/emotion/components/input.d.ts +0 -37
- package/dist/types-ts4.5/emotion/components/internal/a11y-text.d.ts +0 -8
- package/dist/types-ts4.5/emotion/components/internal/dummy-input.d.ts +0 -9
- package/dist/types-ts4.5/emotion/components/internal/index.d.ts +0 -4
- package/dist/types-ts4.5/emotion/components/internal/required-input.d.ts +0 -10
- 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
- package/dist/types-ts4.5/emotion/components/live-region.d.ts +0 -23
- package/dist/types-ts4.5/emotion/components/menu.d.ts +0 -116
- package/dist/types-ts4.5/emotion/components/multi-value.d.ts +0 -47
- package/dist/types-ts4.5/emotion/components/option.d.ts +0 -49
- package/dist/types-ts4.5/emotion/components/placeholder.d.ts +0 -22
- package/dist/types-ts4.5/emotion/components/single-value.d.ts +0 -28
- /package/dist/cjs/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/cjs/{compiled/components → components}/single-value.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/es2019/{compiled/components → components}/single-value.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/control.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/group.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/indicators.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/internal/required-input.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/menu.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/multi-value.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/option.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/placeholder.compiled.css +0 -0
- /package/dist/esm/{compiled/components → components}/single-value.compiled.css +0 -0
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { Fragment } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
8
|
-
import { css, jsx } from '@emotion/react';
|
|
9
|
-
import useScrollCapture from './use-scroll-capture';
|
|
10
|
-
import useScrollLock from './use-scroll-lock';
|
|
11
|
-
const styles = css({
|
|
12
|
-
position: 'fixed',
|
|
13
|
-
insetBlockEnd: 0,
|
|
14
|
-
insetBlockStart: 0,
|
|
15
|
-
insetInlineEnd: 0,
|
|
16
|
-
insetInlineStart: 0
|
|
17
|
-
});
|
|
18
|
-
const blurSelectInput = event => {
|
|
19
|
-
const element = event.target;
|
|
20
|
-
return element.ownerDocument.activeElement && element.ownerDocument.activeElement.blur();
|
|
21
|
-
};
|
|
22
|
-
export default function ScrollManager({
|
|
23
|
-
children,
|
|
24
|
-
lockEnabled,
|
|
25
|
-
captureEnabled = true,
|
|
26
|
-
onBottomArrive,
|
|
27
|
-
onBottomLeave,
|
|
28
|
-
onTopArrive,
|
|
29
|
-
onTopLeave
|
|
30
|
-
}) {
|
|
31
|
-
const setScrollCaptureTarget = useScrollCapture({
|
|
32
|
-
isEnabled: captureEnabled,
|
|
33
|
-
onBottomArrive,
|
|
34
|
-
onBottomLeave,
|
|
35
|
-
onTopArrive,
|
|
36
|
-
onTopLeave
|
|
37
|
-
});
|
|
38
|
-
const setScrollLockTarget = useScrollLock({
|
|
39
|
-
isEnabled: lockEnabled
|
|
40
|
-
});
|
|
41
|
-
const targetRef = element => {
|
|
42
|
-
setScrollCaptureTarget(element);
|
|
43
|
-
setScrollLockTarget(element);
|
|
44
|
-
};
|
|
45
|
-
return jsx(Fragment, null, lockEnabled &&
|
|
46
|
-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
|
|
47
|
-
jsx("div", {
|
|
48
|
-
onClick: blurSelectInput,
|
|
49
|
-
css: styles
|
|
50
|
-
}), children(targetRef));
|
|
51
|
-
}
|
|
@@ -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,120 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
* @jsxFrag React.Fragment
|
|
5
|
-
*/
|
|
6
|
-
import { Fragment, useMemo } from 'react';
|
|
7
|
-
|
|
8
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
-
import { jsx } from '@emotion/react';
|
|
10
|
-
import { defaultAriaLiveMessages } from '../../accessibility';
|
|
11
|
-
import A11yText from './internal/a11y-text';
|
|
12
|
-
|
|
13
|
-
// ==============================
|
|
14
|
-
// Root Container
|
|
15
|
-
// ==============================
|
|
16
|
-
|
|
17
|
-
const LiveRegion = props => {
|
|
18
|
-
const {
|
|
19
|
-
ariaSelection,
|
|
20
|
-
focusableOptions,
|
|
21
|
-
isFocused,
|
|
22
|
-
selectValue,
|
|
23
|
-
selectProps,
|
|
24
|
-
id
|
|
25
|
-
} = props;
|
|
26
|
-
const {
|
|
27
|
-
ariaLiveMessages,
|
|
28
|
-
getOptionLabel,
|
|
29
|
-
inputValue,
|
|
30
|
-
isOptionDisabled,
|
|
31
|
-
menuIsOpen,
|
|
32
|
-
options,
|
|
33
|
-
screenReaderStatus,
|
|
34
|
-
isLoading
|
|
35
|
-
} = selectProps;
|
|
36
|
-
const ariaLive = selectProps['aria-live'];
|
|
37
|
-
|
|
38
|
-
// Update aria live message configuration when prop changes
|
|
39
|
-
const messages = useMemo(() => ({
|
|
40
|
-
...defaultAriaLiveMessages,
|
|
41
|
-
...(ariaLiveMessages || {})
|
|
42
|
-
}), [ariaLiveMessages]);
|
|
43
|
-
|
|
44
|
-
// Update aria live selected option when prop changes
|
|
45
|
-
const ariaSelected = useMemo(() => {
|
|
46
|
-
let message = '';
|
|
47
|
-
if (menuIsOpen) {
|
|
48
|
-
// we don't need to have selected message when the menu is open
|
|
49
|
-
return '';
|
|
50
|
-
}
|
|
51
|
-
if (ariaSelection && messages.onChange) {
|
|
52
|
-
const {
|
|
53
|
-
option,
|
|
54
|
-
options: selectedOptions,
|
|
55
|
-
removedValue,
|
|
56
|
-
removedValues,
|
|
57
|
-
value
|
|
58
|
-
} = ariaSelection;
|
|
59
|
-
// select-option when !isMulti does not return option so we assume selected option is value
|
|
60
|
-
const asOption = val => !Array.isArray(val) ? val : null;
|
|
61
|
-
|
|
62
|
-
// If there is just one item from the action then get its label
|
|
63
|
-
const selected = removedValue || option || asOption(value);
|
|
64
|
-
const label = selected ? getOptionLabel(selected) : '';
|
|
65
|
-
|
|
66
|
-
// If there are multiple items from the action then return an array of labels
|
|
67
|
-
const multiSelected = selectedOptions || removedValues || undefined;
|
|
68
|
-
const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
|
|
69
|
-
if (!label && !labels.length) {
|
|
70
|
-
// return empty string if no labels provided
|
|
71
|
-
return '';
|
|
72
|
-
}
|
|
73
|
-
const onChangeProps = {
|
|
74
|
-
// multiSelected items are usually items that have already been selected
|
|
75
|
-
// or set by the user as a default value so we assume they are not disabled
|
|
76
|
-
isDisabled: selected && isOptionDisabled(selected, selectValue),
|
|
77
|
-
label,
|
|
78
|
-
labels,
|
|
79
|
-
...ariaSelection
|
|
80
|
-
};
|
|
81
|
-
message = messages.onChange(onChangeProps);
|
|
82
|
-
}
|
|
83
|
-
return message;
|
|
84
|
-
}, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, menuIsOpen]);
|
|
85
|
-
const ariaResults = useMemo(() => {
|
|
86
|
-
let resultsMsg = '';
|
|
87
|
-
if (isLoading) {
|
|
88
|
-
resultsMsg = 'Loading. ';
|
|
89
|
-
}
|
|
90
|
-
if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
|
|
91
|
-
const resultsMessage = screenReaderStatus({
|
|
92
|
-
count: focusableOptions.length
|
|
93
|
-
});
|
|
94
|
-
resultsMsg = messages.onFilter({
|
|
95
|
-
inputValue,
|
|
96
|
-
resultsMessage
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
if (options && options.length === 0) {
|
|
100
|
-
resultsMsg = 'No options. ';
|
|
101
|
-
}
|
|
102
|
-
return resultsMsg;
|
|
103
|
-
}, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
|
|
104
|
-
const isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
|
|
105
|
-
const ScreenReaderText = jsx(Fragment, null, jsx("span", {
|
|
106
|
-
id: "aria-selection"
|
|
107
|
-
}, ariaSelected), jsx("span", {
|
|
108
|
-
id: "aria-results"
|
|
109
|
-
}, ariaResults));
|
|
110
|
-
return jsx(Fragment, null, jsx(A11yText, {
|
|
111
|
-
id: id
|
|
112
|
-
}, isInitialFocus && ScreenReaderText), jsx(A11yText, {
|
|
113
|
-
"aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
|
|
114
|
-
,
|
|
115
|
-
role: "status"
|
|
116
|
-
}, isFocused && !isInitialFocus && ScreenReaderText));
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
120
|
-
export default LiveRegion;
|