@react-spectrum/s2
Version:
Spectrum 2 UI components in React
319 lines (307 loc) • 13.5 kB
JavaScript
import "./Disclosure.css";
import {ActionButtonContext as $da878a05ab4a403e$export$2ff682723a46d413} from "./ActionButton.mjs";
import {CenterBaseline as $1f4b04be3f24aae3$export$768dac55bb57081d} from "./CenterBaseline.mjs";
import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $7VHtn$jsx, jsxs as $7VHtn$jsxs} from "react/jsx-runtime";
import {Provider as $7VHtn$Provider, Disclosure as $7VHtn$Disclosure, useSlottedContext as $7VHtn$useSlottedContext, useLocale as $7VHtn$useLocale, DisclosureStateContext as $7VHtn$DisclosureStateContext, Heading as $7VHtn$Heading, Button as $7VHtn$Button, DisclosurePanel as $7VHtn$DisclosurePanel} from "react-aria-components";
import {filterDOMProps as $7VHtn$filterDOMProps} from "@react-aria/utils";
import {createContext as $7VHtn$createContext, forwardRef as $7VHtn$forwardRef, useContext as $7VHtn$useContext} from "react";
import {useDOMRef as $7VHtn$useDOMRef} from "@react-spectrum/utils";
/*
* 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 $cf1d656285911959$export$d665dd135a51b28a = /*#__PURE__*/ (0, $7VHtn$createContext)(null);
const $cf1d656285911959$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 $cf1d656285911959$export$74a362b31437ec83 = /*#__PURE__*/ (0, $7VHtn$forwardRef)(function Disclosure(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $cf1d656285911959$export$d665dd135a51b28a);
let { size: size = 'M', density: density = 'regular', isQuiet: isQuiet, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
let domRef = (0, $7VHtn$useDOMRef)(ref);
let isInGroup = (0, $7VHtn$useContext)($cf1d656285911959$export$d665dd135a51b28a) !== null;
return /*#__PURE__*/ (0, $7VHtn$jsx)((0, $7VHtn$Provider), {
values: [
[
$cf1d656285911959$export$d665dd135a51b28a,
{
size: size,
isQuiet: isQuiet,
density: density
}
]
],
children: /*#__PURE__*/ (0, $7VHtn$jsx)((0, $7VHtn$Disclosure), {
...props,
ref: domRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $cf1d656285911959$var$disclosure({
isQuiet: isQuiet,
isInGroup: isInGroup
}, props.styles),
children: props.children
})
});
});
const $cf1d656285911959$var$headingStyle = " Jy1 Gy1 Iy1 Hy1 _ub1 sd1 _vb1 Na1";
const $cf1d656285911959$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 $cf1d656285911959$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 $cf1d656285911959$var$InternalDisclosureHeader = /*#__PURE__*/ (0, $7VHtn$createContext)(null);
function $cf1d656285911959$var$DisclosureHeaderWithForwardRef(props, ref) {
let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, children: children } = props;
let domRef = (0, $7VHtn$useDOMRef)(ref);
let { size: size, isQuiet: isQuiet, density: density } = (0, $7VHtn$useSlottedContext)($cf1d656285911959$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, $7VHtn$jsx)((0, $7VHtn$Provider), {
values: [
[
(0, $da878a05ab4a403e$export$2ff682723a46d413),
{
size: newSize,
isQuiet: isQuiet
}
],
[
$cf1d656285911959$var$InternalDisclosureHeader,
{}
]
],
children: /*#__PURE__*/ (0, $7VHtn$jsx)("div", {
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + " sd1 eb1 Ub1 qb1",
ref: domRef,
children: children
})
});
}
const $cf1d656285911959$export$1e037ddd32f5b8ac = /*#__PURE__*/ (0, $7VHtn$forwardRef)($cf1d656285911959$var$DisclosureHeaderWithForwardRef);
const $cf1d656285911959$export$7843c6a5b3e340a2 = /*#__PURE__*/ (0, $7VHtn$forwardRef)(function DisclosureTitle(props, ref) {
let { level: level = 3, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
let domRef = (0, $7VHtn$useDOMRef)(ref);
const domProps = (0, $7VHtn$filterDOMProps)(otherProps);
let { direction: direction } = (0, $7VHtn$useLocale)();
let { isExpanded: isExpanded } = (0, $7VHtn$useContext)((0, $7VHtn$DisclosureStateContext));
let { size: size, density: density, isQuiet: isQuiet } = (0, $7VHtn$useSlottedContext)($cf1d656285911959$export$d665dd135a51b28a);
let isRTL = direction === 'rtl';
let buttonTrigger = /*#__PURE__*/ (0, $7VHtn$jsx)((0, $7VHtn$Heading), {
...domProps,
level: level,
ref: domRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $cf1d656285911959$var$headingStyle,
children: /*#__PURE__*/ (0, $7VHtn$jsxs)((0, $7VHtn$Button), {
className: (renderProps)=>$cf1d656285911959$var$buttonStyles({
...renderProps,
size: size,
density: density,
isQuiet: isQuiet
}),
slot: "trigger",
children: [
/*#__PURE__*/ (0, $7VHtn$jsx)((0, $1f4b04be3f24aae3$export$768dac55bb57081d), {
children: /*#__PURE__*/ (0, $7VHtn$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
size: size,
className: $cf1d656285911959$var$chevronStyles({
isExpanded: isExpanded,
isRTL: isRTL
}),
"aria-hidden": "true"
})
}),
props.children
]
})
});
let ctx = (0, $7VHtn$useContext)($cf1d656285911959$var$InternalDisclosureHeader);
if (ctx) return buttonTrigger;
return /*#__PURE__*/ (0, $7VHtn$jsx)($cf1d656285911959$export$1e037ddd32f5b8ac, {
children: buttonTrigger
});
});
const $cf1d656285911959$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 $cf1d656285911959$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 $cf1d656285911959$export$feabaa331e1d464c = /*#__PURE__*/ (0, $7VHtn$forwardRef)(function DisclosurePanel(props, ref) {
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', ...otherProps } = props;
const domProps = (0, $7VHtn$filterDOMProps)(otherProps);
let { size: size } = (0, $7VHtn$useSlottedContext)($cf1d656285911959$export$d665dd135a51b28a);
let panelRef = (0, $7VHtn$useDOMRef)(ref);
return /*#__PURE__*/ (0, $7VHtn$jsx)((0, $7VHtn$DisclosurePanel), {
...domProps,
ref: panelRef,
style: UNSAFE_style,
className: (UNSAFE_className ?? '') + $cf1d656285911959$var$panelStyles,
children: /*#__PURE__*/ (0, $7VHtn$jsx)("div", {
className: $cf1d656285911959$var$panelInner({
size: size
}),
children: props.children
})
});
});
export {$cf1d656285911959$export$d665dd135a51b28a as DisclosureContext, $cf1d656285911959$export$74a362b31437ec83 as Disclosure, $cf1d656285911959$export$1e037ddd32f5b8ac as DisclosureHeader, $cf1d656285911959$export$7843c6a5b3e340a2 as DisclosureTitle, $cf1d656285911959$export$feabaa331e1d464c as DisclosurePanel};
//# sourceMappingURL=Disclosure.mjs.map