@react-spectrum/s2
Version:
Spectrum 2 UI components in React
328 lines (314 loc) • 13.9 kB
JavaScript
require("./Disclosure.css");
var $6e265ff388155b91$exports = require("./ActionButton.cjs");
var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
var $1df9f1c9262ce5df$exports = require("./Chevron.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $5FRIp$reactjsxruntime = require("react/jsx-runtime");
var $5FRIp$reactariacomponents = require("react-aria-components");
var $5FRIp$reactariautils = require("@react-aria/utils");
var $5FRIp$react = require("react");
var $5FRIp$reactspectrumutils = require("@react-spectrum/utils");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "DisclosureContext", () => $4e301a98f0cc4e4f$export$d665dd135a51b28a);
$parcel$export(module.exports, "Disclosure", () => $4e301a98f0cc4e4f$export$74a362b31437ec83);
$parcel$export(module.exports, "DisclosureHeader", () => $4e301a98f0cc4e4f$export$1e037ddd32f5b8ac);
$parcel$export(module.exports, "DisclosureTitle", () => $4e301a98f0cc4e4f$export$7843c6a5b3e340a2);
$parcel$export(module.exports, "DisclosurePanel", () => $4e301a98f0cc4e4f$export$feabaa331e1d464c);
/*
* Copyright 2024 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 REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $4e301a98f0cc4e4f$export$d665dd135a51b28a = /*#__PURE__*/ (0, $5FRIp$react.createContext)(null);
const $4e301a98f0cc4e4f$var$disclosure = function anonymous(props, overrides) {
let rules = " ";
let minWidth = 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] === "N") minWidth = true;
rules += p[0];
}
rules += ' po1';
if (props.isQuiet) rules += ' _ka1';
else rules += ' _kb1';
if (props.isInGroup) {
rules += ' ha1';
if (props.isQuiet) rules += ' hka1';
else rules += ' hkb1';
} else if (props.isQuiet) rules += ' ha1';
else rules += ' hb1';
rules += ' ma1';
rules += ' la1';
rules += ' _jf1';
rules += ' ir1';
if (!minWidth) rules += ' Ng1';
return rules;
};
const $4e301a98f0cc4e4f$export$74a362b31437ec83 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function Disclosure(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $4e301a98f0cc4e4f$export$d665dd135a51b28a);
let { size: size = 'M', density: density = 'regular', isQuiet: isQuiet, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
let domRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
let isInGroup = (0, $5FRIp$react.useContext)($4e301a98f0cc4e4f$export$d665dd135a51b28a) !== null;
return /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $5FRIp$reactariacomponents.Provider), {
values: [
[
$4e301a98f0cc4e4f$export$d665dd135a51b28a,
{
size: size,
isQuiet: isQuiet,
density: density
}
]
],
children: /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $5FRIp$reactariacomponents.Disclosure), {
...props,
ref: domRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $4e301a98f0cc4e4f$var$disclosure({
isQuiet: isQuiet,
isInGroup: isInGroup
}, props.styles),
children: props.children
})
});
});
const $4e301a98f0cc4e4f$var$headingStyle = " Jy1 Gy1 Iy1 Hy1 _ub1 sd1 _vb1 Na1";
const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kb1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
if (props.size === "XL") {
rules += ' -_6BNtrc-f1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-e1';
rules += ' vx1';
} else if (props.size === "M") {
rules += ' -_6BNtrc-d1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
}
rules += ' xd1';
rules += ' _xa1';
rules += ' xX0cczbc1';
rules += ' _xX0cczba1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
if (props.isDisabled) {
rules += ' pp1';
rules += ' plc1';
} else {
if (props.isPressed) rules += ' po1';
else if (props.isFocusVisible) rules += ' po1';
else if (props.isHovered) rules += ' po1';
else rules += ' pt1';
rules += ' plb1';
}
rules += ' sd1';
rules += ' _ub1';
rules += ' ea1';
rules += ' S6FcKR1';
rules += ' R6FcKR1';
rules += ' Tu7Fubd1';
rules += ' Qu7Fubd1';
rules += ' U6FcKR1';
rules += ' q6FcKR1';
rules += ' MAyFGYc1';
rules += ' Za1';
if (props.isPressed) rules += ' gnSjEFb1';
else if (props.isHovered) rules += ' gabY4te1';
else if (props.isFocusVisible) rules += ' gabY4te1';
else rules += ' g91';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
rules += ' _kJ8iPYd1';
rules += ' hXMFGYc1';
rules += ' ma1';
rules += ' la1';
if (props.isQuiet) rules += ' ob1';
else if (props.isFocusVisible) rules += ' ob1';
else rules += ' od1';
if (props.isQuiet) rules += ' nb1';
else if (props.isFocusVisible) rules += ' nb1';
else rules += ' nd1';
if (props.isQuiet) rules += ' kb1';
else if (props.isFocusVisible) rules += ' kb1';
else rules += ' kd1';
if (props.isQuiet) rules += ' jb1';
else if (props.isFocusVisible) rules += ' jb1';
else rules += ' jd1';
rules += ' _Wd1';
rules += ' __ca1';
if (props.size === "XL") {
if (props.density === "spacious") rules += ' -M_-Mj1';
else if (props.density === "regular") rules += ' -M_-Mk1';
else if (props.density === "compact") rules += ' -M_-Mh1';
} else if (props.size === "L") {
if (props.density === "spacious") rules += ' -M_-Mk1';
else if (props.density === "regular") rules += ' -M_-Mh1';
else if (props.density === "compact") rules += ' -M_-Mi1';
} else if (props.size === "M") {
if (props.density === "spacious") rules += ' -M_-Mh1';
else if (props.density === "regular") rules += ' -M_-Mi1';
else if (props.density === "compact") rules += ' -M_-Mg1';
} else if (props.size === "S") {
if (props.density === "spacious") rules += ' -M_-Mi1';
else if (props.density === "regular") rules += ' -M_-Mg1';
else if (props.density === "compact") rules += ' -M_-Me1';
}
rules += ' -_k_-_ka1';
rules += ' -h_-ha1';
return rules;
};
const $4e301a98f0cc4e4f$var$chevronStyles = function anonymous(props) {
let rules = " ";
if (props.isExpanded) rules += ' _Sd1';
else if (props.isRTL) rules += ' _Sc1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
rules += ' -_8sjo0b-t5ZbAob1';
rules += ' _va1';
return rules;
};
const $4e301a98f0cc4e4f$var$InternalDisclosureHeader = /*#__PURE__*/ (0, $5FRIp$react.createContext)(null);
function $4e301a98f0cc4e4f$var$DisclosureHeaderWithForwardRef(props, ref) {
let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, children: children } = props;
let domRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
let { size: size, isQuiet: isQuiet, density: density } = (0, $5FRIp$reactariacomponents.useSlottedContext)($4e301a98f0cc4e4f$export$d665dd135a51b28a);
// Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container
let newSize = size;
const sizes = [
'XS',
'S',
'M',
'L',
'XL'
];
const currentIndex = sizes.indexOf(size ?? 'M');
const shift = density === 'compact' ? 2 : 1;
newSize = sizes[Math.max(0, currentIndex - shift)];
return /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $5FRIp$reactariacomponents.Provider), {
values: [
[
(0, $6e265ff388155b91$exports.ActionButtonContext),
{
size: newSize,
isQuiet: isQuiet
}
],
[
$4e301a98f0cc4e4f$var$InternalDisclosureHeader,
{}
]
],
children: /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)("div", {
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + " sd1 eb1 Ub1 qb1",
ref: domRef,
children: children
})
});
}
const $4e301a98f0cc4e4f$export$1e037ddd32f5b8ac = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)($4e301a98f0cc4e4f$var$DisclosureHeaderWithForwardRef);
const $4e301a98f0cc4e4f$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function DisclosureTitle(props, ref) {
let { level: level = 3, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
let domRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
const domProps = (0, $5FRIp$reactariautils.filterDOMProps)(otherProps);
let { direction: direction } = (0, $5FRIp$reactariacomponents.useLocale)();
let { isExpanded: isExpanded } = (0, $5FRIp$react.useContext)((0, $5FRIp$reactariacomponents.DisclosureStateContext));
let { size: size, density: density, isQuiet: isQuiet } = (0, $5FRIp$reactariacomponents.useSlottedContext)($4e301a98f0cc4e4f$export$d665dd135a51b28a);
let isRTL = direction === 'rtl';
let buttonTrigger = /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $5FRIp$reactariacomponents.Heading), {
...domProps,
level: level,
ref: domRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $4e301a98f0cc4e4f$var$headingStyle,
children: /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsxs)((0, $5FRIp$reactariacomponents.Button), {
className: (renderProps)=>$4e301a98f0cc4e4f$var$buttonStyles({
...renderProps,
size: size,
density: density,
isQuiet: isQuiet
}),
slot: "trigger",
children: [
/*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $e991cbcdf82ced71$exports.CenterBaseline), {
children: /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $1df9f1c9262ce5df$exports.default), {
size: size,
className: $4e301a98f0cc4e4f$var$chevronStyles({
isExpanded: isExpanded,
isRTL: isRTL
}),
"aria-hidden": "true"
})
}),
props.children
]
})
});
let ctx = (0, $5FRIp$react.useContext)($4e301a98f0cc4e4f$var$InternalDisclosureHeader);
if (ctx) return buttonTrigger;
return /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)($4e301a98f0cc4e4f$export$1e037ddd32f5b8ac, {
children: buttonTrigger
});
});
const $4e301a98f0cc4e4f$var$panelStyles = " uk1 ucJ9TBTb1 ud3Euai1 uea1 ugb1 uhd1 uje1 u2NhKxcl1 uic1 -_6BNtrc-d1 vx1 xb1 _xa1 _Fb1 _FnuYUwec1 pt1 FfwmW1d1 _Nb1 Pb1 Ysgyfc1 Ydklsgce1 Xb1 Xdklsgcb1 _2b1 _2dklsgcb1";
const $4e301a98f0cc4e4f$var$panelInner = function anonymous(props) {
let rules = " ";
rules += ' Tt1';
rules += ' Qf1';
if (props.size === "XL") rules += ' Sz5EUbe1';
else if (props.size === "L") rules += ' Se1';
else if (props.size === "M") rules += ' SLabwmd1';
else if (props.size === "S") rules += ' St1';
if (props.size === "XL") rules += ' Rz5EUbe1';
else if (props.size === "L") rules += ' Re1';
else if (props.size === "M") rules += ' RLabwmd1';
else if (props.size === "S") rules += ' Rt1';
return rules;
};
const $4e301a98f0cc4e4f$export$feabaa331e1d464c = /*#__PURE__*/ (0, $5FRIp$react.forwardRef)(function DisclosurePanel(props, ref) {
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
const domProps = (0, $5FRIp$reactariautils.filterDOMProps)(otherProps);
let { size: size } = (0, $5FRIp$reactariacomponents.useSlottedContext)($4e301a98f0cc4e4f$export$d665dd135a51b28a);
let panelRef = (0, $5FRIp$reactspectrumutils.useDOMRef)(ref);
return /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)((0, $5FRIp$reactariacomponents.DisclosurePanel), {
...domProps,
ref: panelRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $4e301a98f0cc4e4f$var$panelStyles,
children: /*#__PURE__*/ (0, $5FRIp$reactjsxruntime.jsx)("div", {
className: $4e301a98f0cc4e4f$var$panelInner({
size: size
}),
children: props.children
})
});
});
//# sourceMappingURL=Disclosure.cjs.map