orcs-design-system 2.1.13 → 2.1.15

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -336,7 +336,7 @@ export var keepInViewExample = function keepInViewExample() {
   }, "Remove")), /*#__PURE__*/React.createElement(ActionsMenu, {
     menuTopPosition: "30px",
     menuLeftPosition: "0",
-    menuWidth: "220px",
+    menuWidth: "200px",
     customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
       variant: "ghost",
       type: "button",

package/es/components/ActionsMenu/index.js

@@ -165,13 +165,14 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
 
   var _useKeepInView = useKeepInView({
     direction: direction,
-    callback: setMenuPosition,
-    shown: true
+    callback: setMenuPosition
   }),
-      _useKeepInView2 = _slicedToArray(_useKeepInView, 1),
-      ref = _useKeepInView2[0];
+      _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
+      ref = _useKeepInView2[0],
+      setIsShown = _useKeepInView2[1];
 
   var onToggleInView = function onToggleInView(e) {
+    setIsShown(!toggleState);
     onToggle(e);
   };
 

package/es/hooks/keepInView.js

@@ -20,6 +20,14 @@ export var oppositeDirection = function oppositeDirection(direction) {
   if (!direction || !directions[direction]) return "left";
   return directions[direction];
 };
+
+var isWithinRootBounds = function isWithinRootBounds(intersectionObserverEntry) {
+  var rootBounds = intersectionObserverEntry.rootBounds;
+  var intersectionRect = intersectionObserverEntry.intersectionRect;
+  var topDiff = intersectionRect.top - rootBounds.top;
+  var bottomDiff = intersectionRect.bottom - rootBounds.bottom;
+  return topDiff > 0 && bottomDiff < -100;
+};
 /**
  * This hook keeps track of the in view status of a component that has a direction setting, like a Popover or ActionsMenu.
  *
@@ -39,6 +47,7 @@ export var oppositeDirection = function oppositeDirection(direction) {
  *
  */
 
+
 export var useKeepInView = function useKeepInView(_ref) {
   var direction = _ref.direction,
       _ref$shown = _ref.shown,
@@ -64,14 +73,17 @@ export var useKeepInView = function useKeepInView(_ref) {
 
   var _useInView = useInView(inViewOptions),
       ref = _useInView.ref,
-      inView = _useInView.inView;
+      inView = _useInView.inView,
+      entry = _useInView.entry;
 
   useEffect(function () {
     if (!inView && isShown) {
-      var newDirection = oppositeDirection(lastDirection.direction);
-      callback(newDirection);
-      lastDirection.direction = newDirection;
+      if (isWithinRootBounds(entry)) {
+        var newDirection = oppositeDirection(lastDirection.direction);
+        callback(newDirection);
+        lastDirection.direction = newDirection;
+      }
     }
-  }, [inView, direction, isShown, callback, lastDirection]);
+  }, [inView, entry, isShown, callback, lastDirection]);
   return [ref, setIsShown];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",