@react-spectrum/s2
Version:
Spectrum 2 UI components in React
215 lines (205 loc) • 8.37 kB
JavaScript
require("./Tooltip.css");
var $914a06b3a1c679bc$exports = require("./Provider.cjs");
var $8KZCJ$reactjsxruntime = require("react/jsx-runtime");
var $8KZCJ$reactariacomponents = require("react-aria-components");
var $8KZCJ$react = require("react");
var $8KZCJ$reactspectrumutils = require("@react-spectrum/utils");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "Tooltip", () => $d3b6a84aebe66f8d$export$28c660c63b792dea);
$parcel$export(module.exports, "TooltipTrigger", () => $d3b6a84aebe66f8d$export$8c610744efcf8a1d);
/*
* 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 $d3b6a84aebe66f8d$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 $d3b6a84aebe66f8d$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 $d3b6a84aebe66f8d$var$InternalTooltipTriggerContext = /*#__PURE__*/ (0, $8KZCJ$react.createContext)({});
const $d3b6a84aebe66f8d$export$28c660c63b792dea = /*#__PURE__*/ (0, $8KZCJ$react.forwardRef)(function Tooltip(props, ref) {
let { children: children, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
let domRef = (0, $8KZCJ$reactspectrumutils.useDOMRef)(ref);
let { containerPadding: containerPadding, crossOffset: crossOffset, offset: offset, placement: placement = 'top', shouldFlip: shouldFlip } = (0, $8KZCJ$react.useContext)($d3b6a84aebe66f8d$var$InternalTooltipTriggerContext);
let colorScheme = (0, $8KZCJ$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
let { locale: locale, direction: direction } = (0, $8KZCJ$reactariacomponents.useLocale)();
let [borderRadius, setBorderRadius] = (0, $8KZCJ$react.useState)(0);
// TODO: should we pass through lang and dir props in RAC?
let tooltipRef = (0, $8KZCJ$react.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, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.Tooltip), {
...props,
arrowBoundaryOffset: borderRadius,
containerPadding: containerPadding,
crossOffset: crossOffset,
offset: offset,
placement: placement,
shouldFlip: shouldFlip,
ref: tooltipRef,
style: UNSAFE_style,
className: (renderProps)=>UNSAFE_className + $d3b6a84aebe66f8d$var$tooltip({
...renderProps,
colorScheme: colorScheme
}),
children: (renderProps)=>/*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsxs)((0, $8KZCJ$reactjsxruntime.Fragment), {
children: [
/*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.OverlayArrow), {
children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("svg", {
className: $d3b6a84aebe66f8d$var$arrowStyles(renderProps),
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 10 5",
children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("path", {
d: "M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z"
})
})
}),
children
]
})
});
});
function $d3b6a84aebe66f8d$export$8c610744efcf8a1d(props) {
let { containerPadding: containerPadding, crossOffset: crossOffset, offset: offset, placement: placement, shouldFlip: shouldFlip, ...triggerProps } = props;
return /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)((0, $8KZCJ$reactariacomponents.TooltipTrigger), {
...triggerProps,
children: /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)($d3b6a84aebe66f8d$var$InternalTooltipTriggerContext.Provider, {
value: {
containerPadding: containerPadding,
crossOffset: crossOffset,
offset: offset,
placement: placement,
shouldFlip: shouldFlip
},
children: props.children
})
});
}
function $d3b6a84aebe66f8d$export$92ee03cda75aac2b(props) {
return /*#__PURE__*/ (0, $8KZCJ$reactjsxruntime.jsx)("div", {});
}
//# sourceMappingURL=Tooltip.cjs.map