@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
128 lines (124 loc) • 4.89 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_use_disclosure = require('../../hooks/use-disclosure/use-disclosure.cjs');
const require_hooks_use_event_listener_index = require('../../hooks/use-event-listener/index.cjs');
const require_hooks_use_outside_click_index = require('../../hooks/use-outside-click/index.cjs');
const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/tooltip/use-tooltip.tsx
const useTooltip = (props = {}) => {
const [popperProps, { closeDelay = 0, closeOnClick = true, closeOnEsc = true, closeOnScroll, defaultOpen, disabled, open: openProp, openDelay = 0, onClose: onCloseProp, onOpen: onOpenProp }] = require_hooks_use_popper_index.usePopperProps(props, ["open"]);
const describedbyId = (0, react.useId)();
const triggerRef = (0, react.useRef)(null);
const openTimeout = (0, react.useRef)(void 0);
const closeTimeout = (0, react.useRef)(void 0);
const { open, onClose, onOpen } = require_use_disclosure.useDisclosure({
defaultOpen,
open: openProp,
onClose: onCloseProp,
onOpen: onOpenProp
});
const { getPopperProps, getReferenceProps } = require_hooks_use_popper_index.usePopper({
open,
...popperProps
});
const onForceClose = (0, react.useCallback)(() => {
if (closeTimeout.current) {
clearTimeout(closeTimeout.current);
closeTimeout.current = void 0;
}
onClose();
}, [onClose]);
const onDelayOpen = (0, react.useCallback)(() => {
if (!disabled && !openTimeout.current) {
if (open) onForceClose();
openTimeout.current = (0, require_utils_index.utils_exports.getWindow)(triggerRef.current).setTimeout(onOpen, openDelay);
}
}, [
disabled,
open,
onForceClose,
onOpen,
openDelay
]);
const onDelayClose = (0, react.useCallback)(() => {
if (openTimeout.current) {
clearTimeout(openTimeout.current);
openTimeout.current = void 0;
}
closeTimeout.current = (0, require_utils_index.utils_exports.getWindow)(triggerRef.current).setTimeout(() => {
onForceClose();
}, closeDelay);
}, [closeDelay, onForceClose]);
require_hooks_use_event_listener_index.useEventListener(() => (0, require_utils_index.utils_exports.getDocument)(triggerRef.current), "keydown", ({ key }) => {
if (closeOnEsc && key === "Escape") onDelayClose();
});
require_hooks_use_event_listener_index.useEventListener(() => (0, require_utils_index.utils_exports.getDocument)(triggerRef.current), "scroll", () => {
if (open && closeOnScroll) onForceClose();
});
require_hooks_use_outside_click_index.useOutsideClick({
ref: triggerRef,
enabled: open,
handler: () => {
onDelayClose();
}
});
require_effect.useUnmountEffect(() => {
clearTimeout(openTimeout.current);
clearTimeout(closeTimeout.current);
});
const getTriggerProps = (0, react.useCallback)(({ "aria-describedby": ariaDescribedby,...props$1 } = {}) => {
return getReferenceProps({
...props$1,
ref: require_ref.mergeRefs(props$1.ref, triggerRef),
"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedby, open ? describedbyId : void 0),
onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, onDelayClose),
onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, closeOnClick ? onDelayClose : void 0),
onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, onDelayOpen),
onPointerEnter: (0, require_utils_index.utils_exports.handlerAll)(props$1.onPointerEnter, (ev) => {
if (ev.pointerType !== "touch") onDelayOpen();
}),
onPointerLeave: (0, require_utils_index.utils_exports.handlerAll)(props$1.onPointerLeave, (ev) => {
if (ev.pointerType !== "touch") onDelayClose();
})
});
}, [
getReferenceProps,
describedbyId,
onDelayOpen,
open,
closeOnClick,
onDelayClose
]);
const getPositionerProps = (0, react.useCallback)((props$1) => {
return getPopperProps(props$1);
}, [getPopperProps]);
return {
open,
getContentProps: (0, react.useCallback)((props$1 = {}) => ({
id: describedbyId,
"data-close": (0, require_utils_index.utils_exports.dataAttr)(!open),
"data-open": (0, require_utils_index.utils_exports.dataAttr)(open),
role: "tooltip",
onPointerLeave: (0, require_utils_index.utils_exports.handlerAll)(props$1.onPointerLeave, onDelayClose),
...props$1
}), [
describedbyId,
onDelayClose,
open
]),
getPositionerProps,
getTriggerProps,
onClose: onForceClose,
onDelayClose,
onDelayOpen,
onOpen
};
};
//#endregion
exports.useTooltip = useTooltip;
//# sourceMappingURL=use-tooltip.cjs.map