@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
51 lines • 6.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { ROLES } from '../../types/role/role';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { IconHost as Icon } from '../icon/iconHost';
import { PopoverControlled } from '../popover/popoverControlled';
import { PopoverComponentType } from '../popover/types/component';
import { PopoverPositionVariantType } from '../popover/types/positionVariant';
import { TooltipTrigger } from './components/tooltipTrigger';
// styles
import { TooltipArrowContentStyled, TooltipArrowStyled, TooltipCloseIconStyled, TooltipDragIconStyled, TooltipExternalContainerStyled, TooltipHeaderContentStyled, TooltipInnerContentStyled, TooltipInternalContainerStyled, TooltipParagraphStyled, TooltipStyled, TooltipTitleStyled, } from './tooltip.styled';
import { getAriaDescriptorsBy } from './utils/tooltip.utils';
const TooltipStandAlone = ({ childrenAsButton = true, dataTestId = 'tooltip', ...props }) => {
const uniqueId = useId('tooltip');
const titleId = `${uniqueId}Title`;
const contentId = `${uniqueId}Content`;
const isTextContent = typeof props.content?.content === 'string';
const isDesktop = props.mediaDevice === DeviceBreakpointsType.DESKTOP;
const isMobile = props.mediaDevice === DeviceBreakpointsType.MOBILE;
const isTablet = props.mediaDevice === DeviceBreakpointsType.TABLET;
if (props.disabled) {
return (_jsx(TooltipStyled, { "data-testid": dataTestId, children: _jsx(TooltipTrigger, { disabled: true, childrenAsButton: childrenAsButton, children: props.children }) }));
}
const ariaDescriptorsBy = getAriaDescriptorsBy({
title: props.title?.content,
content: props.content?.content,
titleId,
contentId,
});
const Tooltip = (_jsxs(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 ? ROLES.DIALOG : ROLES.TOOLTIP) : undefined, styles: props.styles, onFocus: props.onTooltipFocus, onKeyDown: props.onTooltipKeyDown, children: [_jsxs(TooltipInternalContainerStyled, { styles: props.styles, children: [(isMobile || isTablet) && props.dragIcon && (_jsx(TooltipDragIconStyled, { ref: props.dragIconRef, "data-testid": `${dataTestId}-drag`, styles: props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.dragIcon, ...props.dragIcon }) })), _jsxs(TooltipHeaderContentStyled, { hasCloseIcon: !!props.closeIcon?.icon, hasTitle: !!props.title, styles: props.styles, children: [props.closeIcon?.icon && (_jsx(TooltipCloseIconStyled, { styles: props.styles, children: _jsx(Icon, { customIconStyles: props.styles?.closeButtonIcon, ...props.closeIcon, onClick: props.onCloseIconClick }) })), props.title?.content && (_jsx(TooltipTitleStyled, { hasCloseIcon: !!props.closeIcon?.icon, id: titleId, styles: props.styles, children: _jsx(Text, { component: TextComponentType.H2, customTypography: props.styles?.title, variant: props.styles.title?.font_variant, ...props.title, children: props.title.content }) }))] }), _jsx(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 ? ROLES.REGION : undefined, styles: props.styles, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.content && (_jsx(TooltipParagraphStyled, { hasBorder: !!props.title?.content, id: contentId, styles: props.styles, children: isTextContent ? (_jsx(Text, { customTypography: props.styles?.paragraph, variant: props.styles.paragraph?.font_variant, ...props.content, children: props.content.content })) : (props.content.content) })) })] }), _jsx(TooltipArrowStyled, { align: props.align, styles: props.styles, children: _jsx(TooltipArrowContentStyled, { styles: props.styles }) })] }));
return (_jsxs(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: [_jsx(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) : (_jsx(PopoverControlled, { component: PopoverComponentType.DIV, focusLastElementFocusedAfterClose: false, hasBackDrop: props.styles.showOverlay?.[props.mediaDevice], open: props.popoverOpen, positionVariant: PopoverPositionVariantType.ABSOLUTE, preventCloseOnClickElements: [props.labelRef?.current], role: props.tooltipAsModal ? ROLES.DIALOG : 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 }))] }));
};
/**
* @description
* Tooltip component to show a message when the user hovers over, focuses on, or touches an element.
*/
export { TooltipStandAlone };
//# sourceMappingURL=tooltipStandAlone.js.map