@clayui/tooltip 3.141.1 → 3.141.2-alpha.0

package/lib/cjs/Tooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = exports.ALIGN_POSITIONS = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ALIGN_POSITIONS = exports.ALIGN_POSITIONS = ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
+const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    alignPosition = 'bottom',
+    children,
+    className,
+    show,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)(className, 'tooltip', `clay-tooltip-${alignPosition}`, {
+      show
+    }),
+    role: "tooltip"
+  }, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arrow"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "tooltip-inner"
+  }, children));
+});
+Tooltip.displayName = 'ClayTooltip';

package/lib/cjs/TooltipProvider.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClayTooltipProvider = void 0;
+var _shared = require("@clayui/shared");
+var _react = _interopRequireWildcard(require("react"));
+var _warning = _interopRequireDefault(require("warning"));
+var _Tooltip = require("./Tooltip");
+var _useAlign = require("./useAlign");
+var _useClosestTitle = require("./useClosestTitle");
+var _useTooltipState = require("./useTooltipState");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+const initialState = {
+  align: 'top',
+  floating: false,
+  setAsHTML: false,
+  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;
+  switch (type) {
+    case 'update':
+      return {
+        ...state,
+        ...payload
+      };
+    case 'reset':
+      return {
+        ...state,
+        align: initialState.align,
+        floating: false
+      };
+    default:
+      throw new TypeError();
+  }
+};
+const ClayTooltipProvider = _ref2 => {
+  let {
+    autoAlign = true,
+    children,
+    containerProps = {},
+    contentRenderer = props => props.title,
+    delay = 600,
+    scope
+  } = _ref2;
+  const [{
+    align,
+    floating,
+    setAsHTML,
+    title = ''
+  }, dispatch] = (0, _react.useReducer)(reducer, initialState);
+  const tooltipRef = (0, _react.useRef)(null);
+  const {
+    getInteraction,
+    isFocusVisible
+  } = (0, _shared.useInteractionFocus)();
+  const isHovered = (0, _react.useRef)(false);
+  const isFocused = (0, _react.useRef)(false);
+  const {
+    close,
+    isOpen,
+    open
+  } = (0, _useTooltipState.useTooltipState)({
+    delay
+  });
+  const {
+    forceHide,
+    getProps,
+    onHide,
+    target,
+    titleNode
+  } = (0, _useClosestTitle.useClosestTitle)({
+    forceHide: (0, _react.useCallback)(() => {
+      dispatch({
+        type: 'reset'
+      });
+      close();
+    }, []),
+    onClick: (0, _react.useCallback)(() => {
+      isFocused.current = false;
+      isHovered.current = false;
+    }, []),
+    onHide: (0, _react.useCallback)(() => {
+      if (!isHovered.current && !isFocused.current) {
+        dispatch({
+          type: 'reset'
+        });
+        close();
+      }
+    }, []),
+    tooltipRef
+  });
+  (0, _useAlign.useAlign)({
+    align,
+    autoAlign,
+    floating,
+    isOpen,
+    onAlign: (0, _react.useCallback)(align => dispatch({
+      align,
+      type: 'update'
+    }), []),
+    sourceElement: tooltipRef,
+    targetElement: titleNode,
+    title
+  });
+  const onShow = (0, _react.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);
+      }
+    }
+  }, [align]);
+  (0, _react.useEffect)(() => {
+    const handleEsc = event => {
+      if (isOpen && event.key === _shared.Keys.Esc) {
+        event.stopImmediatePropagation();
+        forceHide();
+      }
+    };
+    document.addEventListener('keyup', handleEsc, true);
+    return () => document.removeEventListener('keyup', handleEsc, true);
+  }, [isOpen]);
+  const onHoverStart = event => {
+    if (getInteraction() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
+    onShow(event);
+  };
+  const onHoverEnd = event => {
+    isFocused.current = false;
+    isHovered.current = false;
+    onHide(event);
+  };
+  const onFocus = event => {
+    if (isFocusVisible()) {
+      isFocused.current = true;
+      onShow(event);
+    }
+  };
+  const onBlur = event => {
+    isFocused.current = false;
+    isHovered.current = false;
+    onHide(event);
+  };
+  (0, _react.useEffect)(() => {
+    if (scope) {
+      const disposeShowEvents = TRIGGER_SHOW_EVENTS.map(eventName => (0, _shared.delegate)(document.body, eventName, scope, onHoverStart));
+      const disposeHideEvents = TRIGGER_HIDE_EVENTS.map(eventName => (0, _shared.delegate)(document.body, eventName, `${scope}, .tooltip`, onHoverEnd));
+      const disposeShowFocus = (0, _shared.delegate)(document.body, 'focus', `${scope}, .tooltip`, onFocus, true);
+      const disposeCloseBlur = (0, _shared.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();
+        });
+        disposeShowFocus.dispose();
+        disposeCloseBlur.dispose();
+      };
+    }
+  }, [onShow]);
+  "production" !== "production" ? (0, _warning.default)(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" ? (0, _warning.default)(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" ? (0, _warning.default)(children?.type !== _react.default.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;
+  const titleContent = contentRenderer({
+    targetNode: target.current,
+    title
+  });
+  const tooltip = isOpen && /*#__PURE__*/_react.default.createElement(_shared.ClayPortal, containerProps, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    alignPosition: align,
+    ref: tooltipRef,
+    show: true
+  }, setAsHTML && typeof titleContent === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: titleContent
+    }
+  }) : titleContent));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scope ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltip, children) : children && /*#__PURE__*/_react.default.cloneElement(children, {
+    ...children.props,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.props.children, tooltip),
+    onBlur,
+    onFocus,
+    onMouseOut: onHoverEnd,
+    onMouseOver: onHoverStart
+  }));
+};
+exports.ClayTooltipProvider = ClayTooltipProvider;

package/lib/{index.js → cjs/index.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ClayTooltipProvider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TooltipProvider.ClayTooltipProvider;
   }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tooltip.Tooltip;
   }
 });

package/lib/cjs/useAlign.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAlign = useAlign;
+var _shared = require("@clayui/shared");
+var _domAlign = require("dom-align");
+var _react = require("react");
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+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']
+};
+const ALIGNMENTS_INVERSE_MAP = {
+  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];
+const RIGHT_OFFSET = [7, 0];
+const TOP_OFFSET = [0, -7];
+const OFFSET_MAP = {
+  bctc: TOP_OFFSET,
+  bltl: TOP_OFFSET,
+  brtr: TOP_OFFSET,
+  clcr: RIGHT_OFFSET,
+  crcl: LEFT_OFFSET,
+  tcbc: BOTTOM_OFFSET,
+  tlbl: BOTTOM_OFFSET,
+  trbr: BOTTOM_OFFSET
+};
+const ALIGNMENTS_FORCE_MAP = {
+  ...ALIGNMENTS_INVERSE_MAP,
+  bctc: 'top-left',
+  tcbc: 'bottom-left'
+};
+function useAlign(_ref) {
+  let {
+    align,
+    autoAlign,
+    floating,
+    isOpen,
+    onAlign,
+    sourceElement,
+    targetElement,
+    title
+  } = _ref;
+  const mousePosition = (0, _shared.useMousePosition)(20);
+  (0, _react.useEffect)(() => {
+    if (sourceElement.current && isOpen && floating) {
+      const points = ALIGNMENTS_MAP[align || 'top'];
+      const [clientX, clientY] = mousePosition;
+      (0, _domAlign.alignPoint)(sourceElement.current, {
+        clientX,
+        clientY
+      }, {
+        offset: OFFSET_MAP[points.join('')],
+        points
+      });
+    }
+  }, [isOpen, floating]);
+  (0, _react.useEffect)(() => {
+    if (targetElement.current && sourceElement.current && isOpen && !floating) {
+      const points = ALIGNMENTS_MAP[align || 'top'];
+      const alignment = (0, _shared.doAlign)({
+        overflow: {
+          adjustX: autoAlign,
+          adjustY: autoAlign
+        },
+        points,
+        sourceElement: sourceElement.current,
+        targetElement: targetElement.current
+      });
+      const alignmentString = alignment.points.join('');
+      const pointsString = points.join('');
+      if (alignment.overflow.adjustX) {
+        onAlign(ALIGNMENTS_FORCE_MAP[alignmentString]);
+      } else if (pointsString !== alignmentString) {
+        onAlign(ALIGNMENTS_INVERSE_MAP[alignmentString]);
+      }
+    }
+  }, [align, title, isOpen]);
+}

package/lib/{useClosestTitle.js → cjs/useClosestTitle.js}

@@ -22,8 +22,8 @@ function matches(element, selectorString) {
   }
 }
 function closestAncestor(node, s) {
-  var element = node;
-  var ancestor = node;
+  const element = node;
+  let ancestor = node;
   if (!document.documentElement.contains(element)) {
     return null;
   }
@@ -36,30 +36,30 @@ function closestAncestor(node, s) {
   return null;
 }
 function useClosestTitle(props) {
-  var targetRef = (0, _react.useRef)(null);
-  var titleNodeRef = (0, _react.useRef)(null);
-  var saveTitle = (0, _react.useCallback)(function (element) {
-    var title = element.getAttribute('title');
+  const targetRef = (0, _react.useRef)(null);
+  const titleNodeRef = (0, _react.useRef)(null);
+  const saveTitle = (0, _react.useCallback)(element => {
+    const title = element.getAttribute('title');
     if (title) {
       element.setAttribute('data-restore-title', title);
       element.removeAttribute('title');
     } else if (element.tagName === 'svg') {
-      var titleTag = element.querySelector('title');
+      const titleTag = element.querySelector('title');
       if (titleTag) {
         element.setAttribute('data-restore-title', titleTag.innerHTML);
         titleTag.remove();
       }
     }
-    var hasParentTitle = element.closest('[title]');
+    const hasParentTitle = element.closest('[title]');
     if (hasParentTitle) {
       saveTitle(hasParentTitle);
     }
   }, []);
-  var restoreTitle = (0, _react.useCallback)(function (element) {
-    var title = element.getAttribute('data-restore-title');
+  const restoreTitle = (0, _react.useCallback)(element => {
+    const title = element.getAttribute('data-restore-title');
     if (title) {
       if (element.tagName === 'svg') {
-        var titleTag = document.createElement('title');
+        const titleTag = document.createElement('title');
         titleTag.innerHTML = title;
         element.appendChild(titleTag);
       } else {
@@ -67,19 +67,18 @@ function useClosestTitle(props) {
       }
       element.removeAttribute('data-restore-title');
     }
-    var hasParentTitle = element.closest('[data-restore-title]');
+    const hasParentTitle = element.closest('[data-restore-title]');
     if (hasParentTitle) {
       restoreTitle(hasParentTitle);
     }
   }, []);
-  var onClick = (0, _react.useCallback)(function (event) {
+  const onClick = (0, _react.useCallback)(event => {
     props.onClick();
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     onHide(event);
   }, []);
-  var onHide = (0, _react.useCallback)(function (event) {
-    var _event$relatedTarget, _props$tooltipRef$cur, _targetRef$current;
-    if (event && !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.getAttribute('title')) && ((_props$tooltipRef$cur = props.tooltipRef.current) !== null && _props$tooltipRef$cur !== void 0 && _props$tooltipRef$cur.contains(event.relatedTarget) || (_targetRef$current = targetRef.current) !== null && _targetRef$current !== void 0 && _targetRef$current.contains(event.relatedTarget))) {
+  const onHide = (0, _react.useCallback)(event => {
+    if (event && !event.relatedTarget?.getAttribute('title') && (props.tooltipRef.current?.contains(event.relatedTarget) || targetRef.current?.contains(event.relatedTarget))) {
       return null;
     }
     props.onHide();
@@ -92,7 +91,7 @@ function useClosestTitle(props) {
       targetRef.current = null;
     }
   }, []);
-  var forceHide = (0, _react.useCallback)(function () {
+  const forceHide = (0, _react.useCallback)(() => {
     props.forceHide();
     if (titleNodeRef.current) {
       restoreTitle(titleNodeRef.current);
@@ -103,21 +102,21 @@ function useClosestTitle(props) {
       targetRef.current = null;
     }
   }, []);
-  var getProps = (0, _react.useCallback)(function (event, hideBrowserTitle) {
+  const getProps = (0, _react.useCallback)((event, hideBrowserTitle) => {
     if (targetRef.current) {
       props.onClick();
       if (onHide(event) === null) {
         return;
       }
     }
-    var target = event.target;
-    var hasTitle = target && (target.hasAttribute('[title]') || target.hasAttribute('[data-title]'));
-    var node = hasTitle ? target : closestAncestor(target, '[title], [data-title]');
-    var hasNonEmptyTitle = (node === null || node === void 0 ? void 0 : node.getAttribute('title')) !== '';
+    const target = event.target;
+    const hasTitle = target && (target.hasAttribute('[title]') || target.hasAttribute('[data-title]'));
+    const node = hasTitle ? target : closestAncestor(target, '[title], [data-title]');
+    const hasNonEmptyTitle = node?.getAttribute('title') !== '';
     if (node && hasNonEmptyTitle) {
       targetRef.current = target;
       target.addEventListener('click', onClick);
-      var title = node.getAttribute('title') || node.getAttribute('data-title') || '';
+      const title = node.getAttribute('title') || node.getAttribute('data-title') || '';
       titleNodeRef.current = node;
       if (hideBrowserTitle) {
         saveTitle(node);
@@ -127,14 +126,14 @@ function useClosestTitle(props) {
         delay: node.getAttribute('data-tooltip-delay'),
         floating: Boolean(node.getAttribute('data-tooltip-floating')),
         setAsHTML: !!node.getAttribute('data-title-set-as-html'),
-        title: title
+        title
       };
     }
   }, []);
   return {
-    forceHide: forceHide,
-    getProps: getProps,
-    onHide: onHide,
+    forceHide,
+    getProps,
+    onHide,
     target: targetRef,
     titleNode: titleNodeRef
   };

package/lib/cjs/useTooltipState.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTooltipState = useTooltipState;
+var _react = require("react");
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+function useTooltipState(_ref) {
+  let {
+    delay = 600
+  } = _ref;
+  const [isOpen, setOpen] = (0, _react.useState)(false);
+  const timeoutIdRef = (0, _react.useRef)();
+  const open = (0, _react.useCallback)((immediate, customDelay) => {
+    if (!immediate) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(true);
+      }, customDelay !== undefined ? customDelay : delay);
+    } else {
+      setOpen(true);
+    }
+  }, []);
+  const close = (0, _react.useCallback)(() => {
+    clearTimeout(timeoutIdRef.current);
+    setOpen(false);
+  }, []);
+  return {
+    close,
+    isOpen,
+    open
+  };
+}

package/lib/esm/Tooltip.js

@@ -0,0 +1,31 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+export const ALIGN_POSITIONS = ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
+export const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    alignPosition = 'bottom',
+    children,
+    className,
+    show,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, 'tooltip', `clay-tooltip-${alignPosition}`, {
+      show
+    }),
+    role: "tooltip"
+  }, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "arrow"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "tooltip-inner"
+  }, children));
+});
+Tooltip.displayName = 'ClayTooltip';