@react-spectrum/s2
Version:
Spectrum 2 UI components in React
331 lines (319 loc) • 13.8 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|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 $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 = " Jy91 Gy91 Iy91 Hy91 _ub91 sd91 _vb91 Na91";
const $cf1d656285911959$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 $cf1d656285911959$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 $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 ?? '') + " sd91 eb91 Ub91 qb91",
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 = 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 $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 { isExpanded: isExpanded } = (0, $7VHtn$useContext)((0, $7VHtn$DisclosureStateContext));
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({
size: size,
isExpanded: isExpanded
}),
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