@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
40 lines • 2.39 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useMediaDevice } from '../../hooks/useMediaDevice/useMediaDevice';
import { useScrollDetectionWithAutoFocus } from '../../hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { useTooltipAsModal } from './hooks/useTooltipAsModal';
import { useTooltipAsModalAriaLabel } from './hooks/useTooltipAsModalAriaLabel';
import { TooltipStandAlone } from './tooltipStandAlone';
const TooltipControlledComponent = ({ tooltipAsModal: propTooltipAsModal, ctv, tooltipRef, tooltipAriaLabel, ...props }) => {
const styles = useStyles(STYLES_NAME.TOOLTIP, props.variant, ctv);
const mediaDevice = useMediaDevice();
const innerTooltipRef = React.useRef(null);
const helpAriaLabel = useTooltipAsModalAriaLabel(innerTooltipRef);
const tooltipAsModal = useTooltipAsModal({
propTooltipAsModal: propTooltipAsModal,
styleTooltipAsModal: styles.tooltipAsModal,
});
const { hasScroll: contentHasScroll, handleScrollDetection: contentRefHandler } = useScrollDetectionWithAutoFocus({ parentElementRef: innerTooltipRef });
React.useImperativeHandle(tooltipRef, () => {
return innerTooltipRef.current;
}, []);
return (_jsx(TooltipStandAlone, { ...props, contentHasScroll: contentHasScroll, contentRef: contentRefHandler, mediaDevice: mediaDevice, styles: styles, tooltipAriaLabel: tooltipAriaLabel ?? helpAriaLabel, tooltipAsModal: tooltipAsModal, tooltipRef: innerTooltipRef }));
};
TooltipControlledComponent.displayName = 'TooltipControlledComponent';
const TooltipControlled = (props) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(TooltipControlledComponent, { ...props }) }), children: _jsx(TooltipControlledComponent, { ...props }) }));
/**
* @description
* Tooltip component to show a message when interact whit the label
* @example
* <Tooltip
* variant={TooltipVariantType.DEFAULT}
* >
* <Text>Tooltip</Text>
* </Tooltip>
*/
export { TooltipControlled };
//# sourceMappingURL=tooltipControlled.js.map