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