@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
142 lines • 7.48 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = exports.TooltipUnControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
const useScrollDetectionWithAutoFocus_1 = require("../../hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const useSwipeDown_1 = require("../../hooks/useSwipeDown/useSwipeDown");
const useTrapFocus_1 = require("../../hooks/useTrapFocus/useTrapFocus");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const useTooltip_1 = require("./hooks/useTooltip");
const useTooltipAsModal_1 = require("./hooks/useTooltipAsModal");
const tooltipStandAlone_1 = require("./tooltipStandAlone");
const TooltipUnControlledComponent = react_1.default.forwardRef(({ ctv, tooltipAsModal, onOpenClose, variant, tooltipAriaLabel, ...props }, ref) => {
const styles = (0, useStyles_1.useStyles)(stylesName_1.STYLES_NAME.TOOLTIP, variant, ctv);
const mediaDevice = (0, useMediaDevice_1.useMediaDevice)();
const labelRef = react_1.default.useRef(null);
const tooltipRef = react_1.default.useRef(null);
const tooltipAsModalValue = (0, useTooltipAsModal_1.useTooltipAsModal)({
propTooltipAsModal: tooltipAsModal,
styleTooltipAsModal: styles.tooltipAsModal,
});
react_1.default.useImperativeHandle(ref, () => {
return labelRef.current;
}, []);
const { showTooltip, hideTooltip, allowFocusOpenTooltip, open } = (0, useTooltip_1.useTooltip)({
labelRef,
tooltipRef,
variant,
onOpenClose,
align: props.align,
tooltipAsModal: tooltipAsModalValue,
ctv,
});
const { hasScroll: contentHasScroll, handleScrollDetection: contentRefHandler } = (0, useScrollDetectionWithAutoFocus_1.useScrollDetectionWithAutoFocus)({ parentElementRef: tooltipRef });
// When !tooltipAsModal, in tablet/mobile, onFocus and onClick are executed at the same time
// So onFocus will open the tooltip, and onClick will close it (because it was opened)
// To avoid calling onFocus when onClick, onMouseDown -> preventDefoult could be used,
// But this approach will lead to the focus-visible pseudo class being applied (strange, but true)
// So the approach is to use a flag to avoid calling onFocus when onClick
const isBeingClicked = react_1.default.useRef(false);
const handleWrapperFocus = () => {
// allowFocusOpenTooltip Avoid tooltip is opened automatically after closing the tooltip
if (isBeingClicked.current || tooltipAsModalValue || !allowFocusOpenTooltip.current) {
return;
}
showTooltip();
};
const handleWrapperBlur = event => {
if (!tooltipAsModalValue && !event.currentTarget.contains(event.relatedTarget)) {
hideTooltip();
}
};
const handleFocusTooltip = event => {
if (!tooltipAsModalValue) {
// Avoid on focus (label) be executed on focus tooltip
event.preventDefault();
event.stopPropagation();
}
};
const handleWrapperMouseEnter = () => {
if (!tooltipAsModalValue) {
if (mediaDevice !== breakpoints_1.DeviceBreakpointsType.DESKTOP) {
return;
}
showTooltip();
}
};
const handleWrapperMouseLeave = () => {
if (!tooltipAsModalValue) {
if (mediaDevice !== breakpoints_1.DeviceBreakpointsType.DESKTOP) {
return;
}
hideTooltip();
}
};
const handleCloseIconClick = event => {
props.closeIcon?.onClick?.(event);
hideTooltip();
};
const handleTriggerMouseDown = () => {
isBeingClicked.current = true;
};
const handleTriggerMouseUp = () => {
isBeingClicked.current = false;
};
const handleTriggerClick = event => {
if (mediaDevice === breakpoints_1.DeviceBreakpointsType.DESKTOP) {
if (!tooltipAsModalValue) {
return;
}
if (!open) {
showTooltip();
return;
}
if (!tooltipRef.current?.contains(event.target)) {
hideTooltip();
}
return;
}
// Mobile / tablet
if (!open) {
showTooltip();
return;
}
if (!tooltipRef.current?.contains(event.target)) {
hideTooltip();
}
};
const handleTriggerKeyDown = event => {
if ((0, keyboard_utility_1.isKeyEnterPressed)(event.key) && !open) {
showTooltip();
event.preventDefault();
}
};
const handlePopoverCloseInternally = () => {
props.popover?.onCloseInternally?.();
hideTooltip();
};
const { setDragIconRef, setPopoverRef } = (0, useSwipeDown_1.useSwipeDown)(props.popover?.animationOptions, hideTooltip);
(0, useTrapFocus_1.useTrapFocus)({ ref: tooltipRef, trapFocus: open && tooltipAsModalValue });
// It is used TooltipStandAlone instead of TooltipControlled
// The reason is that TooltipControlled only provides the styles and mediaDevice props that are used and needed in this component
return ((0, jsx_runtime_1.jsx)(tooltipStandAlone_1.TooltipStandAlone, { ...props, contentHasScroll: contentHasScroll, contentRef: contentRefHandler, dragIconRef: setDragIconRef, labelRef: labelRef, mediaDevice: mediaDevice, popover: {
...props.popover,
forwardedRef: setPopoverRef,
}, popoverOpen: open, styles: styles, tooltipAriaLabel: tooltipAriaLabel, tooltipAsModal: tooltipAsModalValue, tooltipRef: tooltipRef, onCloseIconClick: handleCloseIconClick, onPopoverCloseInternally: handlePopoverCloseInternally, onTooltipFocus: handleFocusTooltip, onTriggerClick: handleTriggerClick, onTriggerKeyDown: handleTriggerKeyDown, onTriggerMouseDown: handleTriggerMouseDown, onTriggerMouseUp: handleTriggerMouseUp, onWrapperBlur: handleWrapperBlur, onWrapperFocus: handleWrapperFocus, onWrapperMouseEnter: handleWrapperMouseEnter, onWrapperMouseLeave: handleWrapperMouseLeave }));
});
TooltipUnControlledComponent.displayName = 'TooltipUnControlledComponent';
const TooltipUnControlledBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(tooltipStandAlone_1.TooltipStandAlone, { ...props }) }), children: (0, jsx_runtime_1.jsx)(TooltipUnControlledComponent, { ...props, ref: ref }) }));
const TooltipUnControlled = react_1.default.forwardRef(TooltipUnControlledBoundary);
exports.TooltipUnControlled = TooltipUnControlled;
exports.Tooltip = TooltipUnControlled;
//# sourceMappingURL=tooltipUnControlled.js.map