@react-spectrum/s2
Version:
Spectrum 2 UI components in React
209 lines (201 loc) • 8.3 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 += ' _pa91';
else if (props.colorScheme === "light") rules += ' _pb91';
else if (props.colorScheme === "light dark") rules += ' _pc91';
else rules += ' _pN79Hzc91';
rules += ' _Ca91';
rules += ' eb91';
rules += ' Le91';
rules += ' MAyFGYc91';
rules += ' _oa91';
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
rules += ' vb91';
rules += ' vse91';
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
rules += ' _Fa91';
rules += ' _Ffb91';
rules += ' pr91';
rules += ' plb91';
rules += ' _kJ8iPYd91';
rules += ' hXMFGYc91';
rules += ' mlb91';
rules += ' llb91';
rules += ' _jlf91';
rules += ' ilA91';
rules += ' g091';
rules += ' ob91';
rules += ' nb91';
rules += ' kb91';
rules += ' jb91';
rules += ' Sv91';
rules += ' Rv91';
rules += ' Tu7Fubd91';
rules += ' Qu7Fubd91';
rules += ' Jv91';
rules += ' Gv91';
rules += ' Iv91';
rules += ' Hv91';
rules += ' Yd91';
rules += ' Xc91';
if (props.isExiting) rules += ' _2c91';
if (props.placement === "right") {
if (props.isExiting) {
rules += ' -_7PloMd-m91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_7PloMd-m91';
rules += ' __Ya91';
}
} else if (props.placement === "left") {
if (props.isExiting) {
rules += ' -_7PloMd-G91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_7PloMd-G91';
rules += ' __Ya91';
}
}
if (props.placement === "bottom") {
if (props.isExiting) {
rules += ' -_8PloMd-l91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_8PloMd-l91';
rules += ' __Ya91';
}
} else if (props.placement === "top") {
if (props.isExiting) {
rules += ' -_8PloMd-F91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_8PloMd-F91';
rules += ' __Ya91';
}
}
if (props.isExiting) rules += ' _Ia91';
else if (props.isEntering) rules += ' _Ia91';
rules += ' -M_-Mg91';
rules += ' -_k_-l_kb91';
rules += ' -h_-lhb91';
return rules;
};
const $4c20647d6e5d8fdf$var$arrowStyles = function anonymous(props) {
let rules = " ";
rules += ' sb91';
rules += ' tr91';
rules += ' Zi91';
rules += ' Ff91';
if (props.placement === "right") rules += ' _Sd91';
else if (props.placement === "left") rules += ' _Sa91';
else if (props.placement === "bottom") rules += ' _Sc91';
else if (props.placement === "top") rules += ' _Sb91';
if (props.placement === "right") {
rules += ' -_7PloMd-y91';
rules += ' __Ya91';
} else if (props.placement === "left") {
rules += ' -_7PloMd-e91';
rules += ' __Ya91';
}
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, offset: offset, 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: offset,
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), {
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, offset: offset, 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,
offset: offset,
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