@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
108 lines (107 loc) • 3.96 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.TooltipWrapper = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Portal = _interopRequireDefault(require("../../Portal"));
var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));
var _TooltipContent = _interopRequireDefault(require("./components/TooltipContent"));
var _useStateWithTimeout = _interopRequireDefault(require("../../hooks/useStateWithTimeout"));
const TooltipWrapper = /*#__PURE__*/React.forwardRef(({
block,
enabled,
removeUnderlinedText,
...props
}, ref) => {
return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
className: (0, _clsx.default)("orbit-tooltip-wrapper", "max-w-full cursor-auto", "focus:outline-none active:outline-none [&_:disabled]:pointer-events-none", block ? "flex" : "inline-flex", enabled && !removeUnderlinedText && "[&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-current [&_.orbit-text]:decoration-dotted"),
ref: ref,
role: "button"
}, props));
});
exports.TooltipWrapper = TooltipWrapper;
const TooltipPrimitive = ({
children,
enabled = true,
tooltipShown,
tabIndex = "0",
onShow,
dataTest,
id,
renderInPortal = true,
size = "small",
content,
error,
help,
stopPropagation = false,
removeUnderlinedText,
block = false,
...popper
}) => {
const [shown, setShown] = React.useState(false);
const [referenceElement, setReferenceElement] = React.useState(null);
const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = (0, _useStateWithTimeout.default)(false, 200);
const tooltipId = (0, _useRandomId.default)();
const handleIn = React.useCallback(() => {
setRender(true);
setShown(true);
if (onShow) onShow();
clearRenderTimeout();
}, [clearRenderTimeout, setRender, onShow]);
const handleOut = React.useCallback(() => {
setShown(false);
setRenderWithTimeout(false);
}, [setRenderWithTimeout]);
const handleClick = React.useCallback(ev => {
if (stopPropagation) {
ev.stopPropagation();
}
}, [stopPropagation]);
React.useEffect(() => {
if (tooltipShown) {
handleIn();
} else {
handleOut();
}
}, [tooltipShown, handleIn, handleOut]);
const handleOutMobile = React.useCallback(() => {
setRenderWithTimeout(false);
}, [setRenderWithTimeout]);
if (!enabled) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
const tooltip = /*#__PURE__*/React.createElement(_TooltipContent.default, (0, _extends2.default)({
parent: children,
dataTest: dataTest,
id: id,
shown: shown,
size: size,
error: error,
help: help,
tooltipId: id || tooltipId,
onClick: handleClick,
onClose: handleOut,
onCloseMobile: handleOutMobile,
onEnter: handleIn
}, popper, {
referenceElement: referenceElement
}), content);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
onMouseEnter: handleIn,
onMouseLeave: handleOut,
onClick: handleClick,
onFocus: handleIn,
onBlur: handleOut,
ref: setReferenceElement,
"aria-describedby": enabled ? id || tooltipId : undefined,
tabIndex: enabled ? Number(tabIndex) : undefined,
enabled: enabled,
removeUnderlinedText: removeUnderlinedText,
block: block
}, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(_Portal.default, {
renderInto: "tooltips"
}, tooltip) : tooltip));
};
var _default = TooltipPrimitive;
exports.default = _default;