@charcoal-ui/react 2.0.1 → 2.1.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/dist/_lib/compat.d.ts +13 -13
- package/dist/_lib/index.d.ts +25 -25
- package/dist/components/Button/index.d.ts +21 -21
- package/dist/components/Button/index.story.d.ts +35 -35
- package/dist/components/Checkbox/index.d.ts +20 -20
- package/dist/components/Checkbox/index.story.d.ts +15 -15
- package/dist/components/Clickable/index.d.ts +18 -18
- package/dist/components/Clickable/index.story.d.ts +8 -8
- package/dist/components/DropdownSelector/Listbox.d.ts +9 -9
- package/dist/components/DropdownSelector/Popover.d.ts +9 -9
- package/dist/components/DropdownSelector/index.d.ts +31 -31
- package/dist/components/DropdownSelector/index.story.d.ts +21 -21
- package/dist/components/FieldLabel/index.d.ts +10 -10
- package/dist/components/Icon/index.d.ts +11 -11
- package/dist/components/Icon/index.story.d.ts +23 -23
- package/dist/components/IconButton/index.d.ts +13 -13
- package/dist/components/IconButton/index.story.d.ts +28 -28
- package/dist/components/LoadingSpinner/index.d.ts +14 -14
- package/dist/components/LoadingSpinner/index.story.d.ts +9 -9
- package/dist/components/Modal/ModalPlumbing.d.ts +4 -4
- package/dist/components/Modal/index.d.ts +41 -17
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.story.d.ts +32 -32
- package/dist/components/MultiSelect/context.d.ts +13 -13
- package/dist/components/MultiSelect/index.d.ts +23 -23
- package/dist/components/MultiSelect/index.story.d.ts +74 -74
- package/dist/components/MultiSelect/index.test.d.ts +1 -1
- package/dist/components/Radio/index.d.ts +23 -23
- package/dist/components/Radio/index.story.d.ts +33 -33
- package/dist/components/Radio/index.test.d.ts +1 -1
- package/dist/components/SegmentedControl/RadioGroupContext.d.ts +8 -8
- package/dist/components/SegmentedControl/index.d.ts +19 -19
- package/dist/components/SegmentedControl/index.story.d.ts +10 -10
- package/dist/components/Switch/index.d.ts +15 -15
- package/dist/components/Switch/index.story.d.ts +13 -13
- package/dist/components/TagItem/index.d.ts +25 -0
- package/dist/components/TagItem/index.d.ts.map +1 -0
- package/dist/components/TagItem/index.story.d.ts +26 -0
- package/dist/components/TagItem/index.story.d.ts.map +1 -0
- package/dist/components/TextField/index.d.ts +43 -43
- package/dist/components/TextField/index.story.d.ts +29 -29
- package/dist/components/a11y.test.d.ts +1 -1
- package/dist/core/ComponentAbstraction.d.ts +23 -23
- package/dist/core/OverlayProvider.d.ts +2 -0
- package/dist/core/OverlayProvider.d.ts.map +1 -0
- package/dist/core/SSRProvider.d.ts +1 -1
- package/dist/index.cjs +3333 -3297
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +18 -16
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4401 -0
- package/dist/index.js.map +1 -0
- package/dist/styled.d.ts +92 -92
- package/package.json +16 -14
- package/src/components/Modal/index.tsx +24 -0
- package/src/components/TagItem/index.story.tsx +188 -0
- package/src/components/TagItem/index.tsx +176 -0
- package/src/core/OverlayProvider.tsx +1 -0
- package/src/index.ts +2 -0
- package/dist/index.modern.js +0 -4685
- package/dist/index.modern.js.map +0 -1
- package/dist/index.module.js +0 -4371
- package/dist/index.module.js.map +0 -1
package/dist/index.modern.js
DELETED
|
@@ -1,4685 +0,0 @@
|
|
|
1
|
-
import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect, useImperativeHandle, memo, Fragment, forwardRef } from 'react';
|
|
2
|
-
import { useSSRSafeId, useIsSSR } from '@react-aria/ssr';
|
|
3
|
-
export { SSRProvider } from '@react-aria/ssr';
|
|
4
|
-
import styled, { css, useTheme, keyframes } from 'styled-components';
|
|
5
|
-
import { createTheme, useMedia } from '@charcoal-ui/styled';
|
|
6
|
-
import { disabledSelector, px, maxWidth } from '@charcoal-ui/utils';
|
|
7
|
-
import warning from 'warning';
|
|
8
|
-
import { useSwitch } from '@react-aria/switch';
|
|
9
|
-
import { useToggleState, useSelectState, Item, useRadioGroupState } from 'react-stately';
|
|
10
|
-
import { useTextField } from '@react-aria/textfield';
|
|
11
|
-
import { useVisuallyHidden } from '@react-aria/visually-hidden';
|
|
12
|
-
import '@charcoal-ui/icons';
|
|
13
|
-
import { useOverlay, usePreventScroll, useModalOverlay, Overlay, DismissButton } from '@react-aria/overlays';
|
|
14
|
-
import { FocusScope, focusSafely, getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';
|
|
15
|
-
import { useDialog } from '@react-aria/dialog';
|
|
16
|
-
import { animated, useTransition, easings } from 'react-spring';
|
|
17
|
-
import { transparentize } from 'polished';
|
|
18
|
-
import { useSelect, HiddenSelect } from '@react-aria/select';
|
|
19
|
-
import { useButton } from '@react-aria/button';
|
|
20
|
-
import { useRadioGroup, useRadio } from '@react-aria/radio';
|
|
21
|
-
import { useCheckbox } from '@react-aria/checkbox';
|
|
22
|
-
|
|
23
|
-
function _extends() {
|
|
24
|
-
_extends = Object.assign || function (target) {
|
|
25
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
26
|
-
var source = arguments[i];
|
|
27
|
-
|
|
28
|
-
for (var key in source) {
|
|
29
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
30
|
-
target[key] = source[key];
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return _extends.apply(this, arguments);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
42
|
-
if (source == null) return {};
|
|
43
|
-
var target = {};
|
|
44
|
-
var sourceKeys = Object.keys(source);
|
|
45
|
-
var key, i;
|
|
46
|
-
|
|
47
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
48
|
-
key = sourceKeys[i];
|
|
49
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
50
|
-
target[key] = source[key];
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return target;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const _excluded$d = ["to", "children"];
|
|
57
|
-
const DefaultLink = React.forwardRef(function DefaultLink(_ref, ref) {
|
|
58
|
-
let {
|
|
59
|
-
to,
|
|
60
|
-
children
|
|
61
|
-
} = _ref,
|
|
62
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
63
|
-
|
|
64
|
-
return /*#__PURE__*/React.createElement("a", _extends({
|
|
65
|
-
href: to,
|
|
66
|
-
ref: ref
|
|
67
|
-
}, rest), children);
|
|
68
|
-
});
|
|
69
|
-
const DefaultValue = {
|
|
70
|
-
Link: DefaultLink
|
|
71
|
-
};
|
|
72
|
-
const ComponentAbstractionContext = React.createContext(DefaultValue);
|
|
73
|
-
function ComponentAbstraction({
|
|
74
|
-
children,
|
|
75
|
-
components
|
|
76
|
-
}) {
|
|
77
|
-
return /*#__PURE__*/React.createElement(ComponentAbstractionContext.Provider, {
|
|
78
|
-
value: _extends({}, DefaultValue, components)
|
|
79
|
-
}, children);
|
|
80
|
-
}
|
|
81
|
-
function useComponentAbstraction() {
|
|
82
|
-
return useContext(ComponentAbstractionContext);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* 今後ポートされる予定の汎用的な関数群
|
|
87
|
-
*/
|
|
88
|
-
function unreachable(value) {
|
|
89
|
-
throw new Error(arguments.length === 0 ? 'unreachable' : `unreachable (${JSON.stringify(value)})`);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const theme$2 = createTheme(styled);
|
|
93
|
-
|
|
94
|
-
let _$e = t => t,
|
|
95
|
-
_t$e,
|
|
96
|
-
_t2$c,
|
|
97
|
-
_t3$c;
|
|
98
|
-
|
|
99
|
-
const _excluded$c = ["onClick", "disabled"];
|
|
100
|
-
const Clickable = React.forwardRef(function Clickable(props, ref) {
|
|
101
|
-
const {
|
|
102
|
-
Link
|
|
103
|
-
} = useComponentAbstraction();
|
|
104
|
-
|
|
105
|
-
if ('to' in props) {
|
|
106
|
-
const {
|
|
107
|
-
onClick,
|
|
108
|
-
disabled = false
|
|
109
|
-
} = props,
|
|
110
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded$c);
|
|
111
|
-
|
|
112
|
-
return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
|
|
113
|
-
as: disabled ? undefined : Link,
|
|
114
|
-
onClick: disabled ? undefined : onClick,
|
|
115
|
-
"aria-disabled": disabled,
|
|
116
|
-
ref: ref
|
|
117
|
-
}));
|
|
118
|
-
} else {
|
|
119
|
-
return /*#__PURE__*/React.createElement(Button$1, _extends({}, props, {
|
|
120
|
-
ref: ref
|
|
121
|
-
}));
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
const clickableCss = css(_t$e || (_t$e = _$e`
|
|
125
|
-
/* Clickable style */
|
|
126
|
-
cursor: pointer;
|
|
127
|
-
|
|
128
|
-
${0} {
|
|
129
|
-
cursor: default;
|
|
130
|
-
}
|
|
131
|
-
`), disabledSelector);
|
|
132
|
-
const Button$1 = styled.button(_t2$c || (_t2$c = _$e`
|
|
133
|
-
/* Reset button appearance */
|
|
134
|
-
appearance: none;
|
|
135
|
-
background: transparent;
|
|
136
|
-
padding: 0;
|
|
137
|
-
border-style: none;
|
|
138
|
-
outline: none;
|
|
139
|
-
color: inherit;
|
|
140
|
-
text-rendering: inherit;
|
|
141
|
-
letter-spacing: inherit;
|
|
142
|
-
word-spacing: inherit;
|
|
143
|
-
|
|
144
|
-
&:focus {
|
|
145
|
-
outline: none;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
/* Change the font styles in all browsers. */
|
|
149
|
-
font: inherit;
|
|
150
|
-
|
|
151
|
-
/* Remove the margin in Firefox and Safari. */
|
|
152
|
-
margin: 0;
|
|
153
|
-
|
|
154
|
-
/* Show the overflow in Edge. */
|
|
155
|
-
overflow: visible;
|
|
156
|
-
|
|
157
|
-
/* Remove the inheritance of text transform in Firefox. */
|
|
158
|
-
text-transform: none;
|
|
159
|
-
|
|
160
|
-
/* Remove the inner border and padding in Firefox. */
|
|
161
|
-
&::-moz-focus-inner {
|
|
162
|
-
border-style: none;
|
|
163
|
-
padding: 0;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
${0}
|
|
167
|
-
`), clickableCss);
|
|
168
|
-
const A = styled.span(_t3$c || (_t3$c = _$e`
|
|
169
|
-
/* Reset a-tag appearance */
|
|
170
|
-
color: inherit;
|
|
171
|
-
|
|
172
|
-
&:focus {
|
|
173
|
-
outline: none;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.text {
|
|
177
|
-
top: calc(1em + 2em);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
${0}
|
|
181
|
-
`), clickableCss);
|
|
182
|
-
|
|
183
|
-
let _$d = t => t,
|
|
184
|
-
_t$d;
|
|
185
|
-
|
|
186
|
-
const _excluded$b = ["children", "variant", "size", "fixed", "disabled"];
|
|
187
|
-
const Button = React.forwardRef(function Button(_ref, ref) {
|
|
188
|
-
let {
|
|
189
|
-
children,
|
|
190
|
-
variant = 'Default',
|
|
191
|
-
size = 'M',
|
|
192
|
-
fixed = false,
|
|
193
|
-
disabled = false
|
|
194
|
-
} = _ref,
|
|
195
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
196
|
-
|
|
197
|
-
return /*#__PURE__*/React.createElement(StyledButton, _extends({}, rest, {
|
|
198
|
-
disabled: disabled,
|
|
199
|
-
variant: variant,
|
|
200
|
-
size: size,
|
|
201
|
-
fixed: fixed,
|
|
202
|
-
ref: ref
|
|
203
|
-
}), children);
|
|
204
|
-
});
|
|
205
|
-
const StyledButton = styled(Clickable).withConfig({
|
|
206
|
-
shouldForwardProp(prop) {
|
|
207
|
-
// fixed は <button> 要素に渡ってはいけない
|
|
208
|
-
return prop !== 'fixed';
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
}).attrs(styledProps$1)(_t$d || (_t$d = _$d`
|
|
212
|
-
width: ${0};
|
|
213
|
-
display: inline-grid;
|
|
214
|
-
align-items: center;
|
|
215
|
-
justify-content: center;
|
|
216
|
-
cursor: pointer;
|
|
217
|
-
user-select: none;
|
|
218
|
-
white-space: nowrap;
|
|
219
|
-
|
|
220
|
-
${0}
|
|
221
|
-
|
|
222
|
-
/* よく考えたらheight=32って定義が存在しないな... */
|
|
223
|
-
height: ${0}px;
|
|
224
|
-
`), p => p.fixed ? 'stretch' : 'min-content', p => theme$2(o => [o.font[p.font].hover.press, o.bg[p.background].hover.press, o.typography(14).bold.preserveHalfLeading, o.padding.horizontal(p.padding), o.disabled, o.borderRadius('oval'), o.outline.default.focus]), p => p.height);
|
|
225
|
-
|
|
226
|
-
function styledProps$1(props) {
|
|
227
|
-
return _extends({}, props, variantToProps$1(props.variant), sizeToProps$1(props.size));
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
function variantToProps$1(variant) {
|
|
231
|
-
switch (variant) {
|
|
232
|
-
case 'Overlay':
|
|
233
|
-
return {
|
|
234
|
-
font: 'text5',
|
|
235
|
-
background: 'surface4'
|
|
236
|
-
};
|
|
237
|
-
|
|
238
|
-
case 'Default':
|
|
239
|
-
return {
|
|
240
|
-
font: 'text2',
|
|
241
|
-
background: 'surface3'
|
|
242
|
-
};
|
|
243
|
-
|
|
244
|
-
case 'Primary':
|
|
245
|
-
return {
|
|
246
|
-
font: 'text5',
|
|
247
|
-
background: 'brand'
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
case 'Navigation':
|
|
251
|
-
return {
|
|
252
|
-
font: 'text5',
|
|
253
|
-
background: 'surface6'
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
case 'Danger':
|
|
257
|
-
return {
|
|
258
|
-
font: 'text5',
|
|
259
|
-
background: 'assertive'
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
default:
|
|
263
|
-
return unreachable(variant);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
function sizeToProps$1(size) {
|
|
268
|
-
switch (size) {
|
|
269
|
-
case 'S':
|
|
270
|
-
return {
|
|
271
|
-
height: 32,
|
|
272
|
-
padding: 16
|
|
273
|
-
};
|
|
274
|
-
|
|
275
|
-
case 'M':
|
|
276
|
-
return {
|
|
277
|
-
height: 40,
|
|
278
|
-
padding: 24
|
|
279
|
-
};
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
let _$c = t => t,
|
|
284
|
-
_t$c;
|
|
285
|
-
|
|
286
|
-
const _excluded$a = ["variant", "size", "icon"];
|
|
287
|
-
const IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
|
|
288
|
-
let {
|
|
289
|
-
variant = 'Default',
|
|
290
|
-
size = 'M',
|
|
291
|
-
icon
|
|
292
|
-
} = _ref,
|
|
293
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
294
|
-
|
|
295
|
-
validateIconSize(size, icon);
|
|
296
|
-
return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
|
|
297
|
-
ref: ref,
|
|
298
|
-
variant: variant,
|
|
299
|
-
size: size
|
|
300
|
-
}), /*#__PURE__*/React.createElement("pixiv-icon", {
|
|
301
|
-
name: icon
|
|
302
|
-
}));
|
|
303
|
-
});
|
|
304
|
-
const StyledIconButton = styled(Clickable).attrs(styledProps)(_t$c || (_t$c = _$c`
|
|
305
|
-
user-select: none;
|
|
306
|
-
|
|
307
|
-
width: ${0}px;
|
|
308
|
-
height: ${0}px;
|
|
309
|
-
display: flex;
|
|
310
|
-
align-items: center;
|
|
311
|
-
justify-content: center;
|
|
312
|
-
|
|
313
|
-
${0}
|
|
314
|
-
`), p => p.width, p => p.height, ({
|
|
315
|
-
font,
|
|
316
|
-
background
|
|
317
|
-
}) => theme$2(o => [o.font[font], o.bg[background].hover.press, o.disabled, o.borderRadius('oval'), o.outline.default.focus]));
|
|
318
|
-
|
|
319
|
-
function styledProps(props) {
|
|
320
|
-
return _extends({}, props, variantToProps(props.variant), sizeToProps(props.size));
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
function variantToProps(variant) {
|
|
324
|
-
switch (variant) {
|
|
325
|
-
case 'Default':
|
|
326
|
-
return {
|
|
327
|
-
font: 'text3',
|
|
328
|
-
background: 'transparent'
|
|
329
|
-
};
|
|
330
|
-
|
|
331
|
-
case 'Overlay':
|
|
332
|
-
return {
|
|
333
|
-
font: 'text5',
|
|
334
|
-
background: 'surface4'
|
|
335
|
-
};
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
function sizeToProps(size) {
|
|
340
|
-
switch (size) {
|
|
341
|
-
case 'XS':
|
|
342
|
-
return {
|
|
343
|
-
width: 20,
|
|
344
|
-
height: 20
|
|
345
|
-
};
|
|
346
|
-
|
|
347
|
-
case 'S':
|
|
348
|
-
return {
|
|
349
|
-
width: 32,
|
|
350
|
-
height: 32
|
|
351
|
-
};
|
|
352
|
-
|
|
353
|
-
case 'M':
|
|
354
|
-
return {
|
|
355
|
-
width: 40,
|
|
356
|
-
height: 40
|
|
357
|
-
};
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
/**
|
|
361
|
-
* validates matches of size and icon
|
|
362
|
-
*/
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
function validateIconSize(size, icon) {
|
|
366
|
-
let requiredIconSize;
|
|
367
|
-
|
|
368
|
-
switch (size) {
|
|
369
|
-
case 'XS':
|
|
370
|
-
requiredIconSize = '16';
|
|
371
|
-
break;
|
|
372
|
-
|
|
373
|
-
case 'S':
|
|
374
|
-
case 'M':
|
|
375
|
-
requiredIconSize = '24';
|
|
376
|
-
break;
|
|
377
|
-
} // アイコン名は サイズ/名前
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
const result = /^[0-9]*/.exec(icon);
|
|
381
|
-
|
|
382
|
-
if (result == null) {
|
|
383
|
-
throw new Error('Invalid icon name');
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
const [iconSize] = result;
|
|
387
|
-
|
|
388
|
-
if (iconSize !== requiredIconSize) {
|
|
389
|
-
// eslint-disable-next-line no-console
|
|
390
|
-
console.warn(`IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`);
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
let _$b = t => t,
|
|
395
|
-
_t$b,
|
|
396
|
-
_t2$b,
|
|
397
|
-
_t3$b,
|
|
398
|
-
_t4$9;
|
|
399
|
-
function Radio({
|
|
400
|
-
value,
|
|
401
|
-
forceChecked = false,
|
|
402
|
-
disabled = false,
|
|
403
|
-
children
|
|
404
|
-
}) {
|
|
405
|
-
const {
|
|
406
|
-
name,
|
|
407
|
-
selected,
|
|
408
|
-
disabled: isParentDisabled,
|
|
409
|
-
readonly,
|
|
410
|
-
hasError,
|
|
411
|
-
onChange
|
|
412
|
-
} = useContext(RadioGroupContext);
|
|
413
|
-
warning( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
414
|
-
name !== undefined, `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`);
|
|
415
|
-
const isSelected = value === selected;
|
|
416
|
-
const isDisabled = disabled || isParentDisabled;
|
|
417
|
-
const isReadonly = readonly && !isSelected;
|
|
418
|
-
const handleChange = useCallback(e => {
|
|
419
|
-
onChange(e.currentTarget.value);
|
|
420
|
-
}, [onChange]);
|
|
421
|
-
return /*#__PURE__*/React.createElement(RadioRoot, {
|
|
422
|
-
"aria-disabled": isDisabled || isReadonly
|
|
423
|
-
}, /*#__PURE__*/React.createElement(RadioInput, {
|
|
424
|
-
name: name,
|
|
425
|
-
value: value,
|
|
426
|
-
checked: forceChecked || isSelected,
|
|
427
|
-
hasError: hasError,
|
|
428
|
-
onChange: handleChange,
|
|
429
|
-
disabled: isDisabled || isReadonly
|
|
430
|
-
}), children != null && /*#__PURE__*/React.createElement(RadioLabel$1, null, children));
|
|
431
|
-
}
|
|
432
|
-
const RadioRoot = styled.label(_t$b || (_t$b = _$b`
|
|
433
|
-
display: grid;
|
|
434
|
-
grid-template-columns: auto 1fr;
|
|
435
|
-
grid-gap: ${0};
|
|
436
|
-
align-items: center;
|
|
437
|
-
cursor: pointer;
|
|
438
|
-
|
|
439
|
-
${0}
|
|
440
|
-
`), ({
|
|
441
|
-
theme
|
|
442
|
-
}) => px(theme.spacing[4]), theme$2(o => [o.disabled]));
|
|
443
|
-
const RadioInput = styled.input.attrs({
|
|
444
|
-
type: 'radio'
|
|
445
|
-
})(_t2$b || (_t2$b = _$b`
|
|
446
|
-
/** Make prior to browser default style */
|
|
447
|
-
&[type='radio'] {
|
|
448
|
-
appearance: none;
|
|
449
|
-
display: block;
|
|
450
|
-
box-sizing: border-box;
|
|
451
|
-
|
|
452
|
-
padding: 6px;
|
|
453
|
-
|
|
454
|
-
width: 20px;
|
|
455
|
-
height: 20px;
|
|
456
|
-
|
|
457
|
-
${0};
|
|
458
|
-
|
|
459
|
-
&:not(:checked) {
|
|
460
|
-
border-width: 2px;
|
|
461
|
-
border-style: solid;
|
|
462
|
-
border-color: ${0};
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
&:checked {
|
|
466
|
-
${0}
|
|
467
|
-
|
|
468
|
-
&::after {
|
|
469
|
-
content: '';
|
|
470
|
-
display: block;
|
|
471
|
-
width: 8px;
|
|
472
|
-
height: 8px;
|
|
473
|
-
pointer-events: none;
|
|
474
|
-
|
|
475
|
-
${0}
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
${0}
|
|
480
|
-
}
|
|
481
|
-
`), ({
|
|
482
|
-
hasError: _hasError = false
|
|
483
|
-
}) => theme$2(o => [o.borderRadius('oval'), o.bg.text5.hover.press, _hasError && o.outline.assertive]), ({
|
|
484
|
-
theme
|
|
485
|
-
}) => theme.color.text4, theme$2(o => o.bg.brand.hover.press), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.outline.default.focus));
|
|
486
|
-
const RadioLabel$1 = styled.div(_t3$b || (_t3$b = _$b`
|
|
487
|
-
${0}
|
|
488
|
-
`), theme$2(o => [o.typography(14)])); // TODO: use (or polyfill) flex gap
|
|
489
|
-
|
|
490
|
-
const StyledRadioGroup = styled.div(_t4$9 || (_t4$9 = _$b`
|
|
491
|
-
display: grid;
|
|
492
|
-
grid-template-columns: 1fr;
|
|
493
|
-
grid-gap: ${0};
|
|
494
|
-
`), ({
|
|
495
|
-
theme
|
|
496
|
-
}) => px(theme.spacing[8]));
|
|
497
|
-
const RadioGroupContext = React.createContext({
|
|
498
|
-
name: undefined,
|
|
499
|
-
selected: undefined,
|
|
500
|
-
disabled: false,
|
|
501
|
-
readonly: false,
|
|
502
|
-
hasError: false,
|
|
503
|
-
|
|
504
|
-
onChange() {
|
|
505
|
-
throw new Error('Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?');
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
});
|
|
509
|
-
function RadioGroup({
|
|
510
|
-
className,
|
|
511
|
-
value,
|
|
512
|
-
label,
|
|
513
|
-
name,
|
|
514
|
-
onChange,
|
|
515
|
-
disabled,
|
|
516
|
-
readonly,
|
|
517
|
-
hasError,
|
|
518
|
-
children
|
|
519
|
-
}) {
|
|
520
|
-
const handleChange = useCallback(next => {
|
|
521
|
-
onChange(next);
|
|
522
|
-
}, [onChange]);
|
|
523
|
-
return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
524
|
-
value: {
|
|
525
|
-
name,
|
|
526
|
-
selected: value,
|
|
527
|
-
disabled: disabled != null ? disabled : false,
|
|
528
|
-
readonly: readonly != null ? readonly : false,
|
|
529
|
-
hasError: hasError != null ? hasError : false,
|
|
530
|
-
onChange: handleChange
|
|
531
|
-
}
|
|
532
|
-
}, /*#__PURE__*/React.createElement(StyledRadioGroup, {
|
|
533
|
-
role: "radiogroup",
|
|
534
|
-
"aria-orientation": "vertical",
|
|
535
|
-
"aria-label": label,
|
|
536
|
-
"aria-invalid": hasError,
|
|
537
|
-
className: className
|
|
538
|
-
}, children));
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
const MultiSelectGroupContext = createContext({
|
|
542
|
-
name: undefined,
|
|
543
|
-
selected: [],
|
|
544
|
-
disabled: false,
|
|
545
|
-
readonly: false,
|
|
546
|
-
hasError: false,
|
|
547
|
-
|
|
548
|
-
onChange() {
|
|
549
|
-
throw new Error('Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?');
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
});
|
|
553
|
-
|
|
554
|
-
let _$a = t => t,
|
|
555
|
-
_t$a,
|
|
556
|
-
_t2$a,
|
|
557
|
-
_t3$a,
|
|
558
|
-
_t4$8,
|
|
559
|
-
_t5$7;
|
|
560
|
-
function MultiSelect({
|
|
561
|
-
value,
|
|
562
|
-
forceChecked = false,
|
|
563
|
-
disabled = false,
|
|
564
|
-
onChange,
|
|
565
|
-
variant = 'default',
|
|
566
|
-
children
|
|
567
|
-
}) {
|
|
568
|
-
const {
|
|
569
|
-
name,
|
|
570
|
-
selected,
|
|
571
|
-
disabled: parentDisabled,
|
|
572
|
-
readonly,
|
|
573
|
-
hasError,
|
|
574
|
-
onChange: parentOnChange
|
|
575
|
-
} = useContext(MultiSelectGroupContext);
|
|
576
|
-
warning( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
577
|
-
name !== undefined, `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`);
|
|
578
|
-
const isSelected = selected.includes(value) || forceChecked;
|
|
579
|
-
const isDisabled = disabled || parentDisabled || readonly;
|
|
580
|
-
const handleChange = useCallback(event => {
|
|
581
|
-
if (!(event.currentTarget instanceof HTMLInputElement)) {
|
|
582
|
-
return;
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
if (onChange) onChange({
|
|
586
|
-
value,
|
|
587
|
-
selected: event.currentTarget.checked
|
|
588
|
-
});
|
|
589
|
-
parentOnChange({
|
|
590
|
-
value,
|
|
591
|
-
selected: event.currentTarget.checked
|
|
592
|
-
});
|
|
593
|
-
}, [onChange, parentOnChange, value]);
|
|
594
|
-
return /*#__PURE__*/React.createElement(MultiSelectRoot, {
|
|
595
|
-
"aria-disabled": isDisabled
|
|
596
|
-
}, /*#__PURE__*/React.createElement(MultiSelectInput, {
|
|
597
|
-
name,
|
|
598
|
-
value,
|
|
599
|
-
hasError,
|
|
600
|
-
checked: isSelected,
|
|
601
|
-
disabled: isDisabled,
|
|
602
|
-
onChange: handleChange,
|
|
603
|
-
overlay: variant === 'overlay',
|
|
604
|
-
"aria-invalid": hasError
|
|
605
|
-
}), /*#__PURE__*/React.createElement(MultiSelectInputOverlay, {
|
|
606
|
-
overlay: variant === 'overlay',
|
|
607
|
-
hasError: hasError,
|
|
608
|
-
"aria-hidden": true
|
|
609
|
-
}, /*#__PURE__*/React.createElement("pixiv-icon", {
|
|
610
|
-
name: "24/Check",
|
|
611
|
-
"unsafe-non-guideline-scale": 16 / 24
|
|
612
|
-
})), Boolean(children) && /*#__PURE__*/React.createElement(MultiSelectLabel, null, children));
|
|
613
|
-
}
|
|
614
|
-
const MultiSelectRoot = styled.label(_t$a || (_t$a = _$a`
|
|
615
|
-
display: grid;
|
|
616
|
-
grid-template-columns: auto 1fr;
|
|
617
|
-
align-items: center;
|
|
618
|
-
position: relative;
|
|
619
|
-
cursor: pointer;
|
|
620
|
-
${0} {
|
|
621
|
-
cursor: default;
|
|
622
|
-
}
|
|
623
|
-
gap: ${0};
|
|
624
|
-
${0}
|
|
625
|
-
`), disabledSelector, ({
|
|
626
|
-
theme
|
|
627
|
-
}) => px(theme.spacing[4]), theme$2(o => o.disabled));
|
|
628
|
-
const MultiSelectLabel = styled.div(_t2$a || (_t2$a = _$a`
|
|
629
|
-
display: flex;
|
|
630
|
-
align-items: center;
|
|
631
|
-
${0}
|
|
632
|
-
`), theme$2(o => [o.typography(14), o.font.text1]));
|
|
633
|
-
const MultiSelectInput = styled.input.attrs({
|
|
634
|
-
type: 'checkbox'
|
|
635
|
-
})(_t3$a || (_t3$a = _$a`
|
|
636
|
-
&[type='checkbox'] {
|
|
637
|
-
appearance: none;
|
|
638
|
-
display: block;
|
|
639
|
-
width: 20px;
|
|
640
|
-
height: 20px;
|
|
641
|
-
margin: 0;
|
|
642
|
-
|
|
643
|
-
&:checked {
|
|
644
|
-
${0}
|
|
645
|
-
}
|
|
646
|
-
|
|
647
|
-
${0};
|
|
648
|
-
}
|
|
649
|
-
`), theme$2(o => o.bg.brand.hover.press), ({
|
|
650
|
-
hasError,
|
|
651
|
-
overlay
|
|
652
|
-
}) => theme$2(o => [o.bg.text3.hover.press, o.borderRadius('oval'), hasError && !overlay && o.outline.assertive, overlay && o.bg.surface4]));
|
|
653
|
-
const MultiSelectInputOverlay = styled.div(_t4$8 || (_t4$8 = _$a`
|
|
654
|
-
position: absolute;
|
|
655
|
-
top: -2px;
|
|
656
|
-
left: -2px;
|
|
657
|
-
box-sizing: border-box;
|
|
658
|
-
display: flex;
|
|
659
|
-
align-items: center;
|
|
660
|
-
justify-content: center;
|
|
661
|
-
|
|
662
|
-
${0}
|
|
663
|
-
|
|
664
|
-
${0}
|
|
665
|
-
`), ({
|
|
666
|
-
hasError,
|
|
667
|
-
overlay
|
|
668
|
-
}) => theme$2(o => [o.width.px(24), o.height.px(24), o.borderRadius('oval'), o.font.text5, hasError && overlay && o.outline.assertive]), ({
|
|
669
|
-
overlay
|
|
670
|
-
}) => overlay && css(_t5$7 || (_t5$7 = _$a`
|
|
671
|
-
border-color: ${0};
|
|
672
|
-
border-width: 2px;
|
|
673
|
-
border-style: solid;
|
|
674
|
-
`), ({
|
|
675
|
-
theme
|
|
676
|
-
}) => theme.color.text5));
|
|
677
|
-
function MultiSelectGroup({
|
|
678
|
-
className,
|
|
679
|
-
name,
|
|
680
|
-
ariaLabel,
|
|
681
|
-
selected,
|
|
682
|
-
onChange,
|
|
683
|
-
disabled = false,
|
|
684
|
-
readonly = false,
|
|
685
|
-
hasError = false,
|
|
686
|
-
children
|
|
687
|
-
}) {
|
|
688
|
-
const handleChange = useCallback(payload => {
|
|
689
|
-
const index = selected.indexOf(payload.value);
|
|
690
|
-
|
|
691
|
-
if (payload.selected) {
|
|
692
|
-
if (index < 0) {
|
|
693
|
-
onChange([...selected, payload.value]);
|
|
694
|
-
}
|
|
695
|
-
} else {
|
|
696
|
-
if (index >= 0) {
|
|
697
|
-
onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
}, [onChange, selected]);
|
|
701
|
-
return /*#__PURE__*/React.createElement(MultiSelectGroupContext.Provider, {
|
|
702
|
-
value: {
|
|
703
|
-
name,
|
|
704
|
-
selected: Array.from(new Set(selected)),
|
|
705
|
-
disabled,
|
|
706
|
-
readonly,
|
|
707
|
-
hasError,
|
|
708
|
-
onChange: handleChange
|
|
709
|
-
}
|
|
710
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
711
|
-
className: className,
|
|
712
|
-
"aria-label": ariaLabel,
|
|
713
|
-
"data-testid": "SelectGroup"
|
|
714
|
-
}, children));
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
let _$9 = t => t,
|
|
718
|
-
_t$9,
|
|
719
|
-
_t2$9,
|
|
720
|
-
_t3$9;
|
|
721
|
-
|
|
722
|
-
const _excluded$9 = ["className", "type"];
|
|
723
|
-
function SwitchCheckbox(props) {
|
|
724
|
-
const {
|
|
725
|
-
disabled,
|
|
726
|
-
className
|
|
727
|
-
} = props;
|
|
728
|
-
const ariaSwitchProps = useMemo(() => _extends({}, props, {
|
|
729
|
-
// children がいない場合は aria-label をつけないといけない
|
|
730
|
-
'aria-label': 'children' in props ? undefined : props.label,
|
|
731
|
-
isDisabled: props.disabled,
|
|
732
|
-
isSelected: props.checked
|
|
733
|
-
}), [props]);
|
|
734
|
-
const state = useToggleState(ariaSwitchProps);
|
|
735
|
-
const ref = useRef(null);
|
|
736
|
-
|
|
737
|
-
const _useSwitch = useSwitch(ariaSwitchProps, state, ref),
|
|
738
|
-
rest = _objectWithoutPropertiesLoose(_useSwitch.inputProps, _excluded$9);
|
|
739
|
-
|
|
740
|
-
return /*#__PURE__*/React.createElement(Label$1, {
|
|
741
|
-
className: className,
|
|
742
|
-
"aria-disabled": disabled
|
|
743
|
-
}, /*#__PURE__*/React.createElement(SwitchInput, _extends({}, rest, {
|
|
744
|
-
ref: ref
|
|
745
|
-
})), 'children' in props ?
|
|
746
|
-
/*#__PURE__*/
|
|
747
|
-
// eslint-disable-next-line react/destructuring-assignment
|
|
748
|
-
React.createElement(LabelInner, null, props.children) : undefined);
|
|
749
|
-
}
|
|
750
|
-
const Label$1 = styled.label(_t$9 || (_t$9 = _$9`
|
|
751
|
-
display: inline-grid;
|
|
752
|
-
grid-template-columns: auto 1fr;
|
|
753
|
-
gap: ${0};
|
|
754
|
-
cursor: pointer;
|
|
755
|
-
outline: 0;
|
|
756
|
-
|
|
757
|
-
${0}
|
|
758
|
-
|
|
759
|
-
${0} {
|
|
760
|
-
cursor: default;
|
|
761
|
-
}
|
|
762
|
-
`), ({
|
|
763
|
-
theme
|
|
764
|
-
}) => px(theme.spacing[4]), theme$2(o => o.disabled), disabledSelector);
|
|
765
|
-
const LabelInner = styled.div(_t2$9 || (_t2$9 = _$9`
|
|
766
|
-
${0}
|
|
767
|
-
`), theme$2(o => o.typography(14)));
|
|
768
|
-
const SwitchInput = styled.input.attrs({
|
|
769
|
-
type: 'checkbox'
|
|
770
|
-
})(_t3$9 || (_t3$9 = _$9`
|
|
771
|
-
&[type='checkbox'] {
|
|
772
|
-
appearance: none;
|
|
773
|
-
display: inline-flex;
|
|
774
|
-
position: relative;
|
|
775
|
-
box-sizing: border-box;
|
|
776
|
-
width: 28px;
|
|
777
|
-
border: 2px solid transparent;
|
|
778
|
-
transition: box-shadow 0.2s, background-color 0.2s;
|
|
779
|
-
cursor: inherit;
|
|
780
|
-
${0}
|
|
781
|
-
|
|
782
|
-
&::after {
|
|
783
|
-
content: '';
|
|
784
|
-
position: absolute;
|
|
785
|
-
display: block;
|
|
786
|
-
top: 0;
|
|
787
|
-
left: 0;
|
|
788
|
-
width: 12px;
|
|
789
|
-
height: 12px;
|
|
790
|
-
transform: translateX(0);
|
|
791
|
-
transition: transform 0.2s;
|
|
792
|
-
${0}
|
|
793
|
-
}
|
|
794
|
-
|
|
795
|
-
&:checked {
|
|
796
|
-
${0}
|
|
797
|
-
|
|
798
|
-
&::after {
|
|
799
|
-
transform: translateX(12px);
|
|
800
|
-
}
|
|
801
|
-
}
|
|
802
|
-
}
|
|
803
|
-
`), theme$2(o => [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline.default.focus]), theme$2(o => [o.bg.text5.hover.press, o.borderRadius('oval')]), theme$2(o => o.bg.brand.hover.press));
|
|
804
|
-
|
|
805
|
-
let _$8 = t => t,
|
|
806
|
-
_t$8,
|
|
807
|
-
_t2$8,
|
|
808
|
-
_t3$8,
|
|
809
|
-
_t4$7;
|
|
810
|
-
|
|
811
|
-
const _excluded$8 = ["style", "className", "label", "required", "requiredText", "subLabel"];
|
|
812
|
-
const FieldLabel = React.forwardRef(function FieldLabel(_ref, ref) {
|
|
813
|
-
let {
|
|
814
|
-
style,
|
|
815
|
-
className,
|
|
816
|
-
label,
|
|
817
|
-
required = false,
|
|
818
|
-
requiredText,
|
|
819
|
-
subLabel
|
|
820
|
-
} = _ref,
|
|
821
|
-
labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
822
|
-
|
|
823
|
-
return /*#__PURE__*/React.createElement(FieldLabelWrapper, {
|
|
824
|
-
style: style,
|
|
825
|
-
className: className
|
|
826
|
-
}, /*#__PURE__*/React.createElement(Label, _extends({
|
|
827
|
-
ref: ref
|
|
828
|
-
}, labelProps), label), required && /*#__PURE__*/React.createElement(RequiredText, null, requiredText), /*#__PURE__*/React.createElement(SubLabelClickable, null, /*#__PURE__*/React.createElement("span", null, subLabel)));
|
|
829
|
-
});
|
|
830
|
-
const theme$1 = createTheme(styled);
|
|
831
|
-
const Label = styled.label(_t$8 || (_t$8 = _$8`
|
|
832
|
-
${0}
|
|
833
|
-
`), theme$1(o => [o.typography(14).bold, o.font.text1]));
|
|
834
|
-
const RequiredText = styled.span(_t2$8 || (_t2$8 = _$8`
|
|
835
|
-
${0}
|
|
836
|
-
`), theme$1(o => [o.typography(14), o.font.text3]));
|
|
837
|
-
const SubLabelClickable = styled.div(_t3$8 || (_t3$8 = _$8`
|
|
838
|
-
${0}
|
|
839
|
-
`), theme$1(o => [o.typography(14), o.font.text3.hover.press, o.outline.default.focus]));
|
|
840
|
-
const FieldLabelWrapper = styled.div(_t4$7 || (_t4$7 = _$8`
|
|
841
|
-
display: inline-flex;
|
|
842
|
-
align-items: center;
|
|
843
|
-
|
|
844
|
-
> ${0} {
|
|
845
|
-
${0}
|
|
846
|
-
}
|
|
847
|
-
|
|
848
|
-
> ${0} {
|
|
849
|
-
${0}
|
|
850
|
-
}
|
|
851
|
-
`), RequiredText, theme$1(o => o.margin.left(4)), SubLabelClickable, theme$1(o => o.margin.left('auto')));
|
|
852
|
-
|
|
853
|
-
let _$7 = t => t,
|
|
854
|
-
_t$7,
|
|
855
|
-
_t2$7,
|
|
856
|
-
_t3$7,
|
|
857
|
-
_t4$6,
|
|
858
|
-
_t5$6,
|
|
859
|
-
_t6$3,
|
|
860
|
-
_t7$2,
|
|
861
|
-
_t8,
|
|
862
|
-
_t9,
|
|
863
|
-
_t10,
|
|
864
|
-
_t11,
|
|
865
|
-
_t12,
|
|
866
|
-
_t13,
|
|
867
|
-
_t14;
|
|
868
|
-
|
|
869
|
-
const _excluded$7 = ["onChange"],
|
|
870
|
-
_excluded2$1 = ["onChange"];
|
|
871
|
-
const theme = createTheme(styled);
|
|
872
|
-
|
|
873
|
-
function mergeRefs(...refs) {
|
|
874
|
-
return value => {
|
|
875
|
-
for (const ref of refs) {
|
|
876
|
-
if (typeof ref === 'function') {
|
|
877
|
-
ref(value);
|
|
878
|
-
} else if (ref !== null) {
|
|
879
|
-
ref.current = value;
|
|
880
|
-
}
|
|
881
|
-
}
|
|
882
|
-
};
|
|
883
|
-
}
|
|
884
|
-
|
|
885
|
-
function countCodePointsInString(string) {
|
|
886
|
-
// [...string] とするとproduction buildで動かなくなる
|
|
887
|
-
// cf. https://twitter.com/f_subal/status/1497214727511891972
|
|
888
|
-
return Array.from(string).length;
|
|
889
|
-
}
|
|
890
|
-
|
|
891
|
-
const TextField = React.forwardRef(function TextField(props, ref) {
|
|
892
|
-
return props.multiline !== undefined && props.multiline ? /*#__PURE__*/React.createElement(MultiLineTextField, _extends({
|
|
893
|
-
ref: ref
|
|
894
|
-
}, props)) : /*#__PURE__*/React.createElement(SingleLineTextField, _extends({
|
|
895
|
-
ref: ref
|
|
896
|
-
}, props));
|
|
897
|
-
});
|
|
898
|
-
const SingleLineTextField = React.forwardRef(function SingleLineTextFieldInner(_ref, forwardRef) {
|
|
899
|
-
var _props$value;
|
|
900
|
-
|
|
901
|
-
let {
|
|
902
|
-
onChange
|
|
903
|
-
} = _ref,
|
|
904
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
905
|
-
|
|
906
|
-
const {
|
|
907
|
-
className,
|
|
908
|
-
showLabel = false,
|
|
909
|
-
showCount = false,
|
|
910
|
-
label,
|
|
911
|
-
requiredText,
|
|
912
|
-
subLabel,
|
|
913
|
-
disabled = false,
|
|
914
|
-
required,
|
|
915
|
-
invalid = false,
|
|
916
|
-
assistiveText,
|
|
917
|
-
maxLength,
|
|
918
|
-
prefix = null,
|
|
919
|
-
suffix = null
|
|
920
|
-
} = props;
|
|
921
|
-
const {
|
|
922
|
-
visuallyHiddenProps
|
|
923
|
-
} = useVisuallyHidden();
|
|
924
|
-
const ariaRef = useRef(null);
|
|
925
|
-
const prefixRef = useRef(null);
|
|
926
|
-
const suffixRef = useRef(null);
|
|
927
|
-
const [count, setCount] = useState(countCodePointsInString((_props$value = props.value) != null ? _props$value : ''));
|
|
928
|
-
const [prefixWidth, setPrefixWidth] = useState(0);
|
|
929
|
-
const [suffixWidth, setSuffixWidth] = useState(0);
|
|
930
|
-
const nonControlled = props.value === undefined;
|
|
931
|
-
const handleChange = useCallback(value => {
|
|
932
|
-
const count = countCodePointsInString(value);
|
|
933
|
-
|
|
934
|
-
if (maxLength !== undefined && count > maxLength) {
|
|
935
|
-
return;
|
|
936
|
-
}
|
|
937
|
-
|
|
938
|
-
if (nonControlled) {
|
|
939
|
-
setCount(count);
|
|
940
|
-
}
|
|
941
|
-
|
|
942
|
-
onChange == null ? void 0 : onChange(value);
|
|
943
|
-
}, [maxLength, nonControlled, onChange]);
|
|
944
|
-
useEffect(() => {
|
|
945
|
-
var _props$value2;
|
|
946
|
-
|
|
947
|
-
setCount(countCodePointsInString((_props$value2 = props.value) != null ? _props$value2 : ''));
|
|
948
|
-
}, [props.value]);
|
|
949
|
-
const {
|
|
950
|
-
inputProps,
|
|
951
|
-
labelProps,
|
|
952
|
-
descriptionProps,
|
|
953
|
-
errorMessageProps
|
|
954
|
-
} = useTextField(_extends({
|
|
955
|
-
inputElementType: 'input',
|
|
956
|
-
isDisabled: disabled,
|
|
957
|
-
isRequired: required,
|
|
958
|
-
validationState: invalid ? 'invalid' : 'valid',
|
|
959
|
-
description: !invalid && assistiveText,
|
|
960
|
-
errorMessage: invalid && assistiveText,
|
|
961
|
-
onChange: handleChange
|
|
962
|
-
}, props), ariaRef);
|
|
963
|
-
useEffect(() => {
|
|
964
|
-
const prefixObserver = new ResizeObserver(entries => {
|
|
965
|
-
setPrefixWidth(entries[0].contentRect.width);
|
|
966
|
-
});
|
|
967
|
-
const suffixObserver = new ResizeObserver(entries => {
|
|
968
|
-
setSuffixWidth(entries[0].contentRect.width);
|
|
969
|
-
});
|
|
970
|
-
|
|
971
|
-
if (prefixRef.current !== null) {
|
|
972
|
-
prefixObserver.observe(prefixRef.current);
|
|
973
|
-
}
|
|
974
|
-
|
|
975
|
-
if (suffixRef.current !== null) {
|
|
976
|
-
suffixObserver.observe(suffixRef.current);
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
return () => {
|
|
980
|
-
suffixObserver.disconnect();
|
|
981
|
-
prefixObserver.disconnect();
|
|
982
|
-
};
|
|
983
|
-
}, []);
|
|
984
|
-
return /*#__PURE__*/React.createElement(TextFieldRoot, {
|
|
985
|
-
className: className,
|
|
986
|
-
isDisabled: disabled
|
|
987
|
-
}, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
|
|
988
|
-
label: label,
|
|
989
|
-
requiredText: requiredText,
|
|
990
|
-
required: required,
|
|
991
|
-
subLabel: subLabel
|
|
992
|
-
}, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledInputContainer, null, /*#__PURE__*/React.createElement(PrefixContainer, {
|
|
993
|
-
ref: prefixRef
|
|
994
|
-
}, /*#__PURE__*/React.createElement(Affix, null, prefix)), /*#__PURE__*/React.createElement(StyledInput, _extends({
|
|
995
|
-
ref: mergeRefs(forwardRef, ariaRef),
|
|
996
|
-
invalid: invalid,
|
|
997
|
-
extraLeftPadding: prefixWidth,
|
|
998
|
-
extraRightPadding: suffixWidth
|
|
999
|
-
}, inputProps)), /*#__PURE__*/React.createElement(SuffixContainer, {
|
|
1000
|
-
ref: suffixRef
|
|
1001
|
-
}, /*#__PURE__*/React.createElement(Affix, null, suffix), showCount && /*#__PURE__*/React.createElement(SingleLineCounter, null, maxLength !== undefined ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
|
|
1002
|
-
invalid: invalid
|
|
1003
|
-
}, invalid ? errorMessageProps : descriptionProps), assistiveText));
|
|
1004
|
-
});
|
|
1005
|
-
const MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_ref2, forwardRef) {
|
|
1006
|
-
var _props$value3;
|
|
1007
|
-
|
|
1008
|
-
let {
|
|
1009
|
-
onChange
|
|
1010
|
-
} = _ref2,
|
|
1011
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
1012
|
-
|
|
1013
|
-
const {
|
|
1014
|
-
className,
|
|
1015
|
-
showCount = false,
|
|
1016
|
-
showLabel = false,
|
|
1017
|
-
label,
|
|
1018
|
-
requiredText,
|
|
1019
|
-
subLabel,
|
|
1020
|
-
disabled = false,
|
|
1021
|
-
required,
|
|
1022
|
-
invalid = false,
|
|
1023
|
-
assistiveText,
|
|
1024
|
-
maxLength,
|
|
1025
|
-
autoHeight = false,
|
|
1026
|
-
rows: initialRows = 4
|
|
1027
|
-
} = props;
|
|
1028
|
-
const {
|
|
1029
|
-
visuallyHiddenProps
|
|
1030
|
-
} = useVisuallyHidden();
|
|
1031
|
-
const textareaRef = useRef(null);
|
|
1032
|
-
const ariaRef = useRef(null);
|
|
1033
|
-
const [count, setCount] = useState(countCodePointsInString((_props$value3 = props.value) != null ? _props$value3 : ''));
|
|
1034
|
-
const [rows, setRows] = useState(initialRows);
|
|
1035
|
-
const syncHeight = useCallback(textarea => {
|
|
1036
|
-
var _$match$length, _$match;
|
|
1037
|
-
|
|
1038
|
-
const rows = ((_$match$length = (_$match = `${textarea.value}\n`.match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 0) || 1;
|
|
1039
|
-
setRows(initialRows <= rows ? rows : initialRows);
|
|
1040
|
-
}, [initialRows]);
|
|
1041
|
-
const nonControlled = props.value === undefined;
|
|
1042
|
-
const handleChange = useCallback(value => {
|
|
1043
|
-
const count = countCodePointsInString(value);
|
|
1044
|
-
|
|
1045
|
-
if (maxLength !== undefined && count > maxLength) {
|
|
1046
|
-
return;
|
|
1047
|
-
}
|
|
1048
|
-
|
|
1049
|
-
if (nonControlled) {
|
|
1050
|
-
setCount(count);
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
if (autoHeight && textareaRef.current !== null) {
|
|
1054
|
-
syncHeight(textareaRef.current);
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
onChange == null ? void 0 : onChange(value);
|
|
1058
|
-
}, [autoHeight, maxLength, nonControlled, onChange, syncHeight]);
|
|
1059
|
-
useEffect(() => {
|
|
1060
|
-
var _props$value4;
|
|
1061
|
-
|
|
1062
|
-
setCount(countCodePointsInString((_props$value4 = props.value) != null ? _props$value4 : ''));
|
|
1063
|
-
}, [props.value]);
|
|
1064
|
-
const {
|
|
1065
|
-
inputProps,
|
|
1066
|
-
labelProps,
|
|
1067
|
-
descriptionProps,
|
|
1068
|
-
errorMessageProps
|
|
1069
|
-
} = useTextField(_extends({
|
|
1070
|
-
inputElementType: 'textarea',
|
|
1071
|
-
isDisabled: disabled,
|
|
1072
|
-
isRequired: required,
|
|
1073
|
-
validationState: invalid ? 'invalid' : 'valid',
|
|
1074
|
-
description: !invalid && assistiveText,
|
|
1075
|
-
errorMessage: invalid && assistiveText,
|
|
1076
|
-
onChange: handleChange
|
|
1077
|
-
}, props), ariaRef);
|
|
1078
|
-
useEffect(() => {
|
|
1079
|
-
if (autoHeight && textareaRef.current !== null) {
|
|
1080
|
-
syncHeight(textareaRef.current);
|
|
1081
|
-
}
|
|
1082
|
-
}, [autoHeight, syncHeight]);
|
|
1083
|
-
return /*#__PURE__*/React.createElement(TextFieldRoot, {
|
|
1084
|
-
className: className,
|
|
1085
|
-
isDisabled: disabled
|
|
1086
|
-
}, /*#__PURE__*/React.createElement(TextFieldLabel, _extends({
|
|
1087
|
-
label: label,
|
|
1088
|
-
requiredText: requiredText,
|
|
1089
|
-
required: required,
|
|
1090
|
-
subLabel: subLabel
|
|
1091
|
-
}, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(StyledTextareaContainer, {
|
|
1092
|
-
invalid: invalid,
|
|
1093
|
-
rows: showCount ? rows + 1 : rows
|
|
1094
|
-
}, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
|
|
1095
|
-
ref: mergeRefs(textareaRef, forwardRef, ariaRef),
|
|
1096
|
-
rows: rows,
|
|
1097
|
-
noBottomPadding: showCount
|
|
1098
|
-
}, inputProps)), showCount && /*#__PURE__*/React.createElement(MultiLineCounter, null, maxLength !== undefined ? `${count}/${maxLength}` : count)), assistiveText != null && assistiveText.length !== 0 && /*#__PURE__*/React.createElement(AssistiveText, _extends({
|
|
1099
|
-
invalid: invalid
|
|
1100
|
-
}, invalid ? errorMessageProps : descriptionProps), assistiveText));
|
|
1101
|
-
});
|
|
1102
|
-
const TextFieldRoot = styled.div(_t$7 || (_t$7 = _$7`
|
|
1103
|
-
display: flex;
|
|
1104
|
-
flex-direction: column;
|
|
1105
|
-
|
|
1106
|
-
${0}
|
|
1107
|
-
`), p => p.isDisabled && {
|
|
1108
|
-
opacity: p.theme.elementEffect.disabled.opacity
|
|
1109
|
-
});
|
|
1110
|
-
const TextFieldLabel = styled(FieldLabel)(_t2$7 || (_t2$7 = _$7`
|
|
1111
|
-
${0}
|
|
1112
|
-
`), theme(o => o.margin.bottom(8)));
|
|
1113
|
-
const StyledInputContainer = styled.div(_t3$7 || (_t3$7 = _$7`
|
|
1114
|
-
height: 40px;
|
|
1115
|
-
display: grid;
|
|
1116
|
-
position: relative;
|
|
1117
|
-
`));
|
|
1118
|
-
const PrefixContainer = styled.span(_t4$6 || (_t4$6 = _$7`
|
|
1119
|
-
position: absolute;
|
|
1120
|
-
top: 50%;
|
|
1121
|
-
left: 8px;
|
|
1122
|
-
transform: translateY(-50%);
|
|
1123
|
-
`));
|
|
1124
|
-
const SuffixContainer = styled.span(_t5$6 || (_t5$6 = _$7`
|
|
1125
|
-
position: absolute;
|
|
1126
|
-
top: 50%;
|
|
1127
|
-
right: 8px;
|
|
1128
|
-
transform: translateY(-50%);
|
|
1129
|
-
|
|
1130
|
-
display: flex;
|
|
1131
|
-
gap: 8px;
|
|
1132
|
-
`));
|
|
1133
|
-
const Affix = styled.span(_t6$3 || (_t6$3 = _$7`
|
|
1134
|
-
user-select: none;
|
|
1135
|
-
|
|
1136
|
-
${0}
|
|
1137
|
-
`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text2]));
|
|
1138
|
-
const StyledInput = styled.input(_t7$2 || (_t7$2 = _$7`
|
|
1139
|
-
border: none;
|
|
1140
|
-
box-sizing: border-box;
|
|
1141
|
-
outline: none;
|
|
1142
|
-
font-family: inherit;
|
|
1143
|
-
|
|
1144
|
-
/* Prevent zooming for iOS Safari */
|
|
1145
|
-
transform-origin: top left;
|
|
1146
|
-
transform: scale(0.875);
|
|
1147
|
-
width: calc(100% / 0.875);
|
|
1148
|
-
height: calc(100% / 0.875);
|
|
1149
|
-
font-size: calc(14px / 0.875);
|
|
1150
|
-
line-height: calc(22px / 0.875);
|
|
1151
|
-
padding-left: calc((8px + ${0}px) / 0.875);
|
|
1152
|
-
padding-right: calc((8px + ${0}px) / 0.875);
|
|
1153
|
-
border-radius: calc(4px / 0.875);
|
|
1154
|
-
|
|
1155
|
-
/* Display box-shadow for iOS Safari */
|
|
1156
|
-
appearance: none;
|
|
1157
|
-
|
|
1158
|
-
${0}
|
|
1159
|
-
|
|
1160
|
-
&::placeholder {
|
|
1161
|
-
${0}
|
|
1162
|
-
}
|
|
1163
|
-
`), p => p.extraLeftPadding, p => p.extraRightPadding, p => theme(o => [o.bg.surface3.hover, o.outline.default.focus, p.invalid && o.outline.assertive, o.font.text2]), theme(o => o.font.text3));
|
|
1164
|
-
const StyledTextareaContainer = styled.div(_t8 || (_t8 = _$7`
|
|
1165
|
-
position: relative;
|
|
1166
|
-
overflow: hidden;
|
|
1167
|
-
padding: 0 8px;
|
|
1168
|
-
|
|
1169
|
-
${0}
|
|
1170
|
-
|
|
1171
|
-
&:focus-within {
|
|
1172
|
-
${0}
|
|
1173
|
-
}
|
|
1174
|
-
|
|
1175
|
-
${0};
|
|
1176
|
-
`), p => theme(o => [o.bg.surface3.hover, p.invalid && o.outline.assertive, o.font.text2, o.borderRadius(4)]), p => theme(o => p.invalid ? o.outline.assertive : o.outline.default), ({
|
|
1177
|
-
rows
|
|
1178
|
-
}) => css(_t9 || (_t9 = _$7`
|
|
1179
|
-
height: calc(22px * ${0} + 18px);
|
|
1180
|
-
`), rows));
|
|
1181
|
-
const StyledTextarea = styled.textarea(_t10 || (_t10 = _$7`
|
|
1182
|
-
border: none;
|
|
1183
|
-
outline: none;
|
|
1184
|
-
resize: none;
|
|
1185
|
-
font-family: inherit;
|
|
1186
|
-
color: inherit;
|
|
1187
|
-
|
|
1188
|
-
/* Prevent zooming for iOS Safari */
|
|
1189
|
-
transform-origin: top left;
|
|
1190
|
-
transform: scale(0.875);
|
|
1191
|
-
width: calc(100% / 0.875);
|
|
1192
|
-
font-size: calc(14px / 0.875);
|
|
1193
|
-
line-height: calc(22px / 0.875);
|
|
1194
|
-
padding: calc(9px / 0.875) 0 ${0};
|
|
1195
|
-
|
|
1196
|
-
${0};
|
|
1197
|
-
|
|
1198
|
-
/* Display box-shadow for iOS Safari */
|
|
1199
|
-
appearance: none;
|
|
1200
|
-
|
|
1201
|
-
background: none;
|
|
1202
|
-
|
|
1203
|
-
&::placeholder {
|
|
1204
|
-
${0}
|
|
1205
|
-
}
|
|
1206
|
-
|
|
1207
|
-
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
1208
|
-
&::-webkit-scrollbar {
|
|
1209
|
-
display: none;
|
|
1210
|
-
}
|
|
1211
|
-
/* Hide scrollbar for IE, Edge and Firefox */
|
|
1212
|
-
-ms-overflow-style: none; /* IE and Edge */
|
|
1213
|
-
scrollbar-width: none; /* Firefox */
|
|
1214
|
-
`), p => p.noBottomPadding ? 0 : '', ({
|
|
1215
|
-
rows: _rows = 1
|
|
1216
|
-
}) => css(_t11 || (_t11 = _$7`
|
|
1217
|
-
height: calc(22px / 0.875 * ${0});
|
|
1218
|
-
`), _rows), theme(o => o.font.text3));
|
|
1219
|
-
const SingleLineCounter = styled.span(_t12 || (_t12 = _$7`
|
|
1220
|
-
${0}
|
|
1221
|
-
`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
|
|
1222
|
-
const MultiLineCounter = styled.span(_t13 || (_t13 = _$7`
|
|
1223
|
-
position: absolute;
|
|
1224
|
-
bottom: 9px;
|
|
1225
|
-
right: 8px;
|
|
1226
|
-
|
|
1227
|
-
${0}
|
|
1228
|
-
`), theme(o => [o.typography(14).preserveHalfLeading, o.font.text3]));
|
|
1229
|
-
const AssistiveText = styled.p(_t14 || (_t14 = _$7`
|
|
1230
|
-
${0}
|
|
1231
|
-
`), p => theme(o => [o.typography(14), o.margin.top(8), o.margin.bottom(0), o.font[p.invalid ? 'assertive' : 'text1']]));
|
|
1232
|
-
|
|
1233
|
-
const _excluded$6 = ["name", "scale", "unsafeNonGuidelineScale", "className"];
|
|
1234
|
-
const Icon$1 = React.forwardRef(function IconInner(_ref, ref) {
|
|
1235
|
-
let {
|
|
1236
|
-
name,
|
|
1237
|
-
scale,
|
|
1238
|
-
unsafeNonGuidelineScale,
|
|
1239
|
-
className
|
|
1240
|
-
} = _ref,
|
|
1241
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
1242
|
-
|
|
1243
|
-
return /*#__PURE__*/React.createElement("pixiv-icon", _extends({
|
|
1244
|
-
ref: ref,
|
|
1245
|
-
name: name,
|
|
1246
|
-
scale: scale,
|
|
1247
|
-
"unsafe-non-guideline-scale": unsafeNonGuidelineScale,
|
|
1248
|
-
class: className
|
|
1249
|
-
}, rest));
|
|
1250
|
-
});
|
|
1251
|
-
|
|
1252
|
-
/**
|
|
1253
|
-
* Unit for grid column (px)
|
|
1254
|
-
*/
|
|
1255
|
-
|
|
1256
|
-
const COLUMN_UNIT = 80;
|
|
1257
|
-
/**
|
|
1258
|
-
* Unit for grid gutter width (px)
|
|
1259
|
-
*/
|
|
1260
|
-
|
|
1261
|
-
const GUTTER_UNIT = 24; // TODO: Grid definition with breakpoint
|
|
1262
|
-
|
|
1263
|
-
/**
|
|
1264
|
-
* Calculate px occupied by the span of the columns with gutter gap
|
|
1265
|
-
*
|
|
1266
|
-
* @param span column span count
|
|
1267
|
-
*/
|
|
1268
|
-
|
|
1269
|
-
function columnSystem(span, column, gutter) {
|
|
1270
|
-
return span * column + (span - 1) * gutter;
|
|
1271
|
-
}
|
|
1272
|
-
|
|
1273
|
-
let _$6 = t => t,
|
|
1274
|
-
_t$6,
|
|
1275
|
-
_t2$6,
|
|
1276
|
-
_t3$6,
|
|
1277
|
-
_t4$5,
|
|
1278
|
-
_t5$5,
|
|
1279
|
-
_t6$2,
|
|
1280
|
-
_t7$1;
|
|
1281
|
-
|
|
1282
|
-
const _excluded$5 = ["children", "zIndex", "portalContainer"];
|
|
1283
|
-
const DEFAULT_Z_INDEX = 10;
|
|
1284
|
-
function Modal(_ref) {
|
|
1285
|
-
var _useMedia;
|
|
1286
|
-
|
|
1287
|
-
let {
|
|
1288
|
-
children,
|
|
1289
|
-
zIndex = DEFAULT_Z_INDEX
|
|
1290
|
-
} = _ref,
|
|
1291
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
1292
|
-
|
|
1293
|
-
const {
|
|
1294
|
-
title,
|
|
1295
|
-
size = 'M',
|
|
1296
|
-
bottomSheet = false,
|
|
1297
|
-
isDismissable,
|
|
1298
|
-
onClose,
|
|
1299
|
-
isOpen = false
|
|
1300
|
-
} = props;
|
|
1301
|
-
const ref = useRef(null);
|
|
1302
|
-
const {
|
|
1303
|
-
overlayProps,
|
|
1304
|
-
underlayProps
|
|
1305
|
-
} = useOverlay(props, ref);
|
|
1306
|
-
usePreventScroll();
|
|
1307
|
-
const {
|
|
1308
|
-
modalProps
|
|
1309
|
-
} = useModalOverlay(props, {
|
|
1310
|
-
close: onClose,
|
|
1311
|
-
isOpen: isOpen,
|
|
1312
|
-
// these props are not used actually.
|
|
1313
|
-
// https://github.com/adobe/react-spectrum/blob/df14e3fb129b94b310f0397a701b83f006b51dfe/packages/%40react-aria/overlays/src/useModalOverlay.ts
|
|
1314
|
-
open: () => {// nope
|
|
1315
|
-
},
|
|
1316
|
-
setOpen: () => {// nope
|
|
1317
|
-
},
|
|
1318
|
-
toggle: () => {// nope
|
|
1319
|
-
}
|
|
1320
|
-
}, ref);
|
|
1321
|
-
const {
|
|
1322
|
-
dialogProps,
|
|
1323
|
-
titleProps
|
|
1324
|
-
} = useDialog(props, ref);
|
|
1325
|
-
const theme = useTheme();
|
|
1326
|
-
const isMobile = (_useMedia = useMedia(maxWidth(theme.breakpoint.screen1))) != null ? _useMedia : false;
|
|
1327
|
-
const transitionEnabled = isMobile && bottomSheet !== false;
|
|
1328
|
-
const transition = useTransition(isOpen, {
|
|
1329
|
-
from: {
|
|
1330
|
-
transform: 'translateY(100%)',
|
|
1331
|
-
backgroundColor: 'rgba(0, 0, 0, 0)'
|
|
1332
|
-
},
|
|
1333
|
-
enter: {
|
|
1334
|
-
transform: 'translateY(0%)',
|
|
1335
|
-
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
|
1336
|
-
},
|
|
1337
|
-
leave: {
|
|
1338
|
-
transform: 'translateY(100%)',
|
|
1339
|
-
backgroundColor: 'rgba(0, 0, 0, 0)'
|
|
1340
|
-
},
|
|
1341
|
-
config: transitionEnabled ? {
|
|
1342
|
-
duration: 400,
|
|
1343
|
-
easing: easings.easeOutQuart
|
|
1344
|
-
} : {
|
|
1345
|
-
duration: 0
|
|
1346
|
-
}
|
|
1347
|
-
});
|
|
1348
|
-
const showDismiss = !isMobile || bottomSheet !== true;
|
|
1349
|
-
return transition(({
|
|
1350
|
-
backgroundColor,
|
|
1351
|
-
transform
|
|
1352
|
-
}, item) => item && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ModalBackground, _extends({
|
|
1353
|
-
zIndex: zIndex
|
|
1354
|
-
}, underlayProps, {
|
|
1355
|
-
style: transitionEnabled ? {
|
|
1356
|
-
backgroundColor
|
|
1357
|
-
} : {}
|
|
1358
|
-
}), /*#__PURE__*/React.createElement(FocusScope, {
|
|
1359
|
-
contain: true,
|
|
1360
|
-
restoreFocus: true,
|
|
1361
|
-
autoFocus: true
|
|
1362
|
-
}, /*#__PURE__*/React.createElement(ModalDialog, _extends({
|
|
1363
|
-
ref: ref
|
|
1364
|
-
}, overlayProps, modalProps, dialogProps, {
|
|
1365
|
-
style: transitionEnabled ? {
|
|
1366
|
-
transform
|
|
1367
|
-
} : {},
|
|
1368
|
-
size: size,
|
|
1369
|
-
bottomSheet: bottomSheet
|
|
1370
|
-
}), /*#__PURE__*/React.createElement(ModalContext.Provider, {
|
|
1371
|
-
value: {
|
|
1372
|
-
titleProps,
|
|
1373
|
-
title,
|
|
1374
|
-
close: onClose,
|
|
1375
|
-
showDismiss
|
|
1376
|
-
}
|
|
1377
|
-
}, children, isDismissable === true && /*#__PURE__*/React.createElement(ModalCrossButton, {
|
|
1378
|
-
size: "S",
|
|
1379
|
-
icon: "24/Close",
|
|
1380
|
-
onClick: onClose
|
|
1381
|
-
})))))));
|
|
1382
|
-
}
|
|
1383
|
-
const ModalContext = React.createContext({
|
|
1384
|
-
titleProps: {},
|
|
1385
|
-
title: '',
|
|
1386
|
-
close: undefined,
|
|
1387
|
-
showDismiss: true
|
|
1388
|
-
});
|
|
1389
|
-
const ModalBackground = animated(styled.div(_t$6 || (_t$6 = _$6`
|
|
1390
|
-
z-index: ${0};
|
|
1391
|
-
position: fixed;
|
|
1392
|
-
top: 0;
|
|
1393
|
-
left: 0;
|
|
1394
|
-
width: 100%;
|
|
1395
|
-
height: 100%;
|
|
1396
|
-
|
|
1397
|
-
${0}
|
|
1398
|
-
`), ({
|
|
1399
|
-
zIndex
|
|
1400
|
-
}) => zIndex, theme$2(o => [o.bg.surface4])));
|
|
1401
|
-
const ModalDialog = animated(styled.div(_t2$6 || (_t2$6 = _$6`
|
|
1402
|
-
position: absolute;
|
|
1403
|
-
top: 50%;
|
|
1404
|
-
left: 50%;
|
|
1405
|
-
transform: translate(-50%, -50%);
|
|
1406
|
-
width: ${0}px;
|
|
1407
|
-
|
|
1408
|
-
${0}
|
|
1409
|
-
|
|
1410
|
-
@media ${0} {
|
|
1411
|
-
${0}
|
|
1412
|
-
}
|
|
1413
|
-
`), p => p.size === 'S' ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === 'M' ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
1414
|
-
p.size === 'L' ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size), theme$2(o => [o.bg.background1, o.borderRadius(24)]), ({
|
|
1415
|
-
theme
|
|
1416
|
-
}) => maxWidth(theme.breakpoint.screen1), p => p.bottomSheet === 'full' ? css(_t3$6 || (_t3$6 = _$6`
|
|
1417
|
-
top: auto;
|
|
1418
|
-
bottom: 0;
|
|
1419
|
-
left: 0;
|
|
1420
|
-
transform: none;
|
|
1421
|
-
border-radius: 0;
|
|
1422
|
-
width: 100%;
|
|
1423
|
-
height: 100%;
|
|
1424
|
-
`)) : p.bottomSheet ? css(_t4$5 || (_t4$5 = _$6`
|
|
1425
|
-
top: auto;
|
|
1426
|
-
bottom: 0;
|
|
1427
|
-
left: 0;
|
|
1428
|
-
transform: none;
|
|
1429
|
-
border-radius: 0;
|
|
1430
|
-
width: 100%;
|
|
1431
|
-
`)) : css(_t5$5 || (_t5$5 = _$6`
|
|
1432
|
-
width: calc(100% - 48px);
|
|
1433
|
-
`))));
|
|
1434
|
-
const ModalCrossButton = styled(IconButton)(_t6$2 || (_t6$2 = _$6`
|
|
1435
|
-
position: absolute;
|
|
1436
|
-
top: 8px;
|
|
1437
|
-
right: 8px;
|
|
1438
|
-
|
|
1439
|
-
${0}
|
|
1440
|
-
`), theme$2(o => [o.font.text3.hover.press]));
|
|
1441
|
-
function ModalTitle(props) {
|
|
1442
|
-
const {
|
|
1443
|
-
titleProps,
|
|
1444
|
-
title
|
|
1445
|
-
} = useContext(ModalContext);
|
|
1446
|
-
return /*#__PURE__*/React.createElement(ModalHeading, _extends({}, titleProps, props), title);
|
|
1447
|
-
}
|
|
1448
|
-
const ModalHeading = styled.h3(_t7$1 || (_t7$1 = _$6`
|
|
1449
|
-
margin: 0;
|
|
1450
|
-
font-weight: inherit;
|
|
1451
|
-
font-size: inherit;
|
|
1452
|
-
`));
|
|
1453
|
-
|
|
1454
|
-
let _$5 = t => t,
|
|
1455
|
-
_t$5,
|
|
1456
|
-
_t2$5,
|
|
1457
|
-
_t3$5,
|
|
1458
|
-
_t4$4,
|
|
1459
|
-
_t5$4;
|
|
1460
|
-
function ModalHeader() {
|
|
1461
|
-
return /*#__PURE__*/React.createElement(ModalHeaderRoot, null, /*#__PURE__*/React.createElement(StyledModalTitle, null));
|
|
1462
|
-
}
|
|
1463
|
-
const ModalHeaderRoot = styled.div(_t$5 || (_t$5 = _$5`
|
|
1464
|
-
height: 64px;
|
|
1465
|
-
display: grid;
|
|
1466
|
-
align-content: center;
|
|
1467
|
-
justify-content: center;
|
|
1468
|
-
`));
|
|
1469
|
-
const StyledModalTitle = styled(ModalTitle)(_t2$5 || (_t2$5 = _$5`
|
|
1470
|
-
${0}
|
|
1471
|
-
`), theme$2(o => [o.font.text1, o.typography(16).bold]));
|
|
1472
|
-
const ModalAlign = styled.div(_t3$5 || (_t3$5 = _$5`
|
|
1473
|
-
${0}
|
|
1474
|
-
|
|
1475
|
-
@media ${0} {
|
|
1476
|
-
${0}
|
|
1477
|
-
}
|
|
1478
|
-
`), theme$2(o => [o.padding.horizontal(24)]), ({
|
|
1479
|
-
theme
|
|
1480
|
-
}) => maxWidth(theme.breakpoint.screen1), theme$2(o => [o.padding.horizontal(16)]));
|
|
1481
|
-
const ModalBody = styled.div(_t4$4 || (_t4$4 = _$5`
|
|
1482
|
-
${0}
|
|
1483
|
-
`), theme$2(o => [o.padding.bottom(40)]));
|
|
1484
|
-
const ModalButtons = styled.div(_t5$4 || (_t5$4 = _$5`
|
|
1485
|
-
display: grid;
|
|
1486
|
-
grid-auto-flow: row;
|
|
1487
|
-
grid-row-gap: 8px;
|
|
1488
|
-
${0}
|
|
1489
|
-
|
|
1490
|
-
@media ${0} {
|
|
1491
|
-
${0}
|
|
1492
|
-
}
|
|
1493
|
-
`), theme$2(o => [o.padding.horizontal(24).top(16)]), ({
|
|
1494
|
-
theme
|
|
1495
|
-
}) => maxWidth(theme.breakpoint.screen1), theme$2(o => [o.padding.horizontal(16)]));
|
|
1496
|
-
|
|
1497
|
-
let _$4 = t => t,
|
|
1498
|
-
_t$4,
|
|
1499
|
-
_t2$4,
|
|
1500
|
-
_t3$4;
|
|
1501
|
-
function LoadingSpinner({
|
|
1502
|
-
size = 48,
|
|
1503
|
-
padding = 16,
|
|
1504
|
-
transparent = false
|
|
1505
|
-
}) {
|
|
1506
|
-
return /*#__PURE__*/React.createElement(LoadingSpinnerRoot, {
|
|
1507
|
-
size: size,
|
|
1508
|
-
padding: padding,
|
|
1509
|
-
transparent: transparent
|
|
1510
|
-
}, /*#__PURE__*/React.createElement(LoadingSpinnerIcon, null));
|
|
1511
|
-
}
|
|
1512
|
-
const LoadingSpinnerRoot = styled.div.attrs({
|
|
1513
|
-
role: 'progressbar'
|
|
1514
|
-
})(_t$4 || (_t$4 = _$4`
|
|
1515
|
-
margin: auto;
|
|
1516
|
-
padding: ${0}px;
|
|
1517
|
-
border-radius: 8px;
|
|
1518
|
-
font-size: ${0}px;
|
|
1519
|
-
width: ${0}px;
|
|
1520
|
-
height: ${0}px;
|
|
1521
|
-
background-color: ${0};
|
|
1522
|
-
color: ${0};
|
|
1523
|
-
`), props => props.padding, props => props.size, props => props.size, props => props.size, ({
|
|
1524
|
-
theme,
|
|
1525
|
-
transparent
|
|
1526
|
-
}) => transparent ? 'transparent' : transparentize(0.32, theme.color.background1), ({
|
|
1527
|
-
theme
|
|
1528
|
-
}) => theme.color.text4);
|
|
1529
|
-
const scaleout = keyframes(_t2$4 || (_t2$4 = _$4`
|
|
1530
|
-
from {
|
|
1531
|
-
transform: scale(0);
|
|
1532
|
-
opacity: 1;
|
|
1533
|
-
}
|
|
1534
|
-
|
|
1535
|
-
to {
|
|
1536
|
-
transform: scale(1);
|
|
1537
|
-
opacity: 0;
|
|
1538
|
-
}
|
|
1539
|
-
`));
|
|
1540
|
-
const Icon = styled.div.attrs({
|
|
1541
|
-
role: 'presentation'
|
|
1542
|
-
})(_t3$4 || (_t3$4 = _$4`
|
|
1543
|
-
width: 1em;
|
|
1544
|
-
height: 1em;
|
|
1545
|
-
border-radius: 1em;
|
|
1546
|
-
background-color: currentColor;
|
|
1547
|
-
animation: ${0} 1s both ease-out;
|
|
1548
|
-
animation-iteration-count: ${0};
|
|
1549
|
-
|
|
1550
|
-
&[data-reset-animation] {
|
|
1551
|
-
animation: none;
|
|
1552
|
-
}
|
|
1553
|
-
`), scaleout, p => p.once ? 1 : 'infinite');
|
|
1554
|
-
const LoadingSpinnerIcon = React.forwardRef(function LoadingSpinnerIcon({
|
|
1555
|
-
once = false
|
|
1556
|
-
}, ref) {
|
|
1557
|
-
const iconRef = useRef(null);
|
|
1558
|
-
useImperativeHandle(ref, () => ({
|
|
1559
|
-
restart: () => {
|
|
1560
|
-
if (!iconRef.current) {
|
|
1561
|
-
return;
|
|
1562
|
-
}
|
|
1563
|
-
|
|
1564
|
-
iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
|
|
1565
|
-
delete iconRef.current.dataset.resetAnimation;
|
|
1566
|
-
}
|
|
1567
|
-
}));
|
|
1568
|
-
return /*#__PURE__*/React.createElement(Icon, {
|
|
1569
|
-
ref: iconRef,
|
|
1570
|
-
once: once
|
|
1571
|
-
});
|
|
1572
|
-
});
|
|
1573
|
-
|
|
1574
|
-
function toVal(mix) {
|
|
1575
|
-
var k,
|
|
1576
|
-
y,
|
|
1577
|
-
str = '';
|
|
1578
|
-
|
|
1579
|
-
if (typeof mix === 'string' || typeof mix === 'number') {
|
|
1580
|
-
str += mix;
|
|
1581
|
-
} else if (typeof mix === 'object') {
|
|
1582
|
-
if (Array.isArray(mix)) {
|
|
1583
|
-
for (k = 0; k < mix.length; k++) {
|
|
1584
|
-
if (mix[k]) {
|
|
1585
|
-
if (y = toVal(mix[k])) {
|
|
1586
|
-
str && (str += ' ');
|
|
1587
|
-
str += y;
|
|
1588
|
-
}
|
|
1589
|
-
}
|
|
1590
|
-
}
|
|
1591
|
-
} else {
|
|
1592
|
-
for (k in mix) {
|
|
1593
|
-
if (mix[k]) {
|
|
1594
|
-
str && (str += ' ');
|
|
1595
|
-
str += k;
|
|
1596
|
-
}
|
|
1597
|
-
}
|
|
1598
|
-
}
|
|
1599
|
-
}
|
|
1600
|
-
|
|
1601
|
-
return str;
|
|
1602
|
-
}
|
|
1603
|
-
|
|
1604
|
-
function $12uGp$clsx () {
|
|
1605
|
-
var i = 0,
|
|
1606
|
-
tmp,
|
|
1607
|
-
x,
|
|
1608
|
-
str = '';
|
|
1609
|
-
|
|
1610
|
-
while (i < arguments.length) {
|
|
1611
|
-
if (tmp = arguments[i++]) {
|
|
1612
|
-
if (x = toVal(tmp)) {
|
|
1613
|
-
str && (str += ' ');
|
|
1614
|
-
str += x;
|
|
1615
|
-
}
|
|
1616
|
-
}
|
|
1617
|
-
}
|
|
1618
|
-
|
|
1619
|
-
return str;
|
|
1620
|
-
}
|
|
1621
|
-
|
|
1622
|
-
const $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof window !== 'undefined' ? React.useLayoutEffect : () => {};
|
|
1623
|
-
let $bdb11010cef70236$var$idsUpdaterMap = new Map();
|
|
1624
|
-
|
|
1625
|
-
function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
|
|
1626
|
-
let [value, setValue] = useState(defaultId);
|
|
1627
|
-
let nextId = useRef(null);
|
|
1628
|
-
let res = useSSRSafeId(value);
|
|
1629
|
-
let updateValue = useCallback(val => {
|
|
1630
|
-
nextId.current = val;
|
|
1631
|
-
}, []);
|
|
1632
|
-
$bdb11010cef70236$var$idsUpdaterMap.set(res, updateValue);
|
|
1633
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
1634
|
-
let r = res;
|
|
1635
|
-
return () => {
|
|
1636
|
-
$bdb11010cef70236$var$idsUpdaterMap.delete(r);
|
|
1637
|
-
};
|
|
1638
|
-
}, [res]); // This cannot cause an infinite loop because the ref is updated first.
|
|
1639
|
-
// eslint-disable-next-line
|
|
1640
|
-
|
|
1641
|
-
useEffect(() => {
|
|
1642
|
-
let newId = nextId.current;
|
|
1643
|
-
|
|
1644
|
-
if (newId) {
|
|
1645
|
-
nextId.current = null;
|
|
1646
|
-
setValue(newId);
|
|
1647
|
-
}
|
|
1648
|
-
});
|
|
1649
|
-
return res;
|
|
1650
|
-
}
|
|
1651
|
-
|
|
1652
|
-
function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
|
|
1653
|
-
if (idA === idB) return idA;
|
|
1654
|
-
let setIdA = $bdb11010cef70236$var$idsUpdaterMap.get(idA);
|
|
1655
|
-
|
|
1656
|
-
if (setIdA) {
|
|
1657
|
-
setIdA(idB);
|
|
1658
|
-
return idB;
|
|
1659
|
-
}
|
|
1660
|
-
|
|
1661
|
-
let setIdB = $bdb11010cef70236$var$idsUpdaterMap.get(idB);
|
|
1662
|
-
|
|
1663
|
-
if (setIdB) {
|
|
1664
|
-
setIdB(idA);
|
|
1665
|
-
return idA;
|
|
1666
|
-
}
|
|
1667
|
-
|
|
1668
|
-
return idB;
|
|
1669
|
-
}
|
|
1670
|
-
|
|
1671
|
-
function $bdb11010cef70236$export$b4cc09c592e8fdb8(depArray = []) {
|
|
1672
|
-
let id = $bdb11010cef70236$export$f680877a34711e37();
|
|
1673
|
-
let [resolvedId, setResolvedId] = $1dbecbe27a04f9af$export$14d238f342723f25(id);
|
|
1674
|
-
let updateId = useCallback(() => {
|
|
1675
|
-
setResolvedId(function* () {
|
|
1676
|
-
yield id;
|
|
1677
|
-
yield document.getElementById(id) ? id : undefined;
|
|
1678
|
-
});
|
|
1679
|
-
}, [id, setResolvedId]);
|
|
1680
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(updateId, [id, updateId, ...depArray]);
|
|
1681
|
-
return resolvedId;
|
|
1682
|
-
}
|
|
1683
|
-
|
|
1684
|
-
function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
|
|
1685
|
-
return (...args) => {
|
|
1686
|
-
for (let callback of callbacks) if (typeof callback === 'function') callback(...args);
|
|
1687
|
-
};
|
|
1688
|
-
}
|
|
1689
|
-
|
|
1690
|
-
function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
|
|
1691
|
-
// Start with a base clone of the first argument. This is a lot faster than starting
|
|
1692
|
-
// with an empty object and adding properties as we go.
|
|
1693
|
-
let result = _extends({}, args[0]);
|
|
1694
|
-
|
|
1695
|
-
for (let i = 1; i < args.length; i++) {
|
|
1696
|
-
let props = args[i];
|
|
1697
|
-
|
|
1698
|
-
for (let key in props) {
|
|
1699
|
-
let a = result[key];
|
|
1700
|
-
let b = props[key]; // Chain events
|
|
1701
|
-
|
|
1702
|
-
if (typeof a === 'function' && typeof b === 'function' && // This is a lot faster than a regex.
|
|
1703
|
-
key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) >=
|
|
1704
|
-
/* 'A' */
|
|
1705
|
-
65 && key.charCodeAt(2) <=
|
|
1706
|
-
/* 'Z' */
|
|
1707
|
-
90) result[key] = $ff5963eb1fccf552$export$e08e3b67e392101e(a, b);else if ((key === 'className' || key === 'UNSAFE_className') && typeof a === 'string' && typeof b === 'string') result[key] = $12uGp$clsx(a, b);else if (key === 'id' && a && b) result.id = $bdb11010cef70236$export$cd8c9cb68f842629(a, b);else result[key] = b !== undefined ? b : a;
|
|
1708
|
-
}
|
|
1709
|
-
}
|
|
1710
|
-
|
|
1711
|
-
return result;
|
|
1712
|
-
}
|
|
1713
|
-
|
|
1714
|
-
const $65484d02dcb7eb3e$var$DOMPropNames = new Set(['id']);
|
|
1715
|
-
const $65484d02dcb7eb3e$var$labelablePropNames = new Set(['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-details']);
|
|
1716
|
-
const $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
|
|
1717
|
-
|
|
1718
|
-
function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
|
|
1719
|
-
let {
|
|
1720
|
-
labelable: labelable,
|
|
1721
|
-
propNames: propNames
|
|
1722
|
-
} = opts;
|
|
1723
|
-
let filteredProps = {};
|
|
1724
|
-
|
|
1725
|
-
for (const prop in props) if (Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) || $65484d02dcb7eb3e$var$propRe.test(prop))) filteredProps[prop] = props[prop];
|
|
1726
|
-
|
|
1727
|
-
return filteredProps;
|
|
1728
|
-
}
|
|
1729
|
-
|
|
1730
|
-
function $7215afc6de606d6b$export$de79e2c695e052f3(element) {
|
|
1731
|
-
if ($7215afc6de606d6b$var$supportsPreventScroll()) element.focus({
|
|
1732
|
-
preventScroll: true
|
|
1733
|
-
});else {
|
|
1734
|
-
let scrollableElements = $7215afc6de606d6b$var$getScrollableElements(element);
|
|
1735
|
-
element.focus();
|
|
1736
|
-
$7215afc6de606d6b$var$restoreScrollPosition(scrollableElements);
|
|
1737
|
-
}
|
|
1738
|
-
}
|
|
1739
|
-
|
|
1740
|
-
let $7215afc6de606d6b$var$supportsPreventScrollCached = null;
|
|
1741
|
-
|
|
1742
|
-
function $7215afc6de606d6b$var$supportsPreventScroll() {
|
|
1743
|
-
if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
|
|
1744
|
-
$7215afc6de606d6b$var$supportsPreventScrollCached = false;
|
|
1745
|
-
|
|
1746
|
-
try {
|
|
1747
|
-
var focusElem = document.createElement('div');
|
|
1748
|
-
focusElem.focus({
|
|
1749
|
-
get preventScroll() {
|
|
1750
|
-
$7215afc6de606d6b$var$supportsPreventScrollCached = true;
|
|
1751
|
-
return true;
|
|
1752
|
-
}
|
|
1753
|
-
|
|
1754
|
-
});
|
|
1755
|
-
} catch (e) {// Ignore
|
|
1756
|
-
}
|
|
1757
|
-
}
|
|
1758
|
-
|
|
1759
|
-
return $7215afc6de606d6b$var$supportsPreventScrollCached;
|
|
1760
|
-
}
|
|
1761
|
-
|
|
1762
|
-
function $7215afc6de606d6b$var$getScrollableElements(element) {
|
|
1763
|
-
var parent = element.parentNode;
|
|
1764
|
-
var scrollableElements = [];
|
|
1765
|
-
var rootScrollingElement = document.scrollingElement || document.documentElement;
|
|
1766
|
-
|
|
1767
|
-
while (parent instanceof HTMLElement && parent !== rootScrollingElement) {
|
|
1768
|
-
if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) scrollableElements.push({
|
|
1769
|
-
element: parent,
|
|
1770
|
-
scrollTop: parent.scrollTop,
|
|
1771
|
-
scrollLeft: parent.scrollLeft
|
|
1772
|
-
});
|
|
1773
|
-
parent = parent.parentNode;
|
|
1774
|
-
}
|
|
1775
|
-
|
|
1776
|
-
if (rootScrollingElement instanceof HTMLElement) scrollableElements.push({
|
|
1777
|
-
element: rootScrollingElement,
|
|
1778
|
-
scrollTop: rootScrollingElement.scrollTop,
|
|
1779
|
-
scrollLeft: rootScrollingElement.scrollLeft
|
|
1780
|
-
});
|
|
1781
|
-
return scrollableElements;
|
|
1782
|
-
}
|
|
1783
|
-
|
|
1784
|
-
function $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements) {
|
|
1785
|
-
for (let {
|
|
1786
|
-
element: element,
|
|
1787
|
-
scrollTop: scrollTop,
|
|
1788
|
-
scrollLeft: scrollLeft
|
|
1789
|
-
} of scrollableElements) {
|
|
1790
|
-
element.scrollTop = scrollTop;
|
|
1791
|
-
element.scrollLeft = scrollLeft;
|
|
1792
|
-
}
|
|
1793
|
-
}
|
|
1794
|
-
/*
|
|
1795
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
1796
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1797
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1798
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1799
|
-
*
|
|
1800
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1801
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1802
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1803
|
-
* governing permissions and limitations under the License.
|
|
1804
|
-
*/
|
|
1805
|
-
// We store a global list of elements that are currently transitioning,
|
|
1806
|
-
// mapped to a set of CSS properties that are transitioning for that element.
|
|
1807
|
-
// This is necessary rather than a simple count of transitions because of browser
|
|
1808
|
-
// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
|
|
1809
|
-
// than one or the other. So we need to track what's actually transitioning so that
|
|
1810
|
-
// we can ignore these duplicate events.
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
let $bbed8b41f857bcc0$var$transitionsByElement = new Map(); // A list of callbacks to call once there are no transitioning elements.
|
|
1814
|
-
|
|
1815
|
-
let $bbed8b41f857bcc0$var$transitionCallbacks = new Set();
|
|
1816
|
-
|
|
1817
|
-
function $bbed8b41f857bcc0$var$setupGlobalEvents() {
|
|
1818
|
-
if (typeof window === 'undefined') return;
|
|
1819
|
-
|
|
1820
|
-
let onTransitionStart = e => {
|
|
1821
|
-
// Add the transitioning property to the list for this element.
|
|
1822
|
-
let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
|
|
1823
|
-
|
|
1824
|
-
if (!transitions) {
|
|
1825
|
-
transitions = new Set();
|
|
1826
|
-
$bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions); // The transitioncancel event must be registered on the element itself, rather than as a global
|
|
1827
|
-
// event. This enables us to handle when the node is deleted from the document while it is transitioning.
|
|
1828
|
-
// In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
|
|
1829
|
-
|
|
1830
|
-
e.target.addEventListener('transitioncancel', onTransitionEnd);
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
transitions.add(e.propertyName);
|
|
1834
|
-
};
|
|
1835
|
-
|
|
1836
|
-
let onTransitionEnd = e => {
|
|
1837
|
-
// Remove property from list of transitioning properties.
|
|
1838
|
-
let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
|
|
1839
|
-
if (!properties) return;
|
|
1840
|
-
properties.delete(e.propertyName); // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
|
|
1841
|
-
|
|
1842
|
-
if (properties.size === 0) {
|
|
1843
|
-
e.target.removeEventListener('transitioncancel', onTransitionEnd);
|
|
1844
|
-
$bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
|
|
1845
|
-
} // If no transitioning elements, call all of the queued callbacks.
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
|
|
1849
|
-
for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks) cb();
|
|
1850
|
-
|
|
1851
|
-
$bbed8b41f857bcc0$var$transitionCallbacks.clear();
|
|
1852
|
-
}
|
|
1853
|
-
};
|
|
1854
|
-
|
|
1855
|
-
document.body.addEventListener('transitionrun', onTransitionStart);
|
|
1856
|
-
document.body.addEventListener('transitionend', onTransitionEnd);
|
|
1857
|
-
}
|
|
1858
|
-
|
|
1859
|
-
if (typeof document !== 'undefined') {
|
|
1860
|
-
if (document.readyState !== 'loading') $bbed8b41f857bcc0$var$setupGlobalEvents();else document.addEventListener('DOMContentLoaded', $bbed8b41f857bcc0$var$setupGlobalEvents);
|
|
1861
|
-
}
|
|
1862
|
-
|
|
1863
|
-
function $bbed8b41f857bcc0$export$24490316f764c430(fn) {
|
|
1864
|
-
// Wait one frame to see if an animation starts, e.g. a transition on mount.
|
|
1865
|
-
requestAnimationFrame(() => {
|
|
1866
|
-
// If no transitions are running, call the function immediately.
|
|
1867
|
-
// Otherwise, add it to a list of callbacks to run at the end of the animation.
|
|
1868
|
-
if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) fn();else $bbed8b41f857bcc0$var$transitionCallbacks.add(fn);
|
|
1869
|
-
});
|
|
1870
|
-
} // Keep track of elements that we are currently handling dragging for via useDrag1D.
|
|
1871
|
-
|
|
1872
|
-
function $03deb23ff14920c4$export$4eaf04e54aa8eed6() {
|
|
1873
|
-
let globalListeners = useRef(new Map());
|
|
1874
|
-
let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
|
|
1875
|
-
// Make sure we remove the listener after it is called with the `once` option.
|
|
1876
|
-
let fn = (options === null || options === void 0 ? void 0 : options.once) ? (...args) => {
|
|
1877
|
-
globalListeners.current.delete(listener);
|
|
1878
|
-
listener(...args);
|
|
1879
|
-
} : listener;
|
|
1880
|
-
globalListeners.current.set(listener, {
|
|
1881
|
-
type: type,
|
|
1882
|
-
eventTarget: eventTarget,
|
|
1883
|
-
fn: fn,
|
|
1884
|
-
options: options
|
|
1885
|
-
});
|
|
1886
|
-
eventTarget.addEventListener(type, listener, options);
|
|
1887
|
-
}, []);
|
|
1888
|
-
let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
|
|
1889
|
-
var ref;
|
|
1890
|
-
let fn = ((ref = globalListeners.current.get(listener)) === null || ref === void 0 ? void 0 : ref.fn) || listener;
|
|
1891
|
-
eventTarget.removeEventListener(type, fn, options);
|
|
1892
|
-
globalListeners.current.delete(listener);
|
|
1893
|
-
}, []);
|
|
1894
|
-
let removeAllGlobalListeners = useCallback(() => {
|
|
1895
|
-
globalListeners.current.forEach((value, key) => {
|
|
1896
|
-
removeGlobalListener(value.eventTarget, value.type, key, value.options);
|
|
1897
|
-
});
|
|
1898
|
-
}, [removeGlobalListener]); // eslint-disable-next-line arrow-body-style
|
|
1899
|
-
|
|
1900
|
-
useEffect(() => {
|
|
1901
|
-
return removeAllGlobalListeners;
|
|
1902
|
-
}, [removeAllGlobalListeners]);
|
|
1903
|
-
return {
|
|
1904
|
-
addGlobalListener: addGlobalListener,
|
|
1905
|
-
removeGlobalListener: removeGlobalListener,
|
|
1906
|
-
removeAllGlobalListeners: removeAllGlobalListeners
|
|
1907
|
-
};
|
|
1908
|
-
}
|
|
1909
|
-
|
|
1910
|
-
function $313b98861ee5dd6c$export$d6875122194c7b44(props, defaultLabel) {
|
|
1911
|
-
let {
|
|
1912
|
-
id: id,
|
|
1913
|
-
'aria-label': label,
|
|
1914
|
-
'aria-labelledby': labelledBy
|
|
1915
|
-
} = props; // If there is both an aria-label and aria-labelledby,
|
|
1916
|
-
// combine them by pointing to the element itself.
|
|
1917
|
-
|
|
1918
|
-
id = $bdb11010cef70236$export$f680877a34711e37(id);
|
|
1919
|
-
|
|
1920
|
-
if (labelledBy && label) {
|
|
1921
|
-
let ids = new Set([...labelledBy.trim().split(/\s+/), id]);
|
|
1922
|
-
labelledBy = [...ids].join(' ');
|
|
1923
|
-
} else if (labelledBy) labelledBy = labelledBy.trim().split(/\s+/).join(' '); // If no labels are provided, use the default
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
if (!label && !labelledBy && defaultLabel) label = defaultLabel;
|
|
1927
|
-
return {
|
|
1928
|
-
id: id,
|
|
1929
|
-
'aria-label': label,
|
|
1930
|
-
'aria-labelledby': labelledBy
|
|
1931
|
-
};
|
|
1932
|
-
}
|
|
1933
|
-
|
|
1934
|
-
function $df56164dff5785e2$export$4338b53315abf666(forwardedRef) {
|
|
1935
|
-
const objRef = useRef();
|
|
1936
|
-
/**
|
|
1937
|
-
* We're using `useLayoutEffect` here instead of `useEffect` because we want
|
|
1938
|
-
* to make sure that the `ref` value is up to date before other places in the
|
|
1939
|
-
* the execution cycle try to read it.
|
|
1940
|
-
*/
|
|
1941
|
-
|
|
1942
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
1943
|
-
if (!forwardedRef) return;
|
|
1944
|
-
if (typeof forwardedRef === 'function') forwardedRef(objRef.current);else forwardedRef.current = objRef.current;
|
|
1945
|
-
}, [forwardedRef]);
|
|
1946
|
-
return objRef;
|
|
1947
|
-
}
|
|
1948
|
-
|
|
1949
|
-
function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
|
|
1950
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
1951
|
-
if (context && context.ref && ref) {
|
|
1952
|
-
context.ref.current = ref.current;
|
|
1953
|
-
return () => {
|
|
1954
|
-
context.ref.current = null;
|
|
1955
|
-
};
|
|
1956
|
-
}
|
|
1957
|
-
}, [context, ref]);
|
|
1958
|
-
}
|
|
1959
|
-
|
|
1960
|
-
let $ef06256079686ba0$var$descriptionId = 0;
|
|
1961
|
-
const $ef06256079686ba0$var$descriptionNodes = new Map();
|
|
1962
|
-
|
|
1963
|
-
function $ef06256079686ba0$export$f8aeda7b10753fa1(description) {
|
|
1964
|
-
let [id1, setId] = useState(undefined);
|
|
1965
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
1966
|
-
if (!description) return;
|
|
1967
|
-
let desc = $ef06256079686ba0$var$descriptionNodes.get(description);
|
|
1968
|
-
|
|
1969
|
-
if (!desc) {
|
|
1970
|
-
let id = `react-aria-description-${$ef06256079686ba0$var$descriptionId++}`;
|
|
1971
|
-
setId(id);
|
|
1972
|
-
let node = document.createElement('div');
|
|
1973
|
-
node.id = id;
|
|
1974
|
-
node.style.display = 'none';
|
|
1975
|
-
node.textContent = description;
|
|
1976
|
-
document.body.appendChild(node);
|
|
1977
|
-
desc = {
|
|
1978
|
-
refCount: 0,
|
|
1979
|
-
element: node
|
|
1980
|
-
};
|
|
1981
|
-
$ef06256079686ba0$var$descriptionNodes.set(description, desc);
|
|
1982
|
-
} else setId(desc.element.id);
|
|
1983
|
-
|
|
1984
|
-
desc.refCount++;
|
|
1985
|
-
return () => {
|
|
1986
|
-
if (--desc.refCount === 0) {
|
|
1987
|
-
desc.element.remove();
|
|
1988
|
-
$ef06256079686ba0$var$descriptionNodes.delete(description);
|
|
1989
|
-
}
|
|
1990
|
-
};
|
|
1991
|
-
}, [description]);
|
|
1992
|
-
return {
|
|
1993
|
-
'aria-describedby': description ? id1 : undefined
|
|
1994
|
-
};
|
|
1995
|
-
}
|
|
1996
|
-
/*
|
|
1997
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
1998
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1999
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
2000
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
2001
|
-
*
|
|
2002
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
2003
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
2004
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
2005
|
-
* governing permissions and limitations under the License.
|
|
2006
|
-
*/
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
function $c87311424ea30a05$var$testUserAgent(re) {
|
|
2010
|
-
var ref;
|
|
2011
|
-
if (typeof window === 'undefined' || window.navigator == null) return false;
|
|
2012
|
-
return ((ref = window.navigator['userAgentData']) === null || ref === void 0 ? void 0 : ref.brands.some(brand => re.test(brand.brand))) || re.test(window.navigator.userAgent);
|
|
2013
|
-
}
|
|
2014
|
-
|
|
2015
|
-
function $c87311424ea30a05$var$testPlatform(re) {
|
|
2016
|
-
var ref;
|
|
2017
|
-
return typeof window !== 'undefined' && window.navigator != null ? re.test(((ref = window.navigator['userAgentData']) === null || ref === void 0 ? void 0 : ref.platform) || window.navigator.platform) : false;
|
|
2018
|
-
}
|
|
2019
|
-
|
|
2020
|
-
function $c87311424ea30a05$export$9ac100e40613ea10() {
|
|
2021
|
-
return $c87311424ea30a05$var$testPlatform(/^Mac/i);
|
|
2022
|
-
}
|
|
2023
|
-
|
|
2024
|
-
function $c87311424ea30a05$export$186c6964ca17d99() {
|
|
2025
|
-
return $c87311424ea30a05$var$testPlatform(/^iPhone/i);
|
|
2026
|
-
}
|
|
2027
|
-
|
|
2028
|
-
function $c87311424ea30a05$export$7bef049ce92e4224() {
|
|
2029
|
-
return $c87311424ea30a05$var$testPlatform(/^iPad/i) || $c87311424ea30a05$export$9ac100e40613ea10() && navigator.maxTouchPoints > 1;
|
|
2030
|
-
}
|
|
2031
|
-
|
|
2032
|
-
function $c87311424ea30a05$export$fedb369cb70207f1() {
|
|
2033
|
-
return $c87311424ea30a05$export$186c6964ca17d99() || $c87311424ea30a05$export$7bef049ce92e4224();
|
|
2034
|
-
}
|
|
2035
|
-
|
|
2036
|
-
function $c87311424ea30a05$export$e1865c3bedcd822b() {
|
|
2037
|
-
return $c87311424ea30a05$export$9ac100e40613ea10() || $c87311424ea30a05$export$fedb369cb70207f1();
|
|
2038
|
-
}
|
|
2039
|
-
|
|
2040
|
-
function $c87311424ea30a05$export$78551043582a6a98() {
|
|
2041
|
-
return $c87311424ea30a05$var$testUserAgent(/AppleWebKit/i) && !$c87311424ea30a05$export$6446a186d09e379e();
|
|
2042
|
-
}
|
|
2043
|
-
|
|
2044
|
-
function $c87311424ea30a05$export$6446a186d09e379e() {
|
|
2045
|
-
return $c87311424ea30a05$var$testUserAgent(/Chrome/i);
|
|
2046
|
-
}
|
|
2047
|
-
|
|
2048
|
-
function $c87311424ea30a05$export$a11b0059900ceec8() {
|
|
2049
|
-
return $c87311424ea30a05$var$testUserAgent(/Android/i);
|
|
2050
|
-
}
|
|
2051
|
-
|
|
2052
|
-
function $e9faafb641e167db$export$90fc3a17d93f704c(ref, event, handler1, options) {
|
|
2053
|
-
let handlerRef = useRef(handler1);
|
|
2054
|
-
handlerRef.current = handler1;
|
|
2055
|
-
let isDisabled = handler1 == null;
|
|
2056
|
-
useEffect(() => {
|
|
2057
|
-
if (isDisabled) return;
|
|
2058
|
-
let element = ref.current;
|
|
2059
|
-
|
|
2060
|
-
let handler = e => handlerRef.current.call(this, e);
|
|
2061
|
-
|
|
2062
|
-
element.addEventListener(event, handler, options);
|
|
2063
|
-
return () => {
|
|
2064
|
-
element.removeEventListener(event, handler, options);
|
|
2065
|
-
};
|
|
2066
|
-
}, [ref, event, options, isDisabled]);
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
|
|
2070
|
-
let [value, setValue] = useState(defaultValue);
|
|
2071
|
-
let valueRef = useRef(value);
|
|
2072
|
-
let effect = useRef(null);
|
|
2073
|
-
valueRef.current = value; // Store the function in a ref so we can always access the current version
|
|
2074
|
-
// which has the proper `value` in scope.
|
|
2075
|
-
|
|
2076
|
-
let nextRef = useRef(null);
|
|
2077
|
-
|
|
2078
|
-
nextRef.current = () => {
|
|
2079
|
-
// Run the generator to the next yield.
|
|
2080
|
-
let newValue = effect.current.next(); // If the generator is done, reset the effect.
|
|
2081
|
-
|
|
2082
|
-
if (newValue.done) {
|
|
2083
|
-
effect.current = null;
|
|
2084
|
-
return;
|
|
2085
|
-
} // If the value is the same as the current value,
|
|
2086
|
-
// then continue to the next yield. Otherwise,
|
|
2087
|
-
// set the value in state and wait for the next layout effect.
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
if (value === newValue.value) nextRef.current();else setValue(newValue.value);
|
|
2091
|
-
};
|
|
2092
|
-
|
|
2093
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
2094
|
-
// If there is an effect currently running, continue to the next yield.
|
|
2095
|
-
if (effect.current) nextRef.current();
|
|
2096
|
-
});
|
|
2097
|
-
let queue = useCallback(fn => {
|
|
2098
|
-
effect.current = fn(valueRef.current);
|
|
2099
|
-
nextRef.current();
|
|
2100
|
-
}, [effect, nextRef]);
|
|
2101
|
-
return [value, queue];
|
|
2102
|
-
}
|
|
2103
|
-
|
|
2104
|
-
function $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollView, element) {
|
|
2105
|
-
let offsetX = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, 'left');
|
|
2106
|
-
let offsetY = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, 'top');
|
|
2107
|
-
let width = element.offsetWidth;
|
|
2108
|
-
let height = element.offsetHeight;
|
|
2109
|
-
let x = scrollView.scrollLeft;
|
|
2110
|
-
let y = scrollView.scrollTop;
|
|
2111
|
-
let maxX = x + scrollView.offsetWidth;
|
|
2112
|
-
let maxY = y + scrollView.offsetHeight;
|
|
2113
|
-
if (offsetX <= x) x = offsetX;else if (offsetX + width > maxX) x += offsetX + width - maxX;
|
|
2114
|
-
if (offsetY <= y) y = offsetY;else if (offsetY + height > maxY) y += offsetY + height - maxY;
|
|
2115
|
-
scrollView.scrollLeft = x;
|
|
2116
|
-
scrollView.scrollTop = y;
|
|
2117
|
-
}
|
|
2118
|
-
/**
|
|
2119
|
-
* Computes the offset left or top from child to ancestor by accumulating
|
|
2120
|
-
* offsetLeft or offsetTop through intervening offsetParents.
|
|
2121
|
-
*/
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
function $2f04cbc44ee30ce0$var$relativeOffset(ancestor, child, axis) {
|
|
2125
|
-
const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
|
|
2126
|
-
let sum = 0;
|
|
2127
|
-
|
|
2128
|
-
while (child.offsetParent) {
|
|
2129
|
-
sum += child[prop];
|
|
2130
|
-
if (child.offsetParent === ancestor) break;else if (child.offsetParent.contains(ancestor)) {
|
|
2131
|
-
// If the ancestor is not `position:relative`, then we stop at
|
|
2132
|
-
// _its_ offset parent, and we subtract off _its_ offset, so that
|
|
2133
|
-
// we end up with the proper offset from child to ancestor.
|
|
2134
|
-
sum -= ancestor[prop];
|
|
2135
|
-
break;
|
|
2136
|
-
}
|
|
2137
|
-
child = child.offsetParent;
|
|
2138
|
-
}
|
|
2139
|
-
|
|
2140
|
-
return sum;
|
|
2141
|
-
}
|
|
2142
|
-
|
|
2143
|
-
function $6a7db85432448f7f$export$60278871457622de(event) {
|
|
2144
|
-
// JAWS/NVDA with Firefox.
|
|
2145
|
-
if (event.mozInputSource === 0 && event.isTrusted) return true; // Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead
|
|
2146
|
-
// If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check
|
|
2147
|
-
// to detect TalkBack virtual clicks.
|
|
2148
|
-
|
|
2149
|
-
if ($c87311424ea30a05$export$a11b0059900ceec8() && event.pointerType) return event.type === 'click' && event.buttons === 1;
|
|
2150
|
-
return event.detail === 0 && !event.pointerType;
|
|
2151
|
-
}
|
|
2152
|
-
|
|
2153
|
-
function $6a7db85432448f7f$export$29bf1b5f2c56cf63(event) {
|
|
2154
|
-
// If the pointer size is zero, then we assume it's from a screen reader.
|
|
2155
|
-
// Android TalkBack double tap will sometimes return a event with width and height of 1
|
|
2156
|
-
// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
|
|
2157
|
-
// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
|
|
2158
|
-
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
|
|
2159
|
-
// Talkback double tap from Windows Firefox touch screen press
|
|
2160
|
-
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'mouse';
|
|
2161
|
-
}
|
|
2162
|
-
|
|
2163
|
-
const _excluded$4 = ["register"],
|
|
2164
|
-
_excluded2 = ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "allowTextSelectionOnPress", "ref"];
|
|
2165
|
-
// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
|
|
2166
|
-
|
|
2167
|
-
let $14c0b72509d70225$var$state = 'default';
|
|
2168
|
-
let $14c0b72509d70225$var$savedUserSelect = '';
|
|
2169
|
-
let $14c0b72509d70225$var$modifiedElementMap = new WeakMap();
|
|
2170
|
-
|
|
2171
|
-
function $14c0b72509d70225$export$16a4697467175487(target) {
|
|
2172
|
-
if ($c87311424ea30a05$export$fedb369cb70207f1()) {
|
|
2173
|
-
if ($14c0b72509d70225$var$state === 'default') {
|
|
2174
|
-
$14c0b72509d70225$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
|
|
2175
|
-
document.documentElement.style.webkitUserSelect = 'none';
|
|
2176
|
-
}
|
|
2177
|
-
|
|
2178
|
-
$14c0b72509d70225$var$state = 'disabled';
|
|
2179
|
-
} else if (target instanceof HTMLElement || target instanceof SVGElement) {
|
|
2180
|
-
// If not iOS, store the target's original user-select and change to user-select: none
|
|
2181
|
-
// Ignore state since it doesn't apply for non iOS
|
|
2182
|
-
$14c0b72509d70225$var$modifiedElementMap.set(target, target.style.userSelect);
|
|
2183
|
-
target.style.userSelect = 'none';
|
|
2184
|
-
}
|
|
2185
|
-
}
|
|
2186
|
-
|
|
2187
|
-
function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
|
|
2188
|
-
if ($c87311424ea30a05$export$fedb369cb70207f1()) {
|
|
2189
|
-
// If the state is already default, there's nothing to do.
|
|
2190
|
-
// If it is restoring, then there's no need to queue a second restore.
|
|
2191
|
-
if ($14c0b72509d70225$var$state !== 'disabled') return;
|
|
2192
|
-
$14c0b72509d70225$var$state = 'restoring'; // There appears to be a delay on iOS where selection still might occur
|
|
2193
|
-
// after pointer up, so wait a bit before removing user-select.
|
|
2194
|
-
|
|
2195
|
-
setTimeout(() => {
|
|
2196
|
-
// Wait for any CSS transitions to complete so we don't recompute style
|
|
2197
|
-
// for the whole page in the middle of the animation and cause jank.
|
|
2198
|
-
$bbed8b41f857bcc0$export$24490316f764c430(() => {
|
|
2199
|
-
// Avoid race conditions
|
|
2200
|
-
if ($14c0b72509d70225$var$state === 'restoring') {
|
|
2201
|
-
if (document.documentElement.style.webkitUserSelect === 'none') document.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || '';
|
|
2202
|
-
$14c0b72509d70225$var$savedUserSelect = '';
|
|
2203
|
-
$14c0b72509d70225$var$state = 'default';
|
|
2204
|
-
}
|
|
2205
|
-
});
|
|
2206
|
-
}, 300);
|
|
2207
|
-
} else if (target instanceof HTMLElement || target instanceof SVGElement) // If not iOS, restore the target's original user-select if any
|
|
2208
|
-
// Ignore state since it doesn't apply for non iOS
|
|
2209
|
-
{
|
|
2210
|
-
if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
|
|
2211
|
-
let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
|
|
2212
|
-
if (target.style.userSelect === 'none') target.style.userSelect = targetOldUserSelect;
|
|
2213
|
-
if (target.getAttribute('style') === '') target.removeAttribute('style');
|
|
2214
|
-
$14c0b72509d70225$var$modifiedElementMap.delete(target);
|
|
2215
|
-
}
|
|
2216
|
-
}
|
|
2217
|
-
}
|
|
2218
|
-
|
|
2219
|
-
const $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = React.createContext(null);
|
|
2220
|
-
$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = 'PressResponderContext';
|
|
2221
|
-
|
|
2222
|
-
function $f6c31cce2adf654f$var$usePressResponderContext(props) {
|
|
2223
|
-
// Consume context from <PressResponder> and merge with props.
|
|
2224
|
-
let context = useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
|
|
2225
|
-
|
|
2226
|
-
if (context) {
|
|
2227
|
-
let {
|
|
2228
|
-
register: register
|
|
2229
|
-
} = context,
|
|
2230
|
-
contextProps = _objectWithoutPropertiesLoose(context, _excluded$4);
|
|
2231
|
-
|
|
2232
|
-
props = $3ef42575df84b30b$export$9d1611c77c2fe928(contextProps, props);
|
|
2233
|
-
register();
|
|
2234
|
-
}
|
|
2235
|
-
|
|
2236
|
-
$e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, props.ref);
|
|
2237
|
-
return props;
|
|
2238
|
-
}
|
|
2239
|
-
|
|
2240
|
-
function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
|
|
2241
|
-
let _$f6c31cce2adf654f$va = $f6c31cce2adf654f$var$usePressResponderContext(props),
|
|
2242
|
-
{
|
|
2243
|
-
onPress: onPress1,
|
|
2244
|
-
onPressChange: onPressChange1,
|
|
2245
|
-
onPressStart: onPressStart1,
|
|
2246
|
-
onPressEnd: onPressEnd1,
|
|
2247
|
-
onPressUp: onPressUp1,
|
|
2248
|
-
isDisabled: isDisabled1,
|
|
2249
|
-
isPressed: isPressedProp,
|
|
2250
|
-
preventFocusOnPress: preventFocusOnPress,
|
|
2251
|
-
shouldCancelOnPointerExit: shouldCancelOnPointerExit,
|
|
2252
|
-
allowTextSelectionOnPress: allowTextSelectionOnPress
|
|
2253
|
-
} = _$f6c31cce2adf654f$va,
|
|
2254
|
-
domProps = _objectWithoutPropertiesLoose(_$f6c31cce2adf654f$va, _excluded2);
|
|
2255
|
-
|
|
2256
|
-
let propsRef = useRef(null);
|
|
2257
|
-
propsRef.current = {
|
|
2258
|
-
onPress: onPress1,
|
|
2259
|
-
onPressChange: onPressChange1,
|
|
2260
|
-
onPressStart: onPressStart1,
|
|
2261
|
-
onPressEnd: onPressEnd1,
|
|
2262
|
-
onPressUp: onPressUp1,
|
|
2263
|
-
isDisabled: isDisabled1,
|
|
2264
|
-
shouldCancelOnPointerExit: shouldCancelOnPointerExit
|
|
2265
|
-
};
|
|
2266
|
-
let [isPressed, setPressed] = useState(false);
|
|
2267
|
-
let ref = useRef({
|
|
2268
|
-
isPressed: false,
|
|
2269
|
-
ignoreEmulatedMouseEvents: false,
|
|
2270
|
-
ignoreClickAfterPress: false,
|
|
2271
|
-
didFirePressStart: false,
|
|
2272
|
-
activePointerId: null,
|
|
2273
|
-
target: null,
|
|
2274
|
-
isOverTarget: false,
|
|
2275
|
-
pointerType: null
|
|
2276
|
-
});
|
|
2277
|
-
let {
|
|
2278
|
-
addGlobalListener: addGlobalListener,
|
|
2279
|
-
removeAllGlobalListeners: removeAllGlobalListeners
|
|
2280
|
-
} = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
|
|
2281
|
-
let pressProps1 = useMemo(() => {
|
|
2282
|
-
let state = ref.current;
|
|
2283
|
-
|
|
2284
|
-
let triggerPressStart = (originalEvent, pointerType) => {
|
|
2285
|
-
let {
|
|
2286
|
-
onPressStart: onPressStart,
|
|
2287
|
-
onPressChange: onPressChange,
|
|
2288
|
-
isDisabled: isDisabled
|
|
2289
|
-
} = propsRef.current;
|
|
2290
|
-
if (isDisabled || state.didFirePressStart) return;
|
|
2291
|
-
if (onPressStart) onPressStart({
|
|
2292
|
-
type: 'pressstart',
|
|
2293
|
-
pointerType: pointerType,
|
|
2294
|
-
target: originalEvent.currentTarget,
|
|
2295
|
-
shiftKey: originalEvent.shiftKey,
|
|
2296
|
-
metaKey: originalEvent.metaKey,
|
|
2297
|
-
ctrlKey: originalEvent.ctrlKey,
|
|
2298
|
-
altKey: originalEvent.altKey
|
|
2299
|
-
});
|
|
2300
|
-
if (onPressChange) onPressChange(true);
|
|
2301
|
-
state.didFirePressStart = true;
|
|
2302
|
-
setPressed(true);
|
|
2303
|
-
};
|
|
2304
|
-
|
|
2305
|
-
let triggerPressEnd = (originalEvent, pointerType, wasPressed = true) => {
|
|
2306
|
-
let {
|
|
2307
|
-
onPressEnd: onPressEnd,
|
|
2308
|
-
onPressChange: onPressChange,
|
|
2309
|
-
onPress: onPress,
|
|
2310
|
-
isDisabled: isDisabled
|
|
2311
|
-
} = propsRef.current;
|
|
2312
|
-
if (!state.didFirePressStart) return;
|
|
2313
|
-
state.ignoreClickAfterPress = true;
|
|
2314
|
-
state.didFirePressStart = false;
|
|
2315
|
-
if (onPressEnd) onPressEnd({
|
|
2316
|
-
type: 'pressend',
|
|
2317
|
-
pointerType: pointerType,
|
|
2318
|
-
target: originalEvent.currentTarget,
|
|
2319
|
-
shiftKey: originalEvent.shiftKey,
|
|
2320
|
-
metaKey: originalEvent.metaKey,
|
|
2321
|
-
ctrlKey: originalEvent.ctrlKey,
|
|
2322
|
-
altKey: originalEvent.altKey
|
|
2323
|
-
});
|
|
2324
|
-
if (onPressChange) onPressChange(false);
|
|
2325
|
-
setPressed(false);
|
|
2326
|
-
if (onPress && wasPressed && !isDisabled) onPress({
|
|
2327
|
-
type: 'press',
|
|
2328
|
-
pointerType: pointerType,
|
|
2329
|
-
target: originalEvent.currentTarget,
|
|
2330
|
-
shiftKey: originalEvent.shiftKey,
|
|
2331
|
-
metaKey: originalEvent.metaKey,
|
|
2332
|
-
ctrlKey: originalEvent.ctrlKey,
|
|
2333
|
-
altKey: originalEvent.altKey
|
|
2334
|
-
});
|
|
2335
|
-
};
|
|
2336
|
-
|
|
2337
|
-
let triggerPressUp = (originalEvent, pointerType) => {
|
|
2338
|
-
let {
|
|
2339
|
-
onPressUp: onPressUp,
|
|
2340
|
-
isDisabled: isDisabled
|
|
2341
|
-
} = propsRef.current;
|
|
2342
|
-
if (isDisabled) return;
|
|
2343
|
-
if (onPressUp) onPressUp({
|
|
2344
|
-
type: 'pressup',
|
|
2345
|
-
pointerType: pointerType,
|
|
2346
|
-
target: originalEvent.currentTarget,
|
|
2347
|
-
shiftKey: originalEvent.shiftKey,
|
|
2348
|
-
metaKey: originalEvent.metaKey,
|
|
2349
|
-
ctrlKey: originalEvent.ctrlKey,
|
|
2350
|
-
altKey: originalEvent.altKey
|
|
2351
|
-
});
|
|
2352
|
-
};
|
|
2353
|
-
|
|
2354
|
-
let cancel = e => {
|
|
2355
|
-
if (state.isPressed) {
|
|
2356
|
-
if (state.isOverTarget) triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
|
|
2357
|
-
state.isPressed = false;
|
|
2358
|
-
state.isOverTarget = false;
|
|
2359
|
-
state.activePointerId = null;
|
|
2360
|
-
state.pointerType = null;
|
|
2361
|
-
removeAllGlobalListeners();
|
|
2362
|
-
if (!allowTextSelectionOnPress) $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
|
|
2363
|
-
}
|
|
2364
|
-
};
|
|
2365
|
-
|
|
2366
|
-
let pressProps = {
|
|
2367
|
-
onKeyDown(e) {
|
|
2368
|
-
if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
|
|
2369
|
-
if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
|
|
2370
|
-
e.stopPropagation(); // If the event is repeating, it may have started on a different element
|
|
2371
|
-
// after which focus moved to the current element. Ignore these events and
|
|
2372
|
-
// only handle the first key down event.
|
|
2373
|
-
|
|
2374
|
-
if (!state.isPressed && !e.repeat) {
|
|
2375
|
-
state.target = e.currentTarget;
|
|
2376
|
-
state.isPressed = true;
|
|
2377
|
-
triggerPressStart(e, 'keyboard'); // Focus may move before the key up event, so register the event on the document
|
|
2378
|
-
// instead of the same element where the key down event occurred.
|
|
2379
|
-
|
|
2380
|
-
addGlobalListener(document, 'keyup', onKeyUp, false);
|
|
2381
|
-
}
|
|
2382
|
-
} else if (e.key === 'Enter' && $f6c31cce2adf654f$var$isHTMLAnchorLink(e.currentTarget)) // If the target is a link, we won't have handled this above because we want the default
|
|
2383
|
-
// browser behavior to open the link when pressing Enter. But we still need to prevent
|
|
2384
|
-
// default so that elements above do not also handle it (e.g. table row).
|
|
2385
|
-
e.stopPropagation();
|
|
2386
|
-
},
|
|
2387
|
-
|
|
2388
|
-
onKeyUp(e) {
|
|
2389
|
-
if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target)) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard');
|
|
2390
|
-
},
|
|
2391
|
-
|
|
2392
|
-
onClick(e) {
|
|
2393
|
-
if (e && !e.currentTarget.contains(e.target)) return;
|
|
2394
|
-
|
|
2395
|
-
if (e && e.button === 0) {
|
|
2396
|
-
e.stopPropagation();
|
|
2397
|
-
if (isDisabled1) e.preventDefault(); // If triggered from a screen reader or by using element.click(),
|
|
2398
|
-
// trigger as if it were a keyboard click.
|
|
2399
|
-
|
|
2400
|
-
if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || $6a7db85432448f7f$export$60278871457622de(e.nativeEvent))) {
|
|
2401
|
-
// Ensure the element receives focus (VoiceOver on iOS does not do this)
|
|
2402
|
-
if (!isDisabled1 && !preventFocusOnPress) $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
|
|
2403
|
-
triggerPressStart(e, 'virtual');
|
|
2404
|
-
triggerPressUp(e, 'virtual');
|
|
2405
|
-
triggerPressEnd(e, 'virtual');
|
|
2406
|
-
}
|
|
2407
|
-
|
|
2408
|
-
state.ignoreEmulatedMouseEvents = false;
|
|
2409
|
-
state.ignoreClickAfterPress = false;
|
|
2410
|
-
}
|
|
2411
|
-
}
|
|
2412
|
-
|
|
2413
|
-
};
|
|
2414
|
-
|
|
2415
|
-
let onKeyUp = e => {
|
|
2416
|
-
if (state.isPressed && $f6c31cce2adf654f$var$isValidKeyboardEvent(e, state.target)) {
|
|
2417
|
-
if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
|
|
2418
|
-
e.stopPropagation();
|
|
2419
|
-
state.isPressed = false;
|
|
2420
|
-
let target = e.target;
|
|
2421
|
-
triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard', state.target.contains(target));
|
|
2422
|
-
removeAllGlobalListeners(); // If the target is a link, trigger the click method to open the URL,
|
|
2423
|
-
// but defer triggering pressEnd until onClick event handler.
|
|
2424
|
-
|
|
2425
|
-
if (state.target instanceof HTMLElement && state.target.contains(target) && ($f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) state.target.click();
|
|
2426
|
-
}
|
|
2427
|
-
};
|
|
2428
|
-
|
|
2429
|
-
if (typeof PointerEvent !== 'undefined') {
|
|
2430
|
-
pressProps.onPointerDown = e => {
|
|
2431
|
-
// Only handle left clicks, and ignore events that bubbled through portals.
|
|
2432
|
-
if (e.button !== 0 || !e.currentTarget.contains(e.target)) return; // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target.
|
|
2433
|
-
// Ignore and let the onClick handler take care of it instead.
|
|
2434
|
-
// https://bugs.webkit.org/show_bug.cgi?id=222627
|
|
2435
|
-
// https://bugs.webkit.org/show_bug.cgi?id=223202
|
|
2436
|
-
|
|
2437
|
-
if ($6a7db85432448f7f$export$29bf1b5f2c56cf63(e.nativeEvent)) {
|
|
2438
|
-
state.pointerType = 'virtual';
|
|
2439
|
-
return;
|
|
2440
|
-
} // Due to browser inconsistencies, especially on mobile browsers, we prevent
|
|
2441
|
-
// default on pointer down and handle focusing the pressable element ourselves.
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
|
|
2445
|
-
state.pointerType = e.pointerType;
|
|
2446
|
-
e.stopPropagation();
|
|
2447
|
-
|
|
2448
|
-
if (!state.isPressed) {
|
|
2449
|
-
state.isPressed = true;
|
|
2450
|
-
state.isOverTarget = true;
|
|
2451
|
-
state.activePointerId = e.pointerId;
|
|
2452
|
-
state.target = e.currentTarget;
|
|
2453
|
-
if (!isDisabled1 && !preventFocusOnPress) $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
|
|
2454
|
-
if (!allowTextSelectionOnPress) $14c0b72509d70225$export$16a4697467175487(state.target);
|
|
2455
|
-
triggerPressStart(e, state.pointerType);
|
|
2456
|
-
addGlobalListener(document, 'pointermove', onPointerMove, false);
|
|
2457
|
-
addGlobalListener(document, 'pointerup', onPointerUp, false);
|
|
2458
|
-
addGlobalListener(document, 'pointercancel', onPointerCancel, false);
|
|
2459
|
-
}
|
|
2460
|
-
};
|
|
2461
|
-
|
|
2462
|
-
pressProps.onMouseDown = e => {
|
|
2463
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2464
|
-
|
|
2465
|
-
if (e.button === 0) {
|
|
2466
|
-
// Chrome and Firefox on touch Windows devices require mouse down events
|
|
2467
|
-
// to be canceled in addition to pointer events, or an extra asynchronous
|
|
2468
|
-
// focus event will be fired.
|
|
2469
|
-
if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
|
|
2470
|
-
e.stopPropagation();
|
|
2471
|
-
}
|
|
2472
|
-
};
|
|
2473
|
-
|
|
2474
|
-
pressProps.onPointerUp = e => {
|
|
2475
|
-
// iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
|
|
2476
|
-
if (!e.currentTarget.contains(e.target) || state.pointerType === 'virtual') return; // Only handle left clicks
|
|
2477
|
-
// Safari on iOS sometimes fires pointerup events, even
|
|
2478
|
-
// when the touch isn't over the target, so double check.
|
|
2479
|
-
|
|
2480
|
-
if (e.button === 0 && $f6c31cce2adf654f$var$isOverTarget(e, e.currentTarget)) triggerPressUp(e, state.pointerType || e.pointerType);
|
|
2481
|
-
}; // Safari on iOS < 13.2 does not implement pointerenter/pointerleave events correctly.
|
|
2482
|
-
// Use pointer move events instead to implement our own hit testing.
|
|
2483
|
-
// See https://bugs.webkit.org/show_bug.cgi?id=199803
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
let onPointerMove = e => {
|
|
2487
|
-
if (e.pointerId !== state.activePointerId) return;
|
|
2488
|
-
|
|
2489
|
-
if ($f6c31cce2adf654f$var$isOverTarget(e, state.target)) {
|
|
2490
|
-
if (!state.isOverTarget) {
|
|
2491
|
-
state.isOverTarget = true;
|
|
2492
|
-
triggerPressStart($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);
|
|
2493
|
-
}
|
|
2494
|
-
} else if (state.isOverTarget) {
|
|
2495
|
-
state.isOverTarget = false;
|
|
2496
|
-
triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
|
|
2497
|
-
if (propsRef.current.shouldCancelOnPointerExit) cancel(e);
|
|
2498
|
-
}
|
|
2499
|
-
};
|
|
2500
|
-
|
|
2501
|
-
let onPointerUp = e => {
|
|
2502
|
-
if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
|
|
2503
|
-
if ($f6c31cce2adf654f$var$isOverTarget(e, state.target)) triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);else if (state.isOverTarget) triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
|
|
2504
|
-
state.isPressed = false;
|
|
2505
|
-
state.isOverTarget = false;
|
|
2506
|
-
state.activePointerId = null;
|
|
2507
|
-
state.pointerType = null;
|
|
2508
|
-
removeAllGlobalListeners();
|
|
2509
|
-
if (!allowTextSelectionOnPress) $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
|
|
2510
|
-
}
|
|
2511
|
-
};
|
|
2512
|
-
|
|
2513
|
-
let onPointerCancel = e => {
|
|
2514
|
-
cancel(e);
|
|
2515
|
-
};
|
|
2516
|
-
|
|
2517
|
-
pressProps.onDragStart = e => {
|
|
2518
|
-
if (!e.currentTarget.contains(e.target)) return; // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
|
|
2519
|
-
|
|
2520
|
-
cancel(e);
|
|
2521
|
-
};
|
|
2522
|
-
} else {
|
|
2523
|
-
pressProps.onMouseDown = e => {
|
|
2524
|
-
// Only handle left clicks
|
|
2525
|
-
if (e.button !== 0 || !e.currentTarget.contains(e.target)) return; // Due to browser inconsistencies, especially on mobile browsers, we prevent
|
|
2526
|
-
// default on mouse down and handle focusing the pressable element ourselves.
|
|
2527
|
-
|
|
2528
|
-
if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget)) e.preventDefault();
|
|
2529
|
-
e.stopPropagation();
|
|
2530
|
-
if (state.ignoreEmulatedMouseEvents) return;
|
|
2531
|
-
state.isPressed = true;
|
|
2532
|
-
state.isOverTarget = true;
|
|
2533
|
-
state.target = e.currentTarget;
|
|
2534
|
-
state.pointerType = $6a7db85432448f7f$export$60278871457622de(e.nativeEvent) ? 'virtual' : 'mouse';
|
|
2535
|
-
if (!isDisabled1 && !preventFocusOnPress) $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
|
|
2536
|
-
triggerPressStart(e, state.pointerType);
|
|
2537
|
-
addGlobalListener(document, 'mouseup', onMouseUp, false);
|
|
2538
|
-
};
|
|
2539
|
-
|
|
2540
|
-
pressProps.onMouseEnter = e => {
|
|
2541
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2542
|
-
e.stopPropagation();
|
|
2543
|
-
|
|
2544
|
-
if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
|
|
2545
|
-
state.isOverTarget = true;
|
|
2546
|
-
triggerPressStart(e, state.pointerType);
|
|
2547
|
-
}
|
|
2548
|
-
};
|
|
2549
|
-
|
|
2550
|
-
pressProps.onMouseLeave = e => {
|
|
2551
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2552
|
-
e.stopPropagation();
|
|
2553
|
-
|
|
2554
|
-
if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
|
|
2555
|
-
state.isOverTarget = false;
|
|
2556
|
-
triggerPressEnd(e, state.pointerType, false);
|
|
2557
|
-
if (propsRef.current.shouldCancelOnPointerExit) cancel(e);
|
|
2558
|
-
}
|
|
2559
|
-
};
|
|
2560
|
-
|
|
2561
|
-
pressProps.onMouseUp = e => {
|
|
2562
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2563
|
-
if (!state.ignoreEmulatedMouseEvents && e.button === 0) triggerPressUp(e, state.pointerType);
|
|
2564
|
-
};
|
|
2565
|
-
|
|
2566
|
-
let onMouseUp = e => {
|
|
2567
|
-
// Only handle left clicks
|
|
2568
|
-
if (e.button !== 0) return;
|
|
2569
|
-
state.isPressed = false;
|
|
2570
|
-
removeAllGlobalListeners();
|
|
2571
|
-
|
|
2572
|
-
if (state.ignoreEmulatedMouseEvents) {
|
|
2573
|
-
state.ignoreEmulatedMouseEvents = false;
|
|
2574
|
-
return;
|
|
2575
|
-
}
|
|
2576
|
-
|
|
2577
|
-
if ($f6c31cce2adf654f$var$isOverTarget(e, state.target)) triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);else if (state.isOverTarget) triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
|
|
2578
|
-
state.isOverTarget = false;
|
|
2579
|
-
};
|
|
2580
|
-
|
|
2581
|
-
pressProps.onTouchStart = e => {
|
|
2582
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2583
|
-
e.stopPropagation();
|
|
2584
|
-
let touch = $f6c31cce2adf654f$var$getTouchFromEvent(e.nativeEvent);
|
|
2585
|
-
if (!touch) return;
|
|
2586
|
-
state.activePointerId = touch.identifier;
|
|
2587
|
-
state.ignoreEmulatedMouseEvents = true;
|
|
2588
|
-
state.isOverTarget = true;
|
|
2589
|
-
state.isPressed = true;
|
|
2590
|
-
state.target = e.currentTarget;
|
|
2591
|
-
state.pointerType = 'touch'; // Due to browser inconsistencies, especially on mobile browsers, we prevent default
|
|
2592
|
-
// on the emulated mouse event and handle focusing the pressable element ourselves.
|
|
2593
|
-
|
|
2594
|
-
if (!isDisabled1 && !preventFocusOnPress) $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
|
|
2595
|
-
if (!allowTextSelectionOnPress) $14c0b72509d70225$export$16a4697467175487(state.target);
|
|
2596
|
-
triggerPressStart(e, state.pointerType);
|
|
2597
|
-
addGlobalListener(window, 'scroll', onScroll, true);
|
|
2598
|
-
};
|
|
2599
|
-
|
|
2600
|
-
pressProps.onTouchMove = e => {
|
|
2601
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2602
|
-
e.stopPropagation();
|
|
2603
|
-
if (!state.isPressed) return;
|
|
2604
|
-
let touch = $f6c31cce2adf654f$var$getTouchById(e.nativeEvent, state.activePointerId);
|
|
2605
|
-
|
|
2606
|
-
if (touch && $f6c31cce2adf654f$var$isOverTarget(touch, e.currentTarget)) {
|
|
2607
|
-
if (!state.isOverTarget) {
|
|
2608
|
-
state.isOverTarget = true;
|
|
2609
|
-
triggerPressStart(e, state.pointerType);
|
|
2610
|
-
}
|
|
2611
|
-
} else if (state.isOverTarget) {
|
|
2612
|
-
state.isOverTarget = false;
|
|
2613
|
-
triggerPressEnd(e, state.pointerType, false);
|
|
2614
|
-
if (propsRef.current.shouldCancelOnPointerExit) cancel(e);
|
|
2615
|
-
}
|
|
2616
|
-
};
|
|
2617
|
-
|
|
2618
|
-
pressProps.onTouchEnd = e => {
|
|
2619
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2620
|
-
e.stopPropagation();
|
|
2621
|
-
if (!state.isPressed) return;
|
|
2622
|
-
let touch = $f6c31cce2adf654f$var$getTouchById(e.nativeEvent, state.activePointerId);
|
|
2623
|
-
|
|
2624
|
-
if (touch && $f6c31cce2adf654f$var$isOverTarget(touch, e.currentTarget)) {
|
|
2625
|
-
triggerPressUp(e, state.pointerType);
|
|
2626
|
-
triggerPressEnd(e, state.pointerType);
|
|
2627
|
-
} else if (state.isOverTarget) triggerPressEnd(e, state.pointerType, false);
|
|
2628
|
-
|
|
2629
|
-
state.isPressed = false;
|
|
2630
|
-
state.activePointerId = null;
|
|
2631
|
-
state.isOverTarget = false;
|
|
2632
|
-
state.ignoreEmulatedMouseEvents = true;
|
|
2633
|
-
if (!allowTextSelectionOnPress) $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
|
|
2634
|
-
removeAllGlobalListeners();
|
|
2635
|
-
};
|
|
2636
|
-
|
|
2637
|
-
pressProps.onTouchCancel = e => {
|
|
2638
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2639
|
-
e.stopPropagation();
|
|
2640
|
-
if (state.isPressed) cancel(e);
|
|
2641
|
-
};
|
|
2642
|
-
|
|
2643
|
-
let onScroll = e => {
|
|
2644
|
-
if (state.isPressed && e.target.contains(state.target)) cancel({
|
|
2645
|
-
currentTarget: state.target,
|
|
2646
|
-
shiftKey: false,
|
|
2647
|
-
ctrlKey: false,
|
|
2648
|
-
metaKey: false,
|
|
2649
|
-
altKey: false
|
|
2650
|
-
});
|
|
2651
|
-
};
|
|
2652
|
-
|
|
2653
|
-
pressProps.onDragStart = e => {
|
|
2654
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
2655
|
-
cancel(e);
|
|
2656
|
-
};
|
|
2657
|
-
}
|
|
2658
|
-
|
|
2659
|
-
return pressProps;
|
|
2660
|
-
}, [addGlobalListener, isDisabled1, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress]); // Remove user-select: none in case component unmounts immediately after pressStart
|
|
2661
|
-
// eslint-disable-next-line arrow-body-style
|
|
2662
|
-
|
|
2663
|
-
useEffect(() => {
|
|
2664
|
-
return () => {
|
|
2665
|
-
if (!allowTextSelectionOnPress) // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2666
|
-
$14c0b72509d70225$export$b0d6fa1ab32e3295(ref.current.target);
|
|
2667
|
-
};
|
|
2668
|
-
}, [allowTextSelectionOnPress]);
|
|
2669
|
-
return {
|
|
2670
|
-
isPressed: isPressedProp || isPressed,
|
|
2671
|
-
pressProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, pressProps1)
|
|
2672
|
-
};
|
|
2673
|
-
}
|
|
2674
|
-
|
|
2675
|
-
function $f6c31cce2adf654f$var$isHTMLAnchorLink(target) {
|
|
2676
|
-
return target.tagName === 'A' && target.hasAttribute('href');
|
|
2677
|
-
}
|
|
2678
|
-
|
|
2679
|
-
function $f6c31cce2adf654f$var$isValidKeyboardEvent(event, currentTarget) {
|
|
2680
|
-
const {
|
|
2681
|
-
key: key,
|
|
2682
|
-
code: code
|
|
2683
|
-
} = event;
|
|
2684
|
-
const element = currentTarget;
|
|
2685
|
-
const role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only.
|
|
2686
|
-
// "Spacebar" is for IE 11
|
|
2687
|
-
|
|
2688
|
-
return (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') && !(element instanceof HTMLInputElement && !$f6c31cce2adf654f$var$isValidInputKey(element, key) || element instanceof HTMLTextAreaElement || element.isContentEditable) && (!$f6c31cce2adf654f$var$isHTMLAnchorLink(element) || role === 'button' && key !== 'Enter') && // An element with role='link' should only trigger with Enter key
|
|
2689
|
-
!(role === 'link' && key !== 'Enter');
|
|
2690
|
-
}
|
|
2691
|
-
|
|
2692
|
-
function $f6c31cce2adf654f$var$getTouchFromEvent(event) {
|
|
2693
|
-
const {
|
|
2694
|
-
targetTouches: targetTouches
|
|
2695
|
-
} = event;
|
|
2696
|
-
if (targetTouches.length > 0) return targetTouches[0];
|
|
2697
|
-
return null;
|
|
2698
|
-
}
|
|
2699
|
-
|
|
2700
|
-
function $f6c31cce2adf654f$var$getTouchById(event, pointerId) {
|
|
2701
|
-
const changedTouches = event.changedTouches;
|
|
2702
|
-
|
|
2703
|
-
for (let i = 0; i < changedTouches.length; i++) {
|
|
2704
|
-
const touch = changedTouches[i];
|
|
2705
|
-
if (touch.identifier === pointerId) return touch;
|
|
2706
|
-
}
|
|
2707
|
-
|
|
2708
|
-
return null;
|
|
2709
|
-
}
|
|
2710
|
-
|
|
2711
|
-
function $f6c31cce2adf654f$var$createEvent(target, e) {
|
|
2712
|
-
return {
|
|
2713
|
-
currentTarget: target,
|
|
2714
|
-
shiftKey: e.shiftKey,
|
|
2715
|
-
ctrlKey: e.ctrlKey,
|
|
2716
|
-
metaKey: e.metaKey,
|
|
2717
|
-
altKey: e.altKey
|
|
2718
|
-
};
|
|
2719
|
-
}
|
|
2720
|
-
|
|
2721
|
-
function $f6c31cce2adf654f$var$getPointClientRect(point) {
|
|
2722
|
-
let offsetX = point.width / 2 || point.radiusX || 0;
|
|
2723
|
-
let offsetY = point.height / 2 || point.radiusY || 0;
|
|
2724
|
-
return {
|
|
2725
|
-
top: point.clientY - offsetY,
|
|
2726
|
-
right: point.clientX + offsetX,
|
|
2727
|
-
bottom: point.clientY + offsetY,
|
|
2728
|
-
left: point.clientX - offsetX
|
|
2729
|
-
};
|
|
2730
|
-
}
|
|
2731
|
-
|
|
2732
|
-
function $f6c31cce2adf654f$var$areRectanglesOverlapping(a, b) {
|
|
2733
|
-
// check if they cannot overlap on x axis
|
|
2734
|
-
if (a.left > b.right || b.left > a.right) return false; // check if they cannot overlap on y axis
|
|
2735
|
-
|
|
2736
|
-
if (a.top > b.bottom || b.top > a.bottom) return false;
|
|
2737
|
-
return true;
|
|
2738
|
-
}
|
|
2739
|
-
|
|
2740
|
-
function $f6c31cce2adf654f$var$isOverTarget(point, target) {
|
|
2741
|
-
let rect = target.getBoundingClientRect();
|
|
2742
|
-
let pointRect = $f6c31cce2adf654f$var$getPointClientRect(point);
|
|
2743
|
-
return $f6c31cce2adf654f$var$areRectanglesOverlapping(rect, pointRect);
|
|
2744
|
-
}
|
|
2745
|
-
|
|
2746
|
-
function $f6c31cce2adf654f$var$shouldPreventDefault(target) {
|
|
2747
|
-
// We cannot prevent default if the target is a draggable element.
|
|
2748
|
-
return !(target instanceof HTMLElement) || !target.draggable;
|
|
2749
|
-
}
|
|
2750
|
-
|
|
2751
|
-
function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
|
|
2752
|
-
if (target instanceof HTMLInputElement) return !$f6c31cce2adf654f$var$isValidInputKey(target, key);
|
|
2753
|
-
if (target instanceof HTMLButtonElement) return target.type !== 'submit';
|
|
2754
|
-
return true;
|
|
2755
|
-
}
|
|
2756
|
-
|
|
2757
|
-
const $f6c31cce2adf654f$var$nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
|
|
2758
|
-
|
|
2759
|
-
function $f6c31cce2adf654f$var$isValidInputKey(target, key) {
|
|
2760
|
-
// Only space should toggle checkboxes and radios, not enter.
|
|
2761
|
-
return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : $f6c31cce2adf654f$var$nonTextInputTypes.has(target.type);
|
|
2762
|
-
}
|
|
2763
|
-
|
|
2764
|
-
class $8a9cb279dc87e130$export$905e7fc544a71f36 {
|
|
2765
|
-
isDefaultPrevented() {
|
|
2766
|
-
return this.nativeEvent.defaultPrevented;
|
|
2767
|
-
}
|
|
2768
|
-
|
|
2769
|
-
preventDefault() {
|
|
2770
|
-
this.defaultPrevented = true;
|
|
2771
|
-
this.nativeEvent.preventDefault();
|
|
2772
|
-
}
|
|
2773
|
-
|
|
2774
|
-
stopPropagation() {
|
|
2775
|
-
this.nativeEvent.stopPropagation();
|
|
2776
|
-
|
|
2777
|
-
this.isPropagationStopped = () => true;
|
|
2778
|
-
}
|
|
2779
|
-
|
|
2780
|
-
isPropagationStopped() {
|
|
2781
|
-
return false;
|
|
2782
|
-
}
|
|
2783
|
-
|
|
2784
|
-
persist() {}
|
|
2785
|
-
|
|
2786
|
-
constructor(type, nativeEvent) {
|
|
2787
|
-
this.nativeEvent = nativeEvent;
|
|
2788
|
-
this.target = nativeEvent.target;
|
|
2789
|
-
this.currentTarget = nativeEvent.currentTarget;
|
|
2790
|
-
this.relatedTarget = nativeEvent.relatedTarget;
|
|
2791
|
-
this.bubbles = nativeEvent.bubbles;
|
|
2792
|
-
this.cancelable = nativeEvent.cancelable;
|
|
2793
|
-
this.defaultPrevented = nativeEvent.defaultPrevented;
|
|
2794
|
-
this.eventPhase = nativeEvent.eventPhase;
|
|
2795
|
-
this.isTrusted = nativeEvent.isTrusted;
|
|
2796
|
-
this.timeStamp = nativeEvent.timeStamp;
|
|
2797
|
-
this.type = type;
|
|
2798
|
-
}
|
|
2799
|
-
|
|
2800
|
-
}
|
|
2801
|
-
|
|
2802
|
-
function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
|
|
2803
|
-
let stateRef = useRef({
|
|
2804
|
-
isFocused: false,
|
|
2805
|
-
onBlur: onBlur,
|
|
2806
|
-
observer: null
|
|
2807
|
-
});
|
|
2808
|
-
stateRef.current.onBlur = onBlur; // Clean up MutationObserver on unmount. See below.
|
|
2809
|
-
// eslint-disable-next-line arrow-body-style
|
|
2810
|
-
|
|
2811
|
-
$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
|
|
2812
|
-
const state = stateRef.current;
|
|
2813
|
-
return () => {
|
|
2814
|
-
if (state.observer) {
|
|
2815
|
-
state.observer.disconnect();
|
|
2816
|
-
state.observer = null;
|
|
2817
|
-
}
|
|
2818
|
-
};
|
|
2819
|
-
}, []); // This function is called during a React onFocus event.
|
|
2820
|
-
|
|
2821
|
-
return useCallback(e1 => {
|
|
2822
|
-
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
2823
|
-
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
2824
|
-
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
2825
|
-
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
2826
|
-
if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
|
|
2827
|
-
stateRef.current.isFocused = true;
|
|
2828
|
-
let target = e1.target;
|
|
2829
|
-
|
|
2830
|
-
let onBlurHandler = e => {
|
|
2831
|
-
var // For backward compatibility, dispatch a (fake) React synthetic event.
|
|
2832
|
-
_current, ref;
|
|
2833
|
-
|
|
2834
|
-
stateRef.current.isFocused = false;
|
|
2835
|
-
if (target.disabled) (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e)); // We no longer need the MutationObserver once the target is blurred.
|
|
2836
|
-
|
|
2837
|
-
if (stateRef.current.observer) {
|
|
2838
|
-
stateRef.current.observer.disconnect();
|
|
2839
|
-
stateRef.current.observer = null;
|
|
2840
|
-
}
|
|
2841
|
-
};
|
|
2842
|
-
|
|
2843
|
-
target.addEventListener('focusout', onBlurHandler, {
|
|
2844
|
-
once: true
|
|
2845
|
-
});
|
|
2846
|
-
stateRef.current.observer = new MutationObserver(() => {
|
|
2847
|
-
if (stateRef.current.isFocused && target.disabled) {
|
|
2848
|
-
stateRef.current.observer.disconnect();
|
|
2849
|
-
target.dispatchEvent(new FocusEvent('blur'));
|
|
2850
|
-
target.dispatchEvent(new FocusEvent('focusout', {
|
|
2851
|
-
bubbles: true
|
|
2852
|
-
}));
|
|
2853
|
-
}
|
|
2854
|
-
});
|
|
2855
|
-
stateRef.current.observer.observe(target, {
|
|
2856
|
-
attributes: true,
|
|
2857
|
-
attributeFilter: ['disabled']
|
|
2858
|
-
});
|
|
2859
|
-
}
|
|
2860
|
-
}, []);
|
|
2861
|
-
}
|
|
2862
|
-
|
|
2863
|
-
let $507fabe10e71c6fb$var$currentModality = null;
|
|
2864
|
-
let $507fabe10e71c6fb$var$changeHandlers = new Set();
|
|
2865
|
-
let $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
|
|
2866
|
-
let $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
2867
|
-
let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false; // Only Tab or Esc keys will make focus visible on text input elements
|
|
2868
|
-
|
|
2869
|
-
function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
|
|
2870
|
-
for (let handler of $507fabe10e71c6fb$var$changeHandlers) handler(modality, e);
|
|
2871
|
-
}
|
|
2872
|
-
/**
|
|
2873
|
-
* Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
|
|
2874
|
-
*/
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
function $507fabe10e71c6fb$var$isValidKey(e) {
|
|
2878
|
-
// Control and Shift keys trigger when navigating back to the tab with keyboard.
|
|
2879
|
-
return !(e.metaKey || !$c87311424ea30a05$export$9ac100e40613ea10() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
|
|
2880
|
-
}
|
|
2881
|
-
|
|
2882
|
-
function $507fabe10e71c6fb$var$handleKeyboardEvent(e) {
|
|
2883
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
2884
|
-
|
|
2885
|
-
if ($507fabe10e71c6fb$var$isValidKey(e)) {
|
|
2886
|
-
$507fabe10e71c6fb$var$currentModality = 'keyboard';
|
|
2887
|
-
$507fabe10e71c6fb$var$triggerChangeHandlers('keyboard', e);
|
|
2888
|
-
}
|
|
2889
|
-
}
|
|
2890
|
-
|
|
2891
|
-
function $507fabe10e71c6fb$var$handlePointerEvent(e) {
|
|
2892
|
-
$507fabe10e71c6fb$var$currentModality = 'pointer';
|
|
2893
|
-
|
|
2894
|
-
if (e.type === 'mousedown' || e.type === 'pointerdown') {
|
|
2895
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
2896
|
-
$507fabe10e71c6fb$var$triggerChangeHandlers('pointer', e);
|
|
2897
|
-
}
|
|
2898
|
-
}
|
|
2899
|
-
|
|
2900
|
-
function $507fabe10e71c6fb$var$handleClickEvent(e) {
|
|
2901
|
-
if ($6a7db85432448f7f$export$60278871457622de(e)) {
|
|
2902
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
2903
|
-
$507fabe10e71c6fb$var$currentModality = 'virtual';
|
|
2904
|
-
}
|
|
2905
|
-
}
|
|
2906
|
-
|
|
2907
|
-
function $507fabe10e71c6fb$var$handleFocusEvent(e) {
|
|
2908
|
-
// Firefox fires two extra focus events when the user first clicks into an iframe:
|
|
2909
|
-
// first on the window, then on the document. We ignore these events so they don't
|
|
2910
|
-
// cause keyboard focus rings to appear.
|
|
2911
|
-
if (e.target === window || e.target === document) return; // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
|
|
2912
|
-
// This occurs, for example, when navigating a form with the next/previous buttons on iOS.
|
|
2913
|
-
|
|
2914
|
-
if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
|
|
2915
|
-
$507fabe10e71c6fb$var$currentModality = 'virtual';
|
|
2916
|
-
$507fabe10e71c6fb$var$triggerChangeHandlers('virtual', e);
|
|
2917
|
-
}
|
|
2918
|
-
|
|
2919
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
2920
|
-
$507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
|
|
2921
|
-
}
|
|
2922
|
-
|
|
2923
|
-
function $507fabe10e71c6fb$var$handleWindowBlur() {
|
|
2924
|
-
// When the window is blurred, reset state. This is necessary when tabbing out of the window,
|
|
2925
|
-
// for example, since a subsequent focus event won't be fired.
|
|
2926
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = false;
|
|
2927
|
-
$507fabe10e71c6fb$var$hasBlurredWindowRecently = true;
|
|
2928
|
-
}
|
|
2929
|
-
/**
|
|
2930
|
-
* Setup global event listeners to control when keyboard focus style should be visible.
|
|
2931
|
-
*/
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
function $507fabe10e71c6fb$var$setupGlobalFocusEvents() {
|
|
2935
|
-
if (typeof window === 'undefined' || $507fabe10e71c6fb$var$hasSetupGlobalListeners) return; // Programmatic focus() calls shouldn't affect the current input modality.
|
|
2936
|
-
// However, we need to detect other cases when a focus event occurs without
|
|
2937
|
-
// a preceding user event (e.g. screen reader focus). Overriding the focus
|
|
2938
|
-
// method on HTMLElement.prototype is a bit hacky, but works.
|
|
2939
|
-
|
|
2940
|
-
let focus = HTMLElement.prototype.focus;
|
|
2941
|
-
|
|
2942
|
-
HTMLElement.prototype.focus = function () {
|
|
2943
|
-
$507fabe10e71c6fb$var$hasEventBeforeFocus = true;
|
|
2944
|
-
focus.apply(this, arguments);
|
|
2945
|
-
};
|
|
2946
|
-
|
|
2947
|
-
document.addEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
2948
|
-
document.addEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true);
|
|
2949
|
-
document.addEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true); // Register focus events on the window so they are sure to happen
|
|
2950
|
-
// before React's event listeners (registered on the document).
|
|
2951
|
-
|
|
2952
|
-
window.addEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true);
|
|
2953
|
-
window.addEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false);
|
|
2954
|
-
|
|
2955
|
-
if (typeof PointerEvent !== 'undefined') {
|
|
2956
|
-
document.addEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2957
|
-
document.addEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2958
|
-
document.addEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2959
|
-
} else {
|
|
2960
|
-
document.addEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2961
|
-
document.addEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2962
|
-
document.addEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true);
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
$507fabe10e71c6fb$var$hasSetupGlobalListeners = true;
|
|
2966
|
-
}
|
|
2967
|
-
|
|
2968
|
-
if (typeof document !== 'undefined') {
|
|
2969
|
-
if (document.readyState !== 'loading') $507fabe10e71c6fb$var$setupGlobalFocusEvents();else document.addEventListener('DOMContentLoaded', $507fabe10e71c6fb$var$setupGlobalFocusEvents);
|
|
2970
|
-
}
|
|
2971
|
-
|
|
2972
|
-
function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
|
|
2973
|
-
return $507fabe10e71c6fb$var$currentModality !== 'pointer';
|
|
2974
|
-
}
|
|
2975
|
-
|
|
2976
|
-
function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
|
|
2977
|
-
let {
|
|
2978
|
-
isDisabled: isDisabled,
|
|
2979
|
-
onBlurWithin: onBlurWithin,
|
|
2980
|
-
onFocusWithin: onFocusWithin,
|
|
2981
|
-
onFocusWithinChange: onFocusWithinChange
|
|
2982
|
-
} = props;
|
|
2983
|
-
let state = useRef({
|
|
2984
|
-
isFocusWithin: false
|
|
2985
|
-
});
|
|
2986
|
-
let onBlur = useCallback(e => {
|
|
2987
|
-
// We don't want to trigger onBlurWithin and then immediately onFocusWithin again
|
|
2988
|
-
// when moving focus inside the element. Only trigger if the currentTarget doesn't
|
|
2989
|
-
// include the relatedTarget (where focus is moving).
|
|
2990
|
-
if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
|
|
2991
|
-
state.current.isFocusWithin = false;
|
|
2992
|
-
if (onBlurWithin) onBlurWithin(e);
|
|
2993
|
-
if (onFocusWithinChange) onFocusWithinChange(false);
|
|
2994
|
-
}
|
|
2995
|
-
}, [onBlurWithin, onFocusWithinChange, state]);
|
|
2996
|
-
let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
|
|
2997
|
-
let onFocus = useCallback(e => {
|
|
2998
|
-
if (!state.current.isFocusWithin) {
|
|
2999
|
-
if (onFocusWithin) onFocusWithin(e);
|
|
3000
|
-
if (onFocusWithinChange) onFocusWithinChange(true);
|
|
3001
|
-
state.current.isFocusWithin = true;
|
|
3002
|
-
onSyntheticFocus(e);
|
|
3003
|
-
}
|
|
3004
|
-
}, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);
|
|
3005
|
-
if (isDisabled) return {
|
|
3006
|
-
focusWithinProps: {
|
|
3007
|
-
onFocus: null,
|
|
3008
|
-
onBlur: null
|
|
3009
|
-
}
|
|
3010
|
-
};
|
|
3011
|
-
return {
|
|
3012
|
-
focusWithinProps: {
|
|
3013
|
-
onFocus: onFocus,
|
|
3014
|
-
onBlur: onBlur
|
|
3015
|
-
}
|
|
3016
|
-
};
|
|
3017
|
-
} // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
|
|
3018
|
-
// We want to ignore these emulated events so they do not trigger hover behavior.
|
|
3019
|
-
// See https://bugs.webkit.org/show_bug.cgi?id=214609.
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
let $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
|
|
3023
|
-
let $6179b936705e76d3$var$hoverCount = 0;
|
|
3024
|
-
|
|
3025
|
-
function $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents() {
|
|
3026
|
-
$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = true; // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter
|
|
3027
|
-
// with pointerType="mouse" immediately after onPointerUp and before onFocus. On other
|
|
3028
|
-
// devices that don't have this quirk, we don't want to ignore a mouse hover sometime in
|
|
3029
|
-
// the distant future because a user previously touched the element.
|
|
3030
|
-
|
|
3031
|
-
setTimeout(() => {
|
|
3032
|
-
$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
|
|
3033
|
-
}, 50);
|
|
3034
|
-
}
|
|
3035
|
-
|
|
3036
|
-
function $6179b936705e76d3$var$handleGlobalPointerEvent(e) {
|
|
3037
|
-
if (e.pointerType === 'touch') $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents();
|
|
3038
|
-
}
|
|
3039
|
-
|
|
3040
|
-
function $6179b936705e76d3$var$setupGlobalTouchEvents() {
|
|
3041
|
-
if (typeof document === 'undefined') return;
|
|
3042
|
-
if (typeof PointerEvent !== 'undefined') document.addEventListener('pointerup', $6179b936705e76d3$var$handleGlobalPointerEvent);else document.addEventListener('touchend', $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
|
|
3043
|
-
$6179b936705e76d3$var$hoverCount++;
|
|
3044
|
-
return () => {
|
|
3045
|
-
$6179b936705e76d3$var$hoverCount--;
|
|
3046
|
-
if ($6179b936705e76d3$var$hoverCount > 0) return;
|
|
3047
|
-
if (typeof PointerEvent !== 'undefined') document.removeEventListener('pointerup', $6179b936705e76d3$var$handleGlobalPointerEvent);else document.removeEventListener('touchend', $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
|
|
3048
|
-
};
|
|
3049
|
-
}
|
|
3050
|
-
|
|
3051
|
-
function $6179b936705e76d3$export$ae780daf29e6d456(props) {
|
|
3052
|
-
let {
|
|
3053
|
-
onHoverStart: onHoverStart,
|
|
3054
|
-
onHoverChange: onHoverChange,
|
|
3055
|
-
onHoverEnd: onHoverEnd,
|
|
3056
|
-
isDisabled: isDisabled
|
|
3057
|
-
} = props;
|
|
3058
|
-
let [isHovered, setHovered] = useState(false);
|
|
3059
|
-
let state = useRef({
|
|
3060
|
-
isHovered: false,
|
|
3061
|
-
ignoreEmulatedMouseEvents: false,
|
|
3062
|
-
pointerType: '',
|
|
3063
|
-
target: null
|
|
3064
|
-
}).current;
|
|
3065
|
-
useEffect($6179b936705e76d3$var$setupGlobalTouchEvents, []);
|
|
3066
|
-
let {
|
|
3067
|
-
hoverProps: hoverProps1,
|
|
3068
|
-
triggerHoverEnd: triggerHoverEnd1
|
|
3069
|
-
} = useMemo(() => {
|
|
3070
|
-
let triggerHoverStart = (event, pointerType) => {
|
|
3071
|
-
state.pointerType = pointerType;
|
|
3072
|
-
if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) return;
|
|
3073
|
-
state.isHovered = true;
|
|
3074
|
-
let target = event.currentTarget;
|
|
3075
|
-
state.target = target;
|
|
3076
|
-
if (onHoverStart) onHoverStart({
|
|
3077
|
-
type: 'hoverstart',
|
|
3078
|
-
target: target,
|
|
3079
|
-
pointerType: pointerType
|
|
3080
|
-
});
|
|
3081
|
-
if (onHoverChange) onHoverChange(true);
|
|
3082
|
-
setHovered(true);
|
|
3083
|
-
};
|
|
3084
|
-
|
|
3085
|
-
let triggerHoverEnd = (event, pointerType) => {
|
|
3086
|
-
state.pointerType = '';
|
|
3087
|
-
state.target = null;
|
|
3088
|
-
if (pointerType === 'touch' || !state.isHovered) return;
|
|
3089
|
-
state.isHovered = false;
|
|
3090
|
-
let target = event.currentTarget;
|
|
3091
|
-
if (onHoverEnd) onHoverEnd({
|
|
3092
|
-
type: 'hoverend',
|
|
3093
|
-
target: target,
|
|
3094
|
-
pointerType: pointerType
|
|
3095
|
-
});
|
|
3096
|
-
if (onHoverChange) onHoverChange(false);
|
|
3097
|
-
setHovered(false);
|
|
3098
|
-
};
|
|
3099
|
-
|
|
3100
|
-
let hoverProps = {};
|
|
3101
|
-
|
|
3102
|
-
if (typeof PointerEvent !== 'undefined') {
|
|
3103
|
-
hoverProps.onPointerEnter = e => {
|
|
3104
|
-
if ($6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') return;
|
|
3105
|
-
triggerHoverStart(e, e.pointerType);
|
|
3106
|
-
};
|
|
3107
|
-
|
|
3108
|
-
hoverProps.onPointerLeave = e => {
|
|
3109
|
-
if (!isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e, e.pointerType);
|
|
3110
|
-
};
|
|
3111
|
-
} else {
|
|
3112
|
-
hoverProps.onTouchStart = () => {
|
|
3113
|
-
state.ignoreEmulatedMouseEvents = true;
|
|
3114
|
-
};
|
|
3115
|
-
|
|
3116
|
-
hoverProps.onMouseEnter = e => {
|
|
3117
|
-
if (!state.ignoreEmulatedMouseEvents && !$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents) triggerHoverStart(e, 'mouse');
|
|
3118
|
-
state.ignoreEmulatedMouseEvents = false;
|
|
3119
|
-
};
|
|
3120
|
-
|
|
3121
|
-
hoverProps.onMouseLeave = e => {
|
|
3122
|
-
if (!isDisabled && e.currentTarget.contains(e.target)) triggerHoverEnd(e, 'mouse');
|
|
3123
|
-
};
|
|
3124
|
-
}
|
|
3125
|
-
|
|
3126
|
-
return {
|
|
3127
|
-
hoverProps: hoverProps,
|
|
3128
|
-
triggerHoverEnd: triggerHoverEnd
|
|
3129
|
-
};
|
|
3130
|
-
}, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
|
|
3131
|
-
useEffect(() => {
|
|
3132
|
-
// Call the triggerHoverEnd as soon as isDisabled changes to true
|
|
3133
|
-
// Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
|
|
3134
|
-
if (isDisabled) triggerHoverEnd1({
|
|
3135
|
-
currentTarget: state.target
|
|
3136
|
-
}, state.pointerType); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3137
|
-
}, [isDisabled]);
|
|
3138
|
-
return {
|
|
3139
|
-
hoverProps: hoverProps1,
|
|
3140
|
-
isHovered: isHovered
|
|
3141
|
-
};
|
|
3142
|
-
}
|
|
3143
|
-
|
|
3144
|
-
const $8a26561d2877236e$var$DEFAULT_THRESHOLD = 500;
|
|
3145
|
-
|
|
3146
|
-
function $8a26561d2877236e$export$c24ed0104d07eab9(props) {
|
|
3147
|
-
let {
|
|
3148
|
-
isDisabled: isDisabled,
|
|
3149
|
-
onLongPressStart: onLongPressStart,
|
|
3150
|
-
onLongPressEnd: onLongPressEnd,
|
|
3151
|
-
onLongPress: onLongPress,
|
|
3152
|
-
threshold = $8a26561d2877236e$var$DEFAULT_THRESHOLD,
|
|
3153
|
-
accessibilityDescription: accessibilityDescription
|
|
3154
|
-
} = props;
|
|
3155
|
-
const timeRef = useRef(null);
|
|
3156
|
-
let {
|
|
3157
|
-
addGlobalListener: addGlobalListener,
|
|
3158
|
-
removeGlobalListener: removeGlobalListener
|
|
3159
|
-
} = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
|
|
3160
|
-
let {
|
|
3161
|
-
pressProps: pressProps
|
|
3162
|
-
} = $f6c31cce2adf654f$export$45712eceda6fad21({
|
|
3163
|
-
isDisabled: isDisabled,
|
|
3164
|
-
|
|
3165
|
-
onPressStart(e1) {
|
|
3166
|
-
if (e1.pointerType === 'mouse' || e1.pointerType === 'touch') {
|
|
3167
|
-
if (onLongPressStart) onLongPressStart(_extends({}, e1, {
|
|
3168
|
-
type: 'longpressstart'
|
|
3169
|
-
}));
|
|
3170
|
-
timeRef.current = setTimeout(() => {
|
|
3171
|
-
// Prevent other usePress handlers from also handling this event.
|
|
3172
|
-
e1.target.dispatchEvent(new PointerEvent('pointercancel', {
|
|
3173
|
-
bubbles: true
|
|
3174
|
-
}));
|
|
3175
|
-
if (onLongPress) onLongPress(_extends({}, e1, {
|
|
3176
|
-
type: 'longpress'
|
|
3177
|
-
}));
|
|
3178
|
-
timeRef.current = null;
|
|
3179
|
-
}, threshold); // Prevent context menu, which may be opened on long press on touch devices
|
|
3180
|
-
|
|
3181
|
-
if (e1.pointerType === 'touch') {
|
|
3182
|
-
let onContextMenu = e => {
|
|
3183
|
-
e.preventDefault();
|
|
3184
|
-
};
|
|
3185
|
-
|
|
3186
|
-
addGlobalListener(e1.target, 'contextmenu', onContextMenu, {
|
|
3187
|
-
once: true
|
|
3188
|
-
});
|
|
3189
|
-
addGlobalListener(window, 'pointerup', () => {
|
|
3190
|
-
// If no contextmenu event is fired quickly after pointerup, remove the handler
|
|
3191
|
-
// so future context menu events outside a long press are not prevented.
|
|
3192
|
-
setTimeout(() => {
|
|
3193
|
-
removeGlobalListener(e1.target, 'contextmenu', onContextMenu);
|
|
3194
|
-
}, 30);
|
|
3195
|
-
}, {
|
|
3196
|
-
once: true
|
|
3197
|
-
});
|
|
3198
|
-
}
|
|
3199
|
-
}
|
|
3200
|
-
},
|
|
3201
|
-
|
|
3202
|
-
onPressEnd(e) {
|
|
3203
|
-
if (timeRef.current) clearTimeout(timeRef.current);
|
|
3204
|
-
if (onLongPressEnd && (e.pointerType === 'mouse' || e.pointerType === 'touch')) onLongPressEnd(_extends({}, e, {
|
|
3205
|
-
type: 'longpressend'
|
|
3206
|
-
}));
|
|
3207
|
-
}
|
|
3208
|
-
|
|
3209
|
-
});
|
|
3210
|
-
let descriptionProps = $ef06256079686ba0$export$f8aeda7b10753fa1(onLongPress && !isDisabled ? accessibilityDescription : null);
|
|
3211
|
-
return {
|
|
3212
|
-
longPressProps: $3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, descriptionProps)
|
|
3213
|
-
};
|
|
3214
|
-
}
|
|
3215
|
-
|
|
3216
|
-
function $d191a55c9702f145$export$8467354a121f1b9f(props) {
|
|
3217
|
-
let {
|
|
3218
|
-
id: id,
|
|
3219
|
-
label: label,
|
|
3220
|
-
'aria-labelledby': ariaLabelledby,
|
|
3221
|
-
'aria-label': ariaLabel,
|
|
3222
|
-
labelElementType = 'label'
|
|
3223
|
-
} = props;
|
|
3224
|
-
id = $bdb11010cef70236$export$f680877a34711e37(id);
|
|
3225
|
-
let labelId = $bdb11010cef70236$export$f680877a34711e37();
|
|
3226
|
-
let labelProps = {};
|
|
3227
|
-
|
|
3228
|
-
if (label) {
|
|
3229
|
-
ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;
|
|
3230
|
-
labelProps = {
|
|
3231
|
-
id: labelId,
|
|
3232
|
-
htmlFor: labelElementType === 'label' ? id : undefined
|
|
3233
|
-
};
|
|
3234
|
-
} else if (!ariaLabelledby && !ariaLabel) console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
|
|
3235
|
-
|
|
3236
|
-
let fieldProps = $313b98861ee5dd6c$export$d6875122194c7b44({
|
|
3237
|
-
id: id,
|
|
3238
|
-
'aria-label': ariaLabel,
|
|
3239
|
-
'aria-labelledby': ariaLabelledby
|
|
3240
|
-
});
|
|
3241
|
-
return {
|
|
3242
|
-
labelProps: labelProps,
|
|
3243
|
-
fieldProps: fieldProps
|
|
3244
|
-
};
|
|
3245
|
-
}
|
|
3246
|
-
|
|
3247
|
-
/*
|
|
3248
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
3249
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
3250
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
3251
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
3252
|
-
*
|
|
3253
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
3254
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
3255
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
3256
|
-
* governing permissions and limitations under the License.
|
|
3257
|
-
*/
|
|
3258
|
-
// https://en.wikipedia.org/wiki/Right-to-left
|
|
3259
|
-
|
|
3260
|
-
const $148a7a147e38ea7f$var$RTL_SCRIPTS = new Set(['Arab', 'Syrc', 'Samr', 'Mand', 'Thaa', 'Mend', 'Nkoo', 'Adlm', 'Rohg', 'Hebr']);
|
|
3261
|
-
const $148a7a147e38ea7f$var$RTL_LANGS = new Set(['ae', 'ar', 'arc', 'bcc', 'bqi', 'ckb', 'dv', 'fa', 'glk', 'he', 'ku', 'mzn', 'nqo', 'pnb', 'ps', 'sd', 'ug', 'ur', 'yi']);
|
|
3262
|
-
|
|
3263
|
-
function $148a7a147e38ea7f$export$702d680b21cbd764(locale) {
|
|
3264
|
-
// If the Intl.Locale API is available, use it to get the script for the locale.
|
|
3265
|
-
// This is more accurate than guessing by language, since languages can be written in multiple scripts.
|
|
3266
|
-
// @ts-ignore
|
|
3267
|
-
if (Intl.Locale) {
|
|
3268
|
-
// @ts-ignore
|
|
3269
|
-
let script = new Intl.Locale(locale).maximize().script;
|
|
3270
|
-
return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(script);
|
|
3271
|
-
} // If not, just guess by the language (first part of the locale)
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
let lang = locale.split('-')[0];
|
|
3275
|
-
return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
|
|
3276
|
-
}
|
|
3277
|
-
|
|
3278
|
-
function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
|
|
3279
|
-
// @ts-ignore
|
|
3280
|
-
let locale = typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US';
|
|
3281
|
-
|
|
3282
|
-
try {
|
|
3283
|
-
// @ts-ignore
|
|
3284
|
-
Intl.DateTimeFormat.supportedLocalesOf([locale]);
|
|
3285
|
-
} catch (_err) {
|
|
3286
|
-
locale = 'en-US';
|
|
3287
|
-
}
|
|
3288
|
-
|
|
3289
|
-
return {
|
|
3290
|
-
locale: locale,
|
|
3291
|
-
direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? 'rtl' : 'ltr'
|
|
3292
|
-
};
|
|
3293
|
-
}
|
|
3294
|
-
|
|
3295
|
-
let $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
|
|
3296
|
-
let $1e5a04cdaf7d1af8$var$listeners = new Set();
|
|
3297
|
-
|
|
3298
|
-
function $1e5a04cdaf7d1af8$var$updateLocale() {
|
|
3299
|
-
$1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
|
|
3300
|
-
|
|
3301
|
-
for (let listener of $1e5a04cdaf7d1af8$var$listeners) listener($1e5a04cdaf7d1af8$var$currentLocale);
|
|
3302
|
-
}
|
|
3303
|
-
|
|
3304
|
-
function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
|
|
3305
|
-
let isSSR = useIsSSR();
|
|
3306
|
-
let [defaultLocale, setDefaultLocale] = useState($1e5a04cdaf7d1af8$var$currentLocale);
|
|
3307
|
-
useEffect(() => {
|
|
3308
|
-
if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.addEventListener('languagechange', $1e5a04cdaf7d1af8$var$updateLocale);
|
|
3309
|
-
$1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
|
|
3310
|
-
return () => {
|
|
3311
|
-
$1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
|
|
3312
|
-
if ($1e5a04cdaf7d1af8$var$listeners.size === 0) window.removeEventListener('languagechange', $1e5a04cdaf7d1af8$var$updateLocale);
|
|
3313
|
-
};
|
|
3314
|
-
}, []); // We cannot determine the browser's language on the server, so default to
|
|
3315
|
-
// en-US. This will be updated after hydration on the client to the correct value.
|
|
3316
|
-
|
|
3317
|
-
if (isSSR) return {
|
|
3318
|
-
locale: 'en-US',
|
|
3319
|
-
direction: 'ltr'
|
|
3320
|
-
};
|
|
3321
|
-
return defaultLocale;
|
|
3322
|
-
}
|
|
3323
|
-
|
|
3324
|
-
const $18f2051aff69b9bf$var$I18nContext = /*#__PURE__*/React.createContext(null);
|
|
3325
|
-
|
|
3326
|
-
function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
|
|
3327
|
-
let defaultLocale = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
|
|
3328
|
-
let context = useContext($18f2051aff69b9bf$var$I18nContext);
|
|
3329
|
-
return context || defaultLocale;
|
|
3330
|
-
}
|
|
3331
|
-
|
|
3332
|
-
let $325a3faab7a68acd$var$cache = new Map();
|
|
3333
|
-
|
|
3334
|
-
function $325a3faab7a68acd$export$a16aca283550c30d(options) {
|
|
3335
|
-
let {
|
|
3336
|
-
locale: locale
|
|
3337
|
-
} = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
|
|
3338
|
-
let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
|
|
3339
|
-
if ($325a3faab7a68acd$var$cache.has(cacheKey)) return $325a3faab7a68acd$var$cache.get(cacheKey);
|
|
3340
|
-
let formatter = new Intl.Collator(locale, options);
|
|
3341
|
-
$325a3faab7a68acd$var$cache.set(cacheKey, formatter);
|
|
3342
|
-
return formatter;
|
|
3343
|
-
}
|
|
3344
|
-
|
|
3345
|
-
function $feb5ffebff200149$export$d3e3bd3e26688c04(e) {
|
|
3346
|
-
// Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.
|
|
3347
|
-
// On Windows and Ubuntu, Alt + Space has a system wide meaning.
|
|
3348
|
-
return $c87311424ea30a05$export$e1865c3bedcd822b() ? e.altKey : e.ctrlKey;
|
|
3349
|
-
}
|
|
3350
|
-
|
|
3351
|
-
function $feb5ffebff200149$export$16792effe837dba3(e) {
|
|
3352
|
-
if ($c87311424ea30a05$export$9ac100e40613ea10()) return e.metaKey;
|
|
3353
|
-
return e.ctrlKey;
|
|
3354
|
-
}
|
|
3355
|
-
/**
|
|
3356
|
-
* Controls how long to wait before clearing the typeahead buffer.
|
|
3357
|
-
*/
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
const $fb3050f43d946246$var$TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second
|
|
3361
|
-
|
|
3362
|
-
function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
|
|
3363
|
-
let {
|
|
3364
|
-
keyboardDelegate: keyboardDelegate,
|
|
3365
|
-
selectionManager: selectionManager,
|
|
3366
|
-
onTypeSelect: onTypeSelect
|
|
3367
|
-
} = options;
|
|
3368
|
-
let state = useRef({
|
|
3369
|
-
search: '',
|
|
3370
|
-
timeout: null
|
|
3371
|
-
}).current;
|
|
3372
|
-
|
|
3373
|
-
let onKeyDown = e => {
|
|
3374
|
-
let character = $fb3050f43d946246$var$getStringForKey(e.key);
|
|
3375
|
-
if (!character || e.ctrlKey || e.metaKey) return; // Do not propagate the Spacebar event if it's meant to be part of the search.
|
|
3376
|
-
// When we time out, the search term becomes empty, hence the check on length.
|
|
3377
|
-
// Trimming is to account for the case of pressing the Spacebar more than once,
|
|
3378
|
-
// which should cycle through the selection/deselection of the focused item.
|
|
3379
|
-
|
|
3380
|
-
if (character === ' ' && state.search.trim().length > 0) {
|
|
3381
|
-
e.preventDefault();
|
|
3382
|
-
if (!('continuePropagation' in e)) e.stopPropagation();
|
|
3383
|
-
}
|
|
3384
|
-
|
|
3385
|
-
state.search += character; // Use the delegate to find a key to focus.
|
|
3386
|
-
// Prioritize items after the currently focused item, falling back to searching the whole list.
|
|
3387
|
-
|
|
3388
|
-
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); // If no key found, search from the top.
|
|
3389
|
-
|
|
3390
|
-
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
|
|
3391
|
-
|
|
3392
|
-
if (key != null) {
|
|
3393
|
-
selectionManager.setFocusedKey(key);
|
|
3394
|
-
if (onTypeSelect) onTypeSelect(key);
|
|
3395
|
-
}
|
|
3396
|
-
|
|
3397
|
-
clearTimeout(state.timeout);
|
|
3398
|
-
state.timeout = setTimeout(() => {
|
|
3399
|
-
state.search = '';
|
|
3400
|
-
}, $fb3050f43d946246$var$TYPEAHEAD_DEBOUNCE_WAIT_MS);
|
|
3401
|
-
};
|
|
3402
|
-
|
|
3403
|
-
return {
|
|
3404
|
-
typeSelectProps: {
|
|
3405
|
-
// Using a capturing listener to catch the keydown event before
|
|
3406
|
-
// other hooks in order to handle the Spacebar event.
|
|
3407
|
-
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
|
|
3408
|
-
}
|
|
3409
|
-
};
|
|
3410
|
-
}
|
|
3411
|
-
|
|
3412
|
-
function $fb3050f43d946246$var$getStringForKey(key) {
|
|
3413
|
-
// If the key is of length 1, it is an ASCII value.
|
|
3414
|
-
// Otherwise, if there are no ASCII characters in the key name,
|
|
3415
|
-
// it is a Unicode character.
|
|
3416
|
-
// See https://www.w3.org/TR/uievents-key/
|
|
3417
|
-
if (key.length === 1 || !/^[A-Z]/i.test(key)) return key;
|
|
3418
|
-
return '';
|
|
3419
|
-
}
|
|
3420
|
-
|
|
3421
|
-
function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
|
|
3422
|
-
let {
|
|
3423
|
-
selectionManager: manager,
|
|
3424
|
-
keyboardDelegate: delegate,
|
|
3425
|
-
ref: ref,
|
|
3426
|
-
autoFocus = false,
|
|
3427
|
-
shouldFocusWrap = false,
|
|
3428
|
-
disallowEmptySelection = false,
|
|
3429
|
-
disallowSelectAll = false,
|
|
3430
|
-
selectOnFocus = manager.selectionBehavior === 'replace',
|
|
3431
|
-
disallowTypeAhead = false,
|
|
3432
|
-
shouldUseVirtualFocus: shouldUseVirtualFocus,
|
|
3433
|
-
allowsTabNavigation = false,
|
|
3434
|
-
isVirtualized: isVirtualized,
|
|
3435
|
-
// If no scrollRef is provided, assume the collection ref is the scrollable region
|
|
3436
|
-
scrollRef = ref
|
|
3437
|
-
} = options;
|
|
3438
|
-
let {
|
|
3439
|
-
direction: direction
|
|
3440
|
-
} = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
|
|
3441
|
-
|
|
3442
|
-
let onKeyDown = e => {
|
|
3443
|
-
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
|
|
3444
|
-
if (e.altKey && e.key === 'Tab') e.preventDefault(); // Keyboard events bubble through portals. Don't handle keyboard events
|
|
3445
|
-
// for elements outside the collection (e.g. menus).
|
|
3446
|
-
|
|
3447
|
-
if (!ref.current.contains(e.target)) return;
|
|
3448
|
-
|
|
3449
|
-
const navigateToKey = (key, childFocus) => {
|
|
3450
|
-
if (key != null) {
|
|
3451
|
-
manager.setFocusedKey(key, childFocus);
|
|
3452
|
-
if (e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(key);else if (selectOnFocus && !$feb5ffebff200149$export$d3e3bd3e26688c04(e)) manager.replaceSelection(key);
|
|
3453
|
-
}
|
|
3454
|
-
};
|
|
3455
|
-
|
|
3456
|
-
switch (e.key) {
|
|
3457
|
-
case 'ArrowDown':
|
|
3458
|
-
if (delegate.getKeyBelow) {
|
|
3459
|
-
var ref4, ref1;
|
|
3460
|
-
e.preventDefault();
|
|
3461
|
-
let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (ref4 = delegate.getFirstKey) === null || ref4 === void 0 ? void 0 : ref4.call(delegate);
|
|
3462
|
-
if (nextKey == null && shouldFocusWrap) nextKey = (ref1 = delegate.getFirstKey) === null || ref1 === void 0 ? void 0 : ref1.call(delegate, manager.focusedKey);
|
|
3463
|
-
navigateToKey(nextKey);
|
|
3464
|
-
}
|
|
3465
|
-
|
|
3466
|
-
break;
|
|
3467
|
-
|
|
3468
|
-
case 'ArrowUp':
|
|
3469
|
-
if (delegate.getKeyAbove) {
|
|
3470
|
-
var ref2, ref3;
|
|
3471
|
-
e.preventDefault();
|
|
3472
|
-
let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (ref2 = delegate.getLastKey) === null || ref2 === void 0 ? void 0 : ref2.call(delegate);
|
|
3473
|
-
if (nextKey == null && shouldFocusWrap) nextKey = (ref3 = delegate.getLastKey) === null || ref3 === void 0 ? void 0 : ref3.call(delegate, manager.focusedKey);
|
|
3474
|
-
navigateToKey(nextKey);
|
|
3475
|
-
}
|
|
3476
|
-
|
|
3477
|
-
break;
|
|
3478
|
-
|
|
3479
|
-
case 'ArrowLeft':
|
|
3480
|
-
if (delegate.getKeyLeftOf) {
|
|
3481
|
-
e.preventDefault();
|
|
3482
|
-
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
|
|
3483
|
-
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
|
|
3484
|
-
}
|
|
3485
|
-
|
|
3486
|
-
break;
|
|
3487
|
-
|
|
3488
|
-
case 'ArrowRight':
|
|
3489
|
-
if (delegate.getKeyRightOf) {
|
|
3490
|
-
e.preventDefault();
|
|
3491
|
-
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
|
|
3492
|
-
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
|
|
3493
|
-
}
|
|
3494
|
-
|
|
3495
|
-
break;
|
|
3496
|
-
|
|
3497
|
-
case 'Home':
|
|
3498
|
-
if (delegate.getFirstKey) {
|
|
3499
|
-
e.preventDefault();
|
|
3500
|
-
let firstKey = delegate.getFirstKey(manager.focusedKey, $feb5ffebff200149$export$16792effe837dba3(e));
|
|
3501
|
-
manager.setFocusedKey(firstKey);
|
|
3502
|
-
if ($feb5ffebff200149$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);else if (selectOnFocus) manager.replaceSelection(firstKey);
|
|
3503
|
-
}
|
|
3504
|
-
|
|
3505
|
-
break;
|
|
3506
|
-
|
|
3507
|
-
case 'End':
|
|
3508
|
-
if (delegate.getLastKey) {
|
|
3509
|
-
e.preventDefault();
|
|
3510
|
-
let lastKey = delegate.getLastKey(manager.focusedKey, $feb5ffebff200149$export$16792effe837dba3(e));
|
|
3511
|
-
manager.setFocusedKey(lastKey);
|
|
3512
|
-
if ($feb5ffebff200149$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);else if (selectOnFocus) manager.replaceSelection(lastKey);
|
|
3513
|
-
}
|
|
3514
|
-
|
|
3515
|
-
break;
|
|
3516
|
-
|
|
3517
|
-
case 'PageDown':
|
|
3518
|
-
if (delegate.getKeyPageBelow) {
|
|
3519
|
-
e.preventDefault();
|
|
3520
|
-
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
|
|
3521
|
-
navigateToKey(nextKey);
|
|
3522
|
-
}
|
|
3523
|
-
|
|
3524
|
-
break;
|
|
3525
|
-
|
|
3526
|
-
case 'PageUp':
|
|
3527
|
-
if (delegate.getKeyPageAbove) {
|
|
3528
|
-
e.preventDefault();
|
|
3529
|
-
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
|
|
3530
|
-
navigateToKey(nextKey);
|
|
3531
|
-
}
|
|
3532
|
-
|
|
3533
|
-
break;
|
|
3534
|
-
|
|
3535
|
-
case 'a':
|
|
3536
|
-
if ($feb5ffebff200149$export$16792effe837dba3(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
|
|
3537
|
-
e.preventDefault();
|
|
3538
|
-
manager.selectAll();
|
|
3539
|
-
}
|
|
3540
|
-
|
|
3541
|
-
break;
|
|
3542
|
-
|
|
3543
|
-
case 'Escape':
|
|
3544
|
-
e.preventDefault();
|
|
3545
|
-
if (!disallowEmptySelection) manager.clearSelection();
|
|
3546
|
-
break;
|
|
3547
|
-
|
|
3548
|
-
case 'Tab':
|
|
3549
|
-
if (!allowsTabNavigation) {
|
|
3550
|
-
// There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
|
|
3551
|
-
// However, collections should be treated as a single tab stop, with arrow key navigation internally.
|
|
3552
|
-
// We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
|
|
3553
|
-
// Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
|
|
3554
|
-
// in the collection, so that the browser default behavior will apply starting from that element
|
|
3555
|
-
// rather than the currently focused one.
|
|
3556
|
-
if (e.shiftKey) ref.current.focus();else {
|
|
3557
|
-
let walker = getFocusableTreeWalker(ref.current, {
|
|
3558
|
-
tabbable: true
|
|
3559
|
-
});
|
|
3560
|
-
let next;
|
|
3561
|
-
let last;
|
|
3562
|
-
|
|
3563
|
-
do {
|
|
3564
|
-
last = walker.lastChild();
|
|
3565
|
-
if (last) next = last;
|
|
3566
|
-
} while (last);
|
|
3567
|
-
|
|
3568
|
-
if (next && !next.contains(document.activeElement)) $7215afc6de606d6b$export$de79e2c695e052f3(next);
|
|
3569
|
-
}
|
|
3570
|
-
break;
|
|
3571
|
-
}
|
|
3572
|
-
|
|
3573
|
-
}
|
|
3574
|
-
}; // Store the scroll position so we can restore it later.
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
let scrollPos = useRef({
|
|
3578
|
-
top: 0,
|
|
3579
|
-
left: 0
|
|
3580
|
-
});
|
|
3581
|
-
$e9faafb641e167db$export$90fc3a17d93f704c(scrollRef, 'scroll', isVirtualized ? null : () => {
|
|
3582
|
-
scrollPos.current = {
|
|
3583
|
-
top: scrollRef.current.scrollTop,
|
|
3584
|
-
left: scrollRef.current.scrollLeft
|
|
3585
|
-
};
|
|
3586
|
-
});
|
|
3587
|
-
|
|
3588
|
-
let onFocus = e => {
|
|
3589
|
-
if (manager.isFocused) {
|
|
3590
|
-
// If a focus event bubbled through a portal, reset focus state.
|
|
3591
|
-
if (!e.currentTarget.contains(e.target)) manager.setFocused(false);
|
|
3592
|
-
return;
|
|
3593
|
-
} // Focus events can bubble through portals. Ignore these events.
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
if (!e.currentTarget.contains(e.target)) return;
|
|
3597
|
-
manager.setFocused(true);
|
|
3598
|
-
|
|
3599
|
-
if (manager.focusedKey == null) {
|
|
3600
|
-
let navigateToFirstKey = key => {
|
|
3601
|
-
if (key != null) {
|
|
3602
|
-
manager.setFocusedKey(key);
|
|
3603
|
-
if (selectOnFocus) manager.replaceSelection(key);
|
|
3604
|
-
}
|
|
3605
|
-
}; // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
|
|
3606
|
-
// Attempt to detect whether the user is tabbing forward or backward into the collection
|
|
3607
|
-
// and either focus the first or last item accordingly.
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
let relatedTarget = e.relatedTarget;
|
|
3611
|
-
|
|
3612
|
-
var _lastSelectedKey, _firstSelectedKey;
|
|
3613
|
-
|
|
3614
|
-
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_lastSelectedKey = manager.lastSelectedKey) !== null && _lastSelectedKey !== void 0 ? _lastSelectedKey : delegate.getLastKey());else navigateToFirstKey((_firstSelectedKey = manager.firstSelectedKey) !== null && _firstSelectedKey !== void 0 ? _firstSelectedKey : delegate.getFirstKey());
|
|
3615
|
-
} else if (!isVirtualized) {
|
|
3616
|
-
// Restore the scroll position to what it was before.
|
|
3617
|
-
scrollRef.current.scrollTop = scrollPos.current.top;
|
|
3618
|
-
scrollRef.current.scrollLeft = scrollPos.current.left; // Refocus and scroll the focused item into view if it exists within the scrollable region.
|
|
3619
|
-
|
|
3620
|
-
let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
|
|
3621
|
-
|
|
3622
|
-
if (element) {
|
|
3623
|
-
// This prevents a flash of focus on the first/last element in the collection
|
|
3624
|
-
$7215afc6de606d6b$export$de79e2c695e052f3(element);
|
|
3625
|
-
$2f04cbc44ee30ce0$export$53a0910f038337bd(scrollRef.current, element);
|
|
3626
|
-
}
|
|
3627
|
-
}
|
|
3628
|
-
};
|
|
3629
|
-
|
|
3630
|
-
let onBlur = e => {
|
|
3631
|
-
// Don't set blurred and then focused again if moving focus within the collection.
|
|
3632
|
-
if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
|
|
3633
|
-
};
|
|
3634
|
-
|
|
3635
|
-
const autoFocusRef = useRef(autoFocus);
|
|
3636
|
-
useEffect(() => {
|
|
3637
|
-
if (autoFocusRef.current) {
|
|
3638
|
-
let focusedKey = null; // Check focus strategy to determine which item to focus
|
|
3639
|
-
|
|
3640
|
-
if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
|
|
3641
|
-
if (autoFocus === 'last') focusedKey = delegate.getLastKey(); // If there are any selected keys, make the first one the new focus target
|
|
3642
|
-
|
|
3643
|
-
let selectedKeys = manager.selectedKeys;
|
|
3644
|
-
if (selectedKeys.size) focusedKey = selectedKeys.values().next().value;
|
|
3645
|
-
manager.setFocused(true);
|
|
3646
|
-
manager.setFocusedKey(focusedKey); // If no default focus key is selected, focus the collection itself.
|
|
3647
|
-
|
|
3648
|
-
if (focusedKey == null && !shouldUseVirtualFocus) focusSafely(ref.current);
|
|
3649
|
-
}
|
|
3650
|
-
|
|
3651
|
-
autoFocusRef.current = false; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3652
|
-
}, []); // If not virtualized, scroll the focused element into view when the focusedKey changes.
|
|
3653
|
-
// When virtualized, Virtualizer handles this internally.
|
|
3654
|
-
|
|
3655
|
-
useEffect(() => {
|
|
3656
|
-
if (!isVirtualized && manager.focusedKey && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
|
|
3657
|
-
let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
|
|
3658
|
-
if (element) $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollRef.current, element);
|
|
3659
|
-
}
|
|
3660
|
-
}, [isVirtualized, scrollRef, manager.focusedKey]);
|
|
3661
|
-
let handlers = {
|
|
3662
|
-
onKeyDown: onKeyDown,
|
|
3663
|
-
onFocus: onFocus,
|
|
3664
|
-
onBlur: onBlur,
|
|
3665
|
-
|
|
3666
|
-
onMouseDown(e) {
|
|
3667
|
-
// Ignore events that bubbled through portals.
|
|
3668
|
-
if (scrollRef.current === e.target) // Prevent focus going to the collection when clicking on the scrollbar.
|
|
3669
|
-
e.preventDefault();
|
|
3670
|
-
}
|
|
3671
|
-
|
|
3672
|
-
};
|
|
3673
|
-
let {
|
|
3674
|
-
typeSelectProps: typeSelectProps
|
|
3675
|
-
} = $fb3050f43d946246$export$e32c88dfddc6e1d8({
|
|
3676
|
-
keyboardDelegate: delegate,
|
|
3677
|
-
selectionManager: manager
|
|
3678
|
-
});
|
|
3679
|
-
if (!disallowTypeAhead) handlers = $3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, handlers); // If nothing is focused within the collection, make the collection itself tabbable.
|
|
3680
|
-
// This will be marshalled to either the first or last item depending on where focus came from.
|
|
3681
|
-
// If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
|
|
3682
|
-
// to move real DOM focus to the element anyway.
|
|
3683
|
-
|
|
3684
|
-
let tabIndex;
|
|
3685
|
-
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
|
|
3686
|
-
return {
|
|
3687
|
-
collectionProps: _extends({}, handlers, {
|
|
3688
|
-
tabIndex: tabIndex
|
|
3689
|
-
})
|
|
3690
|
-
};
|
|
3691
|
-
}
|
|
3692
|
-
|
|
3693
|
-
function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
|
|
3694
|
-
let {
|
|
3695
|
-
selectionManager: manager,
|
|
3696
|
-
key: key,
|
|
3697
|
-
ref: ref,
|
|
3698
|
-
shouldSelectOnPressUp: shouldSelectOnPressUp,
|
|
3699
|
-
isVirtualized: isVirtualized,
|
|
3700
|
-
shouldUseVirtualFocus: shouldUseVirtualFocus,
|
|
3701
|
-
focus: focus,
|
|
3702
|
-
isDisabled: isDisabled,
|
|
3703
|
-
onAction: onAction,
|
|
3704
|
-
allowsDifferentPressOrigin: allowsDifferentPressOrigin
|
|
3705
|
-
} = options;
|
|
3706
|
-
|
|
3707
|
-
let onSelect = e => {
|
|
3708
|
-
if (e.pointerType === 'keyboard' && $feb5ffebff200149$export$d3e3bd3e26688c04(e)) manager.toggleSelection(key);else {
|
|
3709
|
-
if (manager.selectionMode === 'none') return;
|
|
3710
|
-
|
|
3711
|
-
if (manager.selectionMode === 'single') {
|
|
3712
|
-
if (manager.isSelected(key) && !manager.disallowEmptySelection) manager.toggleSelection(key);else manager.replaceSelection(key);
|
|
3713
|
-
} else if (e && e.shiftKey) manager.extendSelection(key);else if (manager.selectionBehavior === 'toggle' || e && ($feb5ffebff200149$export$16792effe837dba3(e) || e.pointerType === 'touch' || e.pointerType === 'virtual')) // if touch or virtual (VO) then we just want to toggle, otherwise it's impossible to multi select because they don't have modifier keys
|
|
3714
|
-
manager.toggleSelection(key);else manager.replaceSelection(key);
|
|
3715
|
-
}
|
|
3716
|
-
}; // Focus the associated DOM node when this item becomes the focusedKey
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
useEffect(() => {
|
|
3720
|
-
let isFocused = key === manager.focusedKey;
|
|
3721
|
-
|
|
3722
|
-
if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
|
|
3723
|
-
if (focus) focus();else focusSafely(ref.current);
|
|
3724
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3725
|
-
|
|
3726
|
-
}, [ref, key, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
|
|
3727
|
-
isDisabled = isDisabled || manager.isDisabled(key); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
|
|
3728
|
-
// item is tabbable. If using virtual focus, don't set a tabIndex at all so that VoiceOver
|
|
3729
|
-
// on iOS 14 doesn't try to move real DOM focus to the item anyway.
|
|
3730
|
-
|
|
3731
|
-
let itemProps = {};
|
|
3732
|
-
if (!shouldUseVirtualFocus && !isDisabled) itemProps = {
|
|
3733
|
-
tabIndex: key === manager.focusedKey ? 0 : -1,
|
|
3734
|
-
|
|
3735
|
-
onFocus(e) {
|
|
3736
|
-
if (e.target === ref.current) manager.setFocusedKey(key);
|
|
3737
|
-
}
|
|
3738
|
-
|
|
3739
|
-
};else if (isDisabled) itemProps.onMouseDown = e => {
|
|
3740
|
-
// Prevent focus going to the body when clicking on a disabled item.
|
|
3741
|
-
e.preventDefault();
|
|
3742
|
-
}; // With checkbox selection, onAction (i.e. navigation) becomes primary, and occurs on a single click of the row.
|
|
3743
|
-
// Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.
|
|
3744
|
-
// With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
|
|
3745
|
-
// With touch, onAction occurs on single tap, and long press enters selection mode.
|
|
3746
|
-
|
|
3747
|
-
let allowsSelection = !isDisabled && manager.canSelectItem(key);
|
|
3748
|
-
let allowsActions = onAction && !isDisabled;
|
|
3749
|
-
let hasPrimaryAction = allowsActions && (manager.selectionBehavior === 'replace' ? !allowsSelection : manager.isEmpty);
|
|
3750
|
-
let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';
|
|
3751
|
-
let hasAction = hasPrimaryAction || hasSecondaryAction;
|
|
3752
|
-
let modality = useRef(null);
|
|
3753
|
-
let longPressEnabled = hasAction && allowsSelection;
|
|
3754
|
-
let longPressEnabledOnPressStart = useRef(false);
|
|
3755
|
-
let hadPrimaryActionOnPressStart = useRef(false); // By default, selection occurs on pointer down. This can be strange if selecting an
|
|
3756
|
-
// item causes the UI to disappear immediately (e.g. menus).
|
|
3757
|
-
// If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.
|
|
3758
|
-
// onPress requires a pointer down event on the same element as pointer up. For menus,
|
|
3759
|
-
// we want to be able to have the pointer down on the trigger that opens the menu and
|
|
3760
|
-
// the pointer up on the menu item rather than requiring a separate press.
|
|
3761
|
-
// For keyboard events, selection still occurs on key down.
|
|
3762
|
-
|
|
3763
|
-
let itemPressProps = {};
|
|
3764
|
-
|
|
3765
|
-
if (shouldSelectOnPressUp) {
|
|
3766
|
-
itemPressProps.onPressStart = e => {
|
|
3767
|
-
modality.current = e.pointerType;
|
|
3768
|
-
longPressEnabledOnPressStart.current = longPressEnabled;
|
|
3769
|
-
if (e.pointerType === 'keyboard' && (!hasAction || $880e95eb8b93ba9a$var$isSelectionKey())) onSelect(e);
|
|
3770
|
-
}; // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
|
|
3771
|
-
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
if (!allowsDifferentPressOrigin) itemPressProps.onPress = e => {
|
|
3775
|
-
if (hasPrimaryAction || hasSecondaryAction && e.pointerType !== 'mouse') {
|
|
3776
|
-
if (e.pointerType === 'keyboard' && !$880e95eb8b93ba9a$var$isActionKey()) return;
|
|
3777
|
-
onAction();
|
|
3778
|
-
} else if (e.pointerType !== 'keyboard') onSelect(e);
|
|
3779
|
-
};else {
|
|
3780
|
-
itemPressProps.onPressUp = e => {
|
|
3781
|
-
if (e.pointerType !== 'keyboard') onSelect(e);
|
|
3782
|
-
};
|
|
3783
|
-
|
|
3784
|
-
itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
|
|
3785
|
-
}
|
|
3786
|
-
} else {
|
|
3787
|
-
itemPressProps.onPressStart = e => {
|
|
3788
|
-
modality.current = e.pointerType;
|
|
3789
|
-
longPressEnabledOnPressStart.current = longPressEnabled;
|
|
3790
|
-
hadPrimaryActionOnPressStart.current = hasPrimaryAction; // Select on mouse down unless there is a primary action which will occur on mouse up.
|
|
3791
|
-
// For keyboard, select on key down. If there is an action, the Space key selects on key down,
|
|
3792
|
-
// and the Enter key performs onAction on key up.
|
|
3793
|
-
|
|
3794
|
-
if (e.pointerType === 'mouse' && !hasPrimaryAction || e.pointerType === 'keyboard' && (!onAction || $880e95eb8b93ba9a$var$isSelectionKey())) onSelect(e);
|
|
3795
|
-
};
|
|
3796
|
-
|
|
3797
|
-
itemPressProps.onPress = e => {
|
|
3798
|
-
// Selection occurs on touch up. Primary actions always occur on pointer up.
|
|
3799
|
-
// Both primary and secondary actions occur on Enter key up. The only exception
|
|
3800
|
-
// is secondary actions, which occur on double click with a mouse.
|
|
3801
|
-
if (e.pointerType === 'touch' || e.pointerType === 'pen' || e.pointerType === 'virtual' || e.pointerType === 'keyboard' && hasAction && $880e95eb8b93ba9a$var$isActionKey() || e.pointerType === 'mouse' && hadPrimaryActionOnPressStart.current) {
|
|
3802
|
-
if (hasAction) onAction();else onSelect(e);
|
|
3803
|
-
}
|
|
3804
|
-
};
|
|
3805
|
-
}
|
|
3806
|
-
|
|
3807
|
-
if (!isVirtualized) itemProps['data-key'] = key;
|
|
3808
|
-
itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
|
|
3809
|
-
let {
|
|
3810
|
-
pressProps: pressProps,
|
|
3811
|
-
isPressed: isPressed
|
|
3812
|
-
} = $f6c31cce2adf654f$export$45712eceda6fad21(itemPressProps); // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
|
|
3813
|
-
|
|
3814
|
-
let onDoubleClick = hasSecondaryAction ? e => {
|
|
3815
|
-
if (modality.current === 'mouse') {
|
|
3816
|
-
e.stopPropagation();
|
|
3817
|
-
e.preventDefault();
|
|
3818
|
-
onAction();
|
|
3819
|
-
}
|
|
3820
|
-
} : undefined; // Long pressing an item with touch when selectionBehavior = 'replace' switches the selection behavior
|
|
3821
|
-
// to 'toggle'. This changes the single tap behavior from performing an action (i.e. navigating) to
|
|
3822
|
-
// selecting, and may toggle the appearance of a UI affordance like checkboxes on each item.
|
|
3823
|
-
|
|
3824
|
-
let {
|
|
3825
|
-
longPressProps: longPressProps
|
|
3826
|
-
} = $8a26561d2877236e$export$c24ed0104d07eab9({
|
|
3827
|
-
isDisabled: !longPressEnabled,
|
|
3828
|
-
|
|
3829
|
-
onLongPress(e) {
|
|
3830
|
-
if (e.pointerType === 'touch') {
|
|
3831
|
-
onSelect(e);
|
|
3832
|
-
manager.setSelectionBehavior('toggle');
|
|
3833
|
-
}
|
|
3834
|
-
}
|
|
3835
|
-
|
|
3836
|
-
}); // Prevent native drag and drop on long press if we also select on long press.
|
|
3837
|
-
// Once the user is in selection mode, they can long press again to drag.
|
|
3838
|
-
// Use a capturing listener to ensure this runs before useDrag, regardless of
|
|
3839
|
-
// the order the props get merged.
|
|
3840
|
-
|
|
3841
|
-
let onDragStartCapture = e => {
|
|
3842
|
-
if (modality.current === 'touch' && longPressEnabledOnPressStart.current) e.preventDefault();
|
|
3843
|
-
};
|
|
3844
|
-
|
|
3845
|
-
return {
|
|
3846
|
-
itemProps: $3ef42575df84b30b$export$9d1611c77c2fe928(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {}, longPressEnabled ? longPressProps : {}, {
|
|
3847
|
-
onDoubleClick: onDoubleClick,
|
|
3848
|
-
onDragStartCapture: onDragStartCapture
|
|
3849
|
-
}),
|
|
3850
|
-
isPressed: isPressed,
|
|
3851
|
-
isSelected: manager.isSelected(key),
|
|
3852
|
-
isDisabled: isDisabled,
|
|
3853
|
-
allowsSelection: allowsSelection,
|
|
3854
|
-
hasAction: hasAction
|
|
3855
|
-
};
|
|
3856
|
-
}
|
|
3857
|
-
|
|
3858
|
-
function $880e95eb8b93ba9a$var$isActionKey() {
|
|
3859
|
-
let event = window.event;
|
|
3860
|
-
return (event === null || event === void 0 ? void 0 : event.key) === 'Enter';
|
|
3861
|
-
}
|
|
3862
|
-
|
|
3863
|
-
function $880e95eb8b93ba9a$var$isSelectionKey() {
|
|
3864
|
-
let event = window.event;
|
|
3865
|
-
return (event === null || event === void 0 ? void 0 : event.key) === ' ' || (event === null || event === void 0 ? void 0 : event.code) === 'Space';
|
|
3866
|
-
}
|
|
3867
|
-
|
|
3868
|
-
class $2a25aae57d74318e$export$a05409b8bb224a5a {
|
|
3869
|
-
getKeyBelow(key) {
|
|
3870
|
-
key = this.collection.getKeyAfter(key);
|
|
3871
|
-
|
|
3872
|
-
while (key != null) {
|
|
3873
|
-
let item = this.collection.getItem(key);
|
|
3874
|
-
if (item.type === 'item' && !this.disabledKeys.has(key)) return key;
|
|
3875
|
-
key = this.collection.getKeyAfter(key);
|
|
3876
|
-
}
|
|
3877
|
-
}
|
|
3878
|
-
|
|
3879
|
-
getKeyAbove(key) {
|
|
3880
|
-
key = this.collection.getKeyBefore(key);
|
|
3881
|
-
|
|
3882
|
-
while (key != null) {
|
|
3883
|
-
let item = this.collection.getItem(key);
|
|
3884
|
-
if (item.type === 'item' && !this.disabledKeys.has(key)) return key;
|
|
3885
|
-
key = this.collection.getKeyBefore(key);
|
|
3886
|
-
}
|
|
3887
|
-
}
|
|
3888
|
-
|
|
3889
|
-
getFirstKey() {
|
|
3890
|
-
let key = this.collection.getFirstKey();
|
|
3891
|
-
|
|
3892
|
-
while (key != null) {
|
|
3893
|
-
let item = this.collection.getItem(key);
|
|
3894
|
-
if (item.type === 'item' && !this.disabledKeys.has(key)) return key;
|
|
3895
|
-
key = this.collection.getKeyAfter(key);
|
|
3896
|
-
}
|
|
3897
|
-
}
|
|
3898
|
-
|
|
3899
|
-
getLastKey() {
|
|
3900
|
-
let key = this.collection.getLastKey();
|
|
3901
|
-
|
|
3902
|
-
while (key != null) {
|
|
3903
|
-
let item = this.collection.getItem(key);
|
|
3904
|
-
if (item.type === 'item' && !this.disabledKeys.has(key)) return key;
|
|
3905
|
-
key = this.collection.getKeyBefore(key);
|
|
3906
|
-
}
|
|
3907
|
-
}
|
|
3908
|
-
|
|
3909
|
-
getItem(key) {
|
|
3910
|
-
return this.ref.current.querySelector(`[data-key="${key}"]`);
|
|
3911
|
-
}
|
|
3912
|
-
|
|
3913
|
-
getKeyPageAbove(key) {
|
|
3914
|
-
let menu = this.ref.current;
|
|
3915
|
-
let item = this.getItem(key);
|
|
3916
|
-
if (!item) return null;
|
|
3917
|
-
let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
|
|
3918
|
-
|
|
3919
|
-
while (item && item.offsetTop > pageY) {
|
|
3920
|
-
key = this.getKeyAbove(key);
|
|
3921
|
-
item = this.getItem(key);
|
|
3922
|
-
}
|
|
3923
|
-
|
|
3924
|
-
return key;
|
|
3925
|
-
}
|
|
3926
|
-
|
|
3927
|
-
getKeyPageBelow(key) {
|
|
3928
|
-
let menu = this.ref.current;
|
|
3929
|
-
let item = this.getItem(key);
|
|
3930
|
-
if (!item) return null;
|
|
3931
|
-
let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
|
|
3932
|
-
|
|
3933
|
-
while (item && item.offsetTop < pageY) {
|
|
3934
|
-
key = this.getKeyBelow(key);
|
|
3935
|
-
item = this.getItem(key);
|
|
3936
|
-
}
|
|
3937
|
-
|
|
3938
|
-
return key;
|
|
3939
|
-
}
|
|
3940
|
-
|
|
3941
|
-
getKeyForSearch(search, fromKey) {
|
|
3942
|
-
if (!this.collator) return null;
|
|
3943
|
-
let collection = this.collection;
|
|
3944
|
-
let key = fromKey || this.getFirstKey();
|
|
3945
|
-
|
|
3946
|
-
while (key != null) {
|
|
3947
|
-
let item = collection.getItem(key);
|
|
3948
|
-
let substring = item.textValue.slice(0, search.length);
|
|
3949
|
-
if (item.textValue && this.collator.compare(substring, search) === 0) return key;
|
|
3950
|
-
key = this.getKeyBelow(key);
|
|
3951
|
-
}
|
|
3952
|
-
|
|
3953
|
-
return null;
|
|
3954
|
-
}
|
|
3955
|
-
|
|
3956
|
-
constructor(collection, disabledKeys, ref, collator) {
|
|
3957
|
-
this.collection = collection;
|
|
3958
|
-
this.disabledKeys = disabledKeys;
|
|
3959
|
-
this.ref = ref;
|
|
3960
|
-
this.collator = collator;
|
|
3961
|
-
}
|
|
3962
|
-
|
|
3963
|
-
}
|
|
3964
|
-
|
|
3965
|
-
function $982254629710d113$export$b95089534ab7c1fd(props) {
|
|
3966
|
-
let {
|
|
3967
|
-
selectionManager: selectionManager,
|
|
3968
|
-
collection: collection,
|
|
3969
|
-
disabledKeys: disabledKeys,
|
|
3970
|
-
ref: ref,
|
|
3971
|
-
keyboardDelegate: keyboardDelegate,
|
|
3972
|
-
autoFocus: autoFocus,
|
|
3973
|
-
shouldFocusWrap: shouldFocusWrap,
|
|
3974
|
-
isVirtualized: isVirtualized,
|
|
3975
|
-
disallowEmptySelection: disallowEmptySelection,
|
|
3976
|
-
selectOnFocus = selectionManager.selectionBehavior === 'replace',
|
|
3977
|
-
disallowTypeAhead: disallowTypeAhead,
|
|
3978
|
-
shouldUseVirtualFocus: shouldUseVirtualFocus,
|
|
3979
|
-
allowsTabNavigation: allowsTabNavigation
|
|
3980
|
-
} = props; // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
|
|
3981
|
-
// When virtualized, the layout object will be passed in as a prop and override this.
|
|
3982
|
-
|
|
3983
|
-
let collator = $325a3faab7a68acd$export$a16aca283550c30d({
|
|
3984
|
-
usage: 'search',
|
|
3985
|
-
sensitivity: 'base'
|
|
3986
|
-
});
|
|
3987
|
-
let disabledBehavior = selectionManager.disabledBehavior;
|
|
3988
|
-
let delegate = useMemo(() => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a(collection, disabledBehavior === 'selection' ? new Set() : disabledKeys, ref, collator), [keyboardDelegate, collection, disabledKeys, ref, collator, disabledBehavior]);
|
|
3989
|
-
let {
|
|
3990
|
-
collectionProps: collectionProps
|
|
3991
|
-
} = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
|
|
3992
|
-
ref: ref,
|
|
3993
|
-
selectionManager: selectionManager,
|
|
3994
|
-
keyboardDelegate: delegate,
|
|
3995
|
-
autoFocus: autoFocus,
|
|
3996
|
-
shouldFocusWrap: shouldFocusWrap,
|
|
3997
|
-
disallowEmptySelection: disallowEmptySelection,
|
|
3998
|
-
selectOnFocus: selectOnFocus,
|
|
3999
|
-
disallowTypeAhead: disallowTypeAhead,
|
|
4000
|
-
shouldUseVirtualFocus: shouldUseVirtualFocus,
|
|
4001
|
-
allowsTabNavigation: allowsTabNavigation,
|
|
4002
|
-
isVirtualized: isVirtualized,
|
|
4003
|
-
scrollRef: ref
|
|
4004
|
-
});
|
|
4005
|
-
return {
|
|
4006
|
-
listProps: collectionProps
|
|
4007
|
-
};
|
|
4008
|
-
}
|
|
4009
|
-
|
|
4010
|
-
const $453cc9f0df89c0a5$var$cache = new WeakMap();
|
|
4011
|
-
|
|
4012
|
-
function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
|
|
4013
|
-
let count = $453cc9f0df89c0a5$var$cache.get(collection);
|
|
4014
|
-
if (count != null) return count;
|
|
4015
|
-
count = 0;
|
|
4016
|
-
|
|
4017
|
-
for (let item of collection) if (item.type === 'section') count += $453cc9f0df89c0a5$export$77d5aafae4e095b2(item.childNodes);else count++;
|
|
4018
|
-
|
|
4019
|
-
$453cc9f0df89c0a5$var$cache.set(collection, count);
|
|
4020
|
-
return count;
|
|
4021
|
-
}
|
|
4022
|
-
|
|
4023
|
-
const $b1f0cad8af73213b$export$3585ede4d035bf14 = new WeakMap();
|
|
4024
|
-
|
|
4025
|
-
function $b1f0cad8af73213b$var$normalizeKey(key) {
|
|
4026
|
-
if (typeof key === 'string') return key.replace(/\s*/g, '');
|
|
4027
|
-
return '' + key;
|
|
4028
|
-
}
|
|
4029
|
-
|
|
4030
|
-
function $b1f0cad8af73213b$export$9145995848b05025(state, itemKey) {
|
|
4031
|
-
let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
|
|
4032
|
-
if (!data) throw new Error('Unknown list');
|
|
4033
|
-
return `${data.id}-option-${$b1f0cad8af73213b$var$normalizeKey(itemKey)}`;
|
|
4034
|
-
}
|
|
4035
|
-
|
|
4036
|
-
function $c132121280ec012d$export$50eacbbf140a3141(props, state, ref) {
|
|
4037
|
-
let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
|
|
4038
|
-
labelable: true
|
|
4039
|
-
});
|
|
4040
|
-
let {
|
|
4041
|
-
listProps: listProps
|
|
4042
|
-
} = $982254629710d113$export$b95089534ab7c1fd(_extends({}, props, {
|
|
4043
|
-
ref: ref,
|
|
4044
|
-
selectionManager: state.selectionManager,
|
|
4045
|
-
collection: state.collection,
|
|
4046
|
-
disabledKeys: state.disabledKeys
|
|
4047
|
-
}));
|
|
4048
|
-
let {
|
|
4049
|
-
focusWithinProps: focusWithinProps
|
|
4050
|
-
} = $9ab94262bd0047c7$export$420e68273165f4ec({
|
|
4051
|
-
onFocusWithin: props.onFocus,
|
|
4052
|
-
onBlurWithin: props.onBlur,
|
|
4053
|
-
onFocusWithinChange: props.onFocusChange
|
|
4054
|
-
}); // Share list id and some props with child options.
|
|
4055
|
-
|
|
4056
|
-
let id = $bdb11010cef70236$export$f680877a34711e37(props.id);
|
|
4057
|
-
$b1f0cad8af73213b$export$3585ede4d035bf14.set(state, {
|
|
4058
|
-
id: id,
|
|
4059
|
-
shouldUseVirtualFocus: props.shouldUseVirtualFocus,
|
|
4060
|
-
shouldSelectOnPressUp: props.shouldSelectOnPressUp,
|
|
4061
|
-
shouldFocusOnHover: props.shouldFocusOnHover,
|
|
4062
|
-
isVirtualized: props.isVirtualized,
|
|
4063
|
-
onAction: props.onAction
|
|
4064
|
-
});
|
|
4065
|
-
let {
|
|
4066
|
-
labelProps: labelProps,
|
|
4067
|
-
fieldProps: fieldProps
|
|
4068
|
-
} = $d191a55c9702f145$export$8467354a121f1b9f(_extends({}, props, {
|
|
4069
|
-
id: id,
|
|
4070
|
-
// listbox is not an HTML input element so it
|
|
4071
|
-
// shouldn't be labeled by a <label> element.
|
|
4072
|
-
labelElementType: 'span'
|
|
4073
|
-
}));
|
|
4074
|
-
return {
|
|
4075
|
-
labelProps: labelProps,
|
|
4076
|
-
listBoxProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, focusWithinProps, state.selectionManager.selectionMode === 'multiple' ? {
|
|
4077
|
-
'aria-multiselectable': 'true'
|
|
4078
|
-
} : {}, _extends({
|
|
4079
|
-
role: 'listbox'
|
|
4080
|
-
}, $3ef42575df84b30b$export$9d1611c77c2fe928(fieldProps, listProps)))
|
|
4081
|
-
};
|
|
4082
|
-
}
|
|
4083
|
-
|
|
4084
|
-
function $293f70390ea03370$export$497855f14858aa34(props, state, ref) {
|
|
4085
|
-
let {
|
|
4086
|
-
key: key
|
|
4087
|
-
} = props;
|
|
4088
|
-
let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
|
|
4089
|
-
|
|
4090
|
-
var _isDisabled;
|
|
4091
|
-
|
|
4092
|
-
let isDisabled = (_isDisabled = props.isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : state.disabledKeys.has(key);
|
|
4093
|
-
|
|
4094
|
-
var _isSelected;
|
|
4095
|
-
|
|
4096
|
-
let isSelected = (_isSelected = props.isSelected) !== null && _isSelected !== void 0 ? _isSelected : state.selectionManager.isSelected(key);
|
|
4097
|
-
let isFocused = state.selectionManager.focusedKey === key;
|
|
4098
|
-
|
|
4099
|
-
var _shouldSelectOnPressUp;
|
|
4100
|
-
|
|
4101
|
-
let shouldSelectOnPressUp = (_shouldSelectOnPressUp = props.shouldSelectOnPressUp) !== null && _shouldSelectOnPressUp !== void 0 ? _shouldSelectOnPressUp : data.shouldSelectOnPressUp;
|
|
4102
|
-
|
|
4103
|
-
var _shouldFocusOnHover;
|
|
4104
|
-
|
|
4105
|
-
let shouldFocusOnHover = (_shouldFocusOnHover = props.shouldFocusOnHover) !== null && _shouldFocusOnHover !== void 0 ? _shouldFocusOnHover : data.shouldFocusOnHover;
|
|
4106
|
-
|
|
4107
|
-
var _shouldUseVirtualFocus;
|
|
4108
|
-
|
|
4109
|
-
let shouldUseVirtualFocus = (_shouldUseVirtualFocus = props.shouldUseVirtualFocus) !== null && _shouldUseVirtualFocus !== void 0 ? _shouldUseVirtualFocus : data.shouldUseVirtualFocus;
|
|
4110
|
-
|
|
4111
|
-
var _isVirtualized;
|
|
4112
|
-
|
|
4113
|
-
let isVirtualized = (_isVirtualized = props.isVirtualized) !== null && _isVirtualized !== void 0 ? _isVirtualized : data.isVirtualized;
|
|
4114
|
-
let labelId = $bdb11010cef70236$export$b4cc09c592e8fdb8();
|
|
4115
|
-
let descriptionId = $bdb11010cef70236$export$b4cc09c592e8fdb8();
|
|
4116
|
-
let optionProps = {
|
|
4117
|
-
role: 'option',
|
|
4118
|
-
'aria-disabled': isDisabled,
|
|
4119
|
-
'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined
|
|
4120
|
-
}; // Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text".
|
|
4121
|
-
// We should not map slots to the label and description on Safari and instead just have VoiceOver read the textContent.
|
|
4122
|
-
// https://bugs.webkit.org/show_bug.cgi?id=209279
|
|
4123
|
-
|
|
4124
|
-
if (!($c87311424ea30a05$export$9ac100e40613ea10() && $c87311424ea30a05$export$78551043582a6a98())) {
|
|
4125
|
-
optionProps['aria-label'] = props['aria-label'];
|
|
4126
|
-
optionProps['aria-labelledby'] = labelId;
|
|
4127
|
-
optionProps['aria-describedby'] = descriptionId;
|
|
4128
|
-
}
|
|
4129
|
-
|
|
4130
|
-
if (isVirtualized) {
|
|
4131
|
-
optionProps['aria-posinset'] = state.collection.getItem(key).index + 1;
|
|
4132
|
-
optionProps['aria-setsize'] = $453cc9f0df89c0a5$export$77d5aafae4e095b2(state.collection);
|
|
4133
|
-
}
|
|
4134
|
-
|
|
4135
|
-
let {
|
|
4136
|
-
itemProps: itemProps,
|
|
4137
|
-
isPressed: isPressed,
|
|
4138
|
-
hasAction: hasAction,
|
|
4139
|
-
allowsSelection: allowsSelection
|
|
4140
|
-
} = $880e95eb8b93ba9a$export$ecf600387e221c37({
|
|
4141
|
-
selectionManager: state.selectionManager,
|
|
4142
|
-
key: key,
|
|
4143
|
-
ref: ref,
|
|
4144
|
-
shouldSelectOnPressUp: shouldSelectOnPressUp,
|
|
4145
|
-
allowsDifferentPressOrigin: shouldSelectOnPressUp && shouldFocusOnHover,
|
|
4146
|
-
isVirtualized: isVirtualized,
|
|
4147
|
-
shouldUseVirtualFocus: shouldUseVirtualFocus,
|
|
4148
|
-
isDisabled: isDisabled,
|
|
4149
|
-
onAction: data.onAction ? () => data.onAction(key) : undefined
|
|
4150
|
-
});
|
|
4151
|
-
let {
|
|
4152
|
-
hoverProps: hoverProps
|
|
4153
|
-
} = $6179b936705e76d3$export$ae780daf29e6d456({
|
|
4154
|
-
isDisabled: isDisabled || !shouldFocusOnHover,
|
|
4155
|
-
|
|
4156
|
-
onHoverStart() {
|
|
4157
|
-
if (!$507fabe10e71c6fb$export$b9b3dfddab17db27()) {
|
|
4158
|
-
state.selectionManager.setFocused(true);
|
|
4159
|
-
state.selectionManager.setFocusedKey(key);
|
|
4160
|
-
}
|
|
4161
|
-
}
|
|
4162
|
-
|
|
4163
|
-
});
|
|
4164
|
-
return {
|
|
4165
|
-
optionProps: _extends({}, optionProps, $3ef42575df84b30b$export$9d1611c77c2fe928(itemProps, hoverProps), {
|
|
4166
|
-
id: $b1f0cad8af73213b$export$9145995848b05025(state, key)
|
|
4167
|
-
}),
|
|
4168
|
-
labelProps: {
|
|
4169
|
-
id: labelId
|
|
4170
|
-
},
|
|
4171
|
-
descriptionProps: {
|
|
4172
|
-
id: descriptionId
|
|
4173
|
-
},
|
|
4174
|
-
isFocused: isFocused,
|
|
4175
|
-
isSelected: isSelected,
|
|
4176
|
-
isDisabled: isDisabled,
|
|
4177
|
-
isPressed: isPressed,
|
|
4178
|
-
allowsSelection: allowsSelection,
|
|
4179
|
-
hasAction: hasAction
|
|
4180
|
-
};
|
|
4181
|
-
}
|
|
4182
|
-
|
|
4183
|
-
let _$3 = t => t,
|
|
4184
|
-
_t$3,
|
|
4185
|
-
_t2$3,
|
|
4186
|
-
_t3$3,
|
|
4187
|
-
_t4$3,
|
|
4188
|
-
_t5$3,
|
|
4189
|
-
_t6$1;
|
|
4190
|
-
|
|
4191
|
-
const _excluded$3 = ["state", "mode"];
|
|
4192
|
-
|
|
4193
|
-
const Listbox = _ref => {
|
|
4194
|
-
let {
|
|
4195
|
-
state,
|
|
4196
|
-
mode = 'default'
|
|
4197
|
-
} = _ref,
|
|
4198
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
4199
|
-
|
|
4200
|
-
const ref = useRef(null);
|
|
4201
|
-
const {
|
|
4202
|
-
listBoxProps
|
|
4203
|
-
} = $c132121280ec012d$export$50eacbbf140a3141(props, state, ref);
|
|
4204
|
-
const collection = useMemo(() => [...state.collection].map((node, index, self) => ({
|
|
4205
|
-
node,
|
|
4206
|
-
first: index === 0,
|
|
4207
|
-
last: index === self.length - 1
|
|
4208
|
-
})), [state.collection]);
|
|
4209
|
-
return /*#__PURE__*/React.createElement(ListboxRoot, _extends({
|
|
4210
|
-
ref: ref
|
|
4211
|
-
}, listBoxProps), collection.map(({
|
|
4212
|
-
node,
|
|
4213
|
-
last
|
|
4214
|
-
}) => /*#__PURE__*/React.createElement(Fragment, {
|
|
4215
|
-
key: node.key
|
|
4216
|
-
}, /*#__PURE__*/React.createElement(Option, {
|
|
4217
|
-
item: node,
|
|
4218
|
-
state: state,
|
|
4219
|
-
mode: mode
|
|
4220
|
-
}), !last && mode === 'separator' && /*#__PURE__*/React.createElement(Divider, null))));
|
|
4221
|
-
};
|
|
4222
|
-
|
|
4223
|
-
var Listbox$1 = memo(Listbox);
|
|
4224
|
-
const ListboxRoot = styled.ul(_t$3 || (_t$3 = _$3`
|
|
4225
|
-
padding-left: 0;
|
|
4226
|
-
margin: 0;
|
|
4227
|
-
box-sizing: border-box;
|
|
4228
|
-
list-style: none;
|
|
4229
|
-
|
|
4230
|
-
${0}
|
|
4231
|
-
`), theme$2(o => [o.bg.background1, o.border.default, o.borderRadius(8), o.outline.default.focus]));
|
|
4232
|
-
const Divider = styled.div.attrs({
|
|
4233
|
-
role: 'separator'
|
|
4234
|
-
})(_t2$3 || (_t2$3 = _$3`
|
|
4235
|
-
display: flex;
|
|
4236
|
-
${0}
|
|
4237
|
-
|
|
4238
|
-
&:before {
|
|
4239
|
-
content: '';
|
|
4240
|
-
display: block;
|
|
4241
|
-
width: 100%;
|
|
4242
|
-
height: 1px;
|
|
4243
|
-
background: #00000014;
|
|
4244
|
-
}
|
|
4245
|
-
`), theme$2(o => [o.padding.horizontal(8)]));
|
|
4246
|
-
|
|
4247
|
-
const Option = ({
|
|
4248
|
-
item,
|
|
4249
|
-
state,
|
|
4250
|
-
mode
|
|
4251
|
-
}) => {
|
|
4252
|
-
const ref = useRef(null);
|
|
4253
|
-
const {
|
|
4254
|
-
optionProps,
|
|
4255
|
-
isSelected
|
|
4256
|
-
} = $293f70390ea03370$export$497855f14858aa34(item, state, ref);
|
|
4257
|
-
const {
|
|
4258
|
-
focusProps
|
|
4259
|
-
} = useFocusRing();
|
|
4260
|
-
return /*#__PURE__*/React.createElement(OptionRoot, _extends({}, $3ef42575df84b30b$export$9d1611c77c2fe928(optionProps, focusProps), {
|
|
4261
|
-
ref: ref,
|
|
4262
|
-
mode: mode
|
|
4263
|
-
}), /*#__PURE__*/React.createElement(OptionCheckIcon, {
|
|
4264
|
-
name: "16/Check",
|
|
4265
|
-
isSelected: isSelected
|
|
4266
|
-
}), /*#__PURE__*/React.createElement(OptionText, null, item.rendered));
|
|
4267
|
-
};
|
|
4268
|
-
|
|
4269
|
-
const OptionRoot = styled.li(_t3$3 || (_t3$3 = _$3`
|
|
4270
|
-
display: flex;
|
|
4271
|
-
align-items: center;
|
|
4272
|
-
gap: ${0};
|
|
4273
|
-
height: 40px;
|
|
4274
|
-
cursor: pointer;
|
|
4275
|
-
outline: none;
|
|
4276
|
-
|
|
4277
|
-
${0}
|
|
4278
|
-
|
|
4279
|
-
&:focus {
|
|
4280
|
-
${0}
|
|
4281
|
-
}
|
|
4282
|
-
`), ({
|
|
4283
|
-
theme
|
|
4284
|
-
}) => px(theme.spacing[4]), ({
|
|
4285
|
-
mode
|
|
4286
|
-
}) => theme$2(o => [o.padding.horizontal(8), mode === 'separator' && o.padding.vertical(4)]), theme$2(o => [o.bg.surface3]));
|
|
4287
|
-
const OptionCheckIcon = styled(Icon$1)(_t4$3 || (_t4$3 = _$3`
|
|
4288
|
-
visibility: hidden;
|
|
4289
|
-
|
|
4290
|
-
${0}
|
|
4291
|
-
`), ({
|
|
4292
|
-
isSelected
|
|
4293
|
-
}) => isSelected && css(_t5$3 || (_t5$3 = _$3`
|
|
4294
|
-
visibility: visible;
|
|
4295
|
-
`)));
|
|
4296
|
-
const OptionText = styled.span(_t6$1 || (_t6$1 = _$3`
|
|
4297
|
-
display: block;
|
|
4298
|
-
${0}
|
|
4299
|
-
`), theme$2(o => [o.typography(14)]));
|
|
4300
|
-
|
|
4301
|
-
const _excluded$2 = ["open", "onClose", "children"];
|
|
4302
|
-
|
|
4303
|
-
const Popover = _ref => {
|
|
4304
|
-
let {
|
|
4305
|
-
open,
|
|
4306
|
-
onClose,
|
|
4307
|
-
children
|
|
4308
|
-
} = _ref,
|
|
4309
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
4310
|
-
|
|
4311
|
-
const ref = useRef(null);
|
|
4312
|
-
const {
|
|
4313
|
-
overlayProps
|
|
4314
|
-
} = useOverlay(useMemo(() => ({
|
|
4315
|
-
isOpen: open,
|
|
4316
|
-
onClose,
|
|
4317
|
-
shouldCloseOnBlur: true,
|
|
4318
|
-
isDismissable: true
|
|
4319
|
-
}), [onClose, open]), ref);
|
|
4320
|
-
return /*#__PURE__*/React.createElement(FocusScope, {
|
|
4321
|
-
restoreFocus: true
|
|
4322
|
-
}, /*#__PURE__*/React.createElement("div", _extends({}, $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), {
|
|
4323
|
-
ref: ref
|
|
4324
|
-
}), children, /*#__PURE__*/React.createElement(DismissButton, {
|
|
4325
|
-
onDismiss: onClose
|
|
4326
|
-
})));
|
|
4327
|
-
};
|
|
4328
|
-
|
|
4329
|
-
var Popover$1 = memo(Popover);
|
|
4330
|
-
|
|
4331
|
-
let _$2 = t => t,
|
|
4332
|
-
_t$2,
|
|
4333
|
-
_t2$2,
|
|
4334
|
-
_t3$2,
|
|
4335
|
-
_t4$2,
|
|
4336
|
-
_t5$2,
|
|
4337
|
-
_t6,
|
|
4338
|
-
_t7;
|
|
4339
|
-
|
|
4340
|
-
const _excluded$1 = ["open", "className", "label", "requiredText", "subLabel", "assertiveText", "autoComplete", "invalid", "disabled", "required", "showLabel", "mode"];
|
|
4341
|
-
|
|
4342
|
-
const DropdownSelector = _ref => {
|
|
4343
|
-
let {
|
|
4344
|
-
open,
|
|
4345
|
-
className,
|
|
4346
|
-
label = '',
|
|
4347
|
-
requiredText = '',
|
|
4348
|
-
subLabel,
|
|
4349
|
-
assertiveText,
|
|
4350
|
-
autoComplete,
|
|
4351
|
-
invalid = false,
|
|
4352
|
-
disabled = false,
|
|
4353
|
-
required = false,
|
|
4354
|
-
showLabel = false,
|
|
4355
|
-
mode = 'default'
|
|
4356
|
-
} = _ref,
|
|
4357
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
4358
|
-
|
|
4359
|
-
const {
|
|
4360
|
-
visuallyHiddenProps
|
|
4361
|
-
} = useVisuallyHidden();
|
|
4362
|
-
const triggerRef = useRef(null);
|
|
4363
|
-
const selectProps = useMemo(() => _extends({}, props, {
|
|
4364
|
-
label,
|
|
4365
|
-
isOpen: open,
|
|
4366
|
-
isDisabled: disabled,
|
|
4367
|
-
isRequired: required,
|
|
4368
|
-
errorMessage: invalid && assertiveText,
|
|
4369
|
-
validationState: invalid ? 'invalid' : 'valid',
|
|
4370
|
-
onSelectionChange: props.onChange,
|
|
4371
|
-
selectedKey: props.value,
|
|
4372
|
-
defaultSelectedKey: props.defaultValue
|
|
4373
|
-
}), [assertiveText, disabled, invalid, label, open, props, required]);
|
|
4374
|
-
const state = useSelectState(selectProps);
|
|
4375
|
-
const {
|
|
4376
|
-
labelProps,
|
|
4377
|
-
triggerProps,
|
|
4378
|
-
valueProps,
|
|
4379
|
-
menuProps,
|
|
4380
|
-
errorMessageProps,
|
|
4381
|
-
descriptionProps
|
|
4382
|
-
} = useSelect(selectProps, state, triggerRef);
|
|
4383
|
-
const {
|
|
4384
|
-
buttonProps
|
|
4385
|
-
} = useButton(triggerProps, triggerRef);
|
|
4386
|
-
const hasAssertiveText = assertiveText !== undefined && assertiveText.length > 0;
|
|
4387
|
-
return /*#__PURE__*/React.createElement(DropdownSelectorRoot, {
|
|
4388
|
-
"aria-disabled": disabled,
|
|
4389
|
-
className: className
|
|
4390
|
-
}, /*#__PURE__*/React.createElement(DropdownFieldLabel, _extends({
|
|
4391
|
-
label: label,
|
|
4392
|
-
required: required,
|
|
4393
|
-
requiredText: requiredText,
|
|
4394
|
-
subLabel: subLabel
|
|
4395
|
-
}, labelProps, !showLabel ? visuallyHiddenProps : {})), /*#__PURE__*/React.createElement(HiddenSelect, {
|
|
4396
|
-
state: state,
|
|
4397
|
-
triggerRef: triggerRef,
|
|
4398
|
-
label: label,
|
|
4399
|
-
name: props.name,
|
|
4400
|
-
isDisabled: disabled,
|
|
4401
|
-
autoComplete: autoComplete
|
|
4402
|
-
}), /*#__PURE__*/React.createElement(DropdownButtonWrapper, null, /*#__PURE__*/React.createElement(DropdownButton, _extends({}, buttonProps, {
|
|
4403
|
-
ref: triggerRef,
|
|
4404
|
-
invalid: invalid
|
|
4405
|
-
}), /*#__PURE__*/React.createElement(DropdownButtonText, valueProps, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /*#__PURE__*/React.createElement(Icon$1, {
|
|
4406
|
-
name: "16/Menu"
|
|
4407
|
-
})), state.isOpen && /*#__PURE__*/React.createElement(DropdownPopover, {
|
|
4408
|
-
open: state.isOpen,
|
|
4409
|
-
onClose: () => state.close()
|
|
4410
|
-
}, /*#__PURE__*/React.createElement(Listbox$1, _extends({}, menuProps, {
|
|
4411
|
-
state: state,
|
|
4412
|
-
mode: mode
|
|
4413
|
-
})))), hasAssertiveText && /*#__PURE__*/React.createElement(AssertiveText, _extends({
|
|
4414
|
-
invalid: invalid
|
|
4415
|
-
}, invalid ? errorMessageProps : descriptionProps), assertiveText));
|
|
4416
|
-
};
|
|
4417
|
-
const DropdownSelectorItem = Item;
|
|
4418
|
-
const DropdownSelectorRoot = styled.div(_t$2 || (_t$2 = _$2`
|
|
4419
|
-
position: relative;
|
|
4420
|
-
display: inline-block;
|
|
4421
|
-
|
|
4422
|
-
${0} {
|
|
4423
|
-
cursor: default;
|
|
4424
|
-
${0}
|
|
4425
|
-
}
|
|
4426
|
-
`), disabledSelector, theme$2(o => o.disabled));
|
|
4427
|
-
const DropdownFieldLabel = styled(FieldLabel)(_t2$2 || (_t2$2 = _$2`
|
|
4428
|
-
width: 100%;
|
|
4429
|
-
|
|
4430
|
-
${0}
|
|
4431
|
-
`), theme$2(o => o.margin.bottom(8)));
|
|
4432
|
-
const DropdownButtonWrapper = styled.div(_t3$2 || (_t3$2 = _$2`
|
|
4433
|
-
position: relative;
|
|
4434
|
-
`));
|
|
4435
|
-
const DropdownButton = styled.button(_t4$2 || (_t4$2 = _$2`
|
|
4436
|
-
display: flex;
|
|
4437
|
-
justify-content: space-between;
|
|
4438
|
-
align-items: center;
|
|
4439
|
-
|
|
4440
|
-
height: 40px;
|
|
4441
|
-
width: 288px;
|
|
4442
|
-
box-sizing: border-box;
|
|
4443
|
-
cursor: pointer;
|
|
4444
|
-
|
|
4445
|
-
${0} {
|
|
4446
|
-
cursor: default;
|
|
4447
|
-
}
|
|
4448
|
-
|
|
4449
|
-
${0}
|
|
4450
|
-
`), disabledSelector, ({
|
|
4451
|
-
invalid
|
|
4452
|
-
}) => theme$2(o => [o.border.default, o.padding.horizontal(8), o.outline.default.focus, o.bg.surface3, o.borderRadius(4), invalid && o.outline.assertive]));
|
|
4453
|
-
const DropdownButtonText = styled.span(_t5$2 || (_t5$2 = _$2`
|
|
4454
|
-
text-align: left;
|
|
4455
|
-
|
|
4456
|
-
${0}
|
|
4457
|
-
`), theme$2(o => [o.typography(14), o.font.text2]));
|
|
4458
|
-
const AssertiveText = styled.div(_t6 || (_t6 = _$2`
|
|
4459
|
-
${0}
|
|
4460
|
-
`), ({
|
|
4461
|
-
invalid
|
|
4462
|
-
}) => theme$2(o => [o.typography(14), o.margin.top(8), invalid && o.font.assertive]));
|
|
4463
|
-
const DropdownPopover = styled(Popover$1)(_t7 || (_t7 = _$2`
|
|
4464
|
-
position: absolute;
|
|
4465
|
-
width: 100%;
|
|
4466
|
-
|
|
4467
|
-
top: 100%;
|
|
4468
|
-
margin-top: 2px;
|
|
4469
|
-
`));
|
|
4470
|
-
|
|
4471
|
-
const RadioContext = createContext(null);
|
|
4472
|
-
const RadioProvider = ({
|
|
4473
|
-
value,
|
|
4474
|
-
children
|
|
4475
|
-
}) => {
|
|
4476
|
-
return /*#__PURE__*/React.createElement(RadioContext.Provider, {
|
|
4477
|
-
value: value
|
|
4478
|
-
}, children);
|
|
4479
|
-
};
|
|
4480
|
-
const useRadioContext = () => {
|
|
4481
|
-
const state = useContext(RadioContext);
|
|
4482
|
-
if (state === null) throw new Error('`<RadioProvider>` is not likely mounted.');
|
|
4483
|
-
return state;
|
|
4484
|
-
};
|
|
4485
|
-
|
|
4486
|
-
let _$1 = t => t,
|
|
4487
|
-
_t$1,
|
|
4488
|
-
_t2$1,
|
|
4489
|
-
_t3$1,
|
|
4490
|
-
_t4$1,
|
|
4491
|
-
_t5$1;
|
|
4492
|
-
|
|
4493
|
-
const _excluded = ["children"];
|
|
4494
|
-
const SegmentedControl = forwardRef(function SegmentedControlInner(props, ref) {
|
|
4495
|
-
const ariaRadioGroupProps = useMemo(() => _extends({}, props, {
|
|
4496
|
-
isDisabled: props.disabled,
|
|
4497
|
-
isReadOnly: props.readonly,
|
|
4498
|
-
isRequired: props.required
|
|
4499
|
-
}), [props]);
|
|
4500
|
-
const state = useRadioGroupState(ariaRadioGroupProps);
|
|
4501
|
-
const {
|
|
4502
|
-
radioGroupProps
|
|
4503
|
-
} = useRadioGroup(ariaRadioGroupProps, state);
|
|
4504
|
-
const segmentedControlItems = useMemo(() => {
|
|
4505
|
-
return props.data.map(d => typeof d === 'string' ? {
|
|
4506
|
-
value: d,
|
|
4507
|
-
label: d
|
|
4508
|
-
} : d);
|
|
4509
|
-
}, [props.data]);
|
|
4510
|
-
return /*#__PURE__*/React.createElement(SegmentedControlRoot, _extends({
|
|
4511
|
-
ref: ref
|
|
4512
|
-
}, radioGroupProps), /*#__PURE__*/React.createElement(RadioProvider, {
|
|
4513
|
-
value: state
|
|
4514
|
-
}, segmentedControlItems.map(item => /*#__PURE__*/React.createElement(Segmented, {
|
|
4515
|
-
key: item.value,
|
|
4516
|
-
value: item.value,
|
|
4517
|
-
disabled: item.disabled
|
|
4518
|
-
}, item.label))));
|
|
4519
|
-
});
|
|
4520
|
-
var index$1 = memo(SegmentedControl);
|
|
4521
|
-
|
|
4522
|
-
const Segmented = _ref => {
|
|
4523
|
-
let {
|
|
4524
|
-
children
|
|
4525
|
-
} = _ref,
|
|
4526
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
4527
|
-
|
|
4528
|
-
const state = useRadioContext();
|
|
4529
|
-
const ref = useRef(null);
|
|
4530
|
-
const ariaRadioProps = useMemo(() => _extends({}, props, {
|
|
4531
|
-
isDisabled: props.disabled
|
|
4532
|
-
}), [props]);
|
|
4533
|
-
const {
|
|
4534
|
-
inputProps,
|
|
4535
|
-
isDisabled,
|
|
4536
|
-
isSelected
|
|
4537
|
-
} = useRadio(ariaRadioProps, state, ref);
|
|
4538
|
-
return /*#__PURE__*/React.createElement(SegmentedRoot, {
|
|
4539
|
-
"aria-disabled": isDisabled || state.isReadOnly,
|
|
4540
|
-
checked: isSelected
|
|
4541
|
-
}, /*#__PURE__*/React.createElement(SegmentedInput, _extends({}, inputProps, {
|
|
4542
|
-
ref: ref
|
|
4543
|
-
})), /*#__PURE__*/React.createElement(RadioLabel, null, /*#__PURE__*/React.createElement(SegmentedLabelInner, null, children)));
|
|
4544
|
-
};
|
|
4545
|
-
|
|
4546
|
-
const SegmentedControlRoot = styled.div(_t$1 || (_t$1 = _$1`
|
|
4547
|
-
display: inline-flex;
|
|
4548
|
-
align-items: center;
|
|
4549
|
-
|
|
4550
|
-
${0}
|
|
4551
|
-
`), theme$2(o => [o.bg.surface3, o.borderRadius(16)]));
|
|
4552
|
-
const SegmentedRoot = styled.label(_t2$1 || (_t2$1 = _$1`
|
|
4553
|
-
position: relative;
|
|
4554
|
-
display: flex;
|
|
4555
|
-
align-items: center;
|
|
4556
|
-
cursor: pointer;
|
|
4557
|
-
height: 32px;
|
|
4558
|
-
|
|
4559
|
-
${0} {
|
|
4560
|
-
cursor: default;
|
|
4561
|
-
}
|
|
4562
|
-
|
|
4563
|
-
${0}
|
|
4564
|
-
`), disabledSelector, ({
|
|
4565
|
-
checked
|
|
4566
|
-
}) => theme$2(o => [o.padding.horizontal(16), o.borderRadius(16), o.disabled, checked === true && o.bg.brand, checked === true ? o.font.text5 : o.font.text2]));
|
|
4567
|
-
const SegmentedInput = styled.input(_t3$1 || (_t3$1 = _$1`
|
|
4568
|
-
position: absolute;
|
|
4569
|
-
|
|
4570
|
-
height: 0px;
|
|
4571
|
-
width: 0px;
|
|
4572
|
-
padding: 0;
|
|
4573
|
-
margin: 0;
|
|
4574
|
-
|
|
4575
|
-
appearance: none;
|
|
4576
|
-
box-sizing: border-box;
|
|
4577
|
-
overflow: hidden;
|
|
4578
|
-
white-space: nowrap;
|
|
4579
|
-
opacity: 0;
|
|
4580
|
-
`));
|
|
4581
|
-
const RadioLabel = styled.div(_t4$1 || (_t4$1 = _$1`
|
|
4582
|
-
background: transparent;
|
|
4583
|
-
display: flex;
|
|
4584
|
-
align-items: center;
|
|
4585
|
-
height: 22px;
|
|
4586
|
-
`));
|
|
4587
|
-
const SegmentedLabelInner = styled.div(_t5$1 || (_t5$1 = _$1`
|
|
4588
|
-
${0}
|
|
4589
|
-
`), theme$2(o => [o.typography(14)]));
|
|
4590
|
-
|
|
4591
|
-
let _ = t => t,
|
|
4592
|
-
_t,
|
|
4593
|
-
_t2,
|
|
4594
|
-
_t3,
|
|
4595
|
-
_t4,
|
|
4596
|
-
_t5;
|
|
4597
|
-
const Checkbox = forwardRef(function CheckboxInner(props, ref) {
|
|
4598
|
-
var _props$disabled, _props$readonly;
|
|
4599
|
-
|
|
4600
|
-
const ariaCheckboxProps = useMemo(() => _extends({}, props, {
|
|
4601
|
-
isSelected: props.checked,
|
|
4602
|
-
defaultSelected: props.defaultChecked,
|
|
4603
|
-
// children がいない場合は aria-label をつけないといけない
|
|
4604
|
-
'aria-label': 'children' in props ? undefined : props.label,
|
|
4605
|
-
isDisabled: props.disabled
|
|
4606
|
-
}), [props]);
|
|
4607
|
-
const state = useToggleState(ariaCheckboxProps);
|
|
4608
|
-
const objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
|
|
4609
|
-
const {
|
|
4610
|
-
inputProps
|
|
4611
|
-
} = useCheckbox(ariaCheckboxProps, state, objectRef);
|
|
4612
|
-
const isDisabled = ((_props$disabled = props.disabled) != null ? _props$disabled : false) || ((_props$readonly = props.readonly) != null ? _props$readonly : false);
|
|
4613
|
-
return /*#__PURE__*/React.createElement(InputRoot, {
|
|
4614
|
-
"aria-disabled": isDisabled
|
|
4615
|
-
}, /*#__PURE__*/React.createElement(CheckboxInput, _extends({
|
|
4616
|
-
type: "checkbox"
|
|
4617
|
-
}, inputProps)), /*#__PURE__*/React.createElement(CheckboxInputOverlay, {
|
|
4618
|
-
"aria-hidden": true,
|
|
4619
|
-
checked: inputProps.checked
|
|
4620
|
-
}, /*#__PURE__*/React.createElement(Icon$1, {
|
|
4621
|
-
name: "24/Check",
|
|
4622
|
-
unsafeNonGuidelineScale: 2 / 3
|
|
4623
|
-
})), 'children' in props && /*#__PURE__*/React.createElement(InputLabel, null, props.children));
|
|
4624
|
-
});
|
|
4625
|
-
var index = memo(Checkbox);
|
|
4626
|
-
const hiddenCss = css(_t || (_t = _`
|
|
4627
|
-
visibility: hidden;
|
|
4628
|
-
`));
|
|
4629
|
-
const InputRoot = styled.label(_t2 || (_t2 = _`
|
|
4630
|
-
position: relative;
|
|
4631
|
-
display: flex;
|
|
4632
|
-
align-items: center;
|
|
4633
|
-
cursor: pointer;
|
|
4634
|
-
${0} {
|
|
4635
|
-
cursor: default;
|
|
4636
|
-
}
|
|
4637
|
-
|
|
4638
|
-
gap: ${0};
|
|
4639
|
-
${0}
|
|
4640
|
-
`), disabledSelector, ({
|
|
4641
|
-
theme
|
|
4642
|
-
}) => px(theme.spacing[4]), theme$2(o => [o.disabled]));
|
|
4643
|
-
const CheckboxInput = styled.input(_t3 || (_t3 = _`
|
|
4644
|
-
&[type='checkbox'] {
|
|
4645
|
-
appearance: none;
|
|
4646
|
-
display: block;
|
|
4647
|
-
cursor: pointer;
|
|
4648
|
-
margin: 0;
|
|
4649
|
-
width: 20px;
|
|
4650
|
-
height: 20px;
|
|
4651
|
-
|
|
4652
|
-
&:checked {
|
|
4653
|
-
${0}
|
|
4654
|
-
}
|
|
4655
|
-
&:not(:checked) {
|
|
4656
|
-
border-width: 2px;
|
|
4657
|
-
border-style: solid;
|
|
4658
|
-
border-color: ${0};
|
|
4659
|
-
}
|
|
4660
|
-
${0}
|
|
4661
|
-
}
|
|
4662
|
-
`), theme$2(o => o.bg.brand.hover.press), ({
|
|
4663
|
-
theme
|
|
4664
|
-
}) => theme.color.text4, theme$2(o => [o.outline.default.focus, o.borderRadius(4)]));
|
|
4665
|
-
const CheckboxInputOverlay = styled.div(_t4 || (_t4 = _`
|
|
4666
|
-
position: absolute;
|
|
4667
|
-
top: -2px;
|
|
4668
|
-
left: -2px;
|
|
4669
|
-
box-sizing: border-box;
|
|
4670
|
-
display: flex;
|
|
4671
|
-
align-items: center;
|
|
4672
|
-
justify-content: center;
|
|
4673
|
-
|
|
4674
|
-
${0}
|
|
4675
|
-
|
|
4676
|
-
${0};
|
|
4677
|
-
`), theme$2(o => [o.width.px(24), o.height.px(24), o.font.text5]), ({
|
|
4678
|
-
checked
|
|
4679
|
-
}) => checked !== true && hiddenCss);
|
|
4680
|
-
const InputLabel = styled.div(_t5 || (_t5 = _`
|
|
4681
|
-
${0}
|
|
4682
|
-
`), theme$2(o => [o.typography(14)]));
|
|
4683
|
-
|
|
4684
|
-
export { Button, index as Checkbox, Clickable, ComponentAbstraction, DropdownSelector, DropdownSelectorItem, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Modal, ModalAlign, ModalBody, ModalButtons, ModalHeader, MultiSelect, MultiSelectGroup, Radio, RadioGroup, index$1 as SegmentedControl, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
|
|
4685
|
-
//# sourceMappingURL=index.modern.js.map
|