@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.
92 lines (91 loc) • 4.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _react2 = require("@floating-ui/react");
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
var _keyMaps = _interopRequireDefault(require("../../common/keyMaps"));
var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
const getCrossAxis = (inlineLabel, isDesktop) => {
if (inlineLabel) return -6;
if (isDesktop) return -8;
return -4;
};
const ErrorFormTooltip = ({
onShown,
dataTest,
children,
shown,
referenceElement,
inlineLabel,
isHelp = false,
id
}) => {
const contentRef = React.useRef(null);
const {
isDesktop
} = (0, _useMediaQuery.default)();
const {
refs,
floatingStyles,
elements
} = (0, _react2.useFloating)({
placement: "top-start",
whileElementsMounted: _react2.autoUpdate,
onOpenChange: onShown,
elements: {
reference: referenceElement?.current
},
middleware: [(0, _react2.offset)({
mainAxis: 3,
crossAxis: getCrossAxis(inlineLabel, isDesktop)
})]
});
(0, _useClickOutside.default)(refs.floating, () => {
onShown(false);
});
React.useEffect(() => {
const link = elements.floating?.querySelector("a");
const handleTab = ev => {
if (isHelp) return;
if (ev.keyCode === _keyMaps.default.TAB && link) {
onShown(true);
if (document.activeElement === link) {
onShown(false);
}
} else {
onShown(false);
}
};
window.addEventListener("keydown", handleTab);
return () => {
window.removeEventListener("keydown", handleTab);
};
}, [onShown, isHelp, elements.floating]);
const cssVars = {
"--error-form-tooltip-position": floatingStyles.position,
"--error-form-tooltip-top": floatingStyles.top,
"--error-form-tooltip-left": floatingStyles.left,
"--error-form-tooltip-right": floatingStyles.right,
"--error-form-tooltip-bottom": floatingStyles.bottom,
"--error-form-tooltip-transform": floatingStyles.transform
};
return /*#__PURE__*/React.createElement("div", {
id: id,
ref: refs.setFloating,
"aria-live": "polite",
"aria-hidden": !shown,
"data-test": dataTest,
className: (0, _clsx.default)("flex justify-between overflow-visible", "rounded-300 py-200 px-300 z-10 box-border", "max-h-none w-[min(calc(100%-20px),_100vw)]", isHelp ? "pe-300 bg-blue-normal" : "bg-red-normal", shown ? "visible opacity-100" : "invisible opacity-0", "duration-fast transition-[opacity,visibility] ease-in-out", "bottom-[var(--error-form-tooltip-bottom)] left-[var(--error-form-tooltip-left)] right-[var(--error-form-tooltip-right)] top-[var(--error-form-tooltip-top)] [position:var(--error-form-tooltip-position)] [transform:var(--error-form-tooltip-transform)]", "lm:w-auto", "[&>img]:max-w-full"),
style: cssVars
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("start-200 bottom-50 absolute rtl:start-0", inlineLabel && "rtl:start-0", isHelp ? "before:bg-blue-normal" : "before:bg-red-normal", "before:size-200 before:absolute before:rotate-45", "before:-translate-y-1/2 before:translate-x-1/2", "rtl:before:-translate-x-300")
}), /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("font-base text-normal text-white-normal flex h-full items-center font-normal leading-normal", "[&_.orbit-text]:text-white-normal [&_.orbit-text]:text-normal hover:[&_.orbit-text]:text-white-normal focus:[&_.orbit-text]:text-white-normal [&_.orbit-text]:font-normal", "[&_.orbit-list-item]:text-white-normal [&_.orbit-list-item]:text-normal hover:[&_.orbit-list-item]:text-white-normal focus:[&_.orbit-list-item]:text-white-normal [&_.orbit-list-item]:font-normal", "[&_a]:text-white-normal [&_a]:text-normal hover:[&_a]:text-white-normal focus:[&_a]:text-white-normal [&_a]:font-normal"),
ref: contentRef
}, children));
};
var _default = exports.default = ErrorFormTooltip;