@agilemotion/oui-react-js 1.3.0 → 1.3.1

package/dist/components/StepperTitleBar.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _core = require("@material-ui/core");
+
+require("./StepperTitleBar.css");
+
+var _jquery = _interopRequireDefault(require("jquery"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _core.makeStyles)(theme => ({
+  theme: {
+    backgroundColor: theme.palette.secondary.main
+  },
+  themeBorder: {
+    borderColor: theme.palette.secondary.main
+  }
+}));
+
+const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        steps = _React$useState2[0],
+        setSteps = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(true),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        initializing = _React$useState4[0],
+        setInitializing = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        segmentPercentage = _React$useState6[0],
+        setSegmentPercentage = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        currentIndex = _React$useState8[0],
+        setCurrentIndex = _React$useState8[1];
+
+  let counter = -1;
+  let graphicsCounter = -1;
+  const classes = useStyles();
+
+  _react.default.useEffect(() => {
+    if (initializing) {
+      props.handle.api = api();
+
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+      eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+      let subscription = {
+        publisher: "applicationContext",
+        eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
+        actions: [{
+          actionType: "script",
+          script: {
+            lines: ["if($event.data.name === 'stepperTitle'){", "   @#{".concat(props.config.id, "}.show()"), "}"]
+          }
+        }]
+      };
+      eventHandlingConfig.subscriptions.push(subscription);
+
+      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+      props.loadCompleteHandler(props.config.id);
+      setInitializing(false);
+      (0, _jquery.default)(document).ready(function () {
+        recalcLinePosition();
+      });
+      (0, _jquery.default)(window).resize(function () {
+        recalcLinePosition();
+      });
+    }
+  });
+
+  const recalcLinePosition = () => {
+    (0, _jquery.default)("#selectedLineDiv").css({
+      'width': (0, _jquery.default)("#step-container-0").width() - ((0, _jquery.default)("#titleDiv").width() + 40) + 'px',
+      'position': 'absolute'
+    });
+  };
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        return [];
+      },
+
+      show() {
+        let steps = _ApplicationContext.default.graphs[0].getTitleStack();
+
+        setSteps(steps);
+        setCurrentIndex(_ApplicationContext.default.graphs[0].getCurrentNodeIndex());
+        setSegmentPercentage(100 / steps.length);
+      }
+
+    };
+  };
+
+  function renderStep(step) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ++graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter === currentIndex ? "".concat(classes.themeBorder, " stepperLine") : 'stepperLine',
+      id: graphicsCounter === currentIndex ? 'selectedLineDiv' : 'lineDiv'
+    }) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotBoxActive") : 'stepDotBox',
+      style: {
+        display: "table-cell"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: graphicsCounter < currentIndex ? "".concat(classes.theme, " stepDotVisited") : graphicsCounter === currentIndex ? "".concat(classes.theme, " stepDotActive") : 'stepDot'
+    }, step.index), graphicsCounter === currentIndex ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "stepTitle",
+      id: "titleDiv"
+    }, step.title) : null));
+  }
+
+  function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100",
+      style: {
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement("table", {
+      cellPadding: "0",
+      border: "0",
+      width: "100%",
+      style: {
+        borderCollapse: "collapse"
+      }
+    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
+      width: segmentPercentage + '%',
+      align: "right",
+      style: {
+        whiteSpace: "nowrap",
+        paddingTop: '8px',
+        maxHeight: '8px'
+      },
+      id: 'step-container-' + counter++
+    }, renderStep(step)))))));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '24px',
+      color: '#202124',
+      padding: "16px 0",
+      width: "60%"
+    }
+  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex) ? render() : null) : null);
+}));
+
+var _default = StepperTitleBar;
+exports.default = _default;

package/dist/components/TitleBar.js

@@ -56,7 +56,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         actions: [{
           actionType: "script",
           script: {
-            lines: ["@#{".concat(props.config.id, "}.title = $event.data.value")]
+            lines: ["if($event.data.name === 'title'){", "   @#{".concat(props.config.id, "}.title = $event.data.value"), "}"]
           }
         }]
       };

package/dist/components/Toolbar.js

@@ -270,7 +270,10 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       className: "row",
       ref: ref,
       style: {
-        padding: '0 0 8px 0'
+        padding: '0 0 8px 0',
+        width: '100%',
+        textAlign: _Utils.default.getComponentAttribute(toolbar, 'align', null),
+        display: "inline-block"
       }
     }, toolbar.sections.map(section => {
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -293,9 +296,9 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      padding: _Utils.default.getComponentAttribute(props.config, 'padding', '0px 32px 0px 32px'),
+      padding: _Utils.default.getComponentAttribute(props.config, 'padding', null),
       borderBottom: getBorderBottom(),
-      margin: _Utils.default.getComponentAttribute(props.config, 'margin', null)
+      margin: _Utils.default.getComponentAttribute(props.config, 'margin', '0px 32px 0px 32px')
     }
   }, render(props.config));
 });

package/dist/components/form/Form.js

@@ -390,9 +390,9 @@ const Form = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
       } else {
         if (_Utils.default.isNull(eventConfig)) {
           eventConfig = {};
-          eventConfig.service = service;
-        } // TODO : Implement the invalid paramenter callback
+        }
 
+        eventConfig.service = service; // TODO : Implement the invalid paramenter callback
 
         _ServiceCallActionHandler.default.execute(eventConfig, null, null, props.viewId, data => {
           parseValues(transformDataObject(data));

package/dist/components/layout/Layout.js

@@ -19,18 +19,22 @@ var _DataGrid = require("../DataGrid");
 
 var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
 
-var _SignatureTemplateDesigner = _interopRequireDefault(require("../SignatureTemplateDesigner"));
+var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/SignatureTemplateDesigner"));
 
 var _AlertBar = _interopRequireDefault(require("../AlertBar"));
 
 var _TitleBar = _interopRequireDefault(require("../TitleBar"));
 
+var _StepperTitleBar = _interopRequireDefault(require("../StepperTitleBar"));
+
 var _Tree = require("../Tree");
 
 var _Form = _interopRequireDefault(require("../form/Form"));
 
 var _asyncMutex = require("async-mutex");
 
+var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -230,6 +234,12 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ref: /*#__PURE__*/_react.default.createRef(),
       viewId: props.viewId,
       loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'stepperTitleBar' ? /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
     }) : component.type === 'alertBar' ? /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
       config: component,
       handle: createComponentHandle(component),
@@ -242,6 +252,12 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ref: /*#__PURE__*/_react.default.createRef(),
       viewId: props.viewId,
       loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'documentViewer' ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
     }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported component type " + component.type);
   }
 
@@ -335,7 +351,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
     let counter = 0;
 
-    let height = _Utils.default.getComponentAttribute(layout, 'height', '100%');
+    let height = _Utils.default.getComponentAttribute(layout, 'height', 'auto');
 
     return _Utils.default.isNull(layout.components) || layout.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, "I am a dum empty Layout") : layout.orientation === 'VERTICAL' ? /*#__PURE__*/_react.default.createElement("div", {
       style: {
@@ -346,14 +362,14 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       let style = _Utils.default.getComponentAttribute(component, 'style', null);
 
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "row",
+        className: "row-*-*",
         key: component.key
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "col-*-* ".concat(style),
         style: style === null || style === 'none' ? getDefaultComponentContainerStyle(component) : null
       }, renderComponent(component)));
     })) : /*#__PURE__*/_react.default.createElement("div", {
-      className: "row",
+      className: "row-*-*",
       style: {
         margin: '0',
         height: height
@@ -381,16 +397,6 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ref: ref,
     style: getLayoutStyle(props.config, null)
   }, render(props.config)) : null);
-}); //wget --no-check-certificate -c --header "Cookie: oraclelicense=accept-securebackup-cookie" https://download.oracle.com/otn/java/jdk/14.0.2+12/205943a0976c4ed48cb16f1043c5c647/jdk-14.0.2_linux-x64_bin.rpm
-//exportPubKey -k 6 -out public.pem
-//loginHSM -u CU -s signivault_hsm_cu -p S1gn1v@ul+001
-//loginHSM CO admin S1gn1v@ul+001
-//getAttribute -o 9 -a 3 -out SigniVault-2020-10-22-1-9_attr.txt -attest
-//exportPubKey -k 6 -out SigniVault-2020-10-22-1-6_pub.pem
-//cluster-4y5dcxwurl6
-//S1gn1v@ul+001
-//keytool -genkey -keyalg RSA -keysize 2048  -keystore signivault.jks  -alias signivault -storepass S1gn1v@ul+001
-//openssl x509 -req -days 3652 -in cluster-4y5dcxwurl6_ClusterCsr.csr -CA customerCA.crt -CAkey customerCA.key -CAcreateserial -out cluster-4y5dcxwurl6_CustomerHsmCertificate.crt
-
+});
 
 exports.Layout = Layout;

package/dist/components/signatures/AlertItem.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AlertItem;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
+
+var _AlertTitle = _interopRequireDefault(require("@material-ui/lab/AlertTitle"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ViewUtils = _interopRequireDefault(require("./ViewUtils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const utils = new _ViewUtils.default();
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2)
+    }
+  }
+}));
+
+function AlertItem(props) {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState(props.message),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        message = _React$useState2[0],
+        setMessage = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(props.alertStyle),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        alertStyle = _React$useState4[0],
+        setAlertStyle = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(props.alertTitle),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        title = _React$useState6[0],
+        setTitle = _React$useState6[1];
+
+  _react.default.useEffect(() => {
+    setMessage(props.message);
+    setAlertStyle(props.alertStyle);
+    setTitle(props.alertTitle);
+  }, [props.message, props.alertStyle, props.alertTitle]);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, !utils.isNull(message) && message.trim().length > 0 ? /*#__PURE__*/_react.default.createElement(_Alert.default, {
+    severity: alertStyle.toLowerCase()
+  }, /*#__PURE__*/_react.default.createElement(_AlertTitle.default, null, " ", title, " "), message) : "");
+}

package/dist/components/signatures/Card.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+require("./widgets.css");
+
+var _ViewUtils = _interopRequireDefault(require("./ViewUtils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const utils = new _ViewUtils.default();
+const styles = {
+  height: "auto",
+  maxHeight: "90vh"
+};
+
+const CardLayout = props => {
+  _react.default.useEffect(() => {
+    if (props.mode !== "lookup") {
+      utils.setLegend(props.title);
+    }
+  }, [props.title]);
+
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
+    style: styles
+  }, props.mode === "lookup" ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend"
+  }, props.title) : null, props.children));
+};
+
+var _default = CardLayout;
+exports.default = _default;

package/dist/components/signatures/MenuButton.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MenuButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
+
+var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
+
+var _styles = require("@material-ui/core/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    display: 'flex'
+  },
+  paper: {
+    marginRight: theme.spacing(2)
+  },
+  MuiButtonDefault: {
+    color: 'rgb(0, 0, 0, .38)'
+  },
+  MuiButtonWhite: {
+    color: '#fff'
+  }
+}));
+
+function MenuButton(props) {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState(false),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        open = _React$useState2[0],
+        setOpen = _React$useState2[1];
+
+  const anchorRef = _react.default.useRef(null);
+
+  const width = props.width !== null ? props.width : "60px";
+
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root,
+    style: {
+      width: width
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menuButtonWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: props.defaultStyle === true ? classes.MuiButtonDefault : classes.MuiButtonWhite,
+    ref: anchorRef,
+    "aria-controls": "menu-list-grow",
+    "aria-haspopup": "true",
+    onClick: handleToggle
+  }, props.label), /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    open: open,
+    anchorEl: anchorRef.current,
+    keepMounted: true,
+    transition: true,
+    disablePortal: true
+  }, ({
+    TransitionProps,
+    placement
+  }) => /*#__PURE__*/_react.default.createElement(_Grow.default, _extends({}, TransitionProps, {
+    style: {
+      transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    id: "menu-list-grow"
+  }, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+    onClickAway: handleClose
+  }, props.children))))));
+}

package/dist/components/signatures/Prompt.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Prompt;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function Prompt(props) {
+  const _React$useState = _react.default.useState(false),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        open = _React$useState2[0],
+        setOpen = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(props.promptContent),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        content = _React$useState4[0],
+        setContent = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(props.promptTitle),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        title = _React$useState6[0],
+        setTitle = _React$useState6[1];
+
+  const handleNo = () => {
+    setOpen(false);
+    props.closePrompt();
+  };
+
+  _react.default.useEffect(() => {
+    setOpen(props.open);
+  }, [props.open]);
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: open,
+    onClose: handleNo,
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description"
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+    id: "alert-dialog-title"
+  }, title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, {
+    id: "alert-dialog-description"
+  }, content)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleNo,
+    color: "primary"
+  }, "No"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: props.handleYes,
+    color: "primary",
+    autoFocus: true
+  }, "Yes"))));
+}