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

package/dist/main.es.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.
@@ -55,17 +55,17 @@ import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.array.splice.js';
 import 'core-js/modules/es.array.for-each.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
-import React, { Component, useState, useEffect, useRef } from 'react';
+import React, { Component, useState, useEffect, useRef, useCallback } from 'react';
 import _get from 'lodash.get';
 import { Button, InputGroup, Input, Icon, IconTypes, LoadingSpinner, IconButton, Tooltip, SelectMenu, MenuItem, Label } from '@qualtrics/ui-react';
 import { ErrorIcon, PipedTextIcon, RemoveItemIcon } from '@qualtrics/ui-react/icons';
 import 'core-js/modules/es.string.anchor.js';
-import _cloneDeep from 'lodash.clonedeep';
 import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'regenerator-runtime/runtime.js';
+import _cloneDeep from 'lodash.clonedeep';
 import 'core-js/modules/es.array.is-array.js';
 import { Manager, Reference, Popper } from 'react-popper';
 import ReactDOM from 'react-dom';
@@ -76,6 +76,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.object.assign.js';
+import _cloneDeepWith from 'lodash.clonedeepwith';
 import uuid from 'uuid';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.search.js';
@@ -115,14 +116,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;
@@ -130,19 +126,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;
@@ -151,17 +140,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) {
@@ -219,6 +202,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;
 }
 
@@ -249,6 +235,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -292,6 +281,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);
@@ -337,7 +328,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 = [];
@@ -575,8 +566,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;
@@ -678,7 +669,7 @@ var DEFAULT_PLACEMENT = 'bottom-start';
 var DEFAULT_ANCHOR = React.createElement(Button, null, " anchor ");
 var defaultModifiers = [];
 initGlobalListener();
-function Popover(props, ref) {
+function Popover(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
@@ -875,7 +866,7 @@ 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.forwardRef(function (props, ref) {
+var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
   var defaultMenuItems = undefined;
 
   if (typeof props.items !== 'function') {
@@ -904,8 +895,47 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
       searchValue = _useState8[0],
       setSearchValue = _useState8[1];
 
-  var onClose = props.onClose || function () {};
+  var _useState9 = useState(undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isSubmenu = _useState10[0],
+      setIsSubmenu = _useState10[1];
 
+  var onClose = props.onClose || function () {
+    return undefined;
+  };
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      popoverEl = _useState12[0],
+      setPopoverEl = _useState12[1];
+
+  var popoverRefCb = useCallback(function (el) {
+    setPopoverEl(el);
+  }, []);
+
+  var _useState13 = useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      searchBoxEl = _useState14[0],
+      setSearchBoxEl = _useState14[1];
+
+  var searchBoxRefCb = useCallback(function (el) {
+    setSearchBoxEl(el);
+  }, []);
+  useEffect(function () {
+    var anchorRefEl = _get(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]);
   useEffect(function () {
     _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
       var newMenuItems;
@@ -1000,6 +1030,10 @@ var PipedTextMenu = React.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();
@@ -1029,11 +1063,12 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
     props.onSelected(edMenuItem);
   };
 
-  var getSubmenuItem = function getSubmenuItem(menuItem) {
+  var SubmenuItem = function SubmenuItem(props) {
+    var submenuAnchorRef = useRef(null);
+    var menuItem = props.menuItem;
     return React.createElement("div", {
       "data-testid": "piped-text-submenu",
-      className: "piped-text-submenu-item-container",
-      key: menuItem.key
+      className: "piped-text-submenu-item-container"
     }, menuItem.show && React.createElement(PipedTextMenu, {
       items: menuItem.submenu.items,
       show: menuItem.show,
@@ -1052,12 +1087,16 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
           ref: ref,
           className: "piped-text-submenu-anchor"
         });
-      }
+      },
+      anchorRef: submenuAnchorRef
     }), React.createElement("div", {
       className: "piped-text-submenu-item",
+      "aria-haspopup": "menu",
+      role: "menuitem",
       onMouseEnter: function onMouseEnter($e) {
         return submenuHovered(menuItem);
-      }
+      },
+      ref: submenuAnchorRef
     }, React.createElement("div", {
       className: "label-text"
     }, menuItem.label), React.createElement("div", {
@@ -1079,7 +1118,10 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
       var menuItemHeaderClass, menuItemDisabledClass, menuItemClassName;
 
       if (menuItem.hasSubmenu) {
-        return getSubmenuItem(menuItem);
+        return React.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' : '';
@@ -1177,7 +1219,7 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
     } else {
       var itemsToRender = (menuItems || []).filter(matchesSearch);
       return React.createElement("div", {
-        className: "piped-text-popover-container"
+        className: "piped-text-popover-menu"
       }, React.createElement("div", {
         className: "piped-text-search-input"
       }, React.createElement("form", {
@@ -1190,7 +1232,11 @@ var PipedTextMenu = React.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));
     }
   };
@@ -1204,10 +1250,23 @@ var PipedTextMenu = React.forwardRef(function (props, ref) {
     anchor: props.anchor,
     ignoreClickSelector: props.ignoreClickSelector
   }, React.createElement("div", {
-    className: "piped-text-popover-container"
+    className: "piped-text-popover-container",
+    ref: popoverRefCb,
+    onFocus: function onFocus($e) {
+      return handleFocus($e);
+    },
+    tabIndex: props.tabIndex !== undefined ? props.tabIndex : -1
   }, getMenuContent()), React.createElement(OptionsPlaceholder, {
     optionsRef: optionsRef
   })));
+
+  function handleFocus(evt) {
+    if (!isSubmenu && searchBoxEl !== null) {
+      searchBoxEl.focus();
+    }
+
+    evt.stopPropagation();
+  }
 });
 
 function OptionsPlaceholder() {
@@ -1268,23 +1327,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 = useRef(null);
+  var externalAnchor = props.anchor;
   useEffect(function () {
     return function () {
       return onClose();
@@ -1299,6 +1343,22 @@ function PipedTextSelect(props) {
     var formattedPipedText = initializePipedText();
     setPipedTextItems(formattedPipedText);
   }, [props.items]);
+
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+
+  var onSelect = function onSelect(selected) {
+    props.onSelect(selected);
+    onClose();
+  };
+
+  var actualAnchor = externalAnchor !== undefined ? React.cloneElement(externalAnchor, {
+    ref: externalAnchor.ref
+  }) : defaultAnchor(defaultAnchorRef);
+  var anchorRef = props.anchorRef || actualAnchor.ref;
   return React.createElement("div", {
     className: "piped-text-dropdown"
   }, isMenuOpen && React.createElement(PipedTextMenu, {
@@ -1306,9 +1366,16 @@ function PipedTextSelect(props) {
     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";
@@ -1317,6 +1384,7 @@ styleInject(css_248z$6);
 function PipedTextInput(props) {
     var _a = useState(false), showMenu = _a[0], setShowMenu = _a[1];
     var _b = useState(), cursorPosition = _b[0], setCursorPosition = _b[1];
+    var pipedTextButtonRef = 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
@@ -1351,10 +1419,10 @@ function PipedTextInput(props) {
             React.createElement(Input, __assign({ value: inputRefValue.value, onChange: function (evt) {
                     onInputChange(evt);
                 }, onBlur: onInputBlur, placeholder: placeholder, multiline: multiline }, restProps)),
-            React.createElement(IconButton, { "aria-label": "PipedText", size: "medium", onClick: toggleMenu },
+            React.createElement(IconButton, { "aria-label": "PipedText", "aria-haspopup": "menu", "aria-expanded": showMenu ? true : undefined, role: "button", onClick: toggleMenu, ref: pipedTextButtonRef },
                 React.createElement(PipedTextIcon, null)),
             React.createElement("div", { className: "piped-text-select-container" },
-                React.createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle" }))),
+                React.createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle", anchorRef: pipedTextButtonRef }))),
         showAddonText() && (React.createElement("div", { className: "addon-text-container" },
             helperText && (React.createElement("div", { className: "helper-text" }, helperText)),
             errorText && (React.createElement("div", { className: "error-text" },
@@ -1386,7 +1454,7 @@ function PipedTextInput(props) {
         if (_get(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,
             });
@@ -1509,13 +1577,28 @@ function FieldRow(props) {
       }
 
       if (props.required || !props.children || Array.isArray(children) && children.length === 0) {
-        return React.createElement("div", {
-          className: "required-indicator-container"
-        }, React.createElement("div", {
-          className: "required-indicator-text"
-        }, props.fieldName), props.required && React.createElement("div", {
-          className: "required-indicator-symbol"
-        }, "*"));
+        if (props.subMenu) {
+          return React.createElement(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.createElement("div", {
+            className: "required-indicator-container"
+          }, React.createElement("div", {
+            className: "required-indicator-text"
+          }, props.fieldName), props.required && React.createElement("div", {
+            className: "required-indicator-symbol"
+          }, "*"));
+        }
       }
 
       return React.createElement(SelectMenu, {
@@ -1524,12 +1607,7 @@ function FieldRow(props) {
         label: props.fieldName,
         className: "full-width left-align",
         onChange: handleFieldSwitch
-      }, children.map(function (field) {
-        return React.createElement(MenuItem, {
-          value: field.id,
-          key: field.id
-        }, field.name);
-      }));
+      }, createMenuItems(children));
     };
 
     var tooltipContent = React.createElement("div", null, props.nameTooltip);
@@ -1540,6 +1618,22 @@ function FieldRow(props) {
     }, React.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.createElement(SelectMenu, {
+        label: subMenuLabel ? subMenuLabel : name,
+        key: id
+      }, createMenuItems(subMenu)) : React.createElement(MenuItem, {
+        key: id,
+        value: id
+      }, name);
+    });
+  };
+
   var getFieldInput = function getFieldInput() {
     var getInternalContent = function getInternalContent() {
       if (props.customInput) {
@@ -1565,7 +1659,7 @@ function FieldRow(props) {
   return React.createElement("div", {
     className: "field-row"
   }, React.createElement("div", {
-    className: "field-selector ".concat(props.required ? 'required-field' : '')
+    className: "field-selector ".concat(props.required && !props.subMenu ? 'required-field' : '')
   }, getFieldSelector()), React.createElement("div", {
     className: "field-input-container"
   }, React.createElement("div", {
@@ -1641,6 +1735,8 @@ function TaskFields(props) {
         required: field.required,
         fieldName: field.name,
         id: field.id,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel,
         nameTooltip: field.type === CUSTOM_TYPE ? _get(props, 'customFieldOptions.nameTooltip', '') : field.nameTooltip,
         valueTooltip: field.type === CUSTOM_TYPE ? _get(props, 'customFieldOptions.valueTooltip', '') : field.valueTooltip,
         onFieldNameChange: onFieldNameChange,
@@ -1654,8 +1750,24 @@ function TaskFields(props) {
         customNamePlaceholder: _get(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) {
@@ -1677,7 +1789,9 @@ function TaskFields(props) {
         type: field.type,
         required: field.required,
         key: field.id,
-        id: field.id
+        id: field.id,
+        subMenu: field.subMenu,
+        subMenuLabel: field.subMenuLabel
       });
     });
   };
@@ -1730,7 +1844,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
           });
         }
 
@@ -1751,7 +1867,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
           });
         }
       });
@@ -1777,7 +1895,9 @@ function TaskFields(props) {
             nameTooltip: _get(props, 'customFieldOptions.nameTooltip', ''),
             valueTooltip: _get(props, 'customFieldOptions.valueTooltip', ''),
             namePlaceholder: _get(props, 'customFieldOptions.namePlaceholder', ''),
-            type: CUSTOM_TYPE
+            type: CUSTOM_TYPE,
+            subMenu: currentField.subMenu,
+            subMenuLabel: currentField.subMenuLabel
           };
           nextFieldsInUse.push(customFieldValue);
         }
@@ -1792,7 +1912,11 @@ function TaskFields(props) {
         if (field !== undefined) {
           field.value = fieldValue.value;
         } else {
-          var newField = _cloneDeep(fieldMetadata);
+          var newField = _cloneDeepWith(fieldMetadata, function (value) {
+            if (React.isValidElement(value)) {
+              return React.cloneElement(value);
+            }
+          });
 
           newField.value = fieldValue.value;
           fieldsInUse.push(newField);
@@ -1811,7 +1935,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);
@@ -1846,6 +1972,7 @@ function TaskFields(props) {
   }, React.createElement(AddFieldButton, {
     label: props.addFieldLabel,
     onFieldAdded: onFieldAdd,
+    disableAddFieldPopover: props.disableAddFieldPopover,
     allowCustom: props.customFieldOptions,
     customLabel: _get(props, 'customFieldOptions.label', ''),
     onCustomFieldAdded: props.customFieldOptions ? onCustomFieldAdd : function () {}
@@ -1855,6 +1982,7 @@ function TaskFields(props) {
 function AddFieldButton(props) {
   var label = props.label || '';
   var customLabel = props.customLabel || '';
+  var disableAddFieldPopover = props.disableAddFieldPopover;
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -1876,15 +2004,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) {
+  children = props.children.map(function (child) {
     return React.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);