@react-spectrum/s2 0.10.1 → 0.11.1
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/ComboBox.cjs +19 -4
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +19 -4
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/DatePicker.cjs +2 -5
- package/dist/DatePicker.cjs.map +1 -1
- package/dist/DatePicker.css.map +1 -1
- package/dist/DatePicker.mjs +2 -5
- package/dist/DatePicker.mjs.map +1 -1
- package/dist/DateRangePicker.cjs +2 -5
- package/dist/DateRangePicker.cjs.map +1 -1
- package/dist/DateRangePicker.css.map +1 -1
- package/dist/DateRangePicker.mjs +2 -5
- package/dist/DateRangePicker.mjs.map +1 -1
- package/dist/SelectBoxGroup.cjs +342 -0
- package/dist/SelectBoxGroup.cjs.map +1 -0
- package/dist/SelectBoxGroup.css +503 -0
- package/dist/SelectBoxGroup.css.map +1 -0
- package/dist/SelectBoxGroup.mjs +335 -0
- package/dist/SelectBoxGroup.mjs.map +1 -0
- package/dist/SkeletonCollection.cjs +6 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +7 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/Tabs.cjs +102 -77
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +8 -4
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +102 -77
- package/dist/Tabs.mjs.map +1 -1
- package/dist/main.cjs +5 -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 +43 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/ComboBox.tsx +20 -5
- package/src/DatePicker.tsx +1 -7
- package/src/DateRangePicker.tsx +1 -7
- package/src/SelectBoxGroup.tsx +408 -0
- package/src/SkeletonCollection.tsx +6 -2
- package/src/Tabs.tsx +49 -24
- package/src/index.ts +2 -0
- package/style/dist/main.cjs +24 -24
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +219 -219
- package/style/dist/spectrum-theme.mjs +210 -210
- package/style/dist/style-macro.cjs +80 -80
- package/style/dist/style-macro.mjs +75 -75
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
require("./SelectBoxGroup.css");
|
|
2
|
+
var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
|
|
3
|
+
var $dba2b18fc5727f9b$exports = require("./Checkmark.cjs");
|
|
4
|
+
var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
|
|
5
|
+
var $2061c83559b50a66$exports = require("./pressScale.cjs");
|
|
6
|
+
var $6367bc87eb7d24ad$exports = require("./Content.cjs");
|
|
7
|
+
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
8
|
+
var $gGDF1$reactjsxruntime = require("react/jsx-runtime");
|
|
9
|
+
var $gGDF1$reactariacomponents = require("react-aria-components");
|
|
10
|
+
var $gGDF1$react = require("react");
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
function $parcel$export(e, n, v, s) {
|
|
14
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
$parcel$export(module.exports, "SelectBoxGroupContext", () => $6a3953abb7deb063$export$cad91f7528e8dc08);
|
|
18
|
+
$parcel$export(module.exports, "SelectBox", () => $6a3953abb7deb063$export$ebde6d4e7862fe9d);
|
|
19
|
+
$parcel$export(module.exports, "SelectBoxGroup", () => $6a3953abb7deb063$export$da87cf13fc2ef3d8);
|
|
20
|
+
/*
|
|
21
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
22
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
23
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
24
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
25
|
+
*
|
|
26
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
27
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language
|
|
28
|
+
* governing permissions and limitations under the License.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
const $6a3953abb7deb063$var$SelectBoxContext = /*#__PURE__*/ (0, $gGDF1$react.createContext)({
|
|
39
|
+
orientation: 'vertical'
|
|
40
|
+
});
|
|
41
|
+
const $6a3953abb7deb063$export$cad91f7528e8dc08 = /*#__PURE__*/ (0, $gGDF1$react.createContext)(null);
|
|
42
|
+
const $6a3953abb7deb063$var$labelOnly = ':has([slot=label]):not(:has([slot=description]))';
|
|
43
|
+
const $6a3953abb7deb063$var$noIllustration = ':not(:has([slot=illustration]))';
|
|
44
|
+
const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, overrides) {
|
|
45
|
+
let rules = " ";
|
|
46
|
+
let position = false;
|
|
47
|
+
let width = false;
|
|
48
|
+
let minWidth = false;
|
|
49
|
+
let maxWidth = false;
|
|
50
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
|
|
51
|
+
for (let p of matches){
|
|
52
|
+
if (p[1] === "_P") position = true;
|
|
53
|
+
if (p[1] === "Z") width = true;
|
|
54
|
+
if (p[1] === "N") minWidth = true;
|
|
55
|
+
if (p[1] === "L") maxWidth = true;
|
|
56
|
+
rules += p[0];
|
|
57
|
+
}
|
|
58
|
+
if (props.isFocusVisible) rules += ' _Lf11';
|
|
59
|
+
else rules += ' _Le11';
|
|
60
|
+
rules += ' Oh11';
|
|
61
|
+
rules += ' _Mc11';
|
|
62
|
+
rules += ' _Kd11';
|
|
63
|
+
rules += ' se11';
|
|
64
|
+
rules += ' __yM8Mfn11';
|
|
65
|
+
if (!position) rules += ' _Pc11';
|
|
66
|
+
rules += ' uk11';
|
|
67
|
+
rules += ' uch11';
|
|
68
|
+
rules += ' udi11';
|
|
69
|
+
rules += ' uea11';
|
|
70
|
+
rules += ' ugb11';
|
|
71
|
+
rules += ' uhd11';
|
|
72
|
+
rules += ' uje11';
|
|
73
|
+
rules += ' u2NhKxcl11';
|
|
74
|
+
rules += ' uic11';
|
|
75
|
+
rules += ' -_6BNtrc-c11';
|
|
76
|
+
rules += ' vx11';
|
|
77
|
+
rules += ' wb11';
|
|
78
|
+
rules += ' xb11';
|
|
79
|
+
rules += ' _xa11';
|
|
80
|
+
rules += ' _Fd11';
|
|
81
|
+
rules += ' _FezxGHba11';
|
|
82
|
+
rules += ' _FnuYUweb11';
|
|
83
|
+
if (props.isDisabled) rules += ' pp11';
|
|
84
|
+
rules += ' ri11';
|
|
85
|
+
rules += ' _oa11';
|
|
86
|
+
rules += ' _Nc11';
|
|
87
|
+
rules += ' Pc11';
|
|
88
|
+
if (props.orientation === "horizontal") {
|
|
89
|
+
if (!width) rules += ' ZAK24ue11';
|
|
90
|
+
} else if (!width) rules += ' Z75oWv11';
|
|
91
|
+
if (props.orientation === "horizontal") rules += ' Fd11';
|
|
92
|
+
else rules += ' F75oWv11';
|
|
93
|
+
if (props.orientation === "horizontal") {
|
|
94
|
+
if (!minWidth) rules += ' NBzUiud11';
|
|
95
|
+
} else if (!minWidth) rules += ' NQGV3L11';
|
|
96
|
+
if (props.orientation === "horizontal") {
|
|
97
|
+
if (!maxWidth) rules += ' LILqIYb11';
|
|
98
|
+
} else if (!maxWidth) rules += ' L75oWv11';
|
|
99
|
+
if (props.orientation === "horizontal") rules += ' MKniM11';
|
|
100
|
+
else rules += ' MQGV3L11';
|
|
101
|
+
if (props.orientation === "horizontal") rules += ' KDvO7ld11';
|
|
102
|
+
else rules += ' K75oWv11';
|
|
103
|
+
if (props.orientation === "horizontal") rules += ' Tf11';
|
|
104
|
+
else rules += ' Th11';
|
|
105
|
+
if (props.orientation === "horizontal") rules += ' Qf11';
|
|
106
|
+
else rules += ' Qh11';
|
|
107
|
+
if (props.orientation === "horizontal") rules += ' Sk11';
|
|
108
|
+
if (props.orientation === "horizontal") rules += ' Rh11';
|
|
109
|
+
if (props.orientation === "horizontal") {
|
|
110
|
+
rules += ' CtXiS9b11';
|
|
111
|
+
rules += ' CbWiMddxbX3ib11';
|
|
112
|
+
} else if (props.orientation === "vertical") rules += ' CfwsTtd11';
|
|
113
|
+
if (props.orientation === "horizontal") {
|
|
114
|
+
rules += ' EtYIsBb11';
|
|
115
|
+
rules += ' E1099pdfYMhHd11';
|
|
116
|
+
} else if (props.orientation === "vertical") rules += ' EOwqVhc11';
|
|
117
|
+
if (props.orientation === "horizontal") rules += ' DJSAqje11';
|
|
118
|
+
if (props.orientation === "vertical") rules += ' _cb11';
|
|
119
|
+
rules += ' oc11';
|
|
120
|
+
rules += ' nc11';
|
|
121
|
+
rules += ' kc11';
|
|
122
|
+
rules += ' jc11';
|
|
123
|
+
rules += ' _jf11';
|
|
124
|
+
if (props.isDisabled) rules += ' iA11';
|
|
125
|
+
else if (props.isSelected) rules += ' in11';
|
|
126
|
+
else rules += ' iA11';
|
|
127
|
+
if (props.isDisabled) rules += ' gH11';
|
|
128
|
+
else rules += ' g_g11';
|
|
129
|
+
if (props.isDisabled) rules += ' _nd11';
|
|
130
|
+
else if (props.isSelected) rules += ' _nb11';
|
|
131
|
+
else if (props.isHovered) rules += ' _nb11';
|
|
132
|
+
else rules += ' _na11';
|
|
133
|
+
rules += ' _kc11';
|
|
134
|
+
rules += ' hc11';
|
|
135
|
+
rules += ' mc11';
|
|
136
|
+
rules += ' lc11';
|
|
137
|
+
rules += ' Yd11';
|
|
138
|
+
rules += ' Xb11';
|
|
139
|
+
rules += ' _2b11';
|
|
140
|
+
return rules;
|
|
141
|
+
};
|
|
142
|
+
const $6a3953abb7deb063$var$illustrationContainer = function anonymous(props) {
|
|
143
|
+
let rules = " ";
|
|
144
|
+
rules += ' zTZ8xtd11';
|
|
145
|
+
rules += ' yTZ8xtd11';
|
|
146
|
+
rules += ' BTZ8xtd11';
|
|
147
|
+
rules += ' ATZ8xtd11';
|
|
148
|
+
rules += ' _dc11';
|
|
149
|
+
rules += ' __Ab11';
|
|
150
|
+
rules += ' Nl11';
|
|
151
|
+
rules += ' Mk11';
|
|
152
|
+
if (props.isDisabled) rules += ' -_8sjo0b-pp11';
|
|
153
|
+
else {
|
|
154
|
+
if (props.isPressed) rules += ' -_8sjo0b-po11';
|
|
155
|
+
else if (props.isFocusVisible) rules += ' -_8sjo0b-po11';
|
|
156
|
+
else if (props.isHovered) rules += ' -_8sjo0b-po11';
|
|
157
|
+
else rules += ' -_8sjo0b-pt11';
|
|
158
|
+
}
|
|
159
|
+
return rules;
|
|
160
|
+
};
|
|
161
|
+
const $6a3953abb7deb063$var$descriptionText = function anonymous(props) {
|
|
162
|
+
let rules = " ";
|
|
163
|
+
rules += ' z9u7zPc11';
|
|
164
|
+
rules += ' y9u7zPc11';
|
|
165
|
+
rules += ' B9u7zPc11';
|
|
166
|
+
rules += ' A9u7zPc11';
|
|
167
|
+
rules += ' _dc11';
|
|
168
|
+
if (props.orientation === "vertical") rules += ' sk11';
|
|
169
|
+
else rules += ' sb11';
|
|
170
|
+
rules += ' _Nc11';
|
|
171
|
+
rules += ' Pc11';
|
|
172
|
+
if (props.orientation === "horizontal") rules += ' _Wd11';
|
|
173
|
+
else rules += ' _Wa11';
|
|
174
|
+
if (props.isDisabled) rules += ' pp11';
|
|
175
|
+
else {
|
|
176
|
+
if (props.isPressed) rules += ' po11';
|
|
177
|
+
else if (props.isFocusVisible) rules += ' po11';
|
|
178
|
+
else if (props.isHovered) rules += ' po11';
|
|
179
|
+
else rules += ' pt11';
|
|
180
|
+
}
|
|
181
|
+
return rules;
|
|
182
|
+
};
|
|
183
|
+
const $6a3953abb7deb063$var$labelText = function anonymous(props) {
|
|
184
|
+
let rules = " ";
|
|
185
|
+
rules += ' zv6x9r11';
|
|
186
|
+
rules += ' yv6x9r11';
|
|
187
|
+
rules += ' Bv6x9r11';
|
|
188
|
+
rules += ' Av6x9r11';
|
|
189
|
+
rules += ' _dc11';
|
|
190
|
+
if (props.orientation === "horizontal") rules += ' __Ad11';
|
|
191
|
+
else rules += ' __Ab11';
|
|
192
|
+
rules += ' Za11';
|
|
193
|
+
rules += ' _Nc11';
|
|
194
|
+
rules += ' Pc11';
|
|
195
|
+
rules += ' Na11';
|
|
196
|
+
if (props.orientation === "horizontal") rules += ' _Wd11';
|
|
197
|
+
else rules += ' _Wa11';
|
|
198
|
+
rules += ' _7c11';
|
|
199
|
+
rules += ' _Yb11';
|
|
200
|
+
if (props.orientation === "horizontal") {
|
|
201
|
+
rules += ' wd11';
|
|
202
|
+
rules += ' xd11';
|
|
203
|
+
rules += ' _xa11';
|
|
204
|
+
rules += ' wX0cczbc11';
|
|
205
|
+
rules += ' xX0cczbc11';
|
|
206
|
+
rules += ' _xX0cczba11';
|
|
207
|
+
}
|
|
208
|
+
if (props.isDisabled) rules += ' pp11';
|
|
209
|
+
else {
|
|
210
|
+
if (props.isPressed) rules += ' po11';
|
|
211
|
+
else if (props.isFocusVisible) rules += ' po11';
|
|
212
|
+
else if (props.isHovered) rules += ' po11';
|
|
213
|
+
else rules += ' pt11';
|
|
214
|
+
}
|
|
215
|
+
return rules;
|
|
216
|
+
};
|
|
217
|
+
const $6a3953abb7deb063$var$gridStyles = function anonymous(props, overrides) {
|
|
218
|
+
let rules = " ";
|
|
219
|
+
rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g) || []).join('');
|
|
220
|
+
rules += ' se11';
|
|
221
|
+
rules += ' __yM8Mfn11';
|
|
222
|
+
rules += ' Uj11';
|
|
223
|
+
rules += ' qj11';
|
|
224
|
+
rules += ' _Ca11';
|
|
225
|
+
if (props.orientation === "vertical") rules += ' -SFnbic-Z75oWv11';
|
|
226
|
+
else if (props.orientation === "horizontal") rules += ' -SFnbic-ZAK24ue11';
|
|
227
|
+
if (props.orientation === "vertical") rules += ' DbFoS411';
|
|
228
|
+
else if (props.orientation === "horizontal") rules += ' DbFoS411';
|
|
229
|
+
return rules;
|
|
230
|
+
};
|
|
231
|
+
function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
|
|
232
|
+
let { children: children, isDisabled: individualDisabled = false, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, styles: styles, ...otherProps } = props;
|
|
233
|
+
let { orientation: orientation = 'vertical', isDisabled: groupDisabled = false } = (0, $gGDF1$react.useContext)($6a3953abb7deb063$var$SelectBoxContext);
|
|
234
|
+
const isDisabled = individualDisabled || groupDisabled;
|
|
235
|
+
const ref = (0, $gGDF1$react.useRef)(null);
|
|
236
|
+
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBoxItem), {
|
|
237
|
+
isDisabled: isDisabled,
|
|
238
|
+
ref: ref,
|
|
239
|
+
className: (renderProps)=>(UNSAFE_className || '') + $6a3953abb7deb063$var$selectBoxStyles({
|
|
240
|
+
...renderProps,
|
|
241
|
+
orientation: orientation
|
|
242
|
+
}, styles),
|
|
243
|
+
style: (0, $2061c83559b50a66$exports.pressScale)(ref, UNSAFE_style),
|
|
244
|
+
...otherProps,
|
|
245
|
+
children: ({ isSelected: isSelected, isDisabled: isDisabled, isHovered: isHovered })=>{
|
|
246
|
+
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsxs)((0, $gGDF1$reactjsxruntime.Fragment), {
|
|
247
|
+
children: [
|
|
248
|
+
/*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
|
|
249
|
+
className: " _Pa11 WJ11 _AI11 _Ob11",
|
|
250
|
+
"aria-hidden": "true",
|
|
251
|
+
children: !isDisabled && /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
|
|
252
|
+
className: (0, $af04e099a53d3e85$exports.box)({
|
|
253
|
+
isSelected: isSelected,
|
|
254
|
+
isDisabled: isDisabled,
|
|
255
|
+
size: 'M'
|
|
256
|
+
}),
|
|
257
|
+
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $dba2b18fc5727f9b$exports.default), {
|
|
258
|
+
size: "S",
|
|
259
|
+
className: (0, $af04e099a53d3e85$exports.iconStyles)
|
|
260
|
+
})
|
|
261
|
+
})
|
|
262
|
+
}),
|
|
263
|
+
/*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.Provider), {
|
|
264
|
+
values: [
|
|
265
|
+
[
|
|
266
|
+
(0, $bde97c91243ed164$exports.IllustrationContext),
|
|
267
|
+
{
|
|
268
|
+
size: 'S',
|
|
269
|
+
styles: $6a3953abb7deb063$var$illustrationContainer({
|
|
270
|
+
size: 'S',
|
|
271
|
+
orientation: orientation,
|
|
272
|
+
isDisabled: isDisabled,
|
|
273
|
+
isHovered: isHovered
|
|
274
|
+
})
|
|
275
|
+
}
|
|
276
|
+
],
|
|
277
|
+
[
|
|
278
|
+
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
279
|
+
{
|
|
280
|
+
slots: {
|
|
281
|
+
[(0, $gGDF1$reactariacomponents.DEFAULT_SLOT)]: {
|
|
282
|
+
styles: $6a3953abb7deb063$var$labelText({
|
|
283
|
+
orientation: orientation,
|
|
284
|
+
isDisabled: isDisabled,
|
|
285
|
+
isHovered: isHovered
|
|
286
|
+
})
|
|
287
|
+
},
|
|
288
|
+
label: {
|
|
289
|
+
styles: $6a3953abb7deb063$var$labelText({
|
|
290
|
+
orientation: orientation,
|
|
291
|
+
isDisabled: isDisabled,
|
|
292
|
+
isHovered: isHovered
|
|
293
|
+
})
|
|
294
|
+
},
|
|
295
|
+
description: {
|
|
296
|
+
styles: $6a3953abb7deb063$var$descriptionText({
|
|
297
|
+
orientation: orientation,
|
|
298
|
+
isDisabled: isDisabled,
|
|
299
|
+
isHovered: isHovered
|
|
300
|
+
})
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
]
|
|
305
|
+
],
|
|
306
|
+
children: children
|
|
307
|
+
})
|
|
308
|
+
]
|
|
309
|
+
});
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
}
|
|
313
|
+
const $6a3953abb7deb063$export$da87cf13fc2ef3d8 = /*#__PURE__*/ (0, $gGDF1$react.forwardRef)(function SelectBoxGroup(props, ref) {
|
|
314
|
+
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6a3953abb7deb063$export$cad91f7528e8dc08);
|
|
315
|
+
let { children: children, selectionMode: selectionMode = 'single', orientation: orientation = 'vertical', isDisabled: isDisabled = false, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
|
|
316
|
+
const selectBoxContextValue = (0, $gGDF1$react.useMemo)(()=>{
|
|
317
|
+
const contextValue = {
|
|
318
|
+
orientation: orientation,
|
|
319
|
+
isDisabled: isDisabled
|
|
320
|
+
};
|
|
321
|
+
return contextValue;
|
|
322
|
+
}, [
|
|
323
|
+
orientation,
|
|
324
|
+
isDisabled
|
|
325
|
+
]);
|
|
326
|
+
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBox), {
|
|
327
|
+
selectionMode: selectionMode,
|
|
328
|
+
layout: "grid",
|
|
329
|
+
className: (UNSAFE_className || '') + $6a3953abb7deb063$var$gridStyles({
|
|
330
|
+
orientation: orientation
|
|
331
|
+
}, styles),
|
|
332
|
+
style: UNSAFE_style,
|
|
333
|
+
...otherProps,
|
|
334
|
+
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)($6a3953abb7deb063$var$SelectBoxContext.Provider, {
|
|
335
|
+
value: selectBoxContextValue,
|
|
336
|
+
children: children
|
|
337
|
+
})
|
|
338
|
+
});
|
|
339
|
+
});
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
//# sourceMappingURL=SelectBoxGroup.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SelectBoxGroup.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {box, iconStyles} from './Checkbox';\nimport Checkmark from '../ui-icons/Checkmark';\nimport {\n ContextValue,\n DEFAULT_SLOT,\n ListBox,\n ListBoxItem,\n ListBoxProps,\n Provider\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from '../src/Icon';\nimport {pressScale} from './pressScale';\nimport React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {TextContext} from './Content';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'shouldFocusWrap' | 'style' | 'className'> {\n /**\n * The SelectBox elements contained within the SelectBoxGroup.\n */\n children: ReactNode,\n /**\n * The layout direction of the content in each SelectBox.\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * The selection mode for the SelectBoxGroup.\n * @default 'single'\n */\n selectionMode?: 'single' | 'multiple',\n /**\n * Whether the SelectBoxGroup is disabled.\n */\n isDisabled?: boolean\n}\n\nexport interface SelectBoxProps extends StyleProps {\n /** The unique id of the SelectBox. */\n id?: Key,\n /** A string representation of the SelectBox's contents, used for features like typeahead. */\n textValue?: string,\n /** An accessibility label for this item. */\n 'aria-label'?: string,\n /**\n * The contents of the SelectBox.\n */\n children: ReactNode,\n /**\n * Whether the SelectBox is disabled.\n */\n isDisabled?: boolean\n}\n\ninterface SelectBoxContextValue {\n allowMultiSelect?: boolean,\n orientation?: Orientation,\n isDisabled?: boolean\n}\n\nconst SelectBoxContext = createContext<SelectBoxContextValue>({orientation: 'vertical'});\nexport const SelectBoxGroupContext = createContext<ContextValue<Partial<SelectBoxGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst labelOnly = ':has([slot=label]):not(:has([slot=description]))';\nconst noIllustration = ':not(:has([slot=illustration]))';\nconst selectBoxStyles = style({\n ...focusRing(),\n display: 'grid',\n gridAutoRows: '1fr',\n position: 'relative',\n font: 'ui',\n cursor: 'default',\n boxSizing: 'border-box',\n overflow: 'hidden',\n width: {\n default: 170,\n orientation: {\n horizontal: 368\n }\n },\n height: {\n default: 170,\n orientation: {\n horizontal: 'auto'\n }\n },\n minWidth: {\n default: 144,\n orientation: {\n horizontal: 188\n }\n },\n maxWidth: {\n default: 170,\n orientation: {\n horizontal: 480\n }\n },\n minHeight: {\n default: 144,\n orientation: {\n horizontal: 80\n }\n },\n maxHeight: {\n default: 170,\n orientation: {\n horizontal: 240\n }\n },\n padding: {\n default: 24,\n orientation: {\n horizontal: 16\n }\n },\n paddingStart: {\n orientation: {\n horizontal: 32\n }\n },\n paddingEnd: {\n orientation: {\n horizontal: 24\n }\n },\n gridTemplateAreas: {\n orientation: {\n vertical: [\n 'illustration',\n '.',\n 'label'\n ],\n horizontal: {\n default: [\n 'illustration . label',\n 'illustration . description'\n ],\n [labelOnly]: [\n 'illustration . label'\n ]\n }\n }\n },\n gridTemplateRows: {\n orientation: {\n vertical: ['min-content', 8, 'min-content'],\n horizontal: {\n default: ['min-content', 2, 'min-content'],\n [noIllustration]: ['min-content']\n }\n }\n },\n gridTemplateColumns: {\n orientation: {\n horizontal: 'min-content 10px 1fr'\n }\n },\n alignContent: {\n orientation: {\n vertical: 'center'\n }\n },\n borderRadius: 'lg',\n borderStyle: 'solid',\n borderColor: {\n default: 'transparent',\n isSelected: 'gray-900',\n isDisabled: 'transparent'\n },\n backgroundColor: {\n default: 'layer-2',\n isDisabled: 'disabled'\n },\n color: {\n isDisabled: 'disabled'\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isSelected: 'elevated',\n isDisabled: 'none'\n },\n borderWidth: 2,\n transition: 'default'\n}, getAllowedOverrides());\n\nconst illustrationContainer = style({\n gridArea: 'illustration',\n alignSelf: 'center',\n justifySelf: 'center',\n minSize: 48,\n '--iconPrimary': {\n type: 'color',\n value: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n }\n }\n});\n\nconst descriptionText = style({\n gridArea: 'description',\n alignSelf: 'center',\n display: {\n default: 'block',\n orientation: {\n vertical: 'none'\n }\n },\n overflow: 'hidden',\n textAlign: {\n default: 'center',\n orientation: {\n horizontal: 'start'\n }\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n }\n});\n\nconst labelText = style({\n gridArea: 'label',\n alignSelf: 'center',\n justifySelf: {\n default: 'center',\n orientation: {\n horizontal: 'start'\n }\n },\n width: '100%',\n overflow: 'hidden',\n minWidth: 0,\n textAlign: {\n default: 'center',\n orientation: {\n horizontal: 'start'\n }\n },\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n fontWeight: {\n orientation: {\n horizontal: 'bold'\n }\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n }\n});\n\nconst gridStyles = style<{orientation?: Orientation}>({\n display: 'grid',\n gridAutoRows: '1fr',\n gap: 24,\n justifyContent: 'center',\n '--size': {\n type: 'width',\n value: {\n orientation: {\n horizontal: 368,\n vertical: 170\n }\n }\n },\n gridTemplateColumns: {\n orientation: {\n horizontal: 'repeat(auto-fit, var(--size))',\n vertical: 'repeat(auto-fit, var(--size))'\n }\n }\n}, getAllowedOverrides());\n\n/**\n * SelectBox is a single selectable item in a SelectBoxGroup.\n */\nexport function SelectBox(props: SelectBoxProps): ReactNode {\n let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;\n \n let {\n orientation = 'vertical',\n isDisabled: groupDisabled = false\n } = useContext(SelectBoxContext);\n\n const isDisabled = individualDisabled || groupDisabled;\n const ref = useRef<HTMLDivElement>(null);\n\n return (\n <ListBoxItem\n isDisabled={isDisabled}\n ref={ref}\n className={renderProps => (UNSAFE_className || '') + selectBoxStyles({\n ...renderProps,\n orientation\n }, styles)}\n style={pressScale(ref, UNSAFE_style)}\n {...otherProps}>\n {({isSelected, isDisabled, isHovered}) => {\n return (\n <>\n <div \n className={style({\n position: 'absolute',\n top: 8,\n insetStart: 8,\n pointerEvents: 'none'\n })}\n aria-hidden=\"true\">\n {!isDisabled && (\n <div\n className={box({\n isSelected,\n isDisabled,\n size: 'M'\n } as any)}>\n <Checkmark \n size=\"S\" \n className={iconStyles} />\n </div>\n )}\n </div>\n <Provider\n values={[\n [IllustrationContext, {\n size: 'S',\n styles: illustrationContainer({size: 'S', orientation, isDisabled, isHovered})\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {\n styles: labelText({orientation, isDisabled, isHovered})\n },\n label: {\n styles: labelText({orientation, isDisabled, isHovered})\n },\n description: {\n styles: descriptionText({orientation, isDisabled, isHovered})\n }\n }\n }]\n ]}>\n {children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\n/*\n * SelectBoxGroup allows users to select one or more options from a list.\n */\nexport const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);\n\n let {\n children,\n selectionMode = 'single',\n orientation = 'vertical',\n isDisabled = false,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n ...otherProps\n } = props;\n\n const selectBoxContextValue = useMemo(\n () => {\n const contextValue = {\n orientation,\n isDisabled\n };\n return contextValue;\n },\n [orientation, isDisabled]\n );\n\n return (\n <ListBox\n selectionMode={selectionMode}\n layout=\"grid\"\n className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}\n style={UNSAFE_style}\n {...otherProps}>\n <SelectBoxContext.Provider value={selectBoxContextValue}>\n {children}\n </SelectBoxContext.Provider>\n </ListBox>\n );\n});\n"],"names":[],"version":3,"file":"SelectBoxGroup.cjs.map"}
|