@react-spectrum/s2
Version:
Spectrum 2 UI components in React
149 lines (136 loc) • 6.03 kB
JavaScript
import "./CloseButton.css";
import $bd983341bd35d639$export$2e2bcd8739ae039 from "./Cross.mjs";
import $5wH0g$intlStringsmjs from "./intlStrings.mjs";
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $5wH0g$jsx} from "react/jsx-runtime";
import {Button as $5wH0g$Button} from "react-aria-components";
import {createContext as $5wH0g$createContext, forwardRef as $5wH0g$forwardRef} from "react";
import {useFocusableRef as $5wH0g$useFocusableRef} from "@react-spectrum/utils";
import {useLocalizedStringFormatter as $5wH0g$useLocalizedStringFormatter} from "@react-aria/i18n";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
/*
* 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 $a9cda54c4f47ce52$var$hoverBackground = {
default: 'gray-200',
isStaticColor: 'transparent-overlay-200'
};
const $a9cda54c4f47ce52$var$styles = function anonymous(props, overrides) {
let rules = " ";
let width = false;
let flexShrink = 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] === "Z") width = true;
if (p[1] === "_v") flexShrink = true;
rules += p[0];
}
if (props.isFocusVisible) rules += ' _Lf1';
else rules += ' _Le1';
if (props.isStaticColor) rules += ' Oe1';
else rules += ' Oh1';
rules += ' Olc1';
rules += ' _Mc1';
rules += ' _Kd1';
if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr1';
else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s1';
rules += ' sd1';
rules += ' eb1';
rules += ' _Ca1';
if (props.size === "XL") {
if (!width) rules += ' ZF1';
} else if (props.size === "L") {
if (!width) rules += ' Zw1';
} else if (props.size === "S") {
if (!width) rules += ' Zo1';
} else if (props.size === "XS") {
if (!width) rules += ' Zm1';
} else if (!width) rules += ' ZC1';
if (props.size === "XL") rules += ' Fz1';
else if (props.size === "L") rules += ' Fv1';
else if (props.size === "S") rules += ' Fp1';
else if (props.size === "XS") rules += ' Fn1';
else rules += ' Fx1';
if (!flexShrink) rules += ' _va1';
rules += ' og1';
rules += ' ng1';
rules += ' kg1';
rules += ' jg1';
rules += ' Td1';
rules += ' Qd1';
rules += ' Sd1';
rules += ' Rd1';
rules += ' _je1';
rules += ' Yd1';
rules += ' Xb1';
rules += ' _2b1';
if (props.isPressed) {
if (props.isStaticColor) rules += ' gg1';
else rules += ' gF1';
} else if (props.isFocusVisible) {
if (props.isStaticColor) rules += ' gg1';
else rules += ' gF1';
} else if (props.isHovered) {
if (props.isStaticColor) rules += ' gg1';
else rules += ' gF1';
} else rules += ' g91';
if (props.isStaticColor) {
if (props.isDisabled) rules += ' -_8sjo0b-pi1';
else {
if (props.isPressed) rules += ' -_8sjo0b-pk1';
else if (props.isFocusVisible) rules += ' -_8sjo0b-pk1';
else if (props.isHovered) rules += ' -_8sjo0b-pk1';
else rules += ' -_8sjo0b-pj1';
}
} else 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';
}
if (props.isDisabled) rules += ' -_8sjo0b-lpc1';
else rules += ' -_8sjo0b-lpb1';
rules += ' __ca1';
return rules;
};
const $a9cda54c4f47ce52$export$c796eec99a15b55d = /*#__PURE__*/ (0, $5wH0g$createContext)(null);
const $a9cda54c4f47ce52$export$de65de8213222d10 = /*#__PURE__*/ (0, $5wH0g$forwardRef)(function CloseButton(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $a9cda54c4f47ce52$export$c796eec99a15b55d);
let { UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
let domRef = (0, $5wH0g$useFocusableRef)(ref);
let stringFormatter = (0, $5wH0g$useLocalizedStringFormatter)((0, ($parcel$interopDefault($5wH0g$intlStringsmjs))), '@react-spectrum/s2');
return /*#__PURE__*/ (0, $5wH0g$jsx)((0, $5wH0g$Button), {
...props,
ref: domRef,
slot: "close",
"aria-label": props['aria-label'] || stringFormatter.format('dialog.dismiss'),
style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(domRef, UNSAFE_style),
className: (renderProps)=>UNSAFE_className + $a9cda54c4f47ce52$var$styles({
...renderProps,
staticColor: props.staticColor,
isStaticColor: !!props.staticColor
}, props.styles),
children: /*#__PURE__*/ (0, $5wH0g$jsx)((0, $bd983341bd35d639$export$2e2bcd8739ae039), {
size: {
S: 'L',
M: 'XL',
L: 'XXL',
XL: 'XXXL'
}[props.size || 'M']
})
});
});
export {$a9cda54c4f47ce52$export$c796eec99a15b55d as CloseButtonContext, $a9cda54c4f47ce52$export$de65de8213222d10 as CloseButton};
//# sourceMappingURL=CloseButton.mjs.map