@react-spectrum/s2
Version:
Spectrum 2 UI components in React
344 lines (329 loc) • 14.8 kB
JavaScript
require("./SelectBoxGroup.css");
var $af04e099a53d3e85$exports = require("./Checkbox.cjs");
var $dba2b18fc5727f9b$exports = require("./Checkmark.cjs");
var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
var $2061c83559b50a66$exports = require("./pressScale.cjs");
var $6367bc87eb7d24ad$exports = require("./Content.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $gGDF1$reactjsxruntime = require("react/jsx-runtime");
var $gGDF1$reactariacomponents = require("react-aria-components");
var $gGDF1$react = require("react");
var $gGDF1$reactaria = require("react-aria");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "SelectBoxGroupContext", () => $6a3953abb7deb063$export$cad91f7528e8dc08);
$parcel$export(module.exports, "SelectBox", () => $6a3953abb7deb063$export$ebde6d4e7862fe9d);
$parcel$export(module.exports, "SelectBoxGroup", () => $6a3953abb7deb063$export$da87cf13fc2ef3d8);
/*
* Copyright 2025 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* 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
* governing permissions and limitations under the License.
*/
const $6a3953abb7deb063$var$SelectBoxContext = /*#__PURE__*/ (0, $gGDF1$react.createContext)({
orientation: 'vertical'
});
const $6a3953abb7deb063$export$cad91f7528e8dc08 = /*#__PURE__*/ (0, $gGDF1$react.createContext)(null);
const $6a3953abb7deb063$var$labelOnly = ':has([slot=label]):not(:has([slot=description]))';
const $6a3953abb7deb063$var$noIllustration = ':not(:has([slot=illustration]))';
const $6a3953abb7deb063$var$selectBoxStyles = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let width = false;
let minWidth = false;
let maxWidth = false;
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|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "Z") width = true;
if (p[1] === "N") minWidth = true;
if (p[1] === "L") maxWidth = true;
rules += p[0];
}
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
rules += ' se1';
rules += ' __yM8Mfn1';
if (!position) rules += ' _Pc1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' -_6BNtrc-c1';
rules += ' vx1';
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
if (props.isDisabled) rules += ' pp1';
rules += ' ri1';
rules += ' _oa1';
rules += ' _Nc1';
rules += ' Pc1';
if (props.orientation === "horizontal") {
if (!width) rules += ' ZAK24ue1';
} else if (!width) rules += ' Z75oWv1';
if (props.orientation === "horizontal") rules += ' Fd1';
else rules += ' F75oWv1';
if (props.orientation === "horizontal") {
if (!minWidth) rules += ' NBzUiud1';
} else if (!minWidth) rules += ' NQGV3L1';
if (props.orientation === "horizontal") rules += ' -_5yLdZ-ZILqIYb1';
else rules += ' -_5yLdZ-Z75oWv1';
if (!maxWidth) rules += ' Lqz07Zc1';
if (props.orientation === "horizontal") rules += ' MKniM1';
else rules += ' MQGV3L1';
if (props.orientation === "horizontal") rules += ' KDvO7ld1';
else rules += ' K75oWv1';
if (props.orientation === "horizontal") rules += ' Tf1';
else rules += ' Th1';
if (props.orientation === "horizontal") rules += ' Qf1';
else rules += ' Qh1';
if (props.orientation === "horizontal") rules += ' Sk1';
if (props.orientation === "horizontal") rules += ' Rh1';
if (props.orientation === "horizontal") {
rules += ' CtXiS9b1';
rules += ' CbWiMddxbX3ib1';
} else if (props.orientation === "vertical") rules += ' CfwsTtd1';
if (props.orientation === "horizontal") {
rules += ' E5HJqj1';
rules += ' E1099pdfYMhHd1';
} else if (props.orientation === "vertical") rules += ' EY7ZLHe1';
if (props.orientation === "horizontal") rules += ' DJSAqje1';
if (props.orientation === "vertical") rules += ' _cb1';
rules += ' oc1';
rules += ' nc1';
rules += ' kc1';
rules += ' jc1';
rules += ' _jf1';
if (props.isDisabled) rules += ' iA1';
else if (props.isSelected) rules += ' in1';
else rules += ' iA1';
if (props.isDisabled) rules += ' gH1';
else rules += ' g_g1';
if (props.isDisabled) rules += ' _nd1';
else if (props.isSelected) rules += ' _nLeasBb1';
else if (props.isHovered) rules += ' _nLeasBb1';
else rules += ' _n4zCLMe1';
rules += ' _kc1';
rules += ' hc1';
rules += ' mc1';
rules += ' lc1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
return rules;
};
const $6a3953abb7deb063$var$illustrationContainer = function anonymous(props) {
let rules = " ";
rules += ' zTZ8xtd1';
rules += ' yTZ8xtd1';
rules += ' BTZ8xtd1';
rules += ' ATZ8xtd1';
rules += ' _dc1';
rules += ' __Ab1';
rules += ' Nl1';
rules += ' Mk1';
if (props.isDisabled) rules += ' -_8sjo0b-pp1';
else {
if (props.isPressed) rules += ' -_8sjo0b-po1';
else if (props.isFocusVisible) rules += ' -_8sjo0b-po1';
else if (props.isHovered) rules += ' -_8sjo0b-po1';
else rules += ' -_8sjo0b-pt1';
}
return rules;
};
const $6a3953abb7deb063$var$descriptionText = function anonymous(props) {
let rules = " ";
rules += ' z9u7zPc1';
rules += ' y9u7zPc1';
rules += ' B9u7zPc1';
rules += ' A9u7zPc1';
rules += ' _dc1';
if (props.orientation === "vertical") rules += ' sk1';
else rules += ' sb1';
rules += ' _Nc1';
rules += ' Pc1';
if (props.orientation === "horizontal") rules += ' _Wd1';
else rules += ' _Wa1';
if (props.isDisabled) rules += ' pp1';
else {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
}
return rules;
};
const $6a3953abb7deb063$var$labelText = function anonymous(props) {
let rules = " ";
rules += ' zv6x9r1';
rules += ' yv6x9r1';
rules += ' Bv6x9r1';
rules += ' Av6x9r1';
rules += ' _dc1';
if (props.orientation === "horizontal") rules += ' __Ad1';
else rules += ' __Ab1';
rules += ' Za1';
rules += ' _Nc1';
rules += ' Pc1';
rules += ' Na1';
if (props.orientation === "horizontal") rules += ' _Wd1';
else rules += ' _Wa1';
rules += ' _7c1';
rules += ' _Yb1';
if (props.orientation === "horizontal") {
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
}
if (props.isDisabled) rules += ' pp1';
else {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
}
return rules;
};
const $6a3953abb7deb063$var$gridStyles = function anonymous(props, overrides) {
let rules = " ";
rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g) || []).join('');
rules += ' se1';
rules += ' __yM8Mfn1';
rules += ' Uj1';
rules += ' qj1';
rules += ' _Ca1';
if (props.orientation === "vertical") rules += ' -kN2jP-Z75oWv1';
else if (props.orientation === "horizontal") rules += ' -kN2jP-ZAK24ue1';
if (props.orientation === "vertical") rules += ' -LWGJg-ZQGV3L1';
else if (props.orientation === "horizontal") rules += ' -LWGJg-ZBzUiud1';
if (props.orientation === "vertical") rules += ' DnG8gle1';
else if (props.orientation === "horizontal") rules += ' DnG8gle1';
return rules;
};
function $6a3953abb7deb063$export$ebde6d4e7862fe9d(props) {
let { children: children, isDisabled: individualDisabled = false, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, styles: styles, ...otherProps } = props;
let { orientation: orientation = 'vertical', isDisabled: groupDisabled = false } = (0, $gGDF1$react.useContext)($6a3953abb7deb063$var$SelectBoxContext);
const isDisabled = individualDisabled || groupDisabled;
const ref = (0, $gGDF1$react.useRef)(null);
let { isFocusVisible: isFocusVisible } = (0, $gGDF1$reactaria.useFocusVisible)();
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBoxItem), {
isDisabled: isDisabled,
ref: ref,
className: (renderProps)=>(UNSAFE_className || '') + $6a3953abb7deb063$var$selectBoxStyles({
...renderProps,
isFocusVisible: isFocusVisible && renderProps.isFocused,
orientation: orientation
}, styles),
style: (0, $2061c83559b50a66$exports.pressScale)(ref, UNSAFE_style),
...otherProps,
children: ({ isSelected: isSelected, isDisabled: isDisabled, isHovered: isHovered, selectionMode: selectionMode })=>{
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsxs)((0, $gGDF1$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
className: " _Pa1 WJ1 _AI1 _Ob1",
"aria-hidden": "true",
children: !isDisabled && selectionMode === 'multiple' && /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)("div", {
className: (0, $af04e099a53d3e85$exports.box)({
isSelected: isSelected,
isDisabled: isDisabled,
size: 'M'
}),
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $dba2b18fc5727f9b$exports.default), {
size: "S",
className: (0, $af04e099a53d3e85$exports.iconStyles)
})
})
}),
/*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.Provider), {
values: [
[
(0, $bde97c91243ed164$exports.IllustrationContext),
{
size: 'S',
styles: $6a3953abb7deb063$var$illustrationContainer({
size: 'S',
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
}
],
[
(0, $6367bc87eb7d24ad$exports.TextContext),
{
slots: {
[(0, $gGDF1$reactariacomponents.DEFAULT_SLOT)]: {
styles: $6a3953abb7deb063$var$labelText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
},
label: {
styles: $6a3953abb7deb063$var$labelText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
},
description: {
styles: $6a3953abb7deb063$var$descriptionText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
}
}
}
]
],
children: children
})
]
});
}
});
}
const $6a3953abb7deb063$export$da87cf13fc2ef3d8 = /*#__PURE__*/ (0, $gGDF1$react.forwardRef)(function SelectBoxGroup(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6a3953abb7deb063$export$cad91f7528e8dc08);
let { children: children, selectionMode: selectionMode = 'single', orientation: orientation = 'vertical', isDisabled: isDisabled = false, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, styles: styles, ...otherProps } = props;
const selectBoxContextValue = (0, $gGDF1$react.useMemo)(()=>({
orientation: orientation,
isDisabled: isDisabled
}), [
orientation,
isDisabled
]);
return /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)($6a3953abb7deb063$var$SelectBoxContext.Provider, {
value: selectBoxContextValue,
children: /*#__PURE__*/ (0, $gGDF1$reactjsxruntime.jsx)((0, $gGDF1$reactariacomponents.ListBox), {
selectionMode: selectionMode,
layout: "grid",
orientation: orientation,
className: (UNSAFE_className || '') + $6a3953abb7deb063$var$gridStyles({
orientation: orientation
}, styles),
style: UNSAFE_style,
...otherProps,
children: children
})
});
});
//# sourceMappingURL=SelectBoxGroup.cjs.map