@clayui/tooltip 3.142.0 → 3.143.0

package/lib/esm/TooltipProvider.js

@@ -0,0 +1,208 @@
+/**
+ * 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";
+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();
+  }
+};
+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);
+  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({
+    forceHide: useCallback(() => {
+      dispatch({
+        type: 'reset'
+      });
+      close();
+    }, []),
+    onClick: useCallback(() => {
+      isFocused.current = false;
+      isHovered.current = false;
+    }, []),
+    onHide: useCallback(() => {
+      if (!isHovered.current && !isFocused.current) {
+        dispatch({
+          type: 'reset'
+        });
+        close();
+      }
+    }, []),
+    tooltipRef
+  });
+  useAlign({
+    align,
+    autoAlign,
+    floating,
+    isOpen,
+    onAlign: useCallback(align => dispatch({
+      align,
+      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);
+      }
+    }
+  }, [align]);
+  useEffect(() => {
+    const handleEsc = event => {
+      if (isOpen && event.key === 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);
+  };
+  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);
+      return () => {
+        disposeShowEvents.forEach(_ref3 => {
+          let {
+            dispose
+          } = _ref3;
+          return dispose();
+        });
+        disposeHideEvents.forEach(_ref4 => {
+          let {
+            dispose
+          } = _ref4;
+          return 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;
+  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
+    }
+  }) : titleContent));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, scope ? /*#__PURE__*/React.createElement(React.Fragment, null, tooltip, children) : children && /*#__PURE__*/React.cloneElement(children, {
+    ...children.props,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, children.props.children, tooltip),
+    onBlur,
+    onFocus,
+    onMouseOut: onHoverEnd,
+    onMouseOver: onHoverStart
+  }));
+};

package/lib/esm/index.js

@@ -0,0 +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;

package/lib/esm/useAlign.js

@@ -0,0 +1,95 @@
+/**
+ * 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'];
+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'
+};
+export function useAlign(_ref) {
+  let {
+    align,
+    autoAlign,
+    floating,
+    isOpen,
+    onAlign,
+    sourceElement,
+    targetElement,
+    title
+  } = _ref;
+  const mousePosition = useMousePosition(20);
+  useEffect(() => {
+    if (sourceElement.current && isOpen && floating) {
+      const points = ALIGNMENTS_MAP[align || 'top'];
+      const [clientX, clientY] = mousePosition;
+      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 alignment = 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/esm/useClosestTitle.js

@@ -0,0 +1,134 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import { useCallback, useRef } from 'react';
+function matches(element, selectorString) {
+  if (element.matches) {
+    return element.matches(selectorString);
+  } else if (element.msMatchesSelector) {
+    return element.msMatchesSelector(selectorString);
+  } else if (element.webkitMatchesSelector) {
+    return element.webkitMatchesSelector(selectorString);
+  } else {
+    return false;
+  }
+}
+function closestAncestor(node, s) {
+  const element = node;
+  let ancestor = node;
+  if (!document.documentElement.contains(element)) {
+    return null;
+  }
+  do {
+    if (matches(ancestor, s)) {
+      return ancestor;
+    }
+    ancestor = ancestor.parentElement;
+  } while (ancestor !== null);
+  return null;
+}
+export function useClosestTitle(props) {
+  const targetRef = useRef(null);
+  const titleNodeRef = useRef(null);
+  const saveTitle = useCallback(element => {
+    const title = element.getAttribute('title');
+    if (title) {
+      element.setAttribute('data-restore-title', title);
+      element.removeAttribute('title');
+    } else if (element.tagName === 'svg') {
+      const titleTag = element.querySelector('title');
+      if (titleTag) {
+        element.setAttribute('data-restore-title', titleTag.innerHTML);
+        titleTag.remove();
+      }
+    }
+    const hasParentTitle = element.closest('[title]');
+    if (hasParentTitle) {
+      saveTitle(hasParentTitle);
+    }
+  }, []);
+  const restoreTitle = useCallback(element => {
+    const title = element.getAttribute('data-restore-title');
+    if (title) {
+      if (element.tagName === 'svg') {
+        const titleTag = document.createElement('title');
+        titleTag.innerHTML = title;
+        element.appendChild(titleTag);
+      } else {
+        element.setAttribute('title', title);
+      }
+      element.removeAttribute('data-restore-title');
+    }
+    const hasParentTitle = element.closest('[data-restore-title]');
+    if (hasParentTitle) {
+      restoreTitle(hasParentTitle);
+    }
+  }, []);
+  const onClick = useCallback(event => {
+    props.onClick();
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    onHide(event);
+  }, []);
+  const onHide = useCallback(event => {
+    if (event && !event.relatedTarget?.getAttribute('title') && (props.tooltipRef.current?.contains(event.relatedTarget) || targetRef.current?.contains(event.relatedTarget))) {
+      return null;
+    }
+    props.onHide();
+    if (titleNodeRef.current) {
+      restoreTitle(titleNodeRef.current);
+      titleNodeRef.current = null;
+    }
+    if (targetRef.current) {
+      targetRef.current.removeEventListener('click', onClick);
+      targetRef.current = null;
+    }
+  }, []);
+  const forceHide = useCallback(() => {
+    props.forceHide();
+    if (titleNodeRef.current) {
+      restoreTitle(titleNodeRef.current);
+      titleNodeRef.current = null;
+    }
+    if (targetRef.current) {
+      targetRef.current.removeEventListener('click', onClick);
+      targetRef.current = null;
+    }
+  }, []);
+  const getProps = useCallback((event, hideBrowserTitle) => {
+    if (targetRef.current) {
+      props.onClick();
+      if (onHide(event) === null) {
+        return;
+      }
+    }
+    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);
+      const title = node.getAttribute('title') || node.getAttribute('data-title') || '';
+      titleNodeRef.current = node;
+      if (hideBrowserTitle) {
+        saveTitle(node);
+      }
+      return {
+        align: node.getAttribute('data-tooltip-align'),
+        delay: node.getAttribute('data-tooltip-delay'),
+        floating: Boolean(node.getAttribute('data-tooltip-floating')),
+        setAsHTML: !!node.getAttribute('data-title-set-as-html'),
+        title
+      };
+    }
+  }, []);
+  return {
+    forceHide,
+    getProps,
+    onHide,
+    target: targetRef,
+    titleNode: titleNodeRef
+  };
+}

package/lib/esm/useTooltipState.js

@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import { useCallback, useRef, useState } from 'react';
+export function useTooltipState(_ref) {
+  let {
+    delay = 600
+  } = _ref;
+  const [isOpen, setOpen] = useState(false);
+  const timeoutIdRef = useRef();
+  const open = useCallback((immediate, customDelay) => {
+    if (!immediate) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(true);
+      }, customDelay !== undefined ? customDelay : delay);
+    } else {
+      setOpen(true);
+    }
+  }, []);
+  const close = useCallback(() => {
+    clearTimeout(timeoutIdRef.current);
+    setOpen(false);
+  }, []);
+  return {
+    close,
+    isOpen,
+    open
+  };
+}

package/package.json

@@ -1,21 +1,24 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.142.0",
+	"version": "3.143.0",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
-	"engines": {
-		"node": ">=0.12.0",
-		"npm": ">=3.0.0"
+	"main": "lib/cjs/index.js",
+	"module": "lib/esm/index.js",
+	"exports": {
+		"import": "./lib/esm/index.js",
+		"require": "./lib/cjs/index.js"
 	},
-	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
 	"ts:main": "src/index.tsx",
 	"files": [
 		"lib"
 	],
 	"scripts": {
-		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build": "yarn build:cjs && yarn build:esm",
+		"build:cjs": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/cjs --extensions .ts,.tsx",
+		"build:esm": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/esm --extensions .ts,.tsx --env-name esm",
 		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
 		"format": "prettier --write \"**/*.{js,ts,tsx,md,mdx,json,scss}\"",
 		"test": "jest --config ../../jest.config.js"
@@ -25,7 +28,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.142.0",
+		"@clayui/shared": "^3.143.0",
 		"classnames": "^2.2.6",
 		"dom-align": "^1.12.2",
 		"warning": "^4.0.3"
@@ -38,5 +41,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "f563be12a87d6fcf03706d235618e5512de63463"
+	"gitHead": "aacf20646cc7fb25c4d60e865ec77d2d503d23e9"
 }

package/lib/Tooltip.js

@@ -1,39 +0,0 @@
-"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"));
-var _excluded = ["alignPosition", "children", "className", "show"];
-/**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-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); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
-var ALIGN_POSITIONS = exports.ALIGN_POSITIONS = ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
-var Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref$alignPosition = _ref.alignPosition,
-    alignPosition = _ref$alignPosition === void 0 ? 'bottom' : _ref$alignPosition,
-    children = _ref.children,
-    className = _ref.className,
-    show = _ref.show,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: (0, _classnames.default)(className, 'tooltip', "clay-tooltip-".concat(alignPosition), {
-      show: 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';