@atlaskit/react-select 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (276) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/components/containers.compiled.css +26 -0
  3. package/dist/cjs/components/containers.js +80 -12
  4. package/dist/cjs/components/control.js +50 -7
  5. package/dist/cjs/components/group.js +60 -10
  6. package/dist/cjs/components/indicators.js +128 -13
  7. package/dist/cjs/components/input.js +50 -7
  8. package/dist/cjs/components/internal/a11y-text.js +14 -5
  9. package/dist/cjs/components/internal/dummy-input.js +21 -5
  10. package/dist/cjs/components/internal/required-input.js +24 -6
  11. package/dist/cjs/components/live-region.js +101 -5
  12. package/dist/cjs/components/menu.js +436 -25
  13. package/dist/cjs/components/multi-value.js +148 -17
  14. package/dist/cjs/components/option.js +41 -7
  15. package/dist/cjs/components/placeholder.js +29 -7
  16. package/dist/cjs/components/single-value.js +30 -7
  17. package/dist/es2019/components/containers.compiled.css +26 -0
  18. package/dist/es2019/components/containers.js +93 -9
  19. package/dist/es2019/components/control.js +54 -6
  20. package/dist/es2019/components/group.js +67 -7
  21. package/dist/es2019/components/indicators.js +131 -9
  22. package/dist/es2019/components/input.js +53 -5
  23. package/dist/es2019/components/internal/a11y-text.js +12 -4
  24. package/dist/es2019/components/internal/dummy-input.js +19 -5
  25. package/dist/es2019/components/internal/required-input.js +22 -4
  26. package/dist/es2019/components/live-region.js +104 -4
  27. package/dist/es2019/components/menu.js +444 -17
  28. package/dist/es2019/components/multi-value.js +158 -11
  29. package/dist/es2019/components/option.js +45 -5
  30. package/dist/es2019/components/placeholder.js +33 -5
  31. package/dist/es2019/components/single-value.js +34 -5
  32. package/dist/esm/components/containers.compiled.css +26 -0
  33. package/dist/esm/components/containers.js +78 -11
  34. package/dist/esm/components/control.js +51 -6
  35. package/dist/esm/components/group.js +60 -9
  36. package/dist/esm/components/indicators.js +127 -13
  37. package/dist/esm/components/input.js +50 -6
  38. package/dist/esm/components/internal/a11y-text.js +12 -4
  39. package/dist/esm/components/internal/dummy-input.js +20 -5
  40. package/dist/esm/components/internal/required-input.js +22 -5
  41. package/dist/esm/components/live-region.js +99 -4
  42. package/dist/esm/components/menu.js +437 -25
  43. package/dist/esm/components/multi-value.js +148 -16
  44. package/dist/esm/components/option.js +41 -6
  45. package/dist/esm/components/placeholder.js +29 -6
  46. package/dist/esm/components/single-value.js +30 -6
  47. package/dist/types/components/containers.d.ts +12 -8
  48. package/dist/types/components/control.d.ts +7 -3
  49. package/dist/types/components/group.d.ts +10 -6
  50. package/dist/types/components/index.d.ts +21 -21
  51. package/dist/types/components/indicators.d.ts +12 -8
  52. package/dist/types/components/input.d.ts +8 -4
  53. package/dist/types/components/internal/a11y-text.d.ts +2 -2
  54. package/dist/types/components/internal/dummy-input.d.ts +7 -3
  55. package/dist/types/components/internal/required-input.d.ts +4 -0
  56. package/dist/types/components/live-region.d.ts +0 -2
  57. package/dist/types/components/menu.d.ts +17 -13
  58. package/dist/types/components/multi-value.d.ts +13 -9
  59. package/dist/types/components/option.d.ts +8 -4
  60. package/dist/types/components/placeholder.d.ts +8 -4
  61. package/dist/types/components/single-value.d.ts +8 -4
  62. package/dist/types/select.d.ts +23 -23
  63. package/dist/types/styles.d.ts +21 -21
  64. package/dist/types/types.d.ts +1 -4
  65. package/dist/types/utils.d.ts +1 -1
  66. package/dist/types-ts4.5/components/containers.d.ts +12 -8
  67. package/dist/types-ts4.5/components/control.d.ts +7 -3
  68. package/dist/types-ts4.5/components/group.d.ts +10 -6
  69. package/dist/types-ts4.5/components/index.d.ts +21 -21
  70. package/dist/types-ts4.5/components/indicators.d.ts +12 -8
  71. package/dist/types-ts4.5/components/input.d.ts +8 -4
  72. package/dist/types-ts4.5/components/internal/a11y-text.d.ts +2 -2
  73. package/dist/types-ts4.5/components/internal/dummy-input.d.ts +7 -3
  74. package/dist/types-ts4.5/components/internal/required-input.d.ts +4 -0
  75. package/dist/types-ts4.5/components/live-region.d.ts +0 -2
  76. package/dist/types-ts4.5/components/menu.d.ts +17 -13
  77. package/dist/types-ts4.5/components/multi-value.d.ts +13 -9
  78. package/dist/types-ts4.5/components/option.d.ts +8 -4
  79. package/dist/types-ts4.5/components/placeholder.d.ts +8 -4
  80. package/dist/types-ts4.5/components/single-value.d.ts +8 -4
  81. package/dist/types-ts4.5/select.d.ts +23 -23
  82. package/dist/types-ts4.5/styles.d.ts +21 -21
  83. package/dist/types-ts4.5/types.d.ts +1 -4
  84. package/dist/types-ts4.5/utils.d.ts +1 -1
  85. package/package.json +2 -4
  86. package/dist/cjs/compiled/components/control.js +0 -65
  87. package/dist/cjs/compiled/components/group.js +0 -80
  88. package/dist/cjs/compiled/components/indicators.js +0 -158
  89. package/dist/cjs/compiled/components/input.js +0 -65
  90. package/dist/cjs/compiled/components/internal/a11y-text.js +0 -24
  91. package/dist/cjs/compiled/components/internal/dummy-input.js +0 -30
  92. package/dist/cjs/compiled/components/internal/required-input.js +0 -35
  93. package/dist/cjs/compiled/components/live-region.js +0 -117
  94. package/dist/cjs/compiled/components/menu.js +0 -489
  95. package/dist/cjs/compiled/components/multi-value.js +0 -173
  96. package/dist/cjs/compiled/components/option.js +0 -56
  97. package/dist/cjs/compiled/components/placeholder.js +0 -44
  98. package/dist/cjs/compiled/components/single-value.js +0 -45
  99. package/dist/cjs/emotion/components/containers.js +0 -117
  100. package/dist/cjs/emotion/components/control.js +0 -112
  101. package/dist/cjs/emotion/components/group.js +0 -72
  102. package/dist/cjs/emotion/components/indicators.js +0 -140
  103. package/dist/cjs/emotion/components/input.js +0 -94
  104. package/dist/cjs/emotion/components/internal/a11y-text.js +0 -37
  105. package/dist/cjs/emotion/components/internal/dummy-input.js +0 -45
  106. package/dist/cjs/emotion/components/internal/index.js +0 -34
  107. package/dist/cjs/emotion/components/internal/required-input.js +0 -45
  108. package/dist/cjs/emotion/components/internal/scroll-manager.js +0 -59
  109. package/dist/cjs/emotion/components/internal/use-scroll-capture.js +0 -132
  110. package/dist/cjs/emotion/components/internal/use-scroll-lock.js +0 -149
  111. package/dist/cjs/emotion/components/live-region.js +0 -120
  112. package/dist/cjs/emotion/components/menu.js +0 -456
  113. package/dist/cjs/emotion/components/multi-value.js +0 -199
  114. package/dist/cjs/emotion/components/option.js +0 -84
  115. package/dist/cjs/emotion/components/placeholder.js +0 -36
  116. package/dist/cjs/emotion/components/single-value.js +0 -42
  117. package/dist/es2019/compiled/components/control.js +0 -58
  118. package/dist/es2019/compiled/components/group.js +0 -72
  119. package/dist/es2019/compiled/components/indicators.js +0 -146
  120. package/dist/es2019/compiled/components/input.js +0 -56
  121. package/dist/es2019/compiled/components/internal/a11y-text.js +0 -13
  122. package/dist/es2019/compiled/components/internal/dummy-input.js +0 -20
  123. package/dist/es2019/compiled/components/internal/required-input.js +0 -25
  124. package/dist/es2019/compiled/components/live-region.js +0 -112
  125. package/dist/es2019/compiled/components/menu.js +0 -477
  126. package/dist/es2019/compiled/components/multi-value.js +0 -165
  127. package/dist/es2019/compiled/components/option.js +0 -48
  128. package/dist/es2019/compiled/components/placeholder.js +0 -36
  129. package/dist/es2019/compiled/components/single-value.js +0 -37
  130. package/dist/es2019/emotion/components/containers.js +0 -114
  131. package/dist/es2019/emotion/components/control.js +0 -108
  132. package/dist/es2019/emotion/components/group.js +0 -60
  133. package/dist/es2019/emotion/components/indicators.js +0 -131
  134. package/dist/es2019/emotion/components/input.js +0 -87
  135. package/dist/es2019/emotion/components/internal/a11y-text.js +0 -28
  136. package/dist/es2019/emotion/components/internal/dummy-input.js +0 -38
  137. package/dist/es2019/emotion/components/internal/index.js +0 -4
  138. package/dist/es2019/emotion/components/internal/required-input.js +0 -36
  139. package/dist/es2019/emotion/components/internal/scroll-manager.js +0 -51
  140. package/dist/es2019/emotion/components/internal/use-scroll-capture.js +0 -128
  141. package/dist/es2019/emotion/components/internal/use-scroll-lock.js +0 -143
  142. package/dist/es2019/emotion/components/live-region.js +0 -120
  143. package/dist/es2019/emotion/components/menu.js +0 -452
  144. package/dist/es2019/emotion/components/multi-value.js +0 -203
  145. package/dist/es2019/emotion/components/option.js +0 -79
  146. package/dist/es2019/emotion/components/placeholder.js +0 -29
  147. package/dist/es2019/emotion/components/single-value.js +0 -35
  148. package/dist/esm/compiled/components/control.js +0 -57
  149. package/dist/esm/compiled/components/group.js +0 -71
  150. package/dist/esm/compiled/components/indicators.js +0 -150
  151. package/dist/esm/compiled/components/input.js +0 -56
  152. package/dist/esm/compiled/components/internal/a11y-text.js +0 -15
  153. package/dist/esm/compiled/components/internal/dummy-input.js +0 -21
  154. package/dist/esm/compiled/components/internal/required-input.js +0 -26
  155. package/dist/esm/compiled/components/live-region.js +0 -109
  156. package/dist/esm/compiled/components/menu.js +0 -484
  157. package/dist/esm/compiled/components/multi-value.js +0 -162
  158. package/dist/esm/compiled/components/option.js +0 -47
  159. package/dist/esm/compiled/components/placeholder.js +0 -35
  160. package/dist/esm/compiled/components/single-value.js +0 -36
  161. package/dist/esm/emotion/components/containers.js +0 -110
  162. package/dist/esm/emotion/components/control.js +0 -104
  163. package/dist/esm/emotion/components/group.js +0 -66
  164. package/dist/esm/emotion/components/indicators.js +0 -135
  165. package/dist/esm/emotion/components/input.js +0 -90
  166. package/dist/esm/emotion/components/internal/a11y-text.js +0 -30
  167. package/dist/esm/emotion/components/internal/dummy-input.js +0 -39
  168. package/dist/esm/emotion/components/internal/index.js +0 -4
  169. package/dist/esm/emotion/components/internal/required-input.js +0 -37
  170. package/dist/esm/emotion/components/internal/scroll-manager.js +0 -51
  171. package/dist/esm/emotion/components/internal/use-scroll-capture.js +0 -126
  172. package/dist/esm/emotion/components/internal/use-scroll-lock.js +0 -143
  173. package/dist/esm/emotion/components/live-region.js +0 -117
  174. package/dist/esm/emotion/components/menu.js +0 -456
  175. package/dist/esm/emotion/components/multi-value.js +0 -193
  176. package/dist/esm/emotion/components/option.js +0 -76
  177. package/dist/esm/emotion/components/placeholder.js +0 -28
  178. package/dist/esm/emotion/components/single-value.js +0 -34
  179. package/dist/types/compiled/components/control.d.ts +0 -41
  180. package/dist/types/compiled/components/group.d.ts +0 -54
  181. package/dist/types/compiled/components/indicators.d.ts +0 -72
  182. package/dist/types/compiled/components/input.d.ts +0 -36
  183. package/dist/types/compiled/components/internal/a11y-text.d.ts +0 -3
  184. package/dist/types/compiled/components/internal/dummy-input.d.ts +0 -8
  185. package/dist/types/compiled/components/internal/required-input.d.ts +0 -10
  186. package/dist/types/compiled/components/live-region.d.ts +0 -17
  187. package/dist/types/compiled/components/menu.d.ts +0 -115
  188. package/dist/types/compiled/components/multi-value.d.ts +0 -57
  189. package/dist/types/compiled/components/option.d.ts +0 -48
  190. package/dist/types/compiled/components/placeholder.d.ts +0 -21
  191. package/dist/types/compiled/components/single-value.d.ts +0 -27
  192. package/dist/types/emotion/components/containers.d.ts +0 -54
  193. package/dist/types/emotion/components/control.d.ts +0 -42
  194. package/dist/types/emotion/components/group.d.ts +0 -52
  195. package/dist/types/emotion/components/indicators.d.ts +0 -73
  196. package/dist/types/emotion/components/input.d.ts +0 -37
  197. package/dist/types/emotion/components/internal/a11y-text.d.ts +0 -8
  198. package/dist/types/emotion/components/internal/dummy-input.d.ts +0 -9
  199. package/dist/types/emotion/components/internal/index.d.ts +0 -4
  200. package/dist/types/emotion/components/internal/required-input.d.ts +0 -10
  201. package/dist/types/emotion/components/internal/scroll-manager.d.ts +0 -17
  202. package/dist/types/emotion/components/internal/use-scroll-capture.d.ts +0 -12
  203. package/dist/types/emotion/components/internal/use-scroll-lock.d.ts +0 -9
  204. package/dist/types/emotion/components/live-region.d.ts +0 -23
  205. package/dist/types/emotion/components/menu.d.ts +0 -116
  206. package/dist/types/emotion/components/multi-value.d.ts +0 -47
  207. package/dist/types/emotion/components/option.d.ts +0 -49
  208. package/dist/types/emotion/components/placeholder.d.ts +0 -22
  209. package/dist/types/emotion/components/single-value.d.ts +0 -28
  210. package/dist/types-ts4.5/compiled/components/control.d.ts +0 -41
  211. package/dist/types-ts4.5/compiled/components/group.d.ts +0 -54
  212. package/dist/types-ts4.5/compiled/components/indicators.d.ts +0 -72
  213. package/dist/types-ts4.5/compiled/components/input.d.ts +0 -36
  214. package/dist/types-ts4.5/compiled/components/internal/a11y-text.d.ts +0 -3
  215. package/dist/types-ts4.5/compiled/components/internal/dummy-input.d.ts +0 -8
  216. package/dist/types-ts4.5/compiled/components/internal/required-input.d.ts +0 -10
  217. package/dist/types-ts4.5/compiled/components/live-region.d.ts +0 -17
  218. package/dist/types-ts4.5/compiled/components/menu.d.ts +0 -115
  219. package/dist/types-ts4.5/compiled/components/multi-value.d.ts +0 -57
  220. package/dist/types-ts4.5/compiled/components/option.d.ts +0 -48
  221. package/dist/types-ts4.5/compiled/components/placeholder.d.ts +0 -21
  222. package/dist/types-ts4.5/compiled/components/single-value.d.ts +0 -27
  223. package/dist/types-ts4.5/emotion/components/containers.d.ts +0 -54
  224. package/dist/types-ts4.5/emotion/components/control.d.ts +0 -42
  225. package/dist/types-ts4.5/emotion/components/group.d.ts +0 -52
  226. package/dist/types-ts4.5/emotion/components/indicators.d.ts +0 -73
  227. package/dist/types-ts4.5/emotion/components/input.d.ts +0 -37
  228. package/dist/types-ts4.5/emotion/components/internal/a11y-text.d.ts +0 -8
  229. package/dist/types-ts4.5/emotion/components/internal/dummy-input.d.ts +0 -9
  230. package/dist/types-ts4.5/emotion/components/internal/index.d.ts +0 -4
  231. package/dist/types-ts4.5/emotion/components/internal/required-input.d.ts +0 -10
  232. package/dist/types-ts4.5/emotion/components/internal/scroll-manager.d.ts +0 -17
  233. package/dist/types-ts4.5/emotion/components/internal/use-scroll-capture.d.ts +0 -12
  234. package/dist/types-ts4.5/emotion/components/internal/use-scroll-lock.d.ts +0 -9
  235. package/dist/types-ts4.5/emotion/components/live-region.d.ts +0 -23
  236. package/dist/types-ts4.5/emotion/components/menu.d.ts +0 -116
  237. package/dist/types-ts4.5/emotion/components/multi-value.d.ts +0 -47
  238. package/dist/types-ts4.5/emotion/components/option.d.ts +0 -49
  239. package/dist/types-ts4.5/emotion/components/placeholder.d.ts +0 -22
  240. package/dist/types-ts4.5/emotion/components/single-value.d.ts +0 -28
  241. /package/dist/cjs/{compiled/components → components}/control.compiled.css +0 -0
  242. /package/dist/cjs/{compiled/components → components}/group.compiled.css +0 -0
  243. /package/dist/cjs/{compiled/components → components}/indicators.compiled.css +0 -0
  244. /package/dist/cjs/{compiled/components → components}/input.compiled.css +0 -0
  245. /package/dist/cjs/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
  246. /package/dist/cjs/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
  247. /package/dist/cjs/{compiled/components → components}/internal/required-input.compiled.css +0 -0
  248. /package/dist/cjs/{compiled/components → components}/menu.compiled.css +0 -0
  249. /package/dist/cjs/{compiled/components → components}/multi-value.compiled.css +0 -0
  250. /package/dist/cjs/{compiled/components → components}/option.compiled.css +0 -0
  251. /package/dist/cjs/{compiled/components → components}/placeholder.compiled.css +0 -0
  252. /package/dist/cjs/{compiled/components → components}/single-value.compiled.css +0 -0
  253. /package/dist/es2019/{compiled/components → components}/control.compiled.css +0 -0
  254. /package/dist/es2019/{compiled/components → components}/group.compiled.css +0 -0
  255. /package/dist/es2019/{compiled/components → components}/indicators.compiled.css +0 -0
  256. /package/dist/es2019/{compiled/components → components}/input.compiled.css +0 -0
  257. /package/dist/es2019/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
  258. /package/dist/es2019/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
  259. /package/dist/es2019/{compiled/components → components}/internal/required-input.compiled.css +0 -0
  260. /package/dist/es2019/{compiled/components → components}/menu.compiled.css +0 -0
  261. /package/dist/es2019/{compiled/components → components}/multi-value.compiled.css +0 -0
  262. /package/dist/es2019/{compiled/components → components}/option.compiled.css +0 -0
  263. /package/dist/es2019/{compiled/components → components}/placeholder.compiled.css +0 -0
  264. /package/dist/es2019/{compiled/components → components}/single-value.compiled.css +0 -0
  265. /package/dist/esm/{compiled/components → components}/control.compiled.css +0 -0
  266. /package/dist/esm/{compiled/components → components}/group.compiled.css +0 -0
  267. /package/dist/esm/{compiled/components → components}/indicators.compiled.css +0 -0
  268. /package/dist/esm/{compiled/components → components}/input.compiled.css +0 -0
  269. /package/dist/esm/{compiled/components → components}/internal/a11y-text.compiled.css +0 -0
  270. /package/dist/esm/{compiled/components → components}/internal/dummy-input.compiled.css +0 -0
  271. /package/dist/esm/{compiled/components → components}/internal/required-input.compiled.css +0 -0
  272. /package/dist/esm/{compiled/components → components}/menu.compiled.css +0 -0
  273. /package/dist/esm/{compiled/components → components}/multi-value.compiled.css +0 -0
  274. /package/dist/esm/{compiled/components → components}/option.compiled.css +0 -0
  275. /package/dist/esm/{compiled/components → components}/placeholder.compiled.css +0 -0
  276. /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;