@react-spectrum/s2
Version:
Spectrum 2 UI components in React
206 lines (198 loc) • 8.16 kB
JavaScript
import "./Tooltip.css";
import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
import {jsx as $iNhwA$jsx, jsxs as $iNhwA$jsxs, Fragment as $iNhwA$Fragment} from "react/jsx-runtime";
import {useLocale as $iNhwA$useLocale, Tooltip as $iNhwA$Tooltip, OverlayArrow as $iNhwA$OverlayArrow, TooltipTrigger as $iNhwA$TooltipTrigger} from "react-aria-components";
import {createContext as $iNhwA$createContext, forwardRef as $iNhwA$forwardRef, useContext as $iNhwA$useContext, useState as $iNhwA$useState, useCallback as $iNhwA$useCallback} from "react";
import {useDOMRef as $iNhwA$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 $4c20647d6e5d8fdf$var$tooltip = function anonymous(props) {
let rules = " ";
if (props.colorScheme === "dark") rules += ' _pa1';
else if (props.colorScheme === "light") rules += ' _pb1';
else if (props.colorScheme === "light dark") rules += ' _pc1';
else rules += ' _pN79Hzc1';
rules += ' _Ca1';
rules += ' eb1';
rules += ' Le1';
rules += ' MAyFGYc1';
rules += ' _oa1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
rules += ' -_6BNtrc-b1';
rules += ' vx1';
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
rules += ' pr1';
rules += ' plb1';
rules += ' _kJ8iPYd1';
rules += ' hXMFGYc1';
rules += ' mlb1';
rules += ' llb1';
rules += ' _jlf1';
rules += ' ilA1';
rules += ' g01';
rules += ' ob1';
rules += ' nb1';
rules += ' kb1';
rules += ' jb1';
rules += ' Sv1';
rules += ' Rv1';
rules += ' Tu7Fubd1';
rules += ' Qu7Fubd1';
rules += ' Yd1';
rules += ' Xc1';
if (props.isExiting) rules += ' _2c1';
if (props.placement === "right") {
if (props.isExiting) {
rules += ' -_7PloMd-m1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_7PloMd-m1';
rules += ' __Ya1';
}
} else if (props.placement === "left") {
if (props.isExiting) {
rules += ' -_7PloMd-G1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_7PloMd-G1';
rules += ' __Ya1';
}
}
if (props.placement === "bottom") {
if (props.isExiting) {
rules += ' -_8PloMd-l1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_8PloMd-l1';
rules += ' __Ya1';
}
} else if (props.placement === "top") {
if (props.isExiting) {
rules += ' -_8PloMd-F1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_8PloMd-F1';
rules += ' __Ya1';
}
}
if (props.isExiting) rules += ' _Ia1';
else if (props.isEntering) rules += ' _Ia1';
rules += ' -nTSCV-LTAEPe1';
rules += ' -M_-Mg1';
rules += ' -_k_-l_kb1';
rules += ' -h_-lhb1';
return rules;
};
const $4c20647d6e5d8fdf$var$arrowStyles = function anonymous(props) {
let rules = " ";
rules += ' sb1';
rules += ' tr1';
rules += ' Zi1';
rules += ' Ff1';
if (props.placement === "right") rules += ' _Sd1';
else if (props.placement === "left") rules += ' _Sa1';
else if (props.placement === "bottom") rules += ' _Sc1';
else if (props.placement === "top") rules += ' _Sb1';
if (props.placement === "right") {
rules += ' -_7PloMd-y1';
rules += ' __Ya1';
} else if (props.placement === "left") {
rules += ' -_7PloMd-e1';
rules += ' __Ya1';
}
return rules;
};
let $4c20647d6e5d8fdf$var$InternalTooltipTriggerContext = /*#__PURE__*/ (0, $iNhwA$createContext)({});
const $4c20647d6e5d8fdf$export$28c660c63b792dea = /*#__PURE__*/ (0, $iNhwA$forwardRef)(function Tooltip(props, ref) {
let { children: children, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
let domRef = (0, $iNhwA$useDOMRef)(ref);
let { containerPadding: containerPadding, crossOffset: crossOffset, placement: placement = 'top', shouldFlip: shouldFlip } = (0, $iNhwA$useContext)($4c20647d6e5d8fdf$var$InternalTooltipTriggerContext);
let colorScheme = (0, $iNhwA$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
let { locale: locale, direction: direction } = (0, $iNhwA$useLocale)();
let [borderRadius, setBorderRadius] = (0, $iNhwA$useState)(0);
// TODO: should we pass through lang and dir props in RAC?
let tooltipRef = (0, $iNhwA$useCallback)((el)=>{
domRef.current = el;
if (el) {
el.lang = locale;
el.dir = direction;
let spectrumBorderRadius = typeof window !== 'undefined' ? window.getComputedStyle(el).borderRadius : '';
if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
}
}, [
locale,
direction,
domRef
]);
return /*#__PURE__*/ (0, $iNhwA$jsx)((0, $iNhwA$Tooltip), {
...props,
arrowBoundaryOffset: borderRadius,
containerPadding: containerPadding,
crossOffset: crossOffset,
offset: 9,
placement: placement,
shouldFlip: shouldFlip,
ref: tooltipRef,
style: UNSAFE_style,
className: (renderProps)=>UNSAFE_className + $4c20647d6e5d8fdf$var$tooltip({
...renderProps,
colorScheme: colorScheme
}),
children: (renderProps)=>/*#__PURE__*/ (0, $iNhwA$jsxs)((0, $iNhwA$Fragment), {
children: [
/*#__PURE__*/ (0, $iNhwA$jsx)((0, $iNhwA$OverlayArrow), {
className: "",
children: /*#__PURE__*/ (0, $iNhwA$jsx)("svg", {
className: $4c20647d6e5d8fdf$var$arrowStyles(renderProps),
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 10 5",
children: /*#__PURE__*/ (0, $iNhwA$jsx)("path", {
d: "M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z"
})
})
}),
children
]
})
});
});
function $4c20647d6e5d8fdf$export$8c610744efcf8a1d(props) {
let { containerPadding: containerPadding, crossOffset: crossOffset, placement: placement, shouldFlip: shouldFlip, ...triggerProps } = props;
return /*#__PURE__*/ (0, $iNhwA$jsx)((0, $iNhwA$TooltipTrigger), {
...triggerProps,
children: /*#__PURE__*/ (0, $iNhwA$jsx)($4c20647d6e5d8fdf$var$InternalTooltipTriggerContext.Provider, {
value: {
containerPadding: containerPadding,
crossOffset: crossOffset,
placement: placement,
shouldFlip: shouldFlip
},
children: props.children
})
});
}
function $4c20647d6e5d8fdf$export$92ee03cda75aac2b(props) {
return /*#__PURE__*/ (0, $iNhwA$jsx)("div", {});
}
export {$4c20647d6e5d8fdf$export$28c660c63b792dea as Tooltip, $4c20647d6e5d8fdf$export$8c610744efcf8a1d as TooltipTrigger, $4c20647d6e5d8fdf$export$92ee03cda75aac2b as CombinedTooltip};
//# sourceMappingURL=Tooltip.mjs.map