@react-spectrum/s2 3.0.0-nightly-3bc78aeea-250821 → 3.0.0-nightly-341ae3f8a-250822
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/SelectBoxGroup.cjs +55 -68
- package/dist/SelectBoxGroup.cjs.map +1 -1
- package/dist/SelectBoxGroup.css +34 -46
- package/dist/SelectBoxGroup.css.map +1 -1
- package/dist/SelectBoxGroup.mjs +56 -69
- package/dist/SelectBoxGroup.mjs.map +1 -1
- package/dist/SkeletonCollection.cjs +1 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +2 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/types.d.ts +3 -31
- package/dist/types.d.ts.map +1 -1
- package/package.json +22 -22
- package/src/SelectBoxGroup.tsx +97 -135
- package/src/SkeletonCollection.tsx +2 -2
package/dist/SelectBoxGroup.cjs
CHANGED
|
@@ -2,12 +2,12 @@ require("./SelectBoxGroup.css");
|
|
|
2
2
|
var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
|
|
3
3
|
var $dba2b18fc5727f9b$exports = require("./Checkmark.cjs");
|
|
4
4
|
var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
|
|
5
|
+
var $2061c83559b50a66$exports = require("./pressScale.cjs");
|
|
5
6
|
var $6367bc87eb7d24ad$exports = require("./Content.cjs");
|
|
6
7
|
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
7
8
|
var $gGDF1$reactjsxruntime = require("react/jsx-runtime");
|
|
8
9
|
var $gGDF1$reactariacomponents = require("react-aria-components");
|
|
9
10
|
var $gGDF1$react = require("react");
|
|
10
|
-
var $gGDF1$reactstatelyutils = require("@react-stately/utils");
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
function $parcel$export(e, n, v, s) {
|
|
@@ -59,7 +59,7 @@ const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, override
|
|
|
59
59
|
else rules += ' _Le11';
|
|
60
60
|
rules += ' Oh11';
|
|
61
61
|
rules += ' _Mc11';
|
|
62
|
-
|
|
62
|
+
rules += ' _Kd11';
|
|
63
63
|
rules += ' se11';
|
|
64
64
|
rules += ' __yM8Mfn11';
|
|
65
65
|
if (!position) rules += ' _Pc11';
|
|
@@ -87,7 +87,7 @@ const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, override
|
|
|
87
87
|
if (props.orientation === "horizontal") {
|
|
88
88
|
if (!width) rules += ' ZAK24ue11';
|
|
89
89
|
} else if (!width) rules += ' Z75oWv11';
|
|
90
|
-
if (props.orientation === "horizontal") rules += '
|
|
90
|
+
if (props.orientation === "horizontal") rules += ' Fd11';
|
|
91
91
|
else rules += ' F75oWv11';
|
|
92
92
|
if (props.orientation === "horizontal") {
|
|
93
93
|
if (!minWidth) rules += ' NBzUiud11';
|
|
@@ -103,17 +103,17 @@ const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, override
|
|
|
103
103
|
else rules += ' Th11';
|
|
104
104
|
if (props.orientation === "horizontal") rules += ' Qf11';
|
|
105
105
|
else rules += ' Qh11';
|
|
106
|
-
if (props.orientation === "horizontal") rules += '
|
|
107
|
-
if (props.orientation === "horizontal") rules += '
|
|
106
|
+
if (props.orientation === "horizontal") rules += ' Sk11';
|
|
107
|
+
if (props.orientation === "horizontal") rules += ' Rh11';
|
|
108
108
|
if (props.orientation === "horizontal") {
|
|
109
109
|
rules += ' CtXiS9b11';
|
|
110
110
|
rules += ' CbWiMddxbX3ib11';
|
|
111
111
|
} else if (props.orientation === "vertical") rules += ' CfwsTtd11';
|
|
112
112
|
if (props.orientation === "horizontal") {
|
|
113
|
-
rules += '
|
|
113
|
+
rules += ' EtYIsBb11';
|
|
114
114
|
rules += ' E1099pdfYMhHd11';
|
|
115
115
|
} else if (props.orientation === "vertical") rules += ' EOwqVhc11';
|
|
116
|
-
if (props.orientation === "horizontal") rules += '
|
|
116
|
+
if (props.orientation === "horizontal") rules += ' DJSAqje11';
|
|
117
117
|
if (props.orientation === "vertical") rules += ' _cb11';
|
|
118
118
|
rules += ' oc11';
|
|
119
119
|
rules += ' nc11';
|
|
@@ -125,13 +125,10 @@ const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, override
|
|
|
125
125
|
else rules += ' iA11';
|
|
126
126
|
if (props.isDisabled) rules += ' gqlRAZb11';
|
|
127
127
|
else rules += ' g_g11';
|
|
128
|
-
if (props.isDisabled) rules += '
|
|
129
|
-
else
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
else rules += ' _na11';
|
|
133
|
-
rules += ' _nld11';
|
|
134
|
-
}
|
|
128
|
+
if (props.isDisabled) rules += ' _nd11';
|
|
129
|
+
else if (props.isSelected) rules += ' _nb11';
|
|
130
|
+
else if (props.isHovered) rules += ' _nb11';
|
|
131
|
+
else rules += ' _na11';
|
|
135
132
|
rules += ' _kc11';
|
|
136
133
|
rules += ' hc11';
|
|
137
134
|
rules += ' mc11';
|
|
@@ -139,8 +136,6 @@ const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, override
|
|
|
139
136
|
rules += ' Yd11';
|
|
140
137
|
rules += ' Xb11';
|
|
141
138
|
rules += ' _2b11';
|
|
142
|
-
if (props.isDisabled) rules += ' ri11';
|
|
143
|
-
else rules += ' ry11';
|
|
144
139
|
return rules;
|
|
145
140
|
};
|
|
146
141
|
const $6a3953abb7deb063$var$illustrationContainer = function anonymous(props) {
|
|
@@ -153,7 +148,8 @@ const $6a3953abb7deb063$var$illustrationContainer = function anonymous(props) {
|
|
|
153
148
|
rules += ' __Ab11';
|
|
154
149
|
rules += ' Nl11';
|
|
155
150
|
rules += ' Mk11';
|
|
156
|
-
if (props.
|
|
151
|
+
if (props.isHovered) rules += ' po11';
|
|
152
|
+
else if (props.isDisabled) rules += ' pp11';
|
|
157
153
|
if (props.isDisabled) rules += ' _IpmMfn11';
|
|
158
154
|
return rules;
|
|
159
155
|
};
|
|
@@ -171,6 +167,7 @@ const $6a3953abb7deb063$var$descriptionText = function anonymous(props) {
|
|
|
171
167
|
if (props.orientation === "horizontal") rules += ' _Wd11';
|
|
172
168
|
else rules += ' _Wa11';
|
|
173
169
|
if (props.isDisabled) rules += ' pp11';
|
|
170
|
+
else if (props.isHovered) rules += ' po11';
|
|
174
171
|
else rules += ' pt11';
|
|
175
172
|
return rules;
|
|
176
173
|
};
|
|
@@ -200,6 +197,7 @@ const $6a3953abb7deb063$var$labelText = function anonymous(props) {
|
|
|
200
197
|
rules += ' _xX0cczba11';
|
|
201
198
|
}
|
|
202
199
|
if (props.isDisabled) rules += ' pp11';
|
|
200
|
+
else if (props.isHovered) rules += ' po11';
|
|
203
201
|
else rules += ' pt11';
|
|
204
202
|
return rules;
|
|
205
203
|
};
|
|
@@ -208,41 +206,41 @@ const $6a3953abb7deb063$var$gridStyles = function anonymous(props, overrides) {
|
|
|
208
206
|
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('');
|
|
209
207
|
rules += ' se11';
|
|
210
208
|
rules += ' __yM8Mfn11';
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
if (props.
|
|
215
|
-
else if (props.gutterWidth === "compact") rules += ' qe11';
|
|
216
|
-
else if (props.gutterWidth === "default") rules += ' ql11';
|
|
209
|
+
rules += ' Ul11';
|
|
210
|
+
rules += ' ql11';
|
|
211
|
+
if (props.orientation === "vertical") rules += ' DyK74c11';
|
|
212
|
+
else if (props.orientation === "horizontal") rules += ' DhdZbQe11';
|
|
217
213
|
return rules;
|
|
218
214
|
};
|
|
219
215
|
function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
|
|
220
|
-
let { children: children, value: value, isDisabled: individualDisabled = false, UNSAFE_style: UNSAFE_style } = props;
|
|
221
|
-
let { orientation: orientation = 'vertical', isDisabled: groupDisabled = false
|
|
222
|
-
const size = 'M';
|
|
216
|
+
let { children: children, value: value, isDisabled: individualDisabled = false, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, styles: styles, ...otherProps } = props;
|
|
217
|
+
let { orientation: orientation = 'vertical', isDisabled: groupDisabled = false } = (0, $gGDF1$react.useContext)($6a3953abb7deb063$export$76c11007c5267b28);
|
|
223
218
|
const isDisabled = individualDisabled || groupDisabled;
|
|
219
|
+
const ref = (0, $gGDF1$react.useRef)(null);
|
|
224
220
|
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBoxItem), {
|
|
225
221
|
id: value,
|
|
226
|
-
isDisabled: isDisabled,
|
|
227
222
|
textValue: value,
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
...renderProps
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
223
|
+
isDisabled: isDisabled,
|
|
224
|
+
ref: ref,
|
|
225
|
+
className: (renderProps)=>(UNSAFE_className || '') + $6a3953abb7deb063$var$selectBoxStyles({
|
|
226
|
+
...renderProps,
|
|
227
|
+
orientation: orientation
|
|
228
|
+
}, styles),
|
|
229
|
+
style: (0, $2061c83559b50a66$exports.pressScale)(ref, UNSAFE_style),
|
|
230
|
+
...otherProps,
|
|
231
|
+
children: ({ isSelected: isSelected, isDisabled: isDisabled, isHovered: isHovered })=>{
|
|
232
|
+
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsxs)((0, $gGDF1$reactjsxruntime.Fragment), {
|
|
235
233
|
children: [
|
|
236
|
-
|
|
237
|
-
className: " _Pa11
|
|
234
|
+
/*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
|
|
235
|
+
className: " _Pa11 WJ11 _EJ11 _Ob11",
|
|
238
236
|
"aria-hidden": "true",
|
|
239
|
-
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
|
|
237
|
+
children: !isDisabled && /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
|
|
240
238
|
className: (0, $af04e099a53d3e85$exports.box)({
|
|
241
|
-
isSelected:
|
|
242
|
-
isDisabled:
|
|
239
|
+
isSelected: isSelected,
|
|
240
|
+
isDisabled: isDisabled,
|
|
243
241
|
size: 'M'
|
|
244
242
|
}),
|
|
245
|
-
children:
|
|
243
|
+
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $dba2b18fc5727f9b$exports.default), {
|
|
246
244
|
size: "S",
|
|
247
245
|
className: (0, $af04e099a53d3e85$exports.iconStyles)
|
|
248
246
|
})
|
|
@@ -257,7 +255,8 @@ function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
|
|
|
257
255
|
styles: $6a3953abb7deb063$var$illustrationContainer({
|
|
258
256
|
size: 'S',
|
|
259
257
|
orientation: orientation,
|
|
260
|
-
isDisabled:
|
|
258
|
+
isDisabled: isDisabled,
|
|
259
|
+
isHovered: isHovered
|
|
261
260
|
})
|
|
262
261
|
}
|
|
263
262
|
],
|
|
@@ -268,19 +267,22 @@ function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
|
|
|
268
267
|
[(0, $gGDF1$reactariacomponents.DEFAULT_SLOT)]: {
|
|
269
268
|
styles: $6a3953abb7deb063$var$labelText({
|
|
270
269
|
orientation: orientation,
|
|
271
|
-
isDisabled:
|
|
270
|
+
isDisabled: isDisabled,
|
|
271
|
+
isHovered: isHovered
|
|
272
272
|
})
|
|
273
273
|
},
|
|
274
274
|
label: {
|
|
275
275
|
styles: $6a3953abb7deb063$var$labelText({
|
|
276
276
|
orientation: orientation,
|
|
277
|
-
isDisabled:
|
|
277
|
+
isDisabled: isDisabled,
|
|
278
|
+
isHovered: isHovered
|
|
278
279
|
})
|
|
279
280
|
},
|
|
280
281
|
description: {
|
|
281
282
|
styles: $6a3953abb7deb063$var$descriptionText({
|
|
282
283
|
orientation: orientation,
|
|
283
|
-
isDisabled:
|
|
284
|
+
isDisabled: isDisabled,
|
|
285
|
+
isHovered: isHovered
|
|
284
286
|
})
|
|
285
287
|
}
|
|
286
288
|
}
|
|
@@ -290,46 +292,31 @@ function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
|
|
|
290
292
|
children: children
|
|
291
293
|
})
|
|
292
294
|
]
|
|
293
|
-
})
|
|
295
|
+
});
|
|
296
|
+
}
|
|
294
297
|
});
|
|
295
298
|
}
|
|
296
299
|
const $6a3953abb7deb063$export$da87cf13fc2ef3d8 = /*#__PURE__*/ (0, $gGDF1$react.forwardRef)(function SelectBoxGroup(props, ref) {
|
|
297
300
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6a3953abb7deb063$export$cad91f7528e8dc08);
|
|
298
|
-
let { children: children,
|
|
299
|
-
const [selectedKeys, setSelectedKeys] = (0, $gGDF1$reactstatelyutils.useControlledState)(controlledSelectedKeys, defaultSelectedKeys || new Set(), onSelectionChange);
|
|
301
|
+
let { children: children, selectionMode: selectionMode = 'single', orientation: orientation = 'vertical', isDisabled: isDisabled = false, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, ...otherProps } = props;
|
|
300
302
|
const selectBoxContextValue = (0, $gGDF1$react.useMemo)(()=>{
|
|
301
303
|
const contextValue = {
|
|
302
|
-
allowMultiSelect: selectionMode === 'multiple',
|
|
303
304
|
orientation: orientation,
|
|
304
|
-
isDisabled: isDisabled
|
|
305
|
-
showCheckbox: showCheckbox,
|
|
306
|
-
selectedKeys: selectedKeys,
|
|
307
|
-
onSelectionChange: setSelectedKeys
|
|
305
|
+
isDisabled: isDisabled
|
|
308
306
|
};
|
|
309
307
|
return contextValue;
|
|
310
308
|
}, [
|
|
311
|
-
selectionMode,
|
|
312
309
|
orientation,
|
|
313
|
-
isDisabled
|
|
314
|
-
showCheckbox,
|
|
315
|
-
selectedKeys,
|
|
316
|
-
setSelectedKeys
|
|
310
|
+
isDisabled
|
|
317
311
|
]);
|
|
318
312
|
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBox), {
|
|
319
|
-
layout: "grid",
|
|
320
313
|
selectionMode: selectionMode,
|
|
321
|
-
|
|
322
|
-
onSelectionChange: setSelectedKeys,
|
|
314
|
+
layout: "grid",
|
|
323
315
|
className: (UNSAFE_className || '') + $6a3953abb7deb063$var$gridStyles({
|
|
324
|
-
gutterWidth: gutterWidth,
|
|
325
316
|
orientation: orientation
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
style: {
|
|
330
|
-
gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
|
|
331
|
-
...UNSAFE_style
|
|
332
|
-
},
|
|
317
|
+
}),
|
|
318
|
+
style: UNSAFE_style,
|
|
319
|
+
...otherProps,
|
|
333
320
|
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)($6a3953abb7deb063$export$76c11007c5267b28.Provider, {
|
|
334
321
|
value: selectBoxContextValue,
|
|
335
322
|
children: children
|
|
@@ -1 +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 {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, Orientation, Selection} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from '../src/Icon';\nimport React, {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';\nimport {TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'renderEmptyState' | 'dependencies' | 'items' | 'children' | 'selectionMode'>{\n /**\n * The SelectBox elements contained within the SelectBoxGroup.\n */\n children: ReactNode,\n /**\n * The selection mode for the SelectBoxGroup.\n * @default 'single'\n */\n selectionMode?: 'single' | 'multiple',\n /**\n * The currently selected keys in the collection (controlled).\n */\n selectedKeys?: Selection,\n /**\n * The initial selected keys in the collection (uncontrolled).\n */\n defaultSelectedKeys?: Selection,\n /**\n * Number of columns to display the SelectBox elements in.\n * @default 2\n */\n numColumns?: number,\n /**\n * Gap between grid items.\n * @default 'default'\n */\n gutterWidth?: 'default' | 'compact' | 'spacious',\n /**\n * Whether the SelectBoxGroup is disabled.\n */\n isDisabled?: boolean,\n /**\n * Whether to show selection checkboxes for all SelectBoxes.\n * @default false\n */\n showCheckbox?: boolean\n}\n\nexport interface SelectBoxProps extends StyleProps {\n /**\n * The value of the SelectBox.\n */\n value: string,\n /**\n * The label for the element.\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 showCheckbox?: boolean,\n selectedKeys?: Selection,\n onSelectionChange?: (keys: Selection) => void\n}\n\nexport const 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 outlineOffset: {\n isFocusVisible: -2\n },\n display: 'grid',\n gridAutoRows: '1fr',\n position: 'relative',\n font: 'ui',\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: '100%'\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: 24\n }\n },\n paddingEnd: {\n orientation: {\n horizontal: 32\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', 'min-content'],\n [noIllustration]: ['min-content']\n }\n }\n },\n gridTemplateColumns: {\n orientation: {\n horizontal: ['min-content', 12, '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: 'layer-1'\n },\n color: {\n isDisabled: 'disabled'\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isSelected: 'elevated',\n forcedColors: 'none',\n isDisabled: 'emphasized'\n },\n borderWidth: 2,\n transition: 'default',\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n }\n}, getAllowedOverrides());\n\nconst illustrationContainer = style({\n gridArea: 'illustration',\n alignSelf: 'center',\n justifySelf: 'center',\n minSize: 48,\n color: {\n isDisabled: 'disabled'\n },\n opacity: {\n isDisabled: 0.4\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: '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: 'neutral',\n isDisabled: 'disabled'\n }\n});\n\nconst gridStyles = style({\n display: 'grid',\n outline: 'none',\n gridAutoRows: '1fr',\n gap: {\n gutterWidth: {\n default: 16,\n compact: 8,\n spacious: 24\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, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;\n \n let {\n orientation = 'vertical',\n isDisabled: groupDisabled = false,\n showCheckbox = false\n } = useContext(SelectBoxContext);\n\n const size = 'M';\n const isDisabled = individualDisabled || groupDisabled;\n\n return (\n <ListBoxItem\n id={value}\n isDisabled={isDisabled}\n textValue={value}\n className={renderProps => (props.UNSAFE_className || '') + selectBoxStyles({\n size, \n orientation, \n ...renderProps\n }, props.styles)}\n style={UNSAFE_style}>\n {(renderProps) => (\n <>\n {showCheckbox && (renderProps.isSelected || (!renderProps.isDisabled && renderProps.isHovered)) && (\n <div \n className={style({\n position: 'absolute',\n top: 12,\n left: 12\n })}\n aria-hidden=\"true\">\n <div\n className={box({\n isSelected: renderProps.isSelected,\n isDisabled: renderProps.isDisabled,\n size: 'M'\n } as any)}>\n {renderProps.isSelected && (\n <Checkmark \n size=\"S\" \n className={iconStyles} />\n )}\n </div>\n </div>\n )}\n <Provider\n values={[\n [IllustrationContext, {\n size: 'S',\n styles: illustrationContainer({size: 'S', orientation, isDisabled: renderProps.isDisabled})\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {\n styles: labelText({orientation, isDisabled: renderProps.isDisabled})\n },\n label: {\n styles: labelText({orientation, isDisabled: renderProps.isDisabled})\n },\n description: {\n styles: descriptionText({orientation, isDisabled: renderProps.isDisabled})\n }\n }\n }]\n ]}>\n {children}\n </Provider>\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>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);\n\n let {\n children,\n onSelectionChange,\n selectedKeys: controlledSelectedKeys,\n defaultSelectedKeys,\n selectionMode = 'single',\n orientation = 'vertical',\n numColumns = 2,\n gutterWidth = 'default',\n isDisabled = false,\n showCheckbox = false,\n UNSAFE_className,\n UNSAFE_style\n } = props;\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n controlledSelectedKeys,\n defaultSelectedKeys || new Set(),\n onSelectionChange\n );\n\n const selectBoxContextValue = useMemo(\n () => {\n const contextValue = {\n allowMultiSelect: selectionMode === 'multiple',\n orientation,\n isDisabled,\n showCheckbox,\n selectedKeys,\n onSelectionChange: setSelectedKeys\n };\n \n return contextValue;\n },\n [selectionMode, orientation, isDisabled, showCheckbox, selectedKeys, setSelectedKeys]\n );\n\n return (\n <ListBox\n layout=\"grid\"\n selectionMode={selectionMode}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n className={(UNSAFE_className || '') + gridStyles({gutterWidth, orientation}, props.styles)}\n aria-label=\"SelectBoxGroup\"\n aria-labelledby=\"SelectBoxGroup\"\n style={{\n gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n ...UNSAFE_style\n }}>\n <SelectBoxContext.Provider value={selectBoxContextValue}>\n {children}\n </SelectBoxContext.Provider>\n </ListBox>\n );\n});\n"],"names":[],"version":3,"file":"SelectBoxGroup.cjs.map"}
|
|
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 {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, Orientation} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\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\ntype ExcludedListBoxProps = \n | keyof GlobalDOMAttributes \n | 'layout' \n | 'dragAndDropHooks' \n | 'renderEmptyState' \n | 'dependencies' \n | 'items' \n | 'onAction'\n | 'children' \n | 'selectionMode' \n | 'shouldSelectOnPress' \n | 'shouldFocusWrap' \n | 'selectionBehavior' \n | 'shouldSelectOnFocus';\n\nexport interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, ExcludedListBoxProps> {\n /**\n * The SelectBox elements contained within the SelectBoxGroup.\n */\n children: ReactNode,\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 /**\n * The value of the SelectBox.\n */\n value: string,\n /**\n * The label for the element.\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\nexport const 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 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: 'layer-1'\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 color: {\n isDisabled: 'disabled',\n isHovered: 'gray-900'\n },\n opacity: {\n isDisabled: 0.4\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: 'neutral',\n isHovered: 'gray-900',\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: 'neutral',\n isHovered: 'gray-900',\n isDisabled: 'disabled'\n }\n});\n\nconst gridStyles = style<{orientation?: Orientation}>({\n display: 'grid',\n gridAutoRows: '1fr',\n gap: 16,\n gridTemplateColumns: {\n orientation: {\n horizontal: 'repeat(auto-fit, minmax(368px, 1fr))',\n vertical: 'repeat(auto-fit, minmax(170px, 1fr))'\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, value, 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 id={value}\n textValue={value}\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 left: 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>(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 ...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})}\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"}
|
package/dist/SelectBoxGroup.css
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
outline-width: 2px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
19
|
-
outline-offset:
|
|
18
|
+
._Kd11 {
|
|
19
|
+
outline-offset: 2px;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
._Pc11 {
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
height: calc(10.625rem * var(--s2-scale));
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
.
|
|
67
|
-
height:
|
|
66
|
+
.Fd11 {
|
|
67
|
+
height: auto;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.NQGV3L11 {
|
|
@@ -115,12 +115,12 @@
|
|
|
115
115
|
padding-bottom: 16px;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
.
|
|
119
|
-
padding-inline-start:
|
|
118
|
+
.Sk11 {
|
|
119
|
+
padding-inline-start: 32px;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
.
|
|
123
|
-
padding-inline-end:
|
|
122
|
+
.Rh11 {
|
|
123
|
+
padding-inline-end: 24px;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.CfwsTtd11 {
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
grid-template-rows: min-content .5rem min-content;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.
|
|
142
|
-
grid-template-rows: min-content min-content;
|
|
141
|
+
.EtYIsBb11 {
|
|
142
|
+
grid-template-rows: min-content .125rem min-content;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
.
|
|
146
|
-
grid-template-columns: min-content
|
|
145
|
+
.DJSAqje11 {
|
|
146
|
+
grid-template-columns: min-content 10px 1fr;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
._cb11 {
|
|
@@ -186,13 +186,17 @@
|
|
|
186
186
|
background-color: var(--lightningcss-light, #f8f8f8) var(--lightningcss-dark, #1b1b1b);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
._na11 {
|
|
190
|
+
box-shadow: 0 1px 6px var(--lightningcss-light, #0000001f) var(--lightningcss-dark, #0000005c);
|
|
191
|
+
}
|
|
192
|
+
|
|
189
193
|
._nb11 {
|
|
190
194
|
box-shadow: 0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a);
|
|
191
195
|
box-shadow: 0 2px 8px var(--lightningcss-light, #00000029) var(--lightningcss-dark, #0000007a);
|
|
192
196
|
}
|
|
193
197
|
|
|
194
|
-
.
|
|
195
|
-
box-shadow:
|
|
198
|
+
._nd11 {
|
|
199
|
+
box-shadow: none;
|
|
196
200
|
}
|
|
197
201
|
|
|
198
202
|
._kc11 {
|
|
@@ -223,14 +227,6 @@
|
|
|
223
227
|
transition-timing-function: cubic-bezier(.45, 0, .4, 1);
|
|
224
228
|
}
|
|
225
229
|
|
|
226
|
-
.ry11 {
|
|
227
|
-
cursor: pointer;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.ri11 {
|
|
231
|
-
cursor: default;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
230
|
.zTZ8xtd11 {
|
|
235
231
|
grid-column-start: illustration;
|
|
236
232
|
}
|
|
@@ -359,6 +355,10 @@
|
|
|
359
355
|
color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
|
|
360
356
|
}
|
|
361
357
|
|
|
358
|
+
.po11 {
|
|
359
|
+
color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
362
|
.pp11 {
|
|
363
363
|
color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
|
|
364
364
|
}
|
|
@@ -375,36 +375,32 @@
|
|
|
375
375
|
row-gap: 1rem;
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
-
.Ue11 {
|
|
379
|
-
row-gap: .5rem;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
.Uj11 {
|
|
383
|
-
row-gap: 1.5rem;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
378
|
.ql11 {
|
|
387
379
|
column-gap: 1rem;
|
|
388
380
|
}
|
|
389
381
|
|
|
390
|
-
.
|
|
391
|
-
|
|
382
|
+
.DhdZbQe11 {
|
|
383
|
+
grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));
|
|
392
384
|
}
|
|
393
385
|
|
|
394
|
-
.
|
|
395
|
-
|
|
386
|
+
.DyK74c11 {
|
|
387
|
+
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
396
388
|
}
|
|
397
389
|
|
|
398
390
|
._Pa11 {
|
|
399
391
|
position: absolute;
|
|
400
392
|
}
|
|
401
393
|
|
|
402
|
-
.
|
|
403
|
-
top:
|
|
394
|
+
.WJ11 {
|
|
395
|
+
top: 8px;
|
|
404
396
|
}
|
|
405
397
|
|
|
406
|
-
.
|
|
407
|
-
left:
|
|
398
|
+
._EJ11 {
|
|
399
|
+
left: 8px;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
._Ob11 {
|
|
403
|
+
pointer-events: none;
|
|
408
404
|
}
|
|
409
405
|
}
|
|
410
406
|
|
|
@@ -483,12 +479,4 @@
|
|
|
483
479
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
484
480
|
}
|
|
485
481
|
}
|
|
486
|
-
|
|
487
|
-
@layer _.b.l {
|
|
488
|
-
@media (forced-colors: active) {
|
|
489
|
-
._nld11 {
|
|
490
|
-
box-shadow: none;
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
482
|
/*# sourceMappingURL=SelectBoxGroup.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACkGwB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiIM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+BC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CM;;;;EAAA;;;;EAAA;;;;;AA9OD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoKN;;;;EAAA;;;;EAAA;;;;;AApKM;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA","sources":["e0c4e8faec553462","packages/@react-spectrum/s2/src/SelectBoxGroup.tsx"],"sourcesContent":["@import \"6c115799477d85f3\";\n@import \"76c5b1a079443994\";\n@import \"57b5eb6b4b0308a7\";\n@import \"c7f260d858a15199\";\n@import \"c9c8eebe8c33c5fb\";\n@import \"183428cb2b58de79\";\n","/*\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 {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, Orientation, Selection} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from '../src/Icon';\nimport React, {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';\nimport {TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'renderEmptyState' | 'dependencies' | 'items' | 'children' | 'selectionMode'>{\n /**\n * The SelectBox elements contained within the SelectBoxGroup.\n */\n children: ReactNode,\n /**\n * The selection mode for the SelectBoxGroup.\n * @default 'single'\n */\n selectionMode?: 'single' | 'multiple',\n /**\n * The currently selected keys in the collection (controlled).\n */\n selectedKeys?: Selection,\n /**\n * The initial selected keys in the collection (uncontrolled).\n */\n defaultSelectedKeys?: Selection,\n /**\n * Number of columns to display the SelectBox elements in.\n * @default 2\n */\n numColumns?: number,\n /**\n * Gap between grid items.\n * @default 'default'\n */\n gutterWidth?: 'default' | 'compact' | 'spacious',\n /**\n * Whether the SelectBoxGroup is disabled.\n */\n isDisabled?: boolean,\n /**\n * Whether to show selection checkboxes for all SelectBoxes.\n * @default false\n */\n showCheckbox?: boolean\n}\n\nexport interface SelectBoxProps extends StyleProps {\n /**\n * The value of the SelectBox.\n */\n value: string,\n /**\n * The label for the element.\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 showCheckbox?: boolean,\n selectedKeys?: Selection,\n onSelectionChange?: (keys: Selection) => void\n}\n\nexport const 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 outlineOffset: {\n isFocusVisible: -2\n },\n display: 'grid',\n gridAutoRows: '1fr',\n position: 'relative',\n font: 'ui',\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: '100%'\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: 24\n }\n },\n paddingEnd: {\n orientation: {\n horizontal: 32\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', 'min-content'],\n [noIllustration]: ['min-content']\n }\n }\n },\n gridTemplateColumns: {\n orientation: {\n horizontal: ['min-content', 12, '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: 'layer-1'\n },\n color: {\n isDisabled: 'disabled'\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isSelected: 'elevated',\n forcedColors: 'none',\n isDisabled: 'emphasized'\n },\n borderWidth: 2,\n transition: 'default',\n cursor: {\n default: 'pointer',\n isDisabled: 'default'\n }\n}, getAllowedOverrides());\n\nconst illustrationContainer = style({\n gridArea: 'illustration',\n alignSelf: 'center',\n justifySelf: 'center',\n minSize: 48,\n color: {\n isDisabled: 'disabled'\n },\n opacity: {\n isDisabled: 0.4\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: '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: 'neutral',\n isDisabled: 'disabled'\n }\n});\n\nconst gridStyles = style({\n display: 'grid',\n outline: 'none',\n gridAutoRows: '1fr',\n gap: {\n gutterWidth: {\n default: 16,\n compact: 8,\n spacious: 24\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, value, isDisabled: individualDisabled = false, UNSAFE_style} = props;\n \n let {\n orientation = 'vertical',\n isDisabled: groupDisabled = false,\n showCheckbox = false\n } = useContext(SelectBoxContext);\n\n const size = 'M';\n const isDisabled = individualDisabled || groupDisabled;\n\n return (\n <ListBoxItem\n id={value}\n isDisabled={isDisabled}\n textValue={value}\n className={renderProps => (props.UNSAFE_className || '') + selectBoxStyles({\n size, \n orientation, \n ...renderProps\n }, props.styles)}\n style={UNSAFE_style}>\n {(renderProps) => (\n <>\n {showCheckbox && (renderProps.isSelected || (!renderProps.isDisabled && renderProps.isHovered)) && (\n <div \n className={style({\n position: 'absolute',\n top: 12,\n left: 12\n })}\n aria-hidden=\"true\">\n <div\n className={box({\n isSelected: renderProps.isSelected,\n isDisabled: renderProps.isDisabled,\n size: 'M'\n } as any)}>\n {renderProps.isSelected && (\n <Checkmark \n size=\"S\" \n className={iconStyles} />\n )}\n </div>\n </div>\n )}\n <Provider\n values={[\n [IllustrationContext, {\n size: 'S',\n styles: illustrationContainer({size: 'S', orientation, isDisabled: renderProps.isDisabled})\n }],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {\n styles: labelText({orientation, isDisabled: renderProps.isDisabled})\n },\n label: {\n styles: labelText({orientation, isDisabled: renderProps.isDisabled})\n },\n description: {\n styles: descriptionText({orientation, isDisabled: renderProps.isDisabled})\n }\n }\n }]\n ]}>\n {children}\n </Provider>\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>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);\n\n let {\n children,\n onSelectionChange,\n selectedKeys: controlledSelectedKeys,\n defaultSelectedKeys,\n selectionMode = 'single',\n orientation = 'vertical',\n numColumns = 2,\n gutterWidth = 'default',\n isDisabled = false,\n showCheckbox = false,\n UNSAFE_className,\n UNSAFE_style\n } = props;\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n controlledSelectedKeys,\n defaultSelectedKeys || new Set(),\n onSelectionChange\n );\n\n const selectBoxContextValue = useMemo(\n () => {\n const contextValue = {\n allowMultiSelect: selectionMode === 'multiple',\n orientation,\n isDisabled,\n showCheckbox,\n selectedKeys,\n onSelectionChange: setSelectedKeys\n };\n \n return contextValue;\n },\n [selectionMode, orientation, isDisabled, showCheckbox, selectedKeys, setSelectedKeys]\n );\n\n return (\n <ListBox\n layout=\"grid\"\n selectionMode={selectionMode}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n className={(UNSAFE_className || '') + gridStyles({gutterWidth, orientation}, props.styles)}\n aria-label=\"SelectBoxGroup\"\n aria-labelledby=\"SelectBoxGroup\"\n style={{\n gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n ...UNSAFE_style\n }}>\n <SelectBoxContext.Provider value={selectBoxContextValue}>\n {children}\n </SelectBoxContext.Provider>\n </ListBox>\n );\n});\n"],"names":[],"version":3,"file":"SelectBoxGroup.css.map"}
|
|
1
|
+
{"mappings":"ACuFwB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyHM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAcN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgCC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CM;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxOD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8JN;;;;EAAA;;;;EAAA;;;;;AA9JM;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["e0c4e8faec553462","packages/@react-spectrum/s2/src/SelectBoxGroup.tsx"],"sourcesContent":["@import \"6c115799477d85f3\";\n@import \"76c5b1a079443994\";\n@import \"57b5eb6b4b0308a7\";\n@import \"c7f260d858a15199\";\n@import \"c9c8eebe8c33c5fb\";\n@import \"183428cb2b58de79\";\n","/*\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 {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, Orientation} from '@react-types/shared';\nimport {focusRing, style} from '../style' with {type: 'macro'};\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\ntype ExcludedListBoxProps = \n | keyof GlobalDOMAttributes \n | 'layout' \n | 'dragAndDropHooks' \n | 'renderEmptyState' \n | 'dependencies' \n | 'items' \n | 'onAction'\n | 'children' \n | 'selectionMode' \n | 'shouldSelectOnPress' \n | 'shouldFocusWrap' \n | 'selectionBehavior' \n | 'shouldSelectOnFocus';\n\nexport interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, ExcludedListBoxProps> {\n /**\n * The SelectBox elements contained within the SelectBoxGroup.\n */\n children: ReactNode,\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 /**\n * The value of the SelectBox.\n */\n value: string,\n /**\n * The label for the element.\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\nexport const 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 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: 'layer-1'\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 color: {\n isDisabled: 'disabled',\n isHovered: 'gray-900'\n },\n opacity: {\n isDisabled: 0.4\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: 'neutral',\n isHovered: 'gray-900',\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: 'neutral',\n isHovered: 'gray-900',\n isDisabled: 'disabled'\n }\n});\n\nconst gridStyles = style<{orientation?: Orientation}>({\n display: 'grid',\n gridAutoRows: '1fr',\n gap: 16,\n gridTemplateColumns: {\n orientation: {\n horizontal: 'repeat(auto-fit, minmax(368px, 1fr))',\n vertical: 'repeat(auto-fit, minmax(170px, 1fr))'\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, value, 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 id={value}\n textValue={value}\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 left: 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>(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 ...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})}\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.css.map"}
|