@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
50 lines • 7.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const role_1 = require("../../types/role/role");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const iconHost_1 = require("../icon/iconHost");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_2 = require("../popover/types/component");
const positionVariant_1 = require("../popover/types/positionVariant");
const tooltipTrigger_1 = require("./components/tooltipTrigger");
// styles
const tooltip_styled_1 = require("./tooltip.styled");
const tooltip_utils_1 = require("./utils/tooltip.utils");
const TooltipStandAlone = ({ childrenAsButton = true, dataTestId = 'tooltip', ...props }) => {
const uniqueId = (0, useId_1.useId)('tooltip');
const titleId = `${uniqueId}Title`;
const contentId = `${uniqueId}Content`;
const isTextContent = typeof props.content?.content === 'string';
const isDesktop = props.mediaDevice === breakpoints_1.DeviceBreakpointsType.DESKTOP;
const isMobile = props.mediaDevice === breakpoints_1.DeviceBreakpointsType.MOBILE;
const isTablet = props.mediaDevice === breakpoints_1.DeviceBreakpointsType.TABLET;
if (props.disabled) {
return ((0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipStyled, { "data-testid": dataTestId, children: (0, jsx_runtime_1.jsx)(tooltipTrigger_1.TooltipTrigger, { disabled: true, childrenAsButton: childrenAsButton, children: props.children }) }));
}
const ariaDescriptorsBy = (0, tooltip_utils_1.getAriaDescriptorsBy)({
title: props.title?.content,
content: props.content?.content,
titleId,
contentId,
});
const Tooltip = ((0, jsx_runtime_1.jsxs)(tooltip_styled_1.TooltipExternalContainerStyled, { ref: props.tooltipRef, "aria-label": isDesktop ? props.tooltipAriaLabel : undefined, "aria-labelledby": isDesktop ? titleId : undefined, "aria-modal": isDesktop && props.tooltipAsModal ? true : undefined, "data-testid": `${dataTestId}-content`, id: uniqueId, role: isDesktop ? (props.tooltipAsModal ? role_1.ROLES.DIALOG : role_1.ROLES.TOOLTIP) : undefined, styles: props.styles, onFocus: props.onTooltipFocus, onKeyDown: props.onTooltipKeyDown, children: [(0, jsx_runtime_1.jsxs)(tooltip_styled_1.TooltipInternalContainerStyled, { styles: props.styles, children: [(isMobile || isTablet) && props.dragIcon && ((0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipDragIconStyled, { ref: props.dragIconRef, "data-testid": `${dataTestId}-drag`, styles: props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.dragIcon, ...props.dragIcon }) })), (0, jsx_runtime_1.jsxs)(tooltip_styled_1.TooltipHeaderContentStyled, { hasCloseIcon: !!props.closeIcon?.icon, hasTitle: !!props.title, styles: props.styles, children: [props.closeIcon?.icon && ((0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipCloseIconStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(iconHost_1.IconHost, { customIconStyles: props.styles?.closeButtonIcon, ...props.closeIcon, onClick: props.onCloseIconClick }) })), props.title?.content && ((0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipTitleStyled, { hasCloseIcon: !!props.closeIcon?.icon, id: titleId, styles: props.styles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.H2, customTypography: props.styles?.title, variant: props.styles.title?.font_variant, ...props.title, children: props.title.content }) }))] }), (0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipInnerContentStyled, { ref: props.contentRef, "aria-label": props.contentHasScroll ? props.contentScrollArias?.['aria-label'] : undefined, "aria-labelledby": props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined, role: props.contentHasScroll ? role_1.ROLES.REGION : undefined, styles: props.styles, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.content && ((0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipParagraphStyled, { hasBorder: !!props.title?.content, id: contentId, styles: props.styles, children: isTextContent ? ((0, jsx_runtime_1.jsx)(text_1.Text, { customTypography: props.styles?.paragraph, variant: props.styles.paragraph?.font_variant, ...props.content, children: props.content.content })) : (props.content.content) })) })] }), (0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipArrowStyled, { align: props.align, styles: props.styles, children: (0, jsx_runtime_1.jsx)(tooltip_styled_1.TooltipArrowContentStyled, { styles: props.styles }) })] }));
return ((0, jsx_runtime_1.jsxs)(tooltip_styled_1.TooltipStyled, { ref: props.labelRef, "data-testid": dataTestId, tooltipAsModal: props.tooltipAsModal, onBlur: props.onWrapperBlur ?? props.onBlur, onFocus: props.onWrapperFocus ?? props.onFocus, onMouseEnter: props.onWrapperMouseEnter ?? props.onMouseEnter, onMouseLeave: props.onWrapperMouseLeave ?? props.onMouseLeave, children: [(0, jsx_runtime_1.jsx)(tooltipTrigger_1.TooltipTrigger
// Aria describedby is used when the tooltip is not used as a modal
// When no focusable elements screenReaders may read the text when focus and then using arrows
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
// or https://dequeuniversity.com/library/aria/tooltip
, {
// Aria describedby is used when the tooltip is not used as a modal
// When no focusable elements screenReaders may read the text when focus and then using arrows
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
// or https://dequeuniversity.com/library/aria/tooltip
ariaDescribedBy: !props.tooltipAsModal && (isDesktop || props.popoverOpen) ? ariaDescriptorsBy : undefined, childrenAsButton: childrenAsButton, triggerAsButton: props.triggerAsButton, onClick: props.onTriggerClick ?? props.onClick, onKeyDown: props.onTriggerKeyDown ?? props.onKeyDown, onMouseDown: props.onTriggerMouseDown ?? props.onMouseDown, onMouseUp: props.onTriggerMouseUp ?? props.onMouseUp, children: props.children }), isDesktop ? (Tooltip) : ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { component: component_2.PopoverComponentType.DIV, focusLastElementFocusedAfterClose: false, hasBackDrop: props.styles.showOverlay?.[props.mediaDevice], open: props.popoverOpen, positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, preventCloseOnClickElements: [props.labelRef?.current], role: props.tooltipAsModal ? role_1.ROLES.DIALOG : role_1.ROLES.TOOLTIP, trapFocusInsideModal: true, variant: props.styles.popoverVariant?.[props.mediaDevice], ...props.popover, "aria-label": props.popover?.['aria-label'] || props.tooltipAriaLabel, "aria-labelledby": titleId, "aria-modal": props.tooltipAsModal || undefined, onCloseInternally: props.onPopoverCloseInternally, children: Tooltip }))] }));
};
exports.TooltipStandAlone = TooltipStandAlone;
//# sourceMappingURL=tooltipStandAlone.js.map