@qualtrics/plugin-ui-react 1.2.4 → 1.3.3-alpha.1

package/dist/main.js

@@ -1,4 +1,4 @@
-/*! @license @qualtrics/plugin-ui-react 1.2.4
+/*! @license @qualtrics/plugin-ui-react 1.3.3-alpha.1
 Qualtrics Software License Agreement
 
 1. General.
@@ -64,12 +64,12 @@ var _get = require('lodash.get');
 var uiReact = require('@qualtrics/ui-react');
 var icons = require('@qualtrics/ui-react/icons');
 require('core-js/modules/es.string.anchor.js');
-var _cloneDeep = require('lodash.clonedeep');
 require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.array.map.js');
 require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.filter.js');
 require('regenerator-runtime/runtime.js');
+var _cloneDeep = require('lodash.clonedeep');
 require('core-js/modules/es.array.is-array.js');
 var reactPopper = require('react-popper');
 var ReactDOM = require('react-dom');
@@ -80,6 +80,7 @@ require('core-js/modules/es.array.iterator.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.array.find.js');
 require('core-js/modules/es.object.assign.js');
+var _cloneDeepWith = require('lodash.clonedeepwith');
 var uuid = require('uuid');
 require('core-js/modules/es.regexp.exec.js');
 require('core-js/modules/es.string.search.js');
@@ -90,6 +91,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _get__default = /*#__PURE__*/_interopDefaultLegacy(_get);
 var _cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(_cloneDeep);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var _cloneDeepWith__default = /*#__PURE__*/_interopDefaultLegacy(_cloneDeepWith);
 var uuid__default = /*#__PURE__*/_interopDefaultLegacy(uuid);
 
 function styleInject(css, ref) {
@@ -127,14 +129,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -142,19 +139,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(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));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -163,17 +153,11 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -231,6 +215,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -261,6 +248,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -304,6 +294,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -349,7 +341,7 @@ function _iterableToArray(iter) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
   if (_i == null) return;
   var _arr = [];
@@ -587,8 +579,8 @@ var languageCodeMapping = {
   RU: 'ru',
   SV: 'sv',
   TH: 'th',
-  'ZH-S': 'zh-HANS',
-  'ZH-T': 'zh-HANT'
+  'ZH-S': 'zh-Hans',
+  'ZH-T': 'zh-Hant'
 };
 function languageCodeAdapter(languageCode) {
   var adaptedCode;
@@ -675,7 +667,7 @@ var Portal = function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      return ReactDOM__default['default'].createPortal(this.props.children, this.container);
+      return ReactDOM__default["default"].createPortal(this.props.children, this.container);
     }
   }]);
 
@@ -687,10 +679,10 @@ styleInject(css_248z$a);
 
 var globalClickRegistry = new EventRegistry();
 var DEFAULT_PLACEMENT = 'bottom-start';
-var DEFAULT_ANCHOR = React__default['default'].createElement(uiReact.Button, null, " anchor ");
+var DEFAULT_ANCHOR = React__default["default"].createElement(uiReact.Button, null, " anchor ");
 var defaultModifiers = [];
 initGlobalListener();
-function Popover(props, ref) {
+function Popover(props) {
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
@@ -711,7 +703,7 @@ function Popover(props, ref) {
       anchor = props.anchor(ref);
     } else {
       anchor = props.anchor;
-      anchor = React__default['default'].createElement("div", {
+      anchor = React__default["default"].createElement("div", {
         ref: ref,
         className: "popover-anchor-container"
       }, props.anchor || DEFAULT_ANCHOR);
@@ -745,7 +737,7 @@ function Popover(props, ref) {
       setIsOpen(props.show);
     }
   }, [props.show]);
-  return React__default['default'].createElement(reactPopper.Manager, null, React__default['default'].createElement(reactPopper.Reference, null, anchorEl), React__default['default'].createElement(Portal, null, isOpen && React__default['default'].createElement(reactPopper.Popper, {
+  return React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, anchorEl), React__default["default"].createElement(Portal, null, isOpen && React__default["default"].createElement(reactPopper.Popper, {
     placement: props.placement || DEFAULT_PLACEMENT,
     modifiers: modifiers
   }, function (_ref2) {
@@ -771,12 +763,12 @@ function Popover(props, ref) {
         optionsRef.current.scheduleUpdate = scheduleUpdate;
       }
     });
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       ref: ref,
       "data-placement": placement,
       style: _objectSpread2({}, style),
       className: "q-popover"
-    }, props.children, React__default['default'].createElement("div", {
+    }, props.children, React__default["default"].createElement("div", {
       ref: arrowProps.ref,
       style: arrowProps.style
     }));
@@ -800,7 +792,7 @@ function initGlobalListener() {
 var css_248z$9 = "div[role=\"menu\"] .piped-text-search-input-container {\n  padding: 5px 10px; }\n\n.piped-text-search-input {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .piped-text-search-input input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n\n.piped-text-menu-empty-anchor {\n  /* the margin-right hack was not in harmony with tao.\n      now, the empty-anchor is truly empty */ }\n\n.piped-text-submenu-item-container {\n  position: relative; }\n  .piped-text-submenu-item-container .piped-text-menu .piped-text-submenu-anchor {\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    min-width: 100%; }\n\n.piped-text-menu-item, .piped-text-submenu-item {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis; }\n  .piped-text-menu-item:not(.piped-text-header):not(.piped-text-disabled):hover, .piped-text-submenu-item:not(.piped-text-header):not(.piped-text-disabled):hover {\n    cursor: pointer;\n    background: RGBA(50, 54, 58, 0.08); }\n  .piped-text-menu-item.piped-text-header, .piped-text-submenu-item.piped-text-header {\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 700;\n    padding: 12px; }\n  .piped-text-menu-item.piped-text-disabled:not(.piped-text-header), .piped-text-submenu-item.piped-text-disabled:not(.piped-text-header) {\n    color: RGB(116, 119, 122); }\n\n.piped-text-submenu-item {\n  padding-right: 24px; }\n\n.piped-text-information-message {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  color: #74777A;\n  text-align: center;\n  white-space: pre-line; }\n\n.piped-text-loading-spinner {\n  width: fit-content;\n  margin: 0 auto; }\n\n.piped-text-error-container {\n  color: #BB0000; }\n  .piped-text-error-container .piped-text-error-icon {\n    padding: 8px 0; }\n    .piped-text-error-container .piped-text-error-icon svg {\n      fill: #BB0000;\n      display: block;\n      margin: 0 auto; }\n  .piped-text-error-container .piped-text-error-text {\n    text-align: center;\n    white-space: pre-line;\n    padding: 0 12px 8px; }\n\n.embedded-data-menu {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .embedded-data-menu input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n";
 styleInject(css_248z$9);
 
-var EmbeddedDataMenu = React__default['default'].forwardRef(function (props, ref) {
+var EmbeddedDataMenu = React__default["default"].forwardRef(function (props, ref) {
   var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       inputValue = _useState2[0],
@@ -823,7 +815,7 @@ var EmbeddedDataMenu = React__default['default'].forwardRef(function (props, ref
 
   React.useEffect(function () {
     setTimeout(function () {
-      if (_get__default['default'](inputRef, 'current.focus') !== undefined) {
+      if (_get__default["default"](inputRef, 'current.focus') !== undefined) {
         inputRef.current.focus();
       }
     });
@@ -861,24 +853,24 @@ var EmbeddedDataMenu = React__default['default'].forwardRef(function (props, ref
     handleAddButtonClick();
   };
 
-  return React__default['default'].createElement(Popover, {
+  return React__default["default"].createElement(Popover, {
     show: props.show,
     anchor: anchor,
     onClose: onClose,
     ignoreClickSelector: ignoreClickSelector,
     placement: props.placement || 'right-start'
-  }, React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "embedded-data-menu"
-  }, React__default['default'].createElement("div", null, React__default['default'].createElement(uiReact.InputGroup, null, React__default['default'].createElement(uiReact.Input, {
+  }, React__default["default"].createElement("div", null, React__default["default"].createElement(uiReact.InputGroup, null, React__default["default"].createElement(uiReact.Input, {
     onChange: handleInputChange,
     invalid: isInputInvalid,
     onKeyDown: handleInputKeyDown,
     ref: inputRef,
     className: "q-plugin-popover-input"
-  }), React__default['default'].createElement(uiReact.Button, {
+  }), React__default["default"].createElement(uiReact.Button, {
     kind: "primary",
     onClick: handleAddButtonClick
-  }, React__default['default'].createElement(uiReact.Icon, {
+  }, React__default["default"].createElement(uiReact.Icon, {
     type: uiReact.IconTypes.Add
   }))))));
 });
@@ -887,11 +879,11 @@ var css_248z$8 = "div[role=\"menu\"] .piped-text-search-input-container {\n  pad
 styleInject(css_248z$8);
 
 var EMBEDDED_DATA_LOCATOR = 'embeddedData';
-var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
+var PipedTextMenu = React__default["default"].forwardRef(function PipedTextMenu(props, ref) {
   var defaultMenuItems = undefined;
 
   if (typeof props.items !== 'function') {
-    defaultMenuItems = _cloneDeep__default['default'](props.items);
+    defaultMenuItems = _cloneDeep__default["default"](props.items);
   }
 
   var optionsRef = React.useRef({});
@@ -916,8 +908,47 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
       searchValue = _useState8[0],
       setSearchValue = _useState8[1];
 
-  var onClose = props.onClose || function () {};
+  var _useState9 = React.useState(undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isSubmenu = _useState10[0],
+      setIsSubmenu = _useState10[1];
+
+  var onClose = props.onClose || function () {
+    return undefined;
+  };
+
+  var _useState11 = React.useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      popoverEl = _useState12[0],
+      setPopoverEl = _useState12[1];
+
+  var popoverRefCb = React.useCallback(function (el) {
+    setPopoverEl(el);
+  }, []);
+
+  var _useState13 = React.useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      searchBoxEl = _useState14[0],
+      setSearchBoxEl = _useState14[1];
 
+  var searchBoxRefCb = React.useCallback(function (el) {
+    setSearchBoxEl(el);
+  }, []);
+  React.useEffect(function () {
+    var anchorRefEl = _get__default["default"](props, 'anchorRef.current');
+
+    if (anchorRefEl) {
+      var anchorRefElRole = anchorRefEl.getAttribute('role');
+      var nextIsSubmenu = anchorRefElRole === 'menuitem';
+      setIsSubmenu(nextIsSubmenu);
+    }
+
+    if (isSubmenu === true) ; else if (isSubmenu === false) {
+      if (popoverEl !== null) {
+        popoverEl.focus();
+      }
+    }
+  }, [popoverEl, searchBoxEl, props.anchorRef, isSubmenu]);
   React.useEffect(function () {
     _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
       var newMenuItems;
@@ -977,7 +1008,7 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
 
   var reRenderMenus = function reRenderMenus() {
     var nextMenuItems;
-    nextMenuItems = _cloneDeep__default['default'](menuItems);
+    nextMenuItems = _cloneDeep__default["default"](menuItems);
     setMenuItems(nextMenuItems);
   };
 
@@ -995,14 +1026,14 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
       menuItem.show = true;
     }
 
-    nextMenuItems = _cloneDeep__default['default'](menuItems);
+    nextMenuItems = _cloneDeep__default["default"](menuItems);
     setMenuItems(nextMenuItems);
   };
 
   var menuItemHovered = function menuItemHovered(menuItem, evt) {
     var nextMenuItems;
     closeSubmenus(menuItems);
-    nextMenuItems = _cloneDeep__default['default'](menuItems);
+    nextMenuItems = _cloneDeep__default["default"](menuItems);
     setMenuItems(nextMenuItems);
   };
 
@@ -1012,6 +1043,10 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
     setSearchValue(searchVal);
   };
 
+  var handleSearchInputClick = function handleSearchInputClick(evt) {
+    evt.stopPropagation();
+  };
+
   var matchesSearch = function matchesSearch(item) {
     var searchVal = searchValue || '';
     searchVal = searchVal.trim().toLowerCase();
@@ -1041,12 +1076,13 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
     props.onSelected(edMenuItem);
   };
 
-  var getSubmenuItem = function getSubmenuItem(menuItem) {
-    return React__default['default'].createElement("div", {
+  var SubmenuItem = function SubmenuItem(props) {
+    var submenuAnchorRef = React.useRef(null);
+    var menuItem = props.menuItem;
+    return React__default["default"].createElement("div", {
       "data-testid": "piped-text-submenu",
-      className: "piped-text-submenu-item-container",
-      key: menuItem.key
-    }, menuItem.show && React__default['default'].createElement(PipedTextMenu, {
+      className: "piped-text-submenu-item-container"
+    }, menuItem.show && React__default["default"].createElement(PipedTextMenu, {
       items: menuItem.submenu.items,
       show: menuItem.show,
       placement: "right-start",
@@ -1060,21 +1096,25 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
       errorText: menuItem.submenu.errorText,
       onSelected: menuItemClicked,
       anchor: function anchor(ref) {
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           ref: ref,
           className: "piped-text-submenu-anchor"
         });
-      }
-    }), React__default['default'].createElement("div", {
+      },
+      anchorRef: submenuAnchorRef
+    }), React__default["default"].createElement("div", {
       className: "piped-text-submenu-item",
+      "aria-haspopup": "menu",
+      role: "menuitem",
       onMouseEnter: function onMouseEnter($e) {
         return submenuHovered(menuItem);
-      }
-    }, React__default['default'].createElement("div", {
+      },
+      ref: submenuAnchorRef
+    }, React__default["default"].createElement("div", {
       className: "label-text"
-    }, menuItem.label), React__default['default'].createElement("div", {
+    }, menuItem.label), React__default["default"].createElement("div", {
       className: "piped-text-icon"
-    }, React__default['default'].createElement(uiReact.Icon, {
+    }, React__default["default"].createElement(uiReact.Icon, {
       type: uiReact.IconTypes.ChevronRight,
       size: "medium"
     }))));
@@ -1082,7 +1122,7 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
 
   var getPipedTextMenuItems = function getPipedTextMenuItems(menuItems) {
     if (menuItems.length === 0 && props.allowCustom === true && props.customInputMessage) {
-      return React__default['default'].createElement("div", null, React__default['default'].createElement("div", {
+      return React__default["default"].createElement("div", null, React__default["default"].createElement("div", {
         className: "piped-text-information-message"
       }, props.customInputMessage));
     }
@@ -1091,17 +1131,20 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
       var menuItemHeaderClass, menuItemDisabledClass, menuItemClassName;
 
       if (menuItem.hasSubmenu) {
-        return getSubmenuItem(menuItem);
+        return React__default["default"].createElement(SubmenuItem, {
+          key: menuItem.key,
+          menuItem: menuItem
+        });
       } else if (menuItem.header === true || menuItem.disabled === true) {
         menuItemHeaderClass = menuItem.header === true ? 'piped-text-header' : '';
         menuItemDisabledClass = menuItem.disabled === true ? 'piped-text-disabled' : '';
         menuItemClassName = "piped-text-menu-item ".concat(menuItemHeaderClass, " ").concat(menuItemDisabledClass);
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           key: menuItem.key,
           className: menuItemClassName
         }, menuItem.label);
       } else if (menuItem.value === EMBEDDED_DATA_LOCATOR) {
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           key: menuItem.key,
           onClick: function onClick($e) {
             return embeddedDataItemClicked(menuItem);
@@ -1109,20 +1152,20 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
           onMouseEnter: function onMouseEnter($e) {
             return menuItemHovered();
           }
-        }, React__default['default'].createElement(EmbeddedDataMenu, {
+        }, React__default["default"].createElement(EmbeddedDataMenu, {
           show: menuItem.show,
           onSelect: handleEmbeddedDataSelect,
           anchor: function anchor(ref) {
-            return React__default['default'].createElement("div", {
+            return React__default["default"].createElement("div", {
               ref: ref,
               className: "embedded-data-menu-anchor"
             });
           }
-        }), React__default['default'].createElement("div", {
+        }), React__default["default"].createElement("div", {
           className: "piped-text-menu-item"
         }, menuItem.label));
       } else {
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           key: menuItem.key,
           onMouseEnter: function onMouseEnter($e) {
             return menuItemHovered();
@@ -1130,7 +1173,7 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
           onClick: function onClick($e) {
             return menuItemClicked(menuItem);
           }
-        }, React__default['default'].createElement("div", {
+        }, React__default["default"].createElement("div", {
           className: "piped-text-menu-item"
         }, menuItem.label));
       }
@@ -1161,23 +1204,23 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
   };
 
   var getLoadError = function getLoadError() {
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       className: "piped-text-popover-container"
-    }, React__default['default'].createElement("div", {
+    }, React__default["default"].createElement("div", {
       className: "piped-text-error-container"
-    }, React__default['default'].createElement("div", {
+    }, React__default["default"].createElement("div", {
       className: "piped-text-error-icon"
-    }, React__default['default'].createElement(icons.ErrorIcon, {
+    }, React__default["default"].createElement(icons.ErrorIcon, {
       size: "medium"
-    })), props.errorText && React__default['default'].createElement("div", {
+    })), props.errorText && React__default["default"].createElement("div", {
       className: "piped-text-error-text"
     }, props.errorText)));
   };
 
   var getLoadingSpinner = function getLoadingSpinner() {
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       className: "piped-text-loading-spinner"
-    }, React__default['default'].createElement(uiReact.LoadingSpinner, {
+    }, React__default["default"].createElement(uiReact.LoadingSpinner, {
       show: true,
       size: "medium"
     }));
@@ -1188,13 +1231,13 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
       return getLoadError();
     } else {
       var itemsToRender = (menuItems || []).filter(matchesSearch);
-      return React__default['default'].createElement("div", {
-        className: "piped-text-popover-container"
-      }, React__default['default'].createElement("div", {
+      return React__default["default"].createElement("div", {
+        className: "piped-text-popover-menu"
+      }, React__default["default"].createElement("div", {
         className: "piped-text-search-input"
-      }, React__default['default'].createElement("form", {
+      }, React__default["default"].createElement("form", {
         onSubmit: handleSearchSubmit
-      }, React__default['default'].createElement(uiReact.Input, {
+      }, React__default["default"].createElement(uiReact.Input, {
         small: true,
         full: true,
         placeholder: props.searchPlaceholder,
@@ -1202,28 +1245,45 @@ var PipedTextMenu = React__default['default'].forwardRef(function (props, ref) {
         value: searchValue,
         onChange: function onChange($e) {
           return onSearchInputChange($e);
-        }
+        },
+        onClick: function onClick($e) {
+          return handleSearchInputClick($e);
+        },
+        ref: searchBoxRefCb
       }))), menuItems === undefined ? getLoadingSpinner() : getPipedTextMenuItems(itemsToRender));
     }
   };
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "piped-text-menu"
-  }, React__default['default'].createElement(Popover, {
+  }, React__default["default"].createElement(Popover, {
     show: isMenuOpen,
     onClose: _onClose,
     placement: props.placement || 'right-start',
     anchor: props.anchor,
     ignoreClickSelector: props.ignoreClickSelector
-  }, React__default['default'].createElement("div", {
-    className: "piped-text-popover-container"
-  }, getMenuContent()), React__default['default'].createElement(OptionsPlaceholder, {
+  }, React__default["default"].createElement("div", {
+    className: "piped-text-popover-container",
+    ref: popoverRefCb,
+    onFocus: function onFocus($e) {
+      return handleFocus($e);
+    },
+    tabIndex: props.tabIndex !== undefined ? props.tabIndex : -1
+  }, getMenuContent()), React__default["default"].createElement(OptionsPlaceholder, {
     optionsRef: optionsRef
   })));
+
+  function handleFocus(evt) {
+    if (!isSubmenu && searchBoxEl !== null) {
+      searchBoxEl.focus();
+    }
+
+    evt.stopPropagation();
+  }
 });
 
 function OptionsPlaceholder() {
-  return React__default['default'].createElement("span", null);
+  return React__default["default"].createElement("span", null);
 }
 
 function closeSubmenus(menuItems) {
@@ -1238,13 +1298,13 @@ function pipedTextDataAdapter(pipedTextData, recursed) {
   var uniqueKey;
 
   if (!recursed) {
-    pipedTextData = _cloneDeep__default['default'](pipedTextData);
+    pipedTextData = _cloneDeep__default["default"](pipedTextData);
   }
 
   uniqueKey = 1;
   pipedTextData.forEach(function (pipedTextItem) {
     pipedTextItem.key = pipedTextItem.key || uniqueKey++;
-    pipedTextItem.hasSubmenu = !!_get__default['default'](pipedTextItem, 'submenu.items.length') || typeof _get__default['default'](pipedTextItem, 'submenu.items') === 'function';
+    pipedTextItem.hasSubmenu = !!_get__default["default"](pipedTextItem, 'submenu.items.length') || typeof _get__default["default"](pipedTextItem, 'submenu.items') === 'function';
 
     if (pipedTextItem.hasSubmenu || pipedTextItem.value === EMBEDDED_DATA_LOCATOR) {
       pipedTextItem.show = false;
@@ -1263,7 +1323,7 @@ var css_248z$7 = ".piped-text-dropdown button[type=button].popover-toggle-button
 styleInject(css_248z$7);
 
 var defaultAnchor = function defaultAnchor(ref) {
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     ref: ref,
     className: "piped-text-menu-empty-anchor"
   });
@@ -1280,23 +1340,8 @@ function PipedTextSelect(props) {
       pipedTextItems = _useState4[0],
       setPipedTextItems = _useState4[1];
 
-  function initializePipedText() {
-    if (props.items) {
-      return pipedTextDataAdapter(props.items);
-    }
-  }
-
-  var onClose = function onClose() {
-    if (props.onClose) {
-      props.onClose();
-    }
-  };
-
-  var onSelect = function onSelect(selected) {
-    props.onSelect(selected);
-    onClose();
-  };
-
+  var defaultAnchorRef = React.useRef(null);
+  var externalAnchor = props.anchor;
   React.useEffect(function () {
     return function () {
       return onClose();
@@ -1311,16 +1356,39 @@ function PipedTextSelect(props) {
     var formattedPipedText = initializePipedText();
     setPipedTextItems(formattedPipedText);
   }, [props.items]);
-  return React__default['default'].createElement("div", {
+
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+
+  var onSelect = function onSelect(selected) {
+    props.onSelect(selected);
+    onClose();
+  };
+
+  var actualAnchor = externalAnchor !== undefined ? React__default["default"].cloneElement(externalAnchor, {
+    ref: externalAnchor.ref
+  }) : defaultAnchor(defaultAnchorRef);
+  var anchorRef = props.anchorRef || actualAnchor.ref;
+  return React__default["default"].createElement("div", {
     className: "piped-text-dropdown"
-  }, isMenuOpen && React__default['default'].createElement(PipedTextMenu, {
+  }, isMenuOpen && React__default["default"].createElement(PipedTextMenu, {
     onClose: onClose,
     show: isMenuOpen,
     onSelected: onSelect,
     items: pipedTextItems,
-    anchor: props.anchor || defaultAnchor,
+    anchor: actualAnchor,
+    anchorRef: anchorRef,
     ignoreClickSelector: props.ignoreClickSelector
   }));
+
+  function initializePipedText() {
+    if (props.items) {
+      return pipedTextDataAdapter(props.items);
+    }
+  }
 }
 
 var css_248z$6 = ".piped-text-input .piped-text-input-toggle, .piped-text-input .piped-text-select-container {\n  display: inline-block; }\n\n.piped-text-input .piped-text-input-toggle {\n  display: flex; }\n  .piped-text-input .piped-text-input-toggle input {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle input:first-child {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0; }\n  .piped-text-input .piped-text-input-toggle.multiline-input textarea {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle input + button, .piped-text-input .piped-text-input-toggle textarea + button {\n    margin-left: 4px; }\n\n.piped-text-input .addon-text-container {\n  /*\n      These styles are intended to match CFE QDS components,\n        notably FormField and InputField.\n        See: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/FormField/Caption.less\n    */\n  margin-top: 6px; }\n  .piped-text-input .addon-text-container .helper-text, .piped-text-input .addon-text-container .error-text {\n    font-size: 12px; }\n  .piped-text-input .addon-text-container .helper-text {\n    color: #74777a;\n    fill: #74777a; }\n    .piped-text-input .addon-text-container .helper-text + .error-text {\n      margin-top: 4px; }\n  .piped-text-input .addon-text-container .error-text {\n    display: flex;\n    align-items: center;\n    color: #b00;\n    fill: #b00; }\n    .piped-text-input .addon-text-container .error-text .error-text-icon svg {\n      margin-left: -2px;\n      margin-right: 3px;\n      width: 16px;\n      height: 16px; }\n";
@@ -1329,6 +1397,7 @@ styleInject(css_248z$6);
 function PipedTextInput(props) {
     var _a = React.useState(false), showMenu = _a[0], setShowMenu = _a[1];
     var _b = React.useState(), cursorPosition = _b[0], setCursorPosition = _b[1];
+    var pipedTextButtonRef = React.useRef(null);
     /*
       This has to be an Object type ref instead of 'string' or React will lose
         track of state, and the supplied props input value will become stale
@@ -1358,21 +1427,21 @@ function PipedTextInput(props) {
             value: nextInputValue,
         });
     }, [props.value]);
-    return (React__default['default'].createElement("div", { className: "piped-text-input" },
-        React__default['default'].createElement("div", { className: 'piped-text-input-toggle popover-toggle' + (multiline ? ' multiline-input' : '') },
-            React__default['default'].createElement(uiReact.Input, __assign({ value: inputRefValue.value, onChange: function (evt) {
+    return (React__default["default"].createElement("div", { className: "piped-text-input" },
+        React__default["default"].createElement("div", { className: 'piped-text-input-toggle popover-toggle' + (multiline ? ' multiline-input' : '') },
+            React__default["default"].createElement(uiReact.Input, __assign({ value: inputRefValue.value, onChange: function (evt) {
                     onInputChange(evt);
                 }, onBlur: onInputBlur, placeholder: placeholder, multiline: multiline }, restProps)),
-            React__default['default'].createElement(uiReact.IconButton, { "aria-label": "PipedText", size: "medium", onClick: toggleMenu },
-                React__default['default'].createElement(icons.PipedTextIcon, null)),
-            React__default['default'].createElement("div", { className: "piped-text-select-container" },
-                React__default['default'].createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle" }))),
-        showAddonText() && (React__default['default'].createElement("div", { className: "addon-text-container" },
-            helperText && (React__default['default'].createElement("div", { className: "helper-text" }, helperText)),
-            errorText && (React__default['default'].createElement("div", { className: "error-text" },
-                React__default['default'].createElement("div", { className: "error-text-icon" },
-                    React__default['default'].createElement(icons.ErrorIcon, null)),
-                React__default['default'].createElement("div", { className: "error-text-content" }, errorText)))))));
+            React__default["default"].createElement(uiReact.IconButton, { "aria-label": "PipedText", "aria-haspopup": "menu", "aria-expanded": showMenu ? true : undefined, role: "button", onClick: toggleMenu, ref: pipedTextButtonRef },
+                React__default["default"].createElement(icons.PipedTextIcon, null)),
+            React__default["default"].createElement("div", { className: "piped-text-select-container" },
+                React__default["default"].createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle", anchorRef: pipedTextButtonRef }))),
+        showAddonText() && (React__default["default"].createElement("div", { className: "addon-text-container" },
+            helperText && (React__default["default"].createElement("div", { className: "helper-text" }, helperText)),
+            errorText && (React__default["default"].createElement("div", { className: "error-text" },
+                React__default["default"].createElement("div", { className: "error-text-icon" },
+                    React__default["default"].createElement(icons.ErrorIcon, null)),
+                React__default["default"].createElement("div", { className: "error-text-content" }, errorText)))))));
     function showAddonText() {
         return ((helperText !== undefined) || (errorText !== undefined));
     }
@@ -1395,10 +1464,10 @@ function PipedTextInput(props) {
     function pipedTextSelected(selected) {
         var nextInputValue, prependString, appendString;
         handleSelect(selected);
-        if (_get__default['default'](selected, 'value.locator')) {
+        if (_get__default["default"](selected, 'value.locator')) {
             prependString = inputRefValue.value.substring(0, cursorPosition);
             appendString = inputRefValue.value.substring(cursorPosition);
-            nextInputValue = "" + prependString + selected.value.locator + appendString;
+            nextInputValue = "".concat(prependString).concat(selected.value.locator).concat(appendString);
             setInputRefValue({
                 value: nextInputValue,
             });
@@ -1469,13 +1538,13 @@ function FieldRow(props) {
       }
     };
 
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       className: "icon-wrapper",
       onClick: handleDelete
-    }, !props.required && React__default['default'].createElement(uiReact.IconButton, {
+    }, !props.required && React__default["default"].createElement(uiReact.IconButton, {
       "aria-label": "RemoveRow",
       size: "medium"
-    }, React__default['default'].createElement(icons.RemoveItemIcon, null)));
+    }, React__default["default"].createElement(icons.RemoveItemIcon, null)));
   };
 
   var handleFieldSwitch = function handleFieldSwitch(newFieldId) {
@@ -1511,7 +1580,7 @@ function FieldRow(props) {
   var getFieldSelector = function getFieldSelector() {
     var getInternalContent = function getInternalContent() {
       if (props.isCustom) {
-        return React__default['default'].createElement(uiReact.Input, {
+        return React__default["default"].createElement(uiReact.Input, {
           full: true,
           value: props.fieldName === undefined ? '' : props.fieldName,
           placeholder: props.customNamePlaceholder === undefined ? '' : props.customNamePlaceholder,
@@ -1521,35 +1590,61 @@ function FieldRow(props) {
       }
 
       if (props.required || !props.children || Array.isArray(children) && children.length === 0) {
-        return React__default['default'].createElement("div", {
-          className: "required-indicator-container"
-        }, React__default['default'].createElement("div", {
-          className: "required-indicator-text"
-        }, props.fieldName), props.required && React__default['default'].createElement("div", {
-          className: "required-indicator-symbol"
-        }, "*"));
+        if (props.subMenu) {
+          return React__default["default"].createElement(uiReact.SelectMenu, {
+            searchable: props.searchable !== undefined && props.searchable !== false,
+            defaultLabel: props.fieldName || '',
+            label: props.fieldName,
+            className: "full-width left-align",
+            onChange: handleFieldSwitch
+          }, createMenuItems([{
+            id: props.id,
+            name: props.fieldName,
+            subMenu: props.subMenu,
+            subMenuLabel: props.subMenuLabel
+          }]));
+        } else {
+          return React__default["default"].createElement("div", {
+            className: "required-indicator-container"
+          }, React__default["default"].createElement("div", {
+            className: "required-indicator-text"
+          }, props.fieldName), props.required && React__default["default"].createElement("div", {
+            className: "required-indicator-symbol"
+          }, "*"));
+        }
       }
 
-      return React__default['default'].createElement(uiReact.SelectMenu, {
+      return React__default["default"].createElement(uiReact.SelectMenu, {
         searchable: props.searchable !== undefined && props.searchable !== false,
         defaultLabel: props.fieldName || '',
         label: props.fieldName,
         className: "full-width left-align",
         onChange: handleFieldSwitch
-      }, children.map(function (field) {
-        return React__default['default'].createElement(uiReact.MenuItem, {
-          value: field.id,
-          key: field.id
-        }, field.name);
-      }));
+      }, createMenuItems(children));
     };
 
-    var tooltipContent = React__default['default'].createElement("div", null, props.nameTooltip);
-    return React__default['default'].createElement(uiReact.Tooltip, {
+    var tooltipContent = React__default["default"].createElement("div", null, props.nameTooltip);
+    return React__default["default"].createElement(uiReact.Tooltip, {
       disabled: !props.isCustom || shouldDisableTooltip(props.nameTooltip),
       placement: "top",
       content: tooltipContent
-    }, React__default['default'].createElement("div", null, getInternalContent()));
+    }, React__default["default"].createElement("div", null, getInternalContent()));
+  };
+
+  var createMenuItems = function createMenuItems(items) {
+    return items.map(function (_ref) {
+      var id = _ref.id,
+          name = _ref.name,
+          subMenu = _ref.subMenu,
+          subMenuLabel = _ref.subMenuLabel;
+      return subMenu !== undefined ? React__default["default"].createElement(uiReact.SelectMenu, {
+        label: subMenuLabel ? subMenuLabel : name,
+        key: id
+      }, createMenuItems(subMenu)) : React__default["default"].createElement(uiReact.MenuItem, {
+        key: id,
+        value: id
+      }, name);
+    });
   };
 
   var getFieldInput = function getFieldInput() {
@@ -1557,7 +1652,7 @@ function FieldRow(props) {
       if (props.customInput) {
         return props.customInput;
       } else {
-        return React__default['default'].createElement(PipedTextInput, {
+        return React__default["default"].createElement(PipedTextInput, {
           items: props.pipedTextItems,
           value: props.value === undefined ? '' : props.value,
           onChange: handleFieldValueChange,
@@ -1566,23 +1661,23 @@ function FieldRow(props) {
       }
     };
 
-    var tooltipContent = React__default['default'].createElement("div", null, props.valueTooltip);
-    return React__default['default'].createElement(uiReact.Tooltip, {
+    var tooltipContent = React__default["default"].createElement("div", null, props.valueTooltip);
+    return React__default["default"].createElement(uiReact.Tooltip, {
       disabled: shouldDisableTooltip(props.valueTooltip),
       placement: "top",
       content: tooltipContent
-    }, React__default['default'].createElement("div", null, getInternalContent()));
+    }, React__default["default"].createElement("div", null, getInternalContent()));
   };
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "field-row"
-  }, React__default['default'].createElement("div", {
-    className: "field-selector ".concat(props.required ? 'required-field' : '')
-  }, getFieldSelector()), React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
+    className: "field-selector ".concat(props.required && !props.subMenu ? 'required-field' : '')
+  }, getFieldSelector()), React__default["default"].createElement("div", {
     className: "field-input-container"
-  }, React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "field-input"
-  }, getFieldInput()), React__default['default'].createElement("div", {
+  }, getFieldInput()), React__default["default"].createElement("div", {
     className: "delete-row"
   }, getRowDelete())));
 }
@@ -1599,7 +1694,7 @@ function FieldItem(props) {
     }
   };
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "field-item",
     onClick: handleClick
   }, label);
@@ -1608,7 +1703,7 @@ function FieldItem(props) {
 var css_248z$3 = ".task-fields {\n  margin-right: 100px; }\n  .task-fields .add-field-button .add-field-button-label {\n    padding: 0 3px; }\n  .task-fields .field-headers {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .task-fields .field-headers .field-row {\n      color: #6A6D70;\n      font-weight: bold; }\n      .task-fields .field-headers .field-row .field-selector label, .task-fields .field-headers .field-row .field-input label {\n        font-size: 12px; }\n      .task-fields .field-headers .field-row .field-selector {\n        padding-top: 0;\n        padding-right: 24px;\n        padding-bottom: 0;\n        padding-left: 0; }\n      .task-fields .field-headers .field-row .field-input {\n        padding-top: 0;\n        padding-right: 0;\n        padding-bottom: 0;\n        padding-left: 12px; }\n  .task-fields .field-rows {\n    padding-bottom: 12px; }\n    .task-fields .field-rows .field-row {\n      border-top: 1px solid #E5E5E5; }\n      .task-fields .field-rows .field-row .field-selector {\n        padding-top: 8px;\n        padding-right: 12px;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n      .task-fields .field-rows .field-row .field-input {\n        border-left: 1px solid #E5E5E5;\n        padding-top: 8px;\n        padding-right: 0;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n\n.q-popover .field-item {\n  padding: 5px 32px; }\n  .q-popover .field-item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
 styleInject(css_248z$3);
 
-var uuidv4 = uuid__default['default'].v4;
+var uuidv4 = uuid__default["default"].v4;
 var CUSTOM_TYPE = 'custom';
 function TaskFields(props) {
   var _useState = React.useState([]),
@@ -1639,7 +1734,7 @@ function TaskFields(props) {
   };
 
   var onFieldNameChange = function onFieldNameChange(fieldId, event) {
-    var changeFn = _get__default['default'](props, 'customFieldOptions.onCustomFieldNameChange');
+    var changeFn = _get__default["default"](props, 'customFieldOptions.onCustomFieldNameChange');
 
     if (typeof changeFn === 'function') {
       changeFn(fieldId, event);
@@ -1648,13 +1743,15 @@ function TaskFields(props) {
 
   var getFieldRows = function getFieldRows() {
     return fieldsInUse.map(function (field) {
-      return React__default['default'].createElement(FieldRow, {
+      return React__default["default"].createElement(FieldRow, {
         customInput: field.children,
         required: field.required,
         fieldName: field.name,
         id: field.id,
-        nameTooltip: field.type === CUSTOM_TYPE ? _get__default['default'](props, 'customFieldOptions.nameTooltip', '') : field.nameTooltip,
-        valueTooltip: field.type === CUSTOM_TYPE ? _get__default['default'](props, 'customFieldOptions.valueTooltip', '') : field.valueTooltip,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel,
+        nameTooltip: field.type === CUSTOM_TYPE ? _get__default["default"](props, 'customFieldOptions.nameTooltip', '') : field.nameTooltip,
+        valueTooltip: field.type === CUSTOM_TYPE ? _get__default["default"](props, 'customFieldOptions.valueTooltip', '') : field.valueTooltip,
         onFieldNameChange: onFieldNameChange,
         onFieldValueChange: onFieldValueChange,
         onFieldSwitch: onFieldSwitch,
@@ -1662,14 +1759,30 @@ function TaskFields(props) {
         isCustom: field.type === CUSTOM_TYPE,
         key: field.id,
         value: field.value,
-        valuePlaceholder: field.type === CUSTOM_TYPE ? _get__default['default'](props, 'customFieldOptions.valuePlaceholder', '') : field.valuePlaceholder,
-        customNamePlaceholder: _get__default['default'](props, 'customFieldOptions.namePlaceholder', ''),
+        valuePlaceholder: field.type === CUSTOM_TYPE ? _get__default["default"](props, 'customFieldOptions.valuePlaceholder', '') : field.valuePlaceholder,
+        customNamePlaceholder: _get__default["default"](props, 'customFieldOptions.namePlaceholder', ''),
         pipedTextItems: props.pipedTextItems,
         searchable: props.searchable
-      }, allFieldOptions && availableFields);
+      }, allFieldOptions && getFieldsForFieldRow(availableFields, allFieldOptions, field.id));
     });
   };
 
+  var getFieldsForFieldRow = function getFieldsForFieldRow(allAvailableFields, allFields, fieldId) {
+    var fieldsToAdd = allAvailableFields.slice();
+    allFields.forEach(function (field) {
+      if (field.subMenu !== undefined && fieldId === field.id) {
+        var foundIndex = fieldsToAdd.findIndex(function (fieldToAdd) {
+          return fieldToAdd.id === field.id;
+        });
+
+        if (foundIndex === -1) {
+          fieldsToAdd.push(field);
+        }
+      }
+    });
+    return fieldsToAdd;
+  };
+
   var onFieldAdd = function onFieldAdd(fieldId) {
     if (typeof props.onFieldAdd === 'function') {
       props.onFieldAdd(fieldId);
@@ -1677,19 +1790,21 @@ function TaskFields(props) {
   };
 
   var onCustomFieldAdd = function onCustomFieldAdd() {
-    var handleFn = _get__default['default'](props, 'customFieldOptions.onCustomFieldAdd', function () {});
+    var handleFn = _get__default["default"](props, 'customFieldOptions.onCustomFieldAdd', function () {});
 
     handleFn();
   };
 
   var getAvailableFields = function getAvailableFields() {
     return availableFields.map(function (field) {
-      return React__default['default'].createElement(FieldItem, {
+      return React__default["default"].createElement(FieldItem, {
         name: field.name,
         type: field.type,
         required: field.required,
         key: field.id,
-        id: field.id
+        id: field.id,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel
       });
     });
   };
@@ -1742,7 +1857,9 @@ function TaskFields(props) {
             children: foundNextChild.props.children,
             nameTooltip: foundNextChild.props.nameTooltip,
             valueTooltip: foundNextChild.props.valueTooltip,
-            valuePlaceholder: foundNextChild.props.valuePlaceholder
+            valuePlaceholder: foundNextChild.props.valuePlaceholder,
+            subMenu: foundNextChild.props.subMenu,
+            subMenuLabel: foundNextChild.props.subMenuLabel
           });
         }
 
@@ -1763,7 +1880,9 @@ function TaskFields(props) {
             nameTooltip: field.props.nameTooltip,
             valueTooltip: field.props.valueTooltip,
             value: field.props.value || undefined,
-            valuePlaceholder: field.props.valuePlaceholder
+            valuePlaceholder: field.props.valuePlaceholder,
+            subMenu: field.props.subMenu,
+            subMenuLabel: field.props.subMenuLabel
           });
         }
       });
@@ -1786,10 +1905,12 @@ function TaskFields(props) {
             name: currentField.name,
             id: currentField.id,
             value: currentField.value,
-            nameTooltip: _get__default['default'](props, 'customFieldOptions.nameTooltip', ''),
-            valueTooltip: _get__default['default'](props, 'customFieldOptions.valueTooltip', ''),
-            namePlaceholder: _get__default['default'](props, 'customFieldOptions.namePlaceholder', ''),
-            type: CUSTOM_TYPE
+            nameTooltip: _get__default["default"](props, 'customFieldOptions.nameTooltip', ''),
+            valueTooltip: _get__default["default"](props, 'customFieldOptions.valueTooltip', ''),
+            namePlaceholder: _get__default["default"](props, 'customFieldOptions.namePlaceholder', ''),
+            type: CUSTOM_TYPE,
+            subMenu: currentField.subMenu,
+            subMenuLabel: currentField.subMenuLabel
           };
           nextFieldsInUse.push(customFieldValue);
         }
@@ -1804,7 +1925,11 @@ function TaskFields(props) {
         if (field !== undefined) {
           field.value = fieldValue.value;
         } else {
-          var newField = _cloneDeep__default['default'](fieldMetadata);
+          var newField = _cloneDeepWith__default["default"](fieldMetadata, function (value) {
+            if (React__default["default"].isValidElement(value)) {
+              return React__default["default"].cloneElement(value);
+            }
+          });
 
           newField.value = fieldValue.value;
           fieldsInUse.push(newField);
@@ -1823,7 +1948,9 @@ function TaskFields(props) {
         children: childProps.children,
         nameTooltip: childProps.nameTooltip,
         valueTooltip: childProps.valueTooltip,
-        valuePlaceholder: childProps.valuePlaceholder
+        valuePlaceholder: childProps.valuePlaceholder,
+        subMenu: childProps.subMenu,
+        subMenuLabel: childProps.subMenuLabel
       };
     });
     var nextFieldsInUse = getFieldsInUse(nextAllFieldOptions);
@@ -1844,22 +1971,23 @@ function TaskFields(props) {
   React.useEffect(function () {
     updateAvailableFields();
   }, [props.values]);
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "task-fields"
-  }, React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "field-headers"
-  }, React__default['default'].createElement(AddFieldHeaders, {
+  }, React__default["default"].createElement(AddFieldHeaders, {
     itemHeaderText: props.fieldItemsHeaderText,
     inputHeaderText: props.fieldInputsHeaderText
-  })), React__default['default'].createElement("div", {
+  })), React__default["default"].createElement("div", {
     className: "field-rows"
-  }, getFieldRows()), React__default['default'].createElement("div", {
+  }, getFieldRows()), React__default["default"].createElement("div", {
     className: "add-field-container"
-  }, React__default['default'].createElement(AddFieldButton, {
+  }, React__default["default"].createElement(AddFieldButton, {
     label: props.addFieldLabel,
     onFieldAdded: onFieldAdd,
+    disableAddFieldPopover: props.disableAddFieldPopover,
     allowCustom: props.customFieldOptions,
-    customLabel: _get__default['default'](props, 'customFieldOptions.label', ''),
+    customLabel: _get__default["default"](props, 'customFieldOptions.label', ''),
     onCustomFieldAdded: props.customFieldOptions ? onCustomFieldAdd : function () {}
   }, getAvailableFields())));
 }
@@ -1867,6 +1995,7 @@ function TaskFields(props) {
 function AddFieldButton(props) {
   var label = props.label || '';
   var customLabel = props.customLabel || '';
+  var disableAddFieldPopover = props.disableAddFieldPopover;
 
   var _useState7 = React.useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -1874,7 +2003,7 @@ function AddFieldButton(props) {
       setPopoverShow = _useState8[1];
 
   var customId = uuidv4();
-  var CUSTOM_OPTION = React__default['default'].createElement(FieldItem, {
+  var CUSTOM_OPTION = React__default["default"].createElement(FieldItem, {
     key: customId,
     onClick: function onClick() {
       props.onCustomFieldAdded();
@@ -1888,15 +2017,30 @@ function AddFieldButton(props) {
     setPopoverShow(false);
   };
 
+  var children = [];
+
   var onPopoverAnchorClick = function onPopoverAnchorClick() {
-    setPopoverShow(!popoverShow);
+    if (!disableAddFieldPopover) {
+      setPopoverShow(!popoverShow);
+    } else {
+      props.onFieldAdded(props.children !== 0 ? getFieldIdWhenPopoverIsClicked(props.children[0].props) : '');
+    }
+  };
+
+  var getFieldIdWhenPopoverIsClicked = function getFieldIdWhenPopoverIsClicked(field) {
+    if (field.subMenu) {
+      return getFieldIdWhenPopoverIsClicked(field.subMenu[0]);
+    } else {
+      return field.id;
+    }
   };
 
-  var children = props.children.map(function (child) {
-    return React__default['default'].createElement(FieldItem, {
+  children = props.children.map(function (child) {
+    return React__default["default"].createElement(FieldItem, {
       name: child.props.name,
       key: child.props.id,
       id: child.props.id,
+      subMenu: child.props.subMenu,
       onClick: function onClick(fieldId) {
         setPopoverShow(false);
         props.onFieldAdded(fieldId);
@@ -1908,18 +2052,18 @@ function AddFieldButton(props) {
     children.push(CUSTOM_OPTION);
   }
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "add-field-button-container"
-  }, React__default['default'].createElement(Popover, {
+  }, React__default["default"].createElement(Popover, {
     show: popoverShow,
     onClose: onPopoverClose,
     ignoreClickSelector: ".add-field-button",
-    anchor: React__default['default'].createElement(uiReact.Button, {
+    anchor: React__default["default"].createElement(uiReact.Button, {
       disabled: children.length === 0,
       kind: "secondary",
       className: "add-field-button",
       onClick: onPopoverAnchorClick
-    }, React__default['default'].createElement("span", {
+    }, React__default["default"].createElement("span", {
       className: "add-field-button-label"
     }, label))
   }, children));
@@ -1930,13 +2074,13 @@ function AddFieldHeaders(props) {
       inputHeaderText = props.inputHeaderText;
 
   if (itemHeaderText || inputHeaderText) {
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       className: "field-row"
-    }, React__default['default'].createElement("div", {
+    }, React__default["default"].createElement("div", {
       className: "field-selector"
-    }, React__default['default'].createElement(uiReact.Label, null, itemHeaderText)), React__default['default'].createElement("div", {
+    }, React__default["default"].createElement(uiReact.Label, null, itemHeaderText)), React__default["default"].createElement("div", {
       className: "field-input"
-    }, React__default['default'].createElement(uiReact.Label, null, inputHeaderText)));
+    }, React__default["default"].createElement(uiReact.Label, null, inputHeaderText)));
   } else {
     return null;
   }
@@ -1948,19 +2092,19 @@ styleInject(css_248z$2);
 function SelectItem(props) {
   var checked = props.checked || false;
   var children = props.children || '';
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "select-item",
     onClick: function onClick(event) {
       return props.onChange(props.value, event);
     }
-  }, React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "item"
-  }, React__default['default'].createElement("div", {
+  }, React__default["default"].createElement("div", {
     className: "checked-container ".concat(checked ? 'checked' : '')
-  }, React__default['default'].createElement(uiReact.Icon, {
+  }, React__default["default"].createElement(uiReact.Icon, {
     type: uiReact.IconTypes.Check,
     size: "medium"
-  })), React__default['default'].createElement("div", {
+  })), React__default["default"].createElement("div", {
     className: "item-content"
   }, children)));
 }
@@ -1987,9 +2131,9 @@ function MultiselectDropdown(props) {
   };
 
   var renderToggleButton = function renderToggleButton() {
-    return React__default['default'].createElement("div", {
+    return React__default["default"].createElement("div", {
       className: "multiselect-dropdown-toggle"
-    }, React__default['default'].createElement(uiReact.Button, {
+    }, React__default["default"].createElement(uiReact.Button, {
       onClick: function onClick() {
         setIsDropdownOpen(!isDropdownOpen);
       }
@@ -2004,15 +2148,15 @@ function MultiselectDropdown(props) {
     children = temp;
   }
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "multiselect-dropdown"
-  }, React__default['default'].createElement(Popover, {
+  }, React__default["default"].createElement(Popover, {
     show: isDropdownOpen,
     onClose: onPopoverClose,
     ignoreClickSelector: ".multiselect-dropdown-toggle",
     anchor: renderToggleButton()
   }, children.map(function (child) {
-    return React__default['default'].createElement(SelectItem, {
+    return React__default["default"].createElement(SelectItem, {
       onChange: handleChange,
       checked: child.props.checked,
       value: child.props.value,
@@ -2129,7 +2273,7 @@ function DynamicSearchInput(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               event.persist();
-              inputVal = _get__default['default'](event, 'target.value', '');
+              inputVal = _get__default["default"](event, 'target.value', '');
               searchFunc = props.search ? props.search : defaultSearch;
               _context2.next = 5;
               return searchFunc(inputVal);
@@ -2147,11 +2291,11 @@ function DynamicSearchInput(props) {
 
             case 9:
               nextSearchResults = results.map(function (result) {
-                if (_get__default['default'](result, 'props.label') === undefined) {
+                if (_get__default["default"](result, 'props.label') === undefined) {
                   throw new Error('DynamicSearchInput: expected search result array values to have label property but found none');
                 }
 
-                return React__default['default'].createElement(SearchItem, {
+                return React__default["default"].createElement(SearchItem, {
                   key: result.props.id,
                   onClick: function onClick() {
                     handleSearchItemSelected(result.props.label);
@@ -2182,12 +2326,12 @@ function DynamicSearchInput(props) {
     };
   }();
 
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "dynamic-search-input"
-  }, React__default['default'].createElement(Popover, {
+  }, React__default["default"].createElement(Popover, {
     show: isDropdownOpen,
     onClose: onPopoverClose,
-    anchor: React__default['default'].createElement(uiReact.Input, {
+    anchor: React__default["default"].createElement(uiReact.Input, {
       className: "search-input",
       full: true,
       small: true,
@@ -2199,7 +2343,7 @@ function DynamicSearchInput(props) {
 }
 
 function SearchItem(props) {
-  return React__default['default'].createElement("div", {
+  return React__default["default"].createElement("div", {
     className: "dynamic-search-popover-child",
     onClick: props.onClick
   }, props.children);