@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.
Files changed (63) hide show
  1. package/dist/_lib/compat.d.ts +13 -13
  2. package/dist/_lib/index.d.ts +25 -25
  3. package/dist/components/Button/index.d.ts +21 -21
  4. package/dist/components/Button/index.story.d.ts +35 -35
  5. package/dist/components/Checkbox/index.d.ts +20 -20
  6. package/dist/components/Checkbox/index.story.d.ts +15 -15
  7. package/dist/components/Clickable/index.d.ts +18 -18
  8. package/dist/components/Clickable/index.story.d.ts +8 -8
  9. package/dist/components/DropdownSelector/Listbox.d.ts +9 -9
  10. package/dist/components/DropdownSelector/Popover.d.ts +9 -9
  11. package/dist/components/DropdownSelector/index.d.ts +31 -31
  12. package/dist/components/DropdownSelector/index.story.d.ts +21 -21
  13. package/dist/components/FieldLabel/index.d.ts +10 -10
  14. package/dist/components/Icon/index.d.ts +11 -11
  15. package/dist/components/Icon/index.story.d.ts +23 -23
  16. package/dist/components/IconButton/index.d.ts +13 -13
  17. package/dist/components/IconButton/index.story.d.ts +28 -28
  18. package/dist/components/LoadingSpinner/index.d.ts +14 -14
  19. package/dist/components/LoadingSpinner/index.story.d.ts +9 -9
  20. package/dist/components/Modal/ModalPlumbing.d.ts +4 -4
  21. package/dist/components/Modal/index.d.ts +41 -17
  22. package/dist/components/Modal/index.d.ts.map +1 -1
  23. package/dist/components/Modal/index.story.d.ts +32 -32
  24. package/dist/components/MultiSelect/context.d.ts +13 -13
  25. package/dist/components/MultiSelect/index.d.ts +23 -23
  26. package/dist/components/MultiSelect/index.story.d.ts +74 -74
  27. package/dist/components/MultiSelect/index.test.d.ts +1 -1
  28. package/dist/components/Radio/index.d.ts +23 -23
  29. package/dist/components/Radio/index.story.d.ts +33 -33
  30. package/dist/components/Radio/index.test.d.ts +1 -1
  31. package/dist/components/SegmentedControl/RadioGroupContext.d.ts +8 -8
  32. package/dist/components/SegmentedControl/index.d.ts +19 -19
  33. package/dist/components/SegmentedControl/index.story.d.ts +10 -10
  34. package/dist/components/Switch/index.d.ts +15 -15
  35. package/dist/components/Switch/index.story.d.ts +13 -13
  36. package/dist/components/TagItem/index.d.ts +25 -0
  37. package/dist/components/TagItem/index.d.ts.map +1 -0
  38. package/dist/components/TagItem/index.story.d.ts +26 -0
  39. package/dist/components/TagItem/index.story.d.ts.map +1 -0
  40. package/dist/components/TextField/index.d.ts +43 -43
  41. package/dist/components/TextField/index.story.d.ts +29 -29
  42. package/dist/components/a11y.test.d.ts +1 -1
  43. package/dist/core/ComponentAbstraction.d.ts +23 -23
  44. package/dist/core/OverlayProvider.d.ts +2 -0
  45. package/dist/core/OverlayProvider.d.ts.map +1 -0
  46. package/dist/core/SSRProvider.d.ts +1 -1
  47. package/dist/index.cjs +3333 -3297
  48. package/dist/index.cjs.map +1 -1
  49. package/dist/index.d.ts +18 -16
  50. package/dist/index.d.ts.map +1 -1
  51. package/dist/index.js +4401 -0
  52. package/dist/index.js.map +1 -0
  53. package/dist/styled.d.ts +92 -92
  54. package/package.json +16 -14
  55. package/src/components/Modal/index.tsx +24 -0
  56. package/src/components/TagItem/index.story.tsx +188 -0
  57. package/src/components/TagItem/index.tsx +176 -0
  58. package/src/core/OverlayProvider.tsx +1 -0
  59. package/src/index.ts +2 -0
  60. package/dist/index.modern.js +0 -4685
  61. package/dist/index.modern.js.map +0 -1
  62. package/dist/index.module.js +0 -4371
  63. package/dist/index.module.js.map +0 -1
@@ -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