@occmundial/occ-atomic 1.32.0 → 1.32.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.32.1](https://github.com/occmundial/occ-atomic/compare/v1.32.0...v1.32.1) (2023-05-31)
+
+
+### Bug Fixes
+
+* Tooltip close delay ([76c2c6b](https://github.com/occmundial/occ-atomic/commit/76c2c6b604193aff5d80668fe7a412c6778ca46b))
+
 # [1.32.0](https://github.com/occmundial/occ-atomic/compare/v1.31.0...v1.32.0) (2023-05-26)
 
 

package/build/Tooltip/Tooltip.js

@@ -80,6 +80,8 @@ function Tooltip(_ref) {
       fit = _ref$fit === void 0 ? false : _ref$fit,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 220 : _ref$width,
+      _ref$strategy = _ref.strategy,
+      strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
       onChange = _ref.onChange;
   var arrowRef = (0, _react.useRef)(null);
 
@@ -120,6 +122,7 @@ function Tooltip(_ref) {
     open: open,
     onOpenChange: setOpen,
     placement: placement,
+    strategy: strategy,
     whileElementsMounted: _react2.autoUpdate,
     middleware: getMiddlewares
   }),
@@ -146,7 +149,8 @@ function Tooltip(_ref) {
     className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
     ref: refs.setFloating,
     style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
-      zIndex: zIndex
+      zIndex: zIndex,
+      position: strategy
     })
   }, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
     ref: arrowRef,
@@ -196,6 +200,9 @@ Tooltip.propTypes = {
   /** The "Width" property of the Tooltip enables modification of its width and accepts a number (e.g., 220), a string (e.g., '220px' or 'auto') or null as its value. */
   width: _propTypes["default"].number,
 
+  /** The CSS position property to use to compute the tooltip position */
+  strategy: _propTypes["default"].oneOf(['absolute', 'fixed']),
+
   /** Callback fired when the Tooltip show state changes. */
   onChange: _propTypes["default"].func
 };

package/build/Tooltip/hooks.js

@@ -21,10 +21,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function useOpenTooltipState(openExternal, setOpenExternal, closeDelay) {
-  var delay = useThrottle({
+  var _useThrottle = useThrottle({
     trailing: true,
     leading: false
-  });
+  }),
+      throttle = _useThrottle.throttle,
+      cancel = _useThrottle.cancel;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -37,20 +39,18 @@ function useOpenTooltipState(openExternal, setOpenExternal, closeDelay) {
   var setOpenSource = (0, _react.useMemo)(function () {
     return openExternal !== undefined ? setOpenExternal !== null && setOpenExternal !== void 0 ? setOpenExternal : function () {} : setOpenInternal;
   }, [openExternal, setOpenExternal, setOpenInternal]);
-  var setOpenSourceDelay = (0, _react.useMemo)(function () {
-    return function (show) {
-      return delay({
-        throttleTime: closeDelay,
-        callback: function callback() {
-          return setOpenSource(show);
-        }
-      });
-    };
-  }, [closeDelay, setOpenSource, delay]);
-
-  function setOpen(open) {
-    if (open) {
-      delay.cancel();
+  var setOpenSourceDelay = (0, _react.useCallback)(function (show) {
+    throttle({
+      throttleTime: closeDelay,
+      callback: function callback() {
+        return setOpenSource(show);
+      }
+    });
+  }, [closeDelay, setOpenSource, throttle]);
+
+  function setOpen(openValue) {
+    if (openValue) {
+      if (open) cancel();
       setOpenSource(true);
     } else {
       closeDelay > 0 ? setOpenSourceDelay(false) : setOpenSource(false);
@@ -58,10 +58,14 @@ function useOpenTooltipState(openExternal, setOpenExternal, closeDelay) {
   }
 
   (0, _react.useEffect)(function () {
-    if (openExternal === false || closeDelay <= 0) return;
-    delay.cancel();
-    setOpenSourceDelay(false);
-  }, [openExternal, setOpenSourceDelay, setOpenSource, delay, closeDelay]);
+    if (closeDelay <= 0) return;
+
+    if (openExternal === false) {
+      cancel();
+    } else {
+      setOpenSourceDelay(false);
+    }
+  }, [openExternal, setOpenSourceDelay, setOpenSource, closeDelay, cancel]);
   return [open, setOpen];
 }
 
@@ -70,8 +74,20 @@ function useThrottle() {
   var timeout = (0, _react.useRef)(null);
   var lastCallback = (0, _react.useRef)(null);
   var date = (0, _react.useRef)(null);
-
-  function throttle(_ref) {
+  var cancel = (0, _react.useCallback)(function () {
+    if (!timeout.current) return;
+    window.clearTimeout(timeout.current);
+    timeout.current = null;
+    date.current = null;
+  }, []);
+  var flush = (0, _react.useCallback)(function () {
+    if (!lastCallback.current) return;
+    lastCallback.current();
+    lastCallback.current = null;
+    date.current = null;
+    cancel();
+  }, [cancel]);
+  var throttle = (0, _react.useCallback)(function (_ref) {
     var _ref4;
 
     var callback = _ref.callback,
@@ -100,33 +116,17 @@ function useThrottle() {
 
       ((_defaults$trailing = defaults === null || defaults === void 0 ? void 0 : defaults.trailing) !== null && _defaults$trailing !== void 0 ? _defaults$trailing : trailing) ? flush() : cancel();
     }, (_ref4 = throttleTime !== null && throttleTime !== void 0 ? throttleTime : defaults.throttleTime) !== null && _ref4 !== void 0 ? _ref4 : 1000);
-  }
-
-  function flush() {
-    if (!lastCallback.current) return;
-    lastCallback.current();
-    lastCallback.current = null;
-    date.current = null;
-    cancel();
-  }
-
-  function cancel() {
-    if (!timeout.current) return;
-    window.clearTimeout(timeout.current);
-    timeout.current = null;
-    date.current = null;
-  }
-
+  }, [cancel, defaults.callback, defaults === null || defaults === void 0 ? void 0 : defaults.leading, defaults.throttleTime, defaults === null || defaults === void 0 ? void 0 : defaults.trailing, flush]);
   (0, _react.useEffect)(function () {
     return cancel;
-  }, []);
-  throttle.flush = flush;
-  throttle.cancel = cancel;
-  throttle.date = date;
-
-  throttle.isActive = function () {
-    return !!date.current;
+  }, [cancel]);
+  return {
+    throttle: throttle,
+    flush: flush,
+    cancel: cancel,
+    isActive: function isActive() {
+      return !!date.current;
+    },
+    date: date
   };
-
-  return throttle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "1.32.0",
+  "version": "1.32.1",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",