@react-spectrum/s2
Version:
Spectrum 2 UI components in React
340 lines (326 loc) • 14.1 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|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "N") minWidth = true;
rules += p[0];
}
rules += ' po91';
if (props.isQuiet) rules += ' _ka91';
else rules += ' _kb91';
if (props.isInGroup) {
rules += ' ha91';
if (props.isQuiet) rules += ' hka91';
else rules += ' hkb91';
} else if (props.isQuiet) rules += ' ha91';
else rules += ' hb91';
rules += ' ma91';
rules += ' la91';
rules += ' _jf91';
rules += ' ir91';
if (!minWidth) rules += ' Ng91';
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 = " Jy91 Gy91 Iy91 Hy91 _ub91 sd91 _vb91 Na91";
const $4e301a98f0cc4e4f$var$buttonStyles = function anonymous(props) {
let rules = " ";
if (props.isFocusVisible) rules += ' _Lf91';
else rules += ' _Le91';
rules += ' Oh91';
rules += ' _Mc91';
rules += ' _Kb91';
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
if (props.size === "XL") {
rules += ' vi91';
rules += ' vsl91';
} else if (props.size === "L") {
rules += ' vg91';
rules += ' vsj91';
} else if (props.size === "M") {
rules += ' vp91';
rules += ' vsh91';
} else if (props.size === "S") {
rules += ' vd91';
rules += ' vsf91';
}
rules += ' wd91';
rules += ' xd91';
rules += ' _xa91';
rules += ' _Fa91';
rules += ' _Ffb91';
if (props.isDisabled) rules += ' pp91';
else {
if (props.isPressed) rules += ' po91';
else if (props.isFocusVisible) rules += ' po91';
else if (props.isHovered) rules += ' po91';
else rules += ' pt91';
}
rules += ' sd91';
rules += ' _ub91';
rules += ' ea91';
rules += ' S6FcKR91';
rules += ' R6FcKR91';
rules += ' Tu7Fubd91';
rules += ' Qu7Fubd91';
rules += ' U6FcKR91';
rules += ' q6FcKR91';
rules += ' MAyFGYc91';
rules += ' Za91';
if (props.isPressed) rules += ' gnSjEFb91';
else if (props.isHovered) rules += ' gabY4te91';
else if (props.isFocusVisible) rules += ' gabY4te91';
else rules += ' g991';
rules += ' Yd91';
rules += ' Xb91';
rules += ' _2b91';
rules += ' _kJ8iPYd91';
rules += ' hXMFGYc91';
rules += ' ma91';
rules += ' la91';
if (props.isQuiet) rules += ' ob91';
else if (props.isFocusVisible) rules += ' ob91';
else rules += ' od91';
if (props.isQuiet) rules += ' nb91';
else if (props.isFocusVisible) rules += ' nb91';
else rules += ' nd91';
if (props.isQuiet) rules += ' kb91';
else if (props.isFocusVisible) rules += ' kb91';
else rules += ' kd91';
if (props.isQuiet) rules += ' jb91';
else if (props.isFocusVisible) rules += ' jb91';
else rules += ' jd91';
rules += ' _Wd91';
rules += ' __ca91';
if (props.size === "XL") {
if (props.density === "spacious") rules += ' -M_-Mj91';
else if (props.density === "regular") rules += ' -M_-Mk91';
else if (props.density === "compact") rules += ' -M_-Mh91';
} else if (props.size === "L") {
if (props.density === "spacious") rules += ' -M_-Mk91';
else if (props.density === "regular") rules += ' -M_-Mh91';
else if (props.density === "compact") rules += ' -M_-Mi91';
} else if (props.size === "M") {
if (props.density === "spacious") rules += ' -M_-Mh91';
else if (props.density === "regular") rules += ' -M_-Mi91';
else if (props.density === "compact") rules += ' -M_-Mg91';
} else if (props.size === "S") {
if (props.density === "spacious") rules += ' -M_-Mi91';
else if (props.density === "regular") rules += ' -M_-Mg91';
else if (props.density === "compact") rules += ' -M_-Me91';
}
rules += ' -_k_-_ka91';
rules += ' -h_-ha91';
return rules;
};
const $4e301a98f0cc4e4f$var$chevronStyles = function anonymous(props) {
let rules = " ";
if (props.isExpanded) rules += ' _Sd91';
else if (props.isRTL) rules += ' _Sc91';
rules += ' Yd91';
rules += ' Xb91';
rules += ' _2b91';
rules += ' -_8sjo0b-t5ZbAob91';
rules += ' _va91';
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 ?? '') + " sd91 eb91 Ub91 qb91",
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 = function anonymous(props) {
let rules = " ";
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
rules += ' vp91';
rules += ' vsh91';
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
rules += ' _Fb91';
rules += ' _Ffc91';
rules += ' pt91';
if (props.isExpanded) rules += ' Tt91';
if (props.isExpanded) rules += ' Qf91';
if (props.isExpanded) {
if (props.size === "XL") rules += ' Sz5EUbe91';
else if (props.size === "L") rules += ' Se91';
else if (props.size === "M") rules += ' SLabwmd91';
else if (props.size === "S") rules += ' St91';
}
if (props.isExpanded) {
if (props.size === "XL") rules += ' Rz5EUbe91';
else if (props.size === "L") rules += ' Re91';
else if (props.size === "M") rules += ' RLabwmd91';
else if (props.size === "S") rules += ' Rt91';
}
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 { isExpanded: isExpanded } = (0, $5FRIp$react.useContext)((0, $5FRIp$reactariacomponents.DisclosureStateContext));
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({
size: size,
isExpanded: isExpanded
}),
children: props.children
});
});
//# sourceMappingURL=Disclosure.cjs.map