@react-spectrum/s2
Version:
Spectrum 2 UI components in React
337 lines (324 loc) • 14.9 kB
JavaScript
import "./SelectBoxGroup.css";
import {box as $9b405e0f8095dce0$export$827f4ee28efc37, iconStyles as $9b405e0f8095dce0$export$2c99b98b77550cb4} from "./Checkbox.mjs";
import $81cf3d4588736e7d$export$2e2bcd8739ae039 from "./Checkmark.mjs";
import {IllustrationContext as $ac8c32e6775ddd1f$export$207c7561471de4bd} from "../icons/Icon.mjs";
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
import {TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $hsEDv$jsx, jsxs as $hsEDv$jsxs, Fragment as $hsEDv$Fragment} from "react/jsx-runtime";
import {ListBoxItem as $hsEDv$ListBoxItem, Provider as $hsEDv$Provider, DEFAULT_SLOT as $hsEDv$DEFAULT_SLOT, ListBox as $hsEDv$ListBox} from "react-aria-components";
import {createContext as $hsEDv$createContext, useContext as $hsEDv$useContext, useRef as $hsEDv$useRef, forwardRef as $hsEDv$forwardRef, useMemo as $hsEDv$useMemo} from "react";
import {useFocusVisible as $hsEDv$useFocusVisible} from "react-aria";
/*
* 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 $e1ab128dc6578df7$var$SelectBoxContext = /*#__PURE__*/ (0, $hsEDv$createContext)({
orientation: 'vertical'
});
const $e1ab128dc6578df7$export$cad91f7528e8dc08 = /*#__PURE__*/ (0, $hsEDv$createContext)(null);
const $e1ab128dc6578df7$var$labelOnly = ':has([slot=label]):not(:has([slot=description]))';
const $e1ab128dc6578df7$var$noIllustration = ':not(:has([slot=illustration]))';
const $e1ab128dc6578df7$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 $e1ab128dc6578df7$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 $e1ab128dc6578df7$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 $e1ab128dc6578df7$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 $e1ab128dc6578df7$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 $e1ab128dc6578df7$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, $hsEDv$useContext)($e1ab128dc6578df7$var$SelectBoxContext);
const isDisabled = individualDisabled || groupDisabled;
const ref = (0, $hsEDv$useRef)(null);
let { isFocusVisible: isFocusVisible } = (0, $hsEDv$useFocusVisible)();
return /*#__PURE__*/ (0, $hsEDv$jsx)((0, $hsEDv$ListBoxItem), {
isDisabled: isDisabled,
ref: ref,
className: (renderProps)=>(UNSAFE_className || '') + $e1ab128dc6578df7$var$selectBoxStyles({
...renderProps,
isFocusVisible: isFocusVisible && renderProps.isFocused,
orientation: orientation
}, styles),
style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(ref, UNSAFE_style),
...otherProps,
children: ({ isSelected: isSelected, isDisabled: isDisabled, isHovered: isHovered, selectionMode: selectionMode })=>{
return /*#__PURE__*/ (0, $hsEDv$jsxs)((0, $hsEDv$Fragment), {
children: [
/*#__PURE__*/ (0, $hsEDv$jsx)("div", {
className: " _Pa1 WJ1 _AI1 _Ob1",
"aria-hidden": "true",
children: !isDisabled && selectionMode === 'multiple' && /*#__PURE__*/ (0, $hsEDv$jsx)("div", {
className: (0, $9b405e0f8095dce0$export$827f4ee28efc37)({
isSelected: isSelected,
isDisabled: isDisabled,
size: 'M'
}),
children: /*#__PURE__*/ (0, $hsEDv$jsx)((0, $81cf3d4588736e7d$export$2e2bcd8739ae039), {
size: "S",
className: (0, $9b405e0f8095dce0$export$2c99b98b77550cb4)
})
})
}),
/*#__PURE__*/ (0, $hsEDv$jsx)((0, $hsEDv$Provider), {
values: [
[
(0, $ac8c32e6775ddd1f$export$207c7561471de4bd),
{
size: 'S',
styles: $e1ab128dc6578df7$var$illustrationContainer({
size: 'S',
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
}
],
[
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
{
slots: {
[(0, $hsEDv$DEFAULT_SLOT)]: {
styles: $e1ab128dc6578df7$var$labelText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
},
label: {
styles: $e1ab128dc6578df7$var$labelText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
},
description: {
styles: $e1ab128dc6578df7$var$descriptionText({
orientation: orientation,
isDisabled: isDisabled,
isHovered: isHovered
})
}
}
}
]
],
children: children
})
]
});
}
});
}
const $e1ab128dc6578df7$export$da87cf13fc2ef3d8 = /*#__PURE__*/ (0, $hsEDv$forwardRef)(function SelectBoxGroup(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $e1ab128dc6578df7$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, $hsEDv$useMemo)(()=>({
orientation: orientation,
isDisabled: isDisabled
}), [
orientation,
isDisabled
]);
return /*#__PURE__*/ (0, $hsEDv$jsx)($e1ab128dc6578df7$var$SelectBoxContext.Provider, {
value: selectBoxContextValue,
children: /*#__PURE__*/ (0, $hsEDv$jsx)((0, $hsEDv$ListBox), {
selectionMode: selectionMode,
layout: "grid",
orientation: orientation,
className: (UNSAFE_className || '') + $e1ab128dc6578df7$var$gridStyles({
orientation: orientation
}, styles),
style: UNSAFE_style,
...otherProps,
children: children
})
});
});
export {$e1ab128dc6578df7$export$cad91f7528e8dc08 as SelectBoxGroupContext, $e1ab128dc6578df7$export$ebde6d4e7862fe9d as SelectBox, $e1ab128dc6578df7$export$da87cf13fc2ef3d8 as SelectBoxGroup};
//# sourceMappingURL=SelectBoxGroup.mjs.map