orcs-design-system 2.1.8 → 2.1.10

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

@@ -320,6 +320,45 @@ export var textButtonActionsMenu = function textButtonActionsMenu() {
   return /*#__PURE__*/React.createElement(TextButtonActionsMenu, null);
 };
 textButtonActionsMenu.storyName = "Text Button Actions Menu";
+export var keepInViewExample = function keepInViewExample() {
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "flex-end",
+    width: "100%",
+    flexDirection: "column"
+  }, /*#__PURE__*/React.createElement(ActionsMenu, {
+    direction: "right",
+    mb: "r"
+  }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    href: "https://orchestrated.io/"
+  }, "Open details page"), /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    as: Link,
+    to: "/"
+  }, "Edit")), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    onClick: action("clicked")
+  }, "Remove")), /*#__PURE__*/React.createElement(ActionsMenu, {
+    direction: "right",
+    menuTopPosition: "30px",
+    menuLeftPosition: "0",
+    menuWidth: "220px",
+    customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
+      variant: "ghost",
+      type: "button",
+      iconRight: true,
+      small: true
+    }, "Contact via...", /*#__PURE__*/React.createElement(Icon, {
+      icon: ["fas", "chevron-down"]
+    }))
+  }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    href: "#"
+  }, "Email"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    href: "#"
+  }, "Phone"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    href: "#"
+  }, "MS Teams"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+    href: "#"
+  }, "Slack")));
+};
+keepInViewExample.storyName = "Keep In View Example";
 defaultActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -344,4 +383,9 @@ textButtonActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "textButtonActionsMenu"
+};
+keepInViewExample.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "keepInViewExample"
 };

package/es/components/ActionsMenu/index.js

@@ -7,11 +7,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { useState, useEffect, useImperativeHandle } from "react";
+import React, { useState, useEffect, useImperativeHandle, useCallback } from "react";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
+import { useKeepInView } from "../../hooks/keepInView";
 var crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
 var crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
 var Wrapper = styled.div.withConfig({
@@ -125,15 +126,54 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
       children = _ref.children,
       props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children"]);
 
+  var _useState = useState({
+    menuLeftPosition: menuLeftPosition,
+    menuRightPosition: menuRightPosition,
+    menuTopPosition: menuTopPosition
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      menuPosition = _useState2[0];
+
+  var _useState3 = useState(direction),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inViewDirection = _useState4[0],
+      setInViewDirection = _useState4[1];
+
+  var setMenuPosition = useCallback(function (newDirection) {
+    if (typeof menuLeftPosition !== "undefined" || typeof menuRightPosition !== "undefined") {
+      if (menuPosition.menuLeftPosition) {
+        menuPosition.menuRightPosition = menuPosition.menuLeftPosition;
+        menuPosition.menuLeftPosition = null;
+      } else if (menuPosition.menuRightPosition) {
+        menuPosition.menuLeftPosition = menuPosition.menuRightPosition;
+        menuPosition.menuRightPosition = null;
+      }
+    }
+
+    setInViewDirection(newDirection);
+  }, [menuLeftPosition, menuRightPosition, menuPosition, setInViewDirection]);
+
+  var _useKeepInView = useKeepInView({
+    direction: direction,
+    callback: setMenuPosition,
+    shown: true
+  }),
+      _useKeepInView2 = _slicedToArray(_useKeepInView, 1),
+      ref = _useKeepInView2[0];
+
+  var onToggleInView = function onToggleInView(e) {
+    onToggle(e);
+  };
+
   var triggerBtn = null;
 
   if (customTriggerComponent) {
     triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
-      onClick: onToggle
+      onClick: onToggleInView
     });
   } else {
     triggerBtn = /*#__PURE__*/React.createElement(Control, {
-      onClick: onToggle
+      onClick: onToggleInView
     }, /*#__PURE__*/React.createElement(Icon, {
       isOpen: toggleState
     }));
@@ -141,11 +181,12 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
 
   var component = /*#__PURE__*/React.createElement(Wrapper, props, triggerBtn, /*#__PURE__*/React.createElement(Menu, {
     isOpen: toggleState,
-    direction: direction,
-    menuTopPosition: menuTopPosition,
-    menuLeftPosition: menuLeftPosition,
-    menuRightPosition: menuRightPosition,
-    menuWidth: menuWidth
+    direction: inViewDirection,
+    menuTopPosition: menuPosition.menuTopPosition,
+    menuLeftPosition: menuPosition.menuLeftPosition,
+    menuRightPosition: menuPosition.menuRightPosition,
+    menuWidth: menuWidth,
+    ref: ref
   }, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -174,10 +215,10 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
       props = _objectWithoutProperties(_ref2, ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick"]);
 
-  var _useState = useState(isOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      toggleState = _useState2[0],
-      setToggle = _useState2[1];
+  var _useState5 = useState(isOpen),
+      _useState6 = _slicedToArray(_useState5, 2),
+      toggleState = _useState6[0],
+      setToggle = _useState6[1];
 
   useImperativeHandle(ref, function () {
     return {

package/es/components/Popover/Popover.stories.js

@@ -129,6 +129,15 @@ export var tooltipWithLinkExample = function tooltipWithLinkExample() {
   });
 };
 tooltipWithLinkExample.storyName = "Tooltip with link Example";
+export var keepInViewExample = function keepInViewExample() {
+  return /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "flex-end",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    text: "Description that explains child element"
+  }, /*#__PURE__*/React.createElement(Button, null, "Hover Me!")));
+};
+keepInViewExample.storyName = "Keep In View Example";
 defaultPopover.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -163,4 +172,9 @@ tooltipWithLinkExample.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "tooltipWithLinkExample"
+};
+keepInViewExample.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "keepInViewExample"
 };

package/es/components/Popover/index.js

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
+import { keys } from "lodash";
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
+import { useKeepInView, directions } from "../../hooks/keepInView";
 var Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
@@ -70,12 +73,33 @@ export default function Popover(_ref2) {
       enableSelectAll = _ref2$enableSelectAll === void 0 ? true : _ref2$enableSelectAll,
       props = _objectWithoutProperties(_ref2, ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll"]);
 
+  var _useState = useState(direction),
+      _useState2 = _slicedToArray(_useState, 2),
+      inViewDirection = _useState2[0],
+      setInViewDirection = _useState2[1];
+
+  var _useKeepInView = useKeepInView({
+    direction: direction,
+    callback: setInViewDirection
+  }),
+      _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
+      ref = _useKeepInView2[0],
+      setIsShown = _useKeepInView2[1];
+
   var component = /*#__PURE__*/React.createElement(Container, _extends({
     inlineBlock: inlineBlock
-  }, props), !!text && /*#__PURE__*/React.createElement(Text, {
+  }, props, {
+    onMouseEnter: function onMouseEnter() {
+      return setIsShown(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsShown(false);
+    }
+  }), !!text && /*#__PURE__*/React.createElement(Text, {
+    ref: ref,
     className: "popoverText",
     textAlign: textAlign,
-    direction: direction,
+    direction: inViewDirection,
     width: width,
     enableSelectAll: enableSelectAll
   }, text), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
@@ -93,7 +117,7 @@ Popover.propTypes = {
   children: PropTypes.element,
 
   /** Specifies the direction of the popover. Defaults to right if not specified */
-  direction: PropTypes.oneOf(["top", "topRight", "right", "bottomRight", "bottom", "bottomLeft", "left", "topLeft"]),
+  direction: PropTypes.oneOf(keys(directions)),
 
   /** The text contained in the popover element */
   text: PropTypes.node,
@@ -142,31 +166,8 @@ Popover.__docgenInfo = {
     "direction": {
       "type": {
         "name": "enum",
-        "value": [{
-          "value": "\"top\"",
-          "computed": false
-        }, {
-          "value": "\"topRight\"",
-          "computed": false
-        }, {
-          "value": "\"right\"",
-          "computed": false
-        }, {
-          "value": "\"bottomRight\"",
-          "computed": false
-        }, {
-          "value": "\"bottom\"",
-          "computed": false
-        }, {
-          "value": "\"bottomLeft\"",
-          "computed": false
-        }, {
-          "value": "\"left\"",
-          "computed": false
-        }, {
-          "value": "\"topLeft\"",
-          "computed": false
-        }]
+        "computed": true,
+        "value": "keys(directions)"
       },
       "required": false,
       "description": "Specifies the direction of the popover. Defaults to right if not specified"

package/es/components/TextInput/index.js

@@ -23,7 +23,7 @@ var Group = styled("div").withConfig({
 var IconWrapper = styled.label.withConfig({
   displayName: "TextInput__IconWrapper",
   componentId: "shde0o-0"
-})(["svg{opacity:0.4;position:absolute;}", ";"], function (props) {
+})(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], function (props) {
   return props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], function (props) {
     var inputHeight = themeGet("appScale.inputHeightDefault")(props);
     return "calc(".concat(inputHeight, " / 3 - 1px)");

package/es/hooks/keepInView.js

@@ -0,0 +1,77 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+/**
+ * An explicit mapping of directions to their opposites
+ * This is used in oppositeDirection() to move the Popover when it leaves the viewPort
+ */
+
+export var directions = {
+  top: "bottom",
+  topRight: "bottomLeft",
+  right: "left",
+  bottomRight: "topLeft",
+  bottom: "top",
+  bottomLeft: "topRight",
+  left: "right",
+  topLeft: "bottomRight"
+};
+export var oppositeDirection = function oppositeDirection(direction) {
+  if (!direction || !directions[direction]) return "left";
+  return directions[direction];
+};
+/**
+ * This hook keeps track of the in view status of a component that has a direction setting, like a Popover or ActionsMenu.
+ *
+ * It does this by tracking the "in view" status of a component that has a direction property and then calling a specified
+ * callback with the exact opposite direction setting when it falls out of the view port.
+ *
+ * The hook returns a `ref` (see https://www.npmjs.com/package/react-intersection-observer) which must be set on the
+ * component that is beinbg tracked. It also returns a callback to be called when the component is made visible to the
+ * user. This is useful for Popovers where the direction must only be set on hover or on a mouse click for example. For
+ * components that are always visible set the default visibility prop to `true`.
+ *
+ * To use this hook pass in:
+ * - the initial direction setting
+ * - the default visibility of the component
+ * - the `useInView` options (see https://www.npmjs.com/package/react-intersection-observer)
+ * - a callback to change the direction of the component when it leaves the view port
+ *
+ */
+
+export var useKeepInView = function useKeepInView(_ref) {
+  var direction = _ref.direction,
+      _ref$shown = _ref.shown,
+      shown = _ref$shown === void 0 ? false : _ref$shown,
+      _ref$inViewOptions = _ref.inViewOptions,
+      inViewOptions = _ref$inViewOptions === void 0 ? {
+    threshold: 1,
+    initialInView: true,
+    fallbackInView: true
+  } : _ref$inViewOptions,
+      callback = _ref.callback;
+
+  var _useState = useState({
+    direction: direction
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      lastDirection = _useState2[0];
+
+  var _useState3 = useState(shown),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isShown = _useState4[0],
+      setIsShown = _useState4[1];
+
+  var _useInView = useInView(inViewOptions),
+      ref = _useInView.ref,
+      inView = _useInView.inView;
+
+  useEffect(function () {
+    if (!inView && isShown) {
+      var newDirection = oppositeDirection(lastDirection.direction);
+      callback(newDirection);
+      lastDirection.direction = newDirection;
+    }
+  }, [inView, direction, isShown, callback, lastDirection]);
+  return [ref, setIsShown];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",
@@ -52,6 +52,7 @@
     "react-cool-onclickoutside": "^1.5.9",
     "react-dates": "^21.8.0",
     "react-docgen": "^5.3.0",
+    "react-intersection-observer": "^9.4.3",
     "react-number-format": "^4.4.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",