@react-spectrum/s2 3.0.0-nightly-e228ed814-250129 → 3.0.0-nightly-016590a4a-250131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion.cjs +3 -3
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +3 -3
- package/dist/ActionBar.cjs +47 -47
- package/dist/ActionBar.css +51 -51
- package/dist/ActionBar.mjs +47 -47
- package/dist/ActionButton.cjs +97 -97
- package/dist/ActionButton.css +96 -96
- package/dist/ActionButton.mjs +97 -97
- package/dist/ActionButtonGroup.cjs +11 -11
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +11 -11
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Avatar.cjs +17 -17
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +17 -17
- package/dist/AvatarGroup.cjs +100 -100
- package/dist/AvatarGroup.css +34 -34
- package/dist/AvatarGroup.mjs +100 -100
- package/dist/Badge.cjs +92 -67
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +168 -92
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +92 -67
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +115 -115
- package/dist/Breadcrumbs.css +89 -89
- package/dist/Breadcrumbs.mjs +115 -115
- package/dist/Button.cjs +236 -152
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +309 -165
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +236 -152
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +19 -19
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +19 -19
- package/dist/Card.cjs +264 -261
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +210 -198
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +264 -261
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +15 -15
- package/dist/CardView.css +18 -18
- package/dist/CardView.mjs +15 -15
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +124 -73
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +201 -81
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +124 -73
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +49 -49
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +49 -49
- package/dist/ClearButton.cjs +15 -15
- package/dist/ClearButton.css +17 -17
- package/dist/ClearButton.mjs +15 -15
- package/dist/CloseButton.cjs +35 -35
- package/dist/CloseButton.css +33 -33
- package/dist/CloseButton.mjs +35 -35
- package/dist/ColorArea.cjs +22 -22
- package/dist/ColorArea.css +15 -15
- package/dist/ColorArea.mjs +22 -22
- package/dist/ColorField.cjs +38 -38
- package/dist/ColorField.css +32 -32
- package/dist/ColorField.mjs +38 -38
- package/dist/ColorHandle.cjs +27 -21
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +93 -45
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +27 -21
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +52 -52
- package/dist/ColorSlider.css +51 -51
- package/dist/ColorSlider.mjs +52 -52
- package/dist/ColorSwatch.cjs +27 -24
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +41 -29
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +27 -24
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +60 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +23 -23
- package/dist/ColorWheel.cjs +22 -22
- package/dist/ColorWheel.css +16 -16
- package/dist/ColorWheel.mjs +22 -22
- package/dist/ComboBox.cjs +80 -80
- package/dist/ComboBox.css +88 -88
- package/dist/ComboBox.mjs +80 -80
- package/dist/Content.cjs.map +1 -1
- package/dist/Content.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +38 -38
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +31 -31
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +31 -31
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +64 -64
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +111 -108
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +124 -112
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +111 -108
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +26 -26
- package/dist/Divider.css +16 -16
- package/dist/Divider.mjs +26 -26
- package/dist/DropZone.cjs +56 -47
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +80 -56
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +56 -47
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +204 -150
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +246 -150
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +204 -150
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +10 -10
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +10 -10
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +72 -72
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +134 -134
- package/dist/IllustratedMessage.css +69 -69
- package/dist/IllustratedMessage.mjs +134 -134
- package/dist/Image.cjs +12 -12
- package/dist/Image.css +13 -13
- package/dist/Image.mjs +12 -12
- package/dist/InlineAlert.cjs +104 -77
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +149 -77
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +104 -77
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +31 -31
- package/dist/Link.css +30 -30
- package/dist/Link.mjs +31 -31
- package/dist/Menu.cjs +269 -264
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +152 -152
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +270 -265
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +85 -85
- package/dist/Meter.css +81 -81
- package/dist/Meter.mjs +85 -85
- package/dist/Modal.cjs +48 -48
- package/dist/Modal.css +46 -46
- package/dist/Modal.mjs +48 -48
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +114 -114
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +193 -175
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +223 -163
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +193 -175
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +84 -78
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +89 -65
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +84 -78
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +98 -98
- package/dist/ProgressBar.css +92 -92
- package/dist/ProgressBar.mjs +98 -98
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +15 -15
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +152 -80
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +240 -96
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +152 -80
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +47 -47
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +47 -47
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +47 -47
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +101 -89
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +140 -92
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +101 -89
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +229 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +221 -149
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +229 -196
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +56 -56
- package/dist/StatusLight.css +59 -59
- package/dist/StatusLight.mjs +56 -56
- package/dist/Switch.cjs +107 -74
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +141 -69
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +107 -74
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +280 -253
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +199 -163
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +280 -253
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +493 -197
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +250 -134
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +494 -198
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +415 -0
- package/dist/TabsPicker.cjs.map +1 -0
- package/dist/TabsPicker.css +482 -0
- package/dist/TabsPicker.css.map +1 -0
- package/dist/TabsPicker.mjs +409 -0
- package/dist/TabsPicker.mjs.map +1 -0
- package/dist/TagGroup.cjs +148 -148
- package/dist/TagGroup.css +134 -134
- package/dist/TagGroup.mjs +148 -148
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +62 -62
- package/dist/TextField.mjs +59 -59
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +60 -57
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +83 -71
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +60 -57
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +465 -0
- package/dist/TreeView.cjs.map +1 -0
- package/dist/TreeView.css +632 -0
- package/dist/TreeView.css.map +1 -0
- package/dist/TreeView.mjs +455 -0
- package/dist/TreeView.mjs.map +1 -0
- package/dist/main.cjs +4 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +33 -8
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +21 -19
- package/src/Badge.tsx +4 -1
- package/src/Content.tsx +2 -1
- package/src/Menu.tsx +2 -0
- package/src/Tabs.tsx +450 -144
- package/src/TabsPicker.tsx +350 -0
- package/src/TreeView.tsx +497 -0
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +20 -10
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +20 -10
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +4 -0
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +18 -11
|
@@ -0,0 +1,482 @@
|
|
|
1
|
+
@layer _.a {
|
|
2
|
+
._Pb {
|
|
3
|
+
outline-style: solid;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.cx {
|
|
7
|
+
outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
._Rc {
|
|
11
|
+
outline-width: 2px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
._Q-3t1z {
|
|
15
|
+
outline-offset: 2px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.__e-g2ozi1 {
|
|
19
|
+
grid-column-start: input;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.__f-g2ozi1 {
|
|
23
|
+
grid-column-end: input;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.__g-g2ozi1 {
|
|
27
|
+
grid-row-start: input;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.__h-g2ozi1 {
|
|
31
|
+
grid-row-end: input;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.pf {
|
|
35
|
+
min-width: calc(2rem * var(--s2-scale));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.pg {
|
|
39
|
+
min-width: calc(1.25rem * var(--s2-scale));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ph {
|
|
43
|
+
min-width: calc(1.5rem * var(--s2-scale));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.pi {
|
|
47
|
+
min-width: calc(2.5rem * var(--s2-scale));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.pj {
|
|
51
|
+
min-width: calc(3rem * var(--s2-scale));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.__qa {
|
|
55
|
+
contain: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.-usygro_k-___K {
|
|
59
|
+
--defaultWidth: calc(13rem * var(--s2-scale));
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.-usygro_k-___u {
|
|
63
|
+
--defaultWidth: calc(12rem * var(--s2-scale));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.-usygro_k-___0 {
|
|
67
|
+
--defaultWidth: calc(14rem * var(--s2-scale));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.-usygro_k-____g {
|
|
71
|
+
--defaultWidth: calc(15rem * var(--s2-scale));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.l-rwozxi {
|
|
75
|
+
contain-intrinsic-width: calc(var(--defaultWidth) - var(--F, 0px) - var(--G, 0px) - var(--r, 0px) - var(--s, 0px));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.Yc {
|
|
79
|
+
position: relative;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
._ib {
|
|
83
|
+
font-variation-settings: "wght" 400;
|
|
84
|
+
font-synthesis-weight: none;
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
._ja {
|
|
89
|
+
line-height: 1.3;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.an {
|
|
93
|
+
color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ao {
|
|
97
|
+
color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.aj {
|
|
101
|
+
color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
._na {
|
|
105
|
+
text-align: start;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
._zb {
|
|
109
|
+
border-start-start-radius: .25rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
._Ab {
|
|
113
|
+
border-start-end-radius: .25rem;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
._Bb {
|
|
117
|
+
border-end-start-radius: .25rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
._Cb {
|
|
121
|
+
border-end-end-radius: .25rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
._Sa {
|
|
125
|
+
transition-property: color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
._U-375x7f {
|
|
129
|
+
transition-duration: .15s;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.iG {
|
|
133
|
+
column-gap: .428571em;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.F-375tnp {
|
|
137
|
+
padding-inline-start: var(--F);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.G-375tnq {
|
|
141
|
+
padding-inline-end: var(--G);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.ba {
|
|
145
|
+
background-color: #0000;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.qd {
|
|
149
|
+
max-width: max-content;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.__V-yksgrp {
|
|
153
|
+
-webkit-tap-highlight-color: #0000;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.j_a {
|
|
157
|
+
height: calc(3rem * var(--s2-scale));
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.jU {
|
|
161
|
+
height: calc(2rem * var(--s2-scale));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.-_375tnp_F-a {
|
|
165
|
+
--F: 0rem;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.-_375tnq_G-a {
|
|
169
|
+
--G: 0rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
._Pa {
|
|
173
|
+
outline-style: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
._3f {
|
|
177
|
+
display: grid;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.__l-n6rb9a {
|
|
181
|
+
grid-template-columns: .75rem auto auto minmax(0, 1fr) auto auto auto .75rem;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.__ra {
|
|
185
|
+
box-sizing: border-box;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.o-17zqamw {
|
|
189
|
+
max-height: inherit;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.__za {
|
|
193
|
+
overflow-x: auto;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.__Aa {
|
|
197
|
+
overflow-y: auto;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.Hd {
|
|
201
|
+
padding-top: .5rem;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.Id {
|
|
205
|
+
padding-bottom: .5rem;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.Fd {
|
|
209
|
+
padding-inline-start: .5rem;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.Gd {
|
|
213
|
+
padding-inline-end: .5rem;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
._ga {
|
|
217
|
+
font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
._he {
|
|
221
|
+
font-size: .875rem;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
._ha {
|
|
225
|
+
font-size: .6875rem;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
._hc {
|
|
229
|
+
font-size: .75rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
._hg {
|
|
233
|
+
font-size: 1rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
._hi {
|
|
237
|
+
font-size: 1.125rem;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.__d-3t1x {
|
|
241
|
+
flex-grow: 0;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
._5c {
|
|
245
|
+
align-items: center;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.jb {
|
|
249
|
+
height: 100%;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.__c-3t1x {
|
|
253
|
+
flex-shrink: 0;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.U-3hn0u {
|
|
257
|
+
rotate: 90deg;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.-rwx0fg_d-b {
|
|
261
|
+
--iconPrimary: currentColor;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
._3d {
|
|
265
|
+
display: flex;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.__e-qb5q8i {
|
|
269
|
+
grid-column-start: icon;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.__f-qb5q8i {
|
|
273
|
+
grid-column-end: icon;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.__g-qb5q8i {
|
|
277
|
+
grid-row-start: icon;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.__h-qb5q8i {
|
|
281
|
+
grid-row-end: icon;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.F-ve8p9e {
|
|
285
|
+
padding-inline-start: calc(.375rem * var(--s2-scale));
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.-u6zm92 > * {
|
|
289
|
+
display: none;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
._3a {
|
|
293
|
+
display: block;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
._3j {
|
|
297
|
+
display: none;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.__d-3t1y {
|
|
301
|
+
flex-grow: 1;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.__zb {
|
|
305
|
+
overflow-x: hidden;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.__Ab {
|
|
309
|
+
overflow-y: hidden;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
._qa {
|
|
313
|
+
text-overflow: ellipsis;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
._tb {
|
|
317
|
+
white-space: nowrap;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.B-375tnl {
|
|
321
|
+
margin-inline-start: var(--B);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.p___u {
|
|
325
|
+
min-width: calc(12rem * var(--s2-scale));
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.k-13f72lm {
|
|
329
|
+
width: calc(var(--trigger-width) + (-2 * var(--B)));
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.-_375tnl_B-M {
|
|
333
|
+
--B: -.75rem;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.bn {
|
|
337
|
+
background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.bo {
|
|
341
|
+
background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.bg {
|
|
345
|
+
background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.j-375zlr {
|
|
349
|
+
height: 2px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.zf {
|
|
353
|
+
border-style: none;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
._zf {
|
|
357
|
+
border-start-start-radius: 9999px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
._Af {
|
|
361
|
+
border-start-end-radius: 9999px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
._Bf {
|
|
365
|
+
border-end-start-radius: 9999px;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
._Cf {
|
|
369
|
+
border-end-end-radius: 9999px;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.D-yj8a3w {
|
|
373
|
+
margin-top: -2px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
._U-375x5l {
|
|
377
|
+
transition-duration: .13s;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
._Va {
|
|
381
|
+
transition-timing-function: cubic-bezier(.45, 0, .4, 1);
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
@layer _.b {
|
|
386
|
+
._j-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
|
|
387
|
+
line-height: 1.5;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
._g-enzrfpb:lang(ar) {
|
|
391
|
+
font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
@layer _.c {
|
|
396
|
+
._g-enzwzjc:lang(he) {
|
|
397
|
+
font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
@layer _.d {
|
|
402
|
+
._g-enzykdd:lang(ja) {
|
|
403
|
+
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
@layer _.e {
|
|
408
|
+
._g-enzzrge:lang(ko) {
|
|
409
|
+
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@layer _.f {
|
|
414
|
+
._g-eo0c6sf:lang(zh) {
|
|
415
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
@layer _.g {
|
|
420
|
+
._g-1uotwbwg:lang(zh-hant) {
|
|
421
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
@layer _.h {
|
|
426
|
+
._g-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
|
|
427
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
@layer _.b.a {
|
|
432
|
+
@media (forced-colors: active) {
|
|
433
|
+
.ca_____M {
|
|
434
|
+
outline-color: highlight;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.ba_____M {
|
|
438
|
+
background-color: highlight;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.ba_____O {
|
|
442
|
+
background-color: graytext;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
@layer _.b.-_1s8glxu {
|
|
448
|
+
@supports (contain-intrinsic-width: 1px) {
|
|
449
|
+
.__q-1s8glxue {
|
|
450
|
+
contain: inline-size;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
@layer _.b.b {
|
|
456
|
+
@media not ((hover: hover) and (pointer: fine)) {
|
|
457
|
+
.ibH {
|
|
458
|
+
column-gap: .470588em;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
._hbf {
|
|
462
|
+
font-size: 1.0625rem;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
._hbb {
|
|
466
|
+
font-size: .8125rem;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
._hbd {
|
|
470
|
+
font-size: .9375rem;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
._hbh {
|
|
474
|
+
font-size: 1.1875rem;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
._hbj {
|
|
478
|
+
font-size: 1.375rem;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
/*# sourceMappingURL=TabsPicker.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AC0FoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAQO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDgC;;;;EAkBpB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BhB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjMN;EAAA;;;;EAkCF;;;;;AAlCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAiMM;;;;IAAA;;;;;;AAjMN;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAkCF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["abc7c61fd7ad618f","packages/@react-spectrum/s2/src/TabsPicker.tsx"],"sourcesContent":["@import \"b8fdcb8ccc776f53\";\n@import \"dcd883b3c8357572\";\n@import \"d5ec52da6ab778b1\";\n@import \"081608ef106e269e\";\n@import \"adbdb624431721fa\";\n@import \"03bd912125a89e81\";\n@import \"9581efae4a323524\";\n@import \"809cfbcd16a993af\";\n@import \"01c6d08aaf920097\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n Button,\n ContextValue,\n DEFAULT_SLOT,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SelectValue\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n icon,\n label,\n menuitem,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldLabel\n} from './Field';\nimport {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {\n}\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number,\n /** Density of the tabs, affects the height of the picker. */\n density: 'compact' | 'regular',\n /**\n * If the tab picker should only display icon and no text for the button label.\n * @default 'show\n */\n labelBehavior?: 'show' | 'hide',\n /** Id for the SelectedValue so we can label using it. */\n valueId?: string\n}\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\nconst inputButton = style({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n position: 'relative',\n font: 'ui',\n display: 'flex',\n textAlign: 'start',\n borderStyle: 'none',\n borderRadius: 'sm',\n alignItems: 'center',\n transition: 'default',\n columnGap: 'text-to-visual',\n paddingX: 0,\n backgroundColor: 'transparent',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true,\n height: {\n default: 48,\n density: {\n compact: 32\n }\n },\n boxSizing: 'border-box'\n});\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\nconst valueStyles = style({\n flexGrow: 0,\n truncate: true,\n display: 'flex',\n alignItems: 'center',\n height: 'full'\n});\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\nconst iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon',\n paddingStart: {\n labelBehavior: {\n hide: size(6)\n }\n }\n});\nlet InsideSelectValueContext = createContext(false);\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n children,\n items,\n density,\n labelBehavior = 'show',\n valueId,\n ...pickerProps\n } = props;\n let isQuiet = true;\n const menuOffset: number = 6;\n const size = 'M';\n let ariaLabelledby = props['aria-labelledby'] ?? '';\n return (\n <div>\n <AriaSelect\n {...pickerProps}\n aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>\n {({isOpen}) => (\n <>\n <FieldLabel isQuiet={isQuiet} />\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: 'M',\n isOpen,\n isQuiet,\n density\n })}>\n <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n // Default slot is useful when converting other collections to PickerItems.\n [DEFAULT_SLOT]: {\n id: valueId,\n styles: style({\n display: {\n default: 'block',\n labelBehavior: {\n hide: 'none'\n }\n },\n flexGrow: 1,\n truncate: true\n })({labelBehavior})\n }\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n styles={style({\n marginStart: -12,\n minWidth: 192,\n width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </>\n )}\n </AriaSelect>\n <TabLine isDisabled={props.isDisabled} />\n </div>\n );\n}\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\n\nconst selectedIndicator = style({\n backgroundColor: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n height: '[2px]',\n borderStyle: 'none',\n borderRadius: 'full',\n marginTop: '[-2px]',\n transitionDuration: 130,\n transitionTimingFunction: 'in-out'\n});\nfunction TabLine(props) {\n return <div className={selectedIndicator(props)} />;\n}\n\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n const size = 'M';\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n"],"names":[],"version":3,"file":"TabsPicker.css.map"}
|