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