1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
{"version":3,"sources":["../src/use-tooltip.ts"],"sourcesContent":["import { getScrollParent } from \"@chakra-ui/dom-utils\"\nimport { popperCSSVars, usePopper, UsePopperProps } from \"@chakra-ui/popper\"\nimport { PropGetter } from \"@chakra-ui/react-types\"\nimport { useDisclosure } from \"@chakra-ui/react-use-disclosure\"\nimport { useEventListener } from \"@chakra-ui/react-use-event-listener\"\nimport { mergeRefs } from \"@chakra-ui/react-use-merge-refs\"\nimport { callAllHandlers } from \"@chakra-ui/shared-utils\"\nimport React, {\n useCallback,\n useEffect,\n useId,\n useRef,\n type RefObject,\n} from \"react\"\n\nexport interface UseTooltipProps\n extends Pick<\n UsePopperProps,\n | \"modifiers\"\n | \"gutter\"\n | \"offset\"\n | \"arrowPadding\"\n | \"direction\"\n | \"placement\"\n > {\n /**\n * Delay (in ms) before showing the tooltip\n * @default 0ms\n */\n openDelay?: number\n /**\n * Delay (in ms) before hiding the tooltip\n * @default 0ms\n */\n closeDelay?: number\n /**\n * If `true`, the tooltip will hide on click\n * @default true\n */\n closeOnClick?: boolean\n /**\n * If `true`, the tooltip will hide while the mouse is down\n * @deprecated - use `closeOnPointerDown` instead\n */\n closeOnMouseDown?: boolean\n /**\n * If `true`, the tooltip will hide while the pointer is down\n * @default true\n */\n closeOnPointerDown?: boolean\n /**\n * If `true`, the tooltip will hide on pressing Esc key\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * Callback to run when the tooltip shows\n */\n onOpen?(): void\n /**\n * Callback to run when the tooltip hides\n */\n onClose?(): void\n /**\n * Custom `id` to use in place of `uuid`\n */\n id?: string\n /**\n * If `true`, the tooltip will be shown (in controlled mode)\n * @default false\n */\n isOpen?: boolean\n /**\n * If `true`, the tooltip will be initially shown\n * @default false\n */\n defaultIsOpen?: boolean\n /**\n * @default false\n */\n isDisabled?: boolean\n /**\n * @default false\n */\n closeOnScroll?: boolean\n /**\n * @default 10\n */\n arrowSize?: number\n arrowShadowColor?: string\n}\n\nconst getDoc = (ref: React.RefObject<Element | null>) =>\n ref.current?.ownerDocument || document\n\nconst getWin = (ref: React.RefObject<Element | null>) =>\n ref.current?.ownerDocument?.defaultView || window\n\nexport function useTooltip(props: UseTooltipProps = {}) {\n const {\n openDelay = 0,\n closeDelay = 0,\n closeOnClick = true,\n closeOnMouseDown,\n closeOnScroll,\n closeOnPointerDown = closeOnMouseDown,\n closeOnEsc = true,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n placement,\n id,\n isOpen: isOpenProp,\n defaultIsOpen,\n arrowSize = 10,\n arrowShadowColor,\n arrowPadding,\n modifiers,\n isDisabled,\n gutter,\n offset,\n direction,\n ...htmlProps\n } = props\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n isOpen: isOpenProp,\n defaultIsOpen,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n })\n\n const { referenceRef, getPopperProps, getArrowInnerProps, getArrowProps } =\n usePopper({\n enabled: isOpen,\n placement,\n arrowPadding,\n modifiers,\n gutter,\n offset,\n direction,\n })\n\n const uuid = useId()\n const uid = id ?? uuid\n const tooltipId = `tooltip-${uid}`\n\n const ref = useRef<HTMLElement>(null)\n\n const enterTimeout = useRef<number>()\n const clearEnterTimeout = useCallback(() => {\n if (enterTimeout.current) {\n clearTimeout(enterTimeout.current)\n enterTimeout.current = undefined\n }\n }, [])\n\n const exitTimeout = useRef<number>()\n const clearExitTimeout = useCallback(() => {\n if (exitTimeout.current) {\n clearTimeout(exitTimeout.current)\n exitTimeout.current = undefined\n }\n }, [])\n\n const closeNow = useCallback(() => {\n clearExitTimeout()\n onClose()\n }, [onClose, clearExitTimeout])\n\n const dispatchCloseEvent = useCloseEvent(ref, closeNow)\n\n const openWithDelay = useCallback(() => {\n if (!isDisabled && !enterTimeout.current) {\n if (isOpen) dispatchCloseEvent()\n const win = getWin(ref)\n enterTimeout.current = win.setTimeout(onOpen, openDelay)\n }\n }, [dispatchCloseEvent, isDisabled, isOpen, onOpen, openDelay])\n\n const closeWithDelay = useCallback(() => {\n clearEnterTimeout()\n const win = getWin(ref)\n exitTimeout.current = win.setTimeout(closeNow, closeDelay)\n }, [closeDelay, closeNow, clearEnterTimeout])\n\n const onClick = useCallback(() => {\n if (isOpen && closeOnClick) {\n closeWithDelay()\n }\n }, [closeOnClick, closeWithDelay, isOpen])\n\n const onPointerDown = useCallback(() => {\n if (isOpen && closeOnPointerDown) {\n closeWithDelay()\n }\n }, [closeOnPointerDown, closeWithDelay, isOpen])\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (isOpen && event.key === \"Escape\") {\n closeWithDelay()\n }\n },\n [isOpen, closeWithDelay],\n )\n\n useEventListener(\n () => getDoc(ref),\n \"keydown\",\n closeOnEsc ? onKeyDown : undefined,\n )\n\n useEventListener(\n () => {\n if (!closeOnScroll) return null\n const node = ref.current\n if (!node) return null\n const scrollParent = getScrollParent(node)\n return scrollParent.localName === \"body\" ? getWin(ref) : scrollParent\n },\n \"scroll\",\n () => {\n if (isOpen && closeOnScroll) {\n closeNow()\n }\n },\n { passive: true, capture: true },\n )\n\n useEffect(() => {\n if (!isDisabled) return\n clearEnterTimeout()\n if (isOpen) onClose()\n }, [isDisabled, isOpen, onClose, clearEnterTimeout])\n\n useEffect(() => {\n return () => {\n clearEnterTimeout()\n clearExitTimeout()\n }\n }, [clearEnterTimeout, clearExitTimeout])\n\n /**\n * This allows for catching pointerleave events when the tooltip\n * trigger is disabled. There's currently a known issue in\n * React regarding the onPointerLeave polyfill.\n * @see https://github.com/facebook/react/issues/11972\n */\n useEventListener(() => ref.current, \"pointerleave\", closeWithDelay)\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, _ref = null) => {\n const triggerProps = {\n ...props,\n ref: mergeRefs(ref, _ref, referenceRef),\n onPointerEnter: callAllHandlers(props.onPointerEnter, (e) => {\n if (e.pointerType === \"touch\") return\n openWithDelay()\n }),\n onClick: callAllHandlers(props.onClick, onClick),\n onPointerDown: callAllHandlers(props.onPointerDown, onPointerDown),\n onFocus: callAllHandlers(props.onFocus, openWithDelay),\n onBlur: callAllHandlers(props.onBlur, closeWithDelay),\n \"aria-describedby\": isOpen ? tooltipId : undefined,\n }\n\n return triggerProps\n },\n [\n openWithDelay,\n closeWithDelay,\n onPointerDown,\n isOpen,\n tooltipId,\n onClick,\n referenceRef,\n ],\n )\n\n const getTooltipPositionerProps: PropGetter = useCallback(\n (props = {}, forwardedRef = null) =>\n getPopperProps(\n {\n ...props,\n style: {\n ...props.style,\n [popperCSSVars.arrowSize.var]: arrowSize\n ? `${arrowSize}px`\n : undefined,\n [popperCSSVars.arrowShadowColor.var]: arrowShadowColor,\n },\n },\n forwardedRef,\n ),\n [getPopperProps, arrowSize, arrowShadowColor],\n )\n\n const getTooltipProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const styles: React.CSSProperties = {\n ...props.style,\n position: \"relative\",\n transformOrigin: popperCSSVars.transformOrigin.varRef,\n }\n\n return {\n ref,\n ...htmlProps,\n ...props,\n id: tooltipId,\n role: \"tooltip\",\n style: styles,\n }\n },\n [htmlProps, tooltipId],\n )\n\n return {\n isOpen,\n show: openWithDelay,\n hide: closeWithDelay,\n getTriggerProps,\n getTooltipProps,\n getTooltipPositionerProps,\n getArrowProps,\n getArrowInnerProps,\n }\n}\n\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n\nconst closeEventName = \"chakra-ui:close-tooltip\"\n\nfunction useCloseEvent(ref: RefObject<Element>, close: () => void) {\n useEffect(() => {\n const doc = getDoc(ref)\n doc.addEventListener(closeEventName, close)\n return () => doc.removeEventListener(closeEventName, close)\n }, [close, ref])\n\n return () => {\n const doc = getDoc(ref)\n const win = getWin(ref)\n doc.dispatchEvent(new win.CustomEvent(closeEventName))\n }\n}\n"],"mappings":";;;AAAA,SAAS,uBAAuB;AAChC,SAAS,eAAe,iBAAiC;AAEzD,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+EP,IAAM,SAAS,CAAC,QAAsC;AA5FtD;AA6FE,oBAAI,YAAJ,mBAAa,kBAAiB;AAAA;AAEhC,IAAM,SAAS,CAAC,QAAsC;AA/FtD;AAgGE,0BAAI,YAAJ,mBAAa,kBAAb,mBAA4B,gBAAe;AAAA;AAEtC,SAAS,WAAW,QAAyB,CAAC,GAAG;AACtD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,QAAQ,QAAQ,QAAQ,IAAI,cAAc;AAAA,IAChD,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,cAAc,gBAAgB,oBAAoB,cAAc,IACtE,UAAU;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,OAAO,MAAM;AACnB,QAAM,MAAM,kBAAM;AAClB,QAAM,YAAY,WAAW,GAAG;AAEhC,QAAM,MAAM,OAAoB,IAAI;AAEpC,QAAM,eAAe,OAAe;AACpC,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AACjC,mBAAa,UAAU;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,OAAe;AACnC,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,YAAY,SAAS;AACvB,mBAAa,YAAY,OAAO;AAChC,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YAAY,MAAM;AACjC,qBAAiB;AACjB,YAAQ;AAAA,EACV,GAAG,CAAC,SAAS,gBAAgB,CAAC;AAE9B,QAAM,qBAAqB,cAAc,KAAK,QAAQ;AAEtD,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,CAAC,cAAc,CAAC,aAAa,SAAS;AACxC,UAAI;AAAQ,2BAAmB;AAC/B,YAAM,MAAM,OAAO,GAAG;AACtB,mBAAa,UAAU,IAAI,WAAW,QAAQ,SAAS;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,oBAAoB,YAAY,QAAQ,QAAQ,SAAS,CAAC;AAE9D,QAAM,iBAAiB,YAAY,MAAM;AACvC,sBAAkB;AAClB,UAAM,MAAM,OAAO,GAAG;AACtB,gBAAY,UAAU,IAAI,WAAW,UAAU,UAAU;AAAA,EAC3D,GAAG,CAAC,YAAY,UAAU,iBAAiB,CAAC;AAE5C,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,UAAU,cAAc;AAC1B,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,MAAM,CAAC;AAEzC,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,UAAU,oBAAoB;AAChC,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,oBAAoB,gBAAgB,MAAM,CAAC;AAE/C,QAAM,YAAY;AAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,UAAU,MAAM,QAAQ,UAAU;AACpC,uBAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,cAAc;AAAA,EACzB;AAEA;AAAA,IACE,MAAM,OAAO,GAAG;AAAA,IAChB;AAAA,IACA,aAAa,YAAY;AAAA,EAC3B;AAEA;AAAA,IACE,MAAM;AACJ,UAAI,CAAC;AAAe,eAAO;AAC3B,YAAM,OAAO,IAAI;AACjB,UAAI,CAAC;AAAM,eAAO;AAClB,YAAM,eAAe,gBAAgB,IAAI;AACzC,aAAO,aAAa,cAAc,SAAS,OAAO,GAAG,IAAI;AAAA,IAC3D;AAAA,IACA;AAAA,IACA,MAAM;AACJ,UAAI,UAAU,eAAe;AAC3B,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,EAAE,SAAS,MAAM,SAAS,KAAK;AAAA,EACjC;AAEA,YAAU,MAAM;AACd,QAAI,CAAC;AAAY;AACjB,sBAAkB;AAClB,QAAI;AAAQ,cAAQ;AAAA,EACtB,GAAG,CAAC,YAAY,QAAQ,SAAS,iBAAiB,CAAC;AAEnD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,wBAAkB;AAClB,uBAAiB;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAQxC,mBAAiB,MAAM,IAAI,SAAS,gBAAgB,cAAc;AAElE,QAAM,kBAA8B;AAAA,IAClC,CAACA,SAAQ,CAAC,GAAG,OAAO,SAAS;AAC3B,YAAM,eAAe;AAAA,QACnB,GAAGA;AAAA,QACH,KAAK,UAAU,KAAK,MAAM,YAAY;AAAA,QACtC,gBAAgB,gBAAgBA,OAAM,gBAAgB,CAAC,MAAM;AAC3D,cAAI,EAAE,gBAAgB;AAAS;AAC/B,wBAAc;AAAA,QAChB,CAAC;AAAA,QACD,SAAS,gBAAgBA,OAAM,SAAS,OAAO;AAAA,QAC/C,eAAe,gBAAgBA,OAAM,eAAe,aAAa;AAAA,QACjE,SAAS,gBAAgBA,OAAM,SAAS,aAAa;AAAA,QACrD,QAAQ,gBAAgBA,OAAM,QAAQ,cAAc;AAAA,QACpD,oBAAoB,SAAS,YAAY;AAAA,MAC3C;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,4BAAwC;AAAA,IAC5C,CAACA,SAAQ,CAAC,GAAG,eAAe,SAC1B;AAAA,MACE;AAAA,QACE,GAAGA;AAAA,QACH,OAAO;AAAA,UACL,GAAGA,OAAM;AAAA,UACT,CAAC,cAAc,UAAU,GAAG,GAAG,YAC3B,GAAG,SAAS,OACZ;AAAA,UACJ,CAAC,cAAc,iBAAiB,GAAG,GAAG;AAAA,QACxC;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,IACF,CAAC,gBAAgB,WAAW,gBAAgB;AAAA,EAC9C;AAEA,QAAM,kBAA8B;AAAA,IAClC,CAACA,SAAQ,CAAC,GAAGC,OAAM,SAAS;AAC1B,YAAM,SAA8B;AAAA,QAClC,GAAGD,OAAM;AAAA,QACT,UAAU;AAAA,QACV,iBAAiB,cAAc,gBAAgB;AAAA,MACjD;AAEA,aAAO;AAAA,QACL,KAAAC;AAAA,QACA,GAAG;AAAA,QACH,GAAGD;AAAA,QACH,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,SAAO;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAIA,IAAM,iBAAiB;AAEvB,SAAS,cAAc,KAAyB,OAAmB;AACjE,YAAU,MAAM;AACd,UAAM,MAAM,OAAO,GAAG;AACtB,QAAI,iBAAiB,gBAAgB,KAAK;AAC1C,WAAO,MAAM,IAAI,oBAAoB,gBAAgB,KAAK;AAAA,EAC5D,GAAG,CAAC,OAAO,GAAG,CAAC;AAEf,SAAO,MAAM;AACX,UAAM,MAAM,OAAO,GAAG;AACtB,UAAM,MAAM,OAAO,GAAG;AACtB,QAAI,cAAc,IAAI,IAAI,YAAY,cAAc,CAAC;AAAA,EACvD;AACF;","names":["props","ref"]} |