@clayui/tooltip 3.156.0 → 3.158.0

package/lib/esm/TooltipProvider.js

@@ -1,35 +1,39 @@
-/**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import { ClayPortal, Keys, delegate, useInteractionFocus } from '@clayui/shared';
-import React, { useCallback, useEffect, useReducer, useRef } from 'react';
-import warning from 'warning';
-import { Tooltip } from "./Tooltip.js";
-import { useAlign } from "./useAlign.js";
-import { useClosestTitle } from "./useClosestTitle.js";
-import { useTooltipState } from "./useTooltipState.js";
+import {
+  ClayPortal,
+  Keys,
+  delegate,
+  useInteractionFocus
+} from "@clayui/shared";
+import React, { useCallback, useEffect, useReducer, useRef } from "react";
+import warning from "warning";
+import { Tooltip } from "./Tooltip";
+import { useAlign } from "./useAlign";
+import { useClosestTitle } from "./useClosestTitle";
+import { useTooltipState } from "./useTooltipState";
 const initialState = {
-  align: 'top',
+  align: "top",
   floating: false,
   setAsHTML: false,
-  title: ''
+  title: ""
 };
-const TRIGGER_HIDE_EVENTS = ['dragstart', 'mouseout', 'mouseup', 'pointerup', 'touchend'];
-const TRIGGER_SHOW_EVENTS = ['mouseover', 'mouseup', 'pointerdown', 'touchstart'];
-const reducer = (state, _ref) => {
-  let {
-    type,
-    ...payload
-  } = _ref;
+const TRIGGER_HIDE_EVENTS = [
+  "dragstart",
+  "mouseout",
+  "mouseup",
+  "pointerup",
+  "touchend"
+];
+const TRIGGER_SHOW_EVENTS = [
+  "mouseover",
+  "mouseup",
+  "pointerdown",
+  "touchstart"
+];
+function reducer(state, { type, ...payload }) {
   switch (type) {
-    case 'update':
-      return {
-        ...state,
-        ...payload
-      };
-    case 'reset':
+    case "update":
+      return { ...state, ...payload };
+    case "reset":
       return {
         ...state,
         align: initialState.align,
@@ -38,58 +42,36 @@ const reducer = (state, _ref) => {
     default:
       throw new TypeError();
   }
-};
-export const ClayTooltipProvider = _ref2 => {
-  let {
-    autoAlign = true,
-    children,
-    containerProps = {},
-    contentRenderer = props => props.title,
-    delay = 600,
-    scope
-  } = _ref2;
-  const [{
-    align,
-    floating,
-    setAsHTML,
-    title = ''
-  }, dispatch] = useReducer(reducer, initialState);
+}
+function ClayTooltipProvider({
+  autoAlign = true,
+  children,
+  containerProps = {},
+  contentRenderer = (props) => props.title,
+  delay = 600,
+  scope
+}) {
+  const [{ align, floating, setAsHTML, title = "" }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
   const tooltipRef = useRef(null);
-  const {
-    getInteraction,
-    isFocusVisible
-  } = useInteractionFocus();
-  const isHovered = useRef(false);
-  const isFocused = useRef(false);
-  const {
-    close,
-    isOpen,
-    open
-  } = useTooltipState({
-    delay
-  });
-  const {
-    forceHide,
-    getProps,
-    onHide,
-    target,
-    titleNode
-  } = useClosestTitle({
+  const { getInteraction, isFocusVisible } = useInteractionFocus();
+  const isHoveredRef = useRef(false);
+  const isFocusedRef = useRef(false);
+  const { close, isOpen, open } = useTooltipState({ delay });
+  const { forceHide, getProps, onHide, target, titleNode } = useClosestTitle({
     forceHide: useCallback(() => {
-      dispatch({
-        type: 'reset'
-      });
+      dispatch({ type: "reset" });
       close();
     }, []),
     onClick: useCallback(() => {
-      isFocused.current = false;
-      isHovered.current = false;
+      isFocusedRef.current = false;
+      isHoveredRef.current = false;
     }, []),
     onHide: useCallback(() => {
-      if (!isHovered.current && !isFocused.current) {
-        dispatch({
-          type: 'reset'
-        });
+      if (!isHoveredRef.current && !isFocusedRef.current) {
+        dispatch({ type: "reset" });
         close();
       }
     }, []),
@@ -100,109 +82,134 @@ export const ClayTooltipProvider = _ref2 => {
     autoAlign,
     floating,
     isOpen,
-    onAlign: useCallback(align => dispatch({
-      align,
-      type: 'update'
-    }), []),
+    onAlign: useCallback((align2) => dispatch({ align: align2, type: "update" }), []),
     sourceElement: tooltipRef,
     targetElement: titleNode,
     title
   });
-  const onShow = useCallback(event => {
-    if (isHovered.current || isFocused.current) {
-      const props = getProps(event, isHovered.current);
-      if (props) {
-        dispatch({
-          align: props.align ?? align,
-          floating: props.floating,
-          setAsHTML: props.setAsHTML,
-          title: props.title,
-          type: 'update'
-        });
-        open(isFocused.current, props.delay ? Number(props.delay) : undefined);
+  const onShow = useCallback(
+    (event) => {
+      if (isHoveredRef.current || isFocusedRef.current) {
+        const props = getProps(event, isHoveredRef.current);
+        if (props) {
+          dispatch({
+            align: props.align ?? align,
+            floating: props.floating,
+            setAsHTML: props.setAsHTML,
+            title: props.title,
+            type: "update"
+          });
+          open(
+            isFocusedRef.current,
+            props.delay ? Number(props.delay) : void 0
+          );
+        }
       }
-    }
-  }, [align]);
+    },
+    [align]
+  );
   useEffect(() => {
-    const handleEsc = event => {
+    const handleEsc = (event) => {
       if (isOpen && event.key === Keys.Esc) {
         event.stopImmediatePropagation();
         forceHide();
       }
     };
-    document.addEventListener('keyup', handleEsc, true);
-    return () => document.removeEventListener('keyup', handleEsc, true);
+    document.addEventListener("keyup", handleEsc, true);
+    return () => document.removeEventListener("keyup", handleEsc, true);
   }, [isOpen]);
-  const onHoverStart = event => {
-    if (getInteraction() === 'pointer') {
-      isHovered.current = true;
+  const onHoverStart = (event) => {
+    if (getInteraction() === "pointer") {
+      isHoveredRef.current = true;
     } else {
-      isHovered.current = false;
+      isHoveredRef.current = false;
     }
     onShow(event);
   };
-  const onHoverEnd = event => {
-    isFocused.current = false;
-    isHovered.current = false;
+  const onHoverEnd = (event) => {
+    isFocusedRef.current = false;
+    isHoveredRef.current = false;
     onHide(event);
   };
-  const onFocus = event => {
+  const onFocus = (event) => {
     if (isFocusVisible()) {
-      isFocused.current = true;
+      isFocusedRef.current = true;
       onShow(event);
     }
   };
-  const onBlur = event => {
-    isFocused.current = false;
-    isHovered.current = false;
+  const onBlur = (event) => {
+    isFocusedRef.current = false;
+    isHoveredRef.current = false;
     onHide(event);
   };
   useEffect(() => {
     if (scope) {
-      const disposeShowEvents = TRIGGER_SHOW_EVENTS.map(eventName => delegate(document.body, eventName, scope, onHoverStart));
-      const disposeHideEvents = TRIGGER_HIDE_EVENTS.map(eventName => delegate(document.body, eventName, `${scope}, .tooltip`, onHoverEnd));
-      const disposeShowFocus = delegate(document.body, 'focus', `${scope}, .tooltip`, onFocus, true);
-      const disposeCloseBlur = delegate(document.body, 'blur', `${scope}, .tooltip`, onBlur, true);
+      const disposeShowEvents = TRIGGER_SHOW_EVENTS.map(
+        (eventName) => delegate(document.body, eventName, scope, onHoverStart)
+      );
+      const disposeHideEvents = TRIGGER_HIDE_EVENTS.map(
+        (eventName) => delegate(
+          document.body,
+          eventName,
+          `${scope}, .tooltip`,
+          onHoverEnd
+        )
+      );
+      const disposeShowFocus = delegate(
+        document.body,
+        "focus",
+        `${scope}, .tooltip`,
+        onFocus,
+        true
+      );
+      const disposeCloseBlur = delegate(
+        document.body,
+        "blur",
+        `${scope}, .tooltip`,
+        onBlur,
+        true
+      );
       return () => {
-        disposeShowEvents.forEach(_ref3 => {
-          let {
-            dispose
-          } = _ref3;
-          return dispose();
-        });
-        disposeHideEvents.forEach(_ref4 => {
-          let {
-            dispose
-          } = _ref4;
-          return dispose();
-        });
+        disposeShowEvents.forEach(({ dispose }) => dispose());
+        disposeHideEvents.forEach(({ dispose }) => dispose());
         disposeShowFocus.dispose();
         disposeCloseBlur.dispose();
       };
     }
   }, [onShow]);
-  "production" !== "production" ? warning(typeof children === 'undefined' && typeof scope !== 'undefined' || typeof scope === 'undefined' && typeof children !== 'undefined', '<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.') : void 0;
-  "production" !== "production" ? warning(typeof children !== 'undefined' || typeof scope !== 'undefined', '<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.') : void 0;
-  "production" !== "production" ? warning(children?.type !== React.Fragment, '<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.') : void 0;
+  warning(
+    typeof children === "undefined" && typeof scope !== "undefined" || typeof scope === "undefined" && typeof children !== "undefined",
+    "<TooltipProvider />: You must use at least one of the following props: `children` or `scope`."
+  );
+  warning(
+    typeof children !== "undefined" || typeof scope !== "undefined",
+    "<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`."
+  );
+  warning(
+    children?.type !== React.Fragment,
+    "<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`."
+  );
   const titleContent = contentRenderer({
     targetNode: target.current,
     title
   });
-  const tooltip = isOpen && /*#__PURE__*/React.createElement(ClayPortal, containerProps, /*#__PURE__*/React.createElement(Tooltip, {
-    alignPosition: align,
-    ref: tooltipRef,
-    show: true
-  }, setAsHTML && typeof titleContent === 'string' ? /*#__PURE__*/React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: titleContent
+  const tooltip = isOpen && /* @__PURE__ */ React.createElement(ClayPortal, { ...containerProps }, /* @__PURE__ */ React.createElement(Tooltip, { alignPosition: align, ref: tooltipRef, show: true }, setAsHTML && typeof titleContent === "string" ? /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      dangerouslySetInnerHTML: {
+        __html: titleContent
+      }
     }
-  }) : titleContent));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, scope ? /*#__PURE__*/React.createElement(React.Fragment, null, tooltip, children) : children && /*#__PURE__*/React.cloneElement(children, {
+  ) : titleContent));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, scope ? /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip, children) : children && React.cloneElement(children, {
     ...children.props,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, children.props.children, tooltip),
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, children.props.children, tooltip),
     onBlur,
     onFocus,
     onMouseOut: onHoverEnd,
     onMouseOver: onHoverStart
   }));
-};
+}
+export {
+  ClayTooltipProvider
+};

package/lib/esm/index.js

@@ -1,8 +1,8 @@
-/**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-import { Tooltip } from "./Tooltip.js";
-import { ClayTooltipProvider } from "./TooltipProvider.js";
-export { Tooltip, ClayTooltipProvider };
-export default Tooltip;
+import { Tooltip } from "./Tooltip";
+import { ClayTooltipProvider } from "./TooltipProvider";
+var src_default = Tooltip;
+export {
+  ClayTooltipProvider,
+  Tooltip,
+  src_default as default
+};

package/lib/esm/useAlign.js

@@ -1,31 +1,35 @@
-/**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import { doAlign, useMousePosition } from '@clayui/shared';
-import { alignPoint } from 'dom-align';
-import { useEffect } from 'react';
-const ALIGNMENTS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'];
+import { doAlign, useMousePosition } from "@clayui/shared";
+import { alignPoint } from "dom-align";
+import { useEffect } from "react";
+const ALIGNMENTS = [
+  "top",
+  "top-right",
+  "right",
+  "bottom-right",
+  "bottom",
+  "bottom-left",
+  "left",
+  "top-left"
+];
 const ALIGNMENTS_MAP = {
-  bottom: ['tc', 'bc'],
-  'bottom-left': ['tl', 'bl'],
-  'bottom-right': ['tr', 'br'],
-  left: ['cr', 'cl'],
-  right: ['cl', 'cr'],
-  top: ['bc', 'tc'],
-  'top-left': ['bl', 'tl'],
-  'top-right': ['br', 'tr']
+  "bottom": ["tc", "bc"],
+  "bottom-left": ["tl", "bl"],
+  "bottom-right": ["tr", "br"],
+  "left": ["cr", "cl"],
+  "right": ["cl", "cr"],
+  "top": ["bc", "tc"],
+  "top-left": ["bl", "tl"],
+  "top-right": ["br", "tr"]
 };
 const ALIGNMENTS_INVERSE_MAP = {
-  bctc: 'top',
-  bltl: 'top-left',
-  brtr: 'top-right',
-  clcr: 'right',
-  crcl: 'left',
-  tcbc: 'bottom',
-  tlbl: 'bottom-left',
-  trbr: 'bottom-right'
+  bctc: "top",
+  bltl: "top-left",
+  brtr: "top-right",
+  clcr: "right",
+  crcl: "left",
+  tcbc: "bottom",
+  tlbl: "bottom-left",
+  trbr: "bottom-right"
 };
 const BOTTOM_OFFSET = [0, 7];
 const LEFT_OFFSET = [-7, 0];
@@ -43,37 +47,40 @@ const OFFSET_MAP = {
 };
 const ALIGNMENTS_FORCE_MAP = {
   ...ALIGNMENTS_INVERSE_MAP,
-  bctc: 'top-left',
-  tcbc: 'bottom-left'
+  bctc: "top-left",
+  tcbc: "bottom-left"
 };
-export function useAlign(_ref) {
-  let {
-    align,
-    autoAlign,
-    floating,
-    isOpen,
-    onAlign,
-    sourceElement,
-    targetElement,
-    title
-  } = _ref;
+function useAlign({
+  align,
+  autoAlign,
+  floating,
+  isOpen,
+  onAlign,
+  sourceElement,
+  targetElement,
+  title
+}) {
   const mousePosition = useMousePosition(20);
   useEffect(() => {
     if (sourceElement.current && isOpen && floating) {
-      const points = ALIGNMENTS_MAP[align || 'top'];
+      const points = ALIGNMENTS_MAP[align || "top"];
       const [clientX, clientY] = mousePosition;
-      alignPoint(sourceElement.current, {
-        clientX,
-        clientY
-      }, {
-        offset: OFFSET_MAP[points.join('')],
-        points
-      });
+      alignPoint(
+        sourceElement.current,
+        {
+          clientX,
+          clientY
+        },
+        {
+          offset: OFFSET_MAP[points.join("")],
+          points
+        }
+      );
     }
   }, [isOpen, floating]);
   useEffect(() => {
     if (targetElement.current && sourceElement.current && isOpen && !floating) {
-      const points = ALIGNMENTS_MAP[align || 'top'];
+      const points = ALIGNMENTS_MAP[align || "top"];
       const alignment = doAlign({
         overflow: {
           adjustX: autoAlign,
@@ -83,8 +90,10 @@ export function useAlign(_ref) {
         sourceElement: sourceElement.current,
         targetElement: targetElement.current
       });
-      const alignmentString = alignment.points.join('');
-      const pointsString = points.join('');
+      const alignmentString = alignment.points.join(
+        ""
+      );
+      const pointsString = points.join("");
       if (alignment.overflow.adjustX) {
         onAlign(ALIGNMENTS_FORCE_MAP[alignmentString]);
       } else if (pointsString !== alignmentString) {
@@ -92,4 +101,7 @@ export function useAlign(_ref) {
       }
     }
   }, [align, title, isOpen]);
-}
+}
+export {
+  useAlign
+};