orcs-design-system 2.1.12 → 2.1.14

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

@@ -94,7 +94,7 @@ export var ActionsMenuItem = styled(function (props) {
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
   componentId: "yvbni2-5"
-})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}"], function (props) {
+})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], function (props) {
   return props.selected ? themeGet("colors.successDark")(props) : "transparent";
 }, function (props) {
   return themeGet("colors.greyDarkest")(props);
@@ -120,6 +120,8 @@ export var ActionsMenuItem = styled(function (props) {
   return themeGet("radii.2")(props);
 }, function (props) {
   return themeGet("radii.2")(props);
+}, function (props) {
+  return themeGet("radii.2")(props);
 });
 export var ActionsMenuBody = function ActionsMenuBody(_ref) {
   var theme = _ref.theme,
@@ -163,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,16 @@ 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 leftDiff = intersectionRect.left - rootBounds.left;
+  var bottomDiff = intersectionRect.bottom - rootBounds.bottom;
+  var rightDiff = intersectionRect.right - rootBounds.right;
+  return topDiff > 0 && leftDiff > 0 && bottomDiff < -100 && rightDiff < -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 +49,7 @@ export var oppositeDirection = function oppositeDirection(direction) {
  *
  */
 
+
 export var useKeepInView = function useKeepInView(_ref) {
   var direction = _ref.direction,
       _ref$shown = _ref.shown,
@@ -64,14 +75,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.12",
+  "version": "2.1.14",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",