@clayui/tooltip 3.141.1-alpha.1 → 3.141.1

package/lib/Tooltip.js

@@ -0,0 +1,39 @@
+"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';

package/lib/TooltipProvider.js

@@ -0,0 +1,233 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _useClosestTitle2 = require("./useClosestTitle");
+var _useTooltipState2 = require("./useTooltipState");
+var _excluded = ["type"];
+/**
+ * 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 initialState = {
+  align: 'top',
+  floating: false,
+  setAsHTML: false,
+  title: ''
+};
+var TRIGGER_HIDE_EVENTS = ['dragstart', 'mouseout', 'mouseup', 'pointerup', 'touchend'];
+var TRIGGER_SHOW_EVENTS = ['mouseover', 'mouseup', 'pointerdown', 'touchstart'];
+var reducer = function reducer(state, _ref) {
+  var type = _ref.type,
+    payload = _objectWithoutProperties(_ref, _excluded);
+  switch (type) {
+    case 'update':
+      return _objectSpread(_objectSpread({}, state), payload);
+    case 'reset':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        align: initialState.align,
+        floating: false
+      });
+    default:
+      throw new TypeError();
+  }
+};
+var ClayTooltipProvider = exports.ClayTooltipProvider = function ClayTooltipProvider(_ref2) {
+  var _ref2$autoAlign = _ref2.autoAlign,
+    autoAlign = _ref2$autoAlign === void 0 ? true : _ref2$autoAlign,
+    children = _ref2.children,
+    _ref2$containerProps = _ref2.containerProps,
+    containerProps = _ref2$containerProps === void 0 ? {} : _ref2$containerProps,
+    _ref2$contentRenderer = _ref2.contentRenderer,
+    contentRenderer = _ref2$contentRenderer === void 0 ? function (props) {
+      return props.title;
+    } : _ref2$contentRenderer,
+    _ref2$delay = _ref2.delay,
+    delay = _ref2$delay === void 0 ? 600 : _ref2$delay,
+    scope = _ref2.scope;
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    align = _useReducer2$.align,
+    floating = _useReducer2$.floating,
+    setAsHTML = _useReducer2$.setAsHTML,
+    _useReducer2$$title = _useReducer2$.title,
+    title = _useReducer2$$title === void 0 ? '' : _useReducer2$$title,
+    dispatch = _useReducer2[1];
+  var tooltipRef = (0, _react.useRef)(null);
+  var _useInteractionFocus = (0, _shared.useInteractionFocus)(),
+    getInteraction = _useInteractionFocus.getInteraction,
+    isFocusVisible = _useInteractionFocus.isFocusVisible;
+  var isHovered = (0, _react.useRef)(false);
+  var isFocused = (0, _react.useRef)(false);
+  var _useTooltipState = (0, _useTooltipState2.useTooltipState)({
+      delay: delay
+    }),
+    close = _useTooltipState.close,
+    isOpen = _useTooltipState.isOpen,
+    open = _useTooltipState.open;
+  var _useClosestTitle = (0, _useClosestTitle2.useClosestTitle)({
+      forceHide: (0, _react.useCallback)(function () {
+        dispatch({
+          type: 'reset'
+        });
+        close();
+      }, []),
+      onClick: (0, _react.useCallback)(function () {
+        isFocused.current = false;
+        isHovered.current = false;
+      }, []),
+      onHide: (0, _react.useCallback)(function () {
+        if (!isHovered.current && !isFocused.current) {
+          dispatch({
+            type: 'reset'
+          });
+          close();
+        }
+      }, []),
+      tooltipRef: tooltipRef
+    }),
+    forceHide = _useClosestTitle.forceHide,
+    getProps = _useClosestTitle.getProps,
+    onHide = _useClosestTitle.onHide,
+    target = _useClosestTitle.target,
+    titleNode = _useClosestTitle.titleNode;
+  (0, _useAlign.useAlign)({
+    align: align,
+    autoAlign: autoAlign,
+    floating: floating,
+    isOpen: isOpen,
+    onAlign: (0, _react.useCallback)(function (align) {
+      return dispatch({
+        align: align,
+        type: 'update'
+      });
+    }, []),
+    sourceElement: tooltipRef,
+    targetElement: titleNode,
+    title: title
+  });
+  var onShow = (0, _react.useCallback)(function (event) {
+    if (isHovered.current || isFocused.current) {
+      var _props = getProps(event, isHovered.current);
+      if (_props) {
+        var _ref3;
+        dispatch({
+          align: (_ref3 = _props.align) !== null && _ref3 !== void 0 ? _ref3 : 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)(function () {
+    var handleEsc = function handleEsc(event) {
+      if (isOpen && event.key === _shared.Keys.Esc) {
+        event.stopImmediatePropagation();
+        forceHide();
+      }
+    };
+    document.addEventListener('keyup', handleEsc, true);
+    return function () {
+      return document.removeEventListener('keyup', handleEsc, true);
+    };
+  }, [isOpen]);
+  var onHoverStart = function onHoverStart(event) {
+    if (getInteraction() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
+    onShow(event);
+  };
+  var onHoverEnd = function onHoverEnd(event) {
+    isFocused.current = false;
+    isHovered.current = false;
+    onHide(event);
+  };
+  var onFocus = function onFocus(event) {
+    if (isFocusVisible()) {
+      isFocused.current = true;
+      onShow(event);
+    }
+  };
+  var onBlur = function onBlur(event) {
+    isFocused.current = false;
+    isHovered.current = false;
+    onHide(event);
+  };
+  (0, _react.useEffect)(function () {
+    if (scope) {
+      var disposeShowEvents = TRIGGER_SHOW_EVENTS.map(function (eventName) {
+        return (0, _shared.delegate)(document.body, eventName, scope, onHoverStart);
+      });
+      var disposeHideEvents = TRIGGER_HIDE_EVENTS.map(function (eventName) {
+        return (0, _shared.delegate)(document.body, eventName, "".concat(scope, ", .tooltip"), onHoverEnd);
+      });
+      var disposeShowFocus = (0, _shared.delegate)(document.body, 'focus', "".concat(scope, ", .tooltip"), onFocus, true);
+      var disposeCloseBlur = (0, _shared.delegate)(document.body, 'blur', "".concat(scope, ", .tooltip"), onBlur, true);
+      return function () {
+        disposeShowEvents.forEach(function (_ref4) {
+          var dispose = _ref4.dispose;
+          return dispose();
+        });
+        disposeHideEvents.forEach(function (_ref5) {
+          var dispose = _ref5.dispose;
+          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 === null || children === void 0 ? void 0 : 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;
+  var titleContent = contentRenderer({
+    targetNode: target.current,
+    title: title
+  });
+  var 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, _objectSpread(_objectSpread({}, children.props), {}, {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.props.children, tooltip),
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseOut: onHoverEnd,
+    onMouseOver: onHoverStart
+  })));
+};

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

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

package/lib/useAlign.js

@@ -0,0 +1,110 @@
+"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");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var ALIGNMENTS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'];
+var 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']
+};
+var ALIGNMENTS_INVERSE_MAP = {
+  bctc: 'top',
+  bltl: 'top-left',
+  brtr: 'top-right',
+  clcr: 'right',
+  crcl: 'left',
+  tcbc: 'bottom',
+  tlbl: 'bottom-left',
+  trbr: 'bottom-right'
+};
+var BOTTOM_OFFSET = [0, 7];
+var LEFT_OFFSET = [-7, 0];
+var RIGHT_OFFSET = [7, 0];
+var TOP_OFFSET = [0, -7];
+var 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
+};
+var ALIGNMENTS_FORCE_MAP = _objectSpread(_objectSpread({}, ALIGNMENTS_INVERSE_MAP), {}, {
+  bctc: 'top-left',
+  tcbc: 'bottom-left'
+});
+function useAlign(_ref) {
+  var align = _ref.align,
+    autoAlign = _ref.autoAlign,
+    floating = _ref.floating,
+    isOpen = _ref.isOpen,
+    onAlign = _ref.onAlign,
+    sourceElement = _ref.sourceElement,
+    targetElement = _ref.targetElement,
+    title = _ref.title;
+  var mousePosition = (0, _shared.useMousePosition)(20);
+  (0, _react.useEffect)(function () {
+    if (sourceElement.current && isOpen && floating) {
+      var points = ALIGNMENTS_MAP[align || 'top'];
+      var _mousePosition = _slicedToArray(mousePosition, 2),
+        clientX = _mousePosition[0],
+        clientY = _mousePosition[1];
+      (0, _domAlign.alignPoint)(sourceElement.current, {
+        clientX: clientX,
+        clientY: clientY
+      }, {
+        offset: OFFSET_MAP[points.join('')],
+        points: points
+      });
+    }
+  }, [isOpen, floating]);
+  (0, _react.useEffect)(function () {
+    if (targetElement.current && sourceElement.current && isOpen && !floating) {
+      var points = ALIGNMENTS_MAP[align || 'top'];
+      var alignment = (0, _shared.doAlign)({
+        overflow: {
+          adjustX: autoAlign,
+          adjustY: autoAlign
+        },
+        points: points,
+        sourceElement: sourceElement.current,
+        targetElement: targetElement.current
+      });
+      var alignmentString = alignment.points.join('');
+      var 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/{cjs/useClosestTitle.js → useClosestTitle.js}

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

package/lib/useTooltipState.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTooltipState = useTooltipState;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function useTooltipState(_ref) {
+  var _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 600 : _ref$delay;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var timeoutIdRef = (0, _react.useRef)();
+  var open = (0, _react.useCallback)(function (immediate, customDelay) {
+    if (!immediate) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = setTimeout(function () {
+        setOpen(true);
+      }, customDelay !== undefined ? customDelay : delay);
+    } else {
+      setOpen(true);
+    }
+  }, []);
+  var close = (0, _react.useCallback)(function () {
+    clearTimeout(timeoutIdRef.current);
+    setOpen(false);
+  }, []);
+  return {
+    close: close,
+    isOpen: isOpen,
+    open: open
+  };
+}

package/package.json

@@ -1,24 +1,21 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.141.1-alpha.1",
+	"version": "3.141.1",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
-	"main": "lib/cjs/index.js",
-	"module": "lib/esm/index.js",
-	"exports": {
-		"import": "./lib/esm/index.js",
-		"require": "./lib/cjs/index.js"
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
 	},
+	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
 	"ts:main": "src/index.tsx",
 	"files": [
 		"lib"
 	],
 	"scripts": {
-		"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",
+		"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
 		"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"
@@ -28,7 +25,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.141.1-alpha.1",
+		"@clayui/shared": "^3.141.1",
 		"classnames": "^2.2.6",
 		"dom-align": "^1.12.2",
 		"warning": "^4.0.3"
@@ -41,5 +38,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "072149212c17bff4c6a2da1562e1b0cc2c6dff8a"
+	"gitHead": "b52707780a6584e5e230727e5d7af44e1b106adb"
 }

package/lib/cjs/Tooltip.js

@@ -1,36 +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"));
-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';