@qualtrics/plugin-ui-react 1.3.0-alpha.0 → 1.3.3

package/CHANGELOG.md

@@ -13,7 +13,11 @@
 * ~~Allow for field-row dropdowns to accept 'searchable' prop allowing for the dropdown to be input searched.~~
 * Fixed Chinese language codes to work with the latest version of `@qualtrics/ui-i18n`.
 
+## 1.3.2
+* Added capability for the TaskFields/FieldRow component to handle submenus in the fields. 
+* Added capability to disable the popover functionality of the `Add a field` button, replaced the popover functionality with functionality to automatically add a field from the list of available fields.
 ## 1.3.0
+* fix traditional and simplified chinese codes to work with the latest version of ui-i18n
 * Typescript@4.x
 * [8f3c89c8](https://gitlab-app.eng.qops.net/integrations/qualtrics-plugin-ui-react/-/commit/8f3c89c8) fix issue where lodash hits maximum callstack and throws a cross-origin error sometimes
 * [ee1cc9f6](https://gitlab-app.eng.qops.net/integrations/qualtrics-plugin-ui-react/-/commit/ee1cc9f6) Merge branch 'bump-1.2.4' into 'master'

package/dist/common/popover/popover.d.ts

@@ -1 +1 @@
-export function Popover(props: any, ref: any): JSX.Element;
+export function Popover(props: any): JSX.Element;

package/dist/main.es.js

@@ -1,4 +1,4 @@
-/*! @license @qualtrics/plugin-ui-react 1.3.0-alpha.0
+/*! @license @qualtrics/plugin-ui-react 1.3.3
 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';
@@ -116,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;
@@ -131,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;
@@ -152,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) {
@@ -220,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;
 }
 
@@ -250,6 +235,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -681,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],
@@ -878,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') {
@@ -907,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;
@@ -1003,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();
@@ -1032,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,
@@ -1055,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", {
@@ -1082,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' : '';
@@ -1180,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", {
@@ -1193,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));
     }
   };
@@ -1207,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() {
@@ -1271,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();
@@ -1302,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, {
@@ -1309,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";
@@ -1320,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
@@ -1354,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" },
@@ -1389,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,
             });
@@ -1512,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, {
@@ -1527,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);
@@ -1543,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) {
@@ -1568,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", {
@@ -1644,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,
@@ -1657,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) {
@@ -1680,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
       });
     });
   };
@@ -1733,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
           });
         }
 
@@ -1754,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
           });
         }
       });
@@ -1780,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);
         }
@@ -1818,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);
@@ -1853,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 () {}
@@ -1862,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),
@@ -1883,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);

package/dist/main.js

@@ -1,4 +1,4 @@
-/*! @license @qualtrics/plugin-ui-react 1.3.0-alpha.0
+/*! @license @qualtrics/plugin-ui-react 1.3.3
 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');
@@ -129,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;
@@ -144,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;
@@ -165,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) {
@@ -233,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;
 }
 
@@ -263,6 +248,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -694,7 +682,7 @@ var DEFAULT_PLACEMENT = 'bottom-start';
 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],
@@ -891,7 +879,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__default["default"].forwardRef(function (props, ref) {
+var PipedTextMenu = React__default["default"].forwardRef(function PipedTextMenu(props, ref) {
   var defaultMenuItems = undefined;
 
   if (typeof props.items !== 'function') {
@@ -920,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;
@@ -1016,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();
@@ -1045,11 +1076,12 @@ var PipedTextMenu = React__default["default"].forwardRef(function (props, ref) {
     props.onSelected(edMenuItem);
   };
 
-  var getSubmenuItem = function getSubmenuItem(menuItem) {
+  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
+      className: "piped-text-submenu-item-container"
     }, menuItem.show && React__default["default"].createElement(PipedTextMenu, {
       items: menuItem.submenu.items,
       show: menuItem.show,
@@ -1068,12 +1100,16 @@ var PipedTextMenu = React__default["default"].forwardRef(function (props, ref) {
           ref: ref,
           className: "piped-text-submenu-anchor"
         });
-      }
+      },
+      anchorRef: submenuAnchorRef
     }), React__default["default"].createElement("div", {
       className: "piped-text-submenu-item",
+      "aria-haspopup": "menu",
+      role: "menuitem",
       onMouseEnter: function onMouseEnter($e) {
         return submenuHovered(menuItem);
-      }
+      },
+      ref: submenuAnchorRef
     }, React__default["default"].createElement("div", {
       className: "label-text"
     }, menuItem.label), React__default["default"].createElement("div", {
@@ -1095,7 +1131,10 @@ 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' : '';
@@ -1193,7 +1232,7 @@ var PipedTextMenu = React__default["default"].forwardRef(function (props, ref) {
     } else {
       var itemsToRender = (menuItems || []).filter(matchesSearch);
       return React__default["default"].createElement("div", {
-        className: "piped-text-popover-container"
+        className: "piped-text-popover-menu"
       }, React__default["default"].createElement("div", {
         className: "piped-text-search-input"
       }, React__default["default"].createElement("form", {
@@ -1206,7 +1245,11 @@ 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));
     }
   };
@@ -1220,10 +1263,23 @@ var PipedTextMenu = React__default["default"].forwardRef(function (props, ref) {
     anchor: props.anchor,
     ignoreClickSelector: props.ignoreClickSelector
   }, React__default["default"].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__default["default"].createElement(OptionsPlaceholder, {
     optionsRef: optionsRef
   })));
+
+  function handleFocus(evt) {
+    if (!isSubmenu && searchBoxEl !== null) {
+      searchBoxEl.focus();
+    }
+
+    evt.stopPropagation();
+  }
 });
 
 function OptionsPlaceholder() {
@@ -1284,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();
@@ -1315,6 +1356,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__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, {
@@ -1322,9 +1379,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";
@@ -1333,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
@@ -1367,10 +1432,10 @@ function PipedTextInput(props) {
             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(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" }))),
+                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" },
@@ -1402,7 +1467,7 @@ function PipedTextInput(props) {
         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,
             });
@@ -1525,13 +1590,28 @@ 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, {
@@ -1540,12 +1620,7 @@ function FieldRow(props) {
         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);
@@ -1556,6 +1631,22 @@ function FieldRow(props) {
     }, 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() {
     var getInternalContent = function getInternalContent() {
       if (props.customInput) {
@@ -1581,7 +1672,7 @@ function FieldRow(props) {
   return React__default["default"].createElement("div", {
     className: "field-row"
   }, React__default["default"].createElement("div", {
-    className: "field-selector ".concat(props.required ? 'required-field' : '')
+    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", {
@@ -1657,6 +1748,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__default["default"](props, 'customFieldOptions.nameTooltip', '') : field.nameTooltip,
         valueTooltip: field.type === CUSTOM_TYPE ? _get__default["default"](props, 'customFieldOptions.valueTooltip', '') : field.valueTooltip,
         onFieldNameChange: onFieldNameChange,
@@ -1670,8 +1763,24 @@ function TaskFields(props) {
         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) {
@@ -1693,7 +1802,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
       });
     });
   };
@@ -1746,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
           });
         }
 
@@ -1767,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
           });
         }
       });
@@ -1793,7 +1908,9 @@ function TaskFields(props) {
             nameTooltip: _get__default["default"](props, 'customFieldOptions.nameTooltip', ''),
             valueTooltip: _get__default["default"](props, 'customFieldOptions.valueTooltip', ''),
             namePlaceholder: _get__default["default"](props, 'customFieldOptions.namePlaceholder', ''),
-            type: CUSTOM_TYPE
+            type: CUSTOM_TYPE,
+            subMenu: currentField.subMenu,
+            subMenuLabel: currentField.subMenuLabel
           };
           nextFieldsInUse.push(customFieldValue);
         }
@@ -1831,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);
@@ -1866,6 +1985,7 @@ function TaskFields(props) {
   }, React__default["default"].createElement(AddFieldButton, {
     label: props.addFieldLabel,
     onFieldAdded: onFieldAdd,
+    disableAddFieldPopover: props.disableAddFieldPopover,
     allowCustom: props.customFieldOptions,
     customLabel: _get__default["default"](props, 'customFieldOptions.label', ''),
     onCustomFieldAdded: props.customFieldOptions ? onCustomFieldAdd : function () {}
@@ -1875,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),
@@ -1896,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) {
+  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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualtrics/plugin-ui-react",
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.3",
   "description": "",
   "main": "dist/main.js",
   "module": "dist/main.es.js",
@@ -52,12 +52,12 @@
     "jest": "^26.6.3",
     "jest-css-modules": "^2.1.0",
     "jest-junit": "^12.0.0",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-reporter": "^7.0.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-test-renderer": "^17.0.1",
+    "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.52.2",
     "rollup-plugin-babel": "^4.3.3",
@@ -75,10 +75,10 @@
     "typescript": "^4.3.4"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
     "@qualtrics/base-styles": "^0.2.1",
-    "@qualtrics/ui-react": "^1.60.0"
+    "@qualtrics/ui-react": "^1.60.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.4",

package/test_results/junit.xml

@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="36" failures="0" errors="0" time="36.055">
-  <testsuite name="FieldItem" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="10.95" tests="2">
-    <testcase classname="FieldItem renders properly" name="FieldItem renders properly" time="0.019">
-    </testcase>
-    <testcase classname="FieldItem invokes onClick handler with expected arguments when clicked" name="FieldItem invokes onClick handler with expected arguments when clicked" time="0.046">
-    </testcase>
-  </testsuite>
-  <testsuite name="SelectItem" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="13.889" tests="1">
-    <testcase classname="SelectItem fires the onChange handler with expected args" name="SelectItem fires the onChange handler with expected args" time="0.048">
-    </testcase>
-  </testsuite>
-  <testsuite name="DynamicSearchInput" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="15.874" tests="1">
-    <testcase classname="DynamicSearchInput renders correctly" name="DynamicSearchInput renders correctly" time="0.002">
-    </testcase>
-  </testsuite>
-  <testsuite name="FieldRow" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="16.197" tests="1">
-    <testcase classname="FieldRow fires the onFieldNameChange handler when field name is changed" name="FieldRow fires the onFieldNameChange handler when field name is changed" time="0.063">
-    </testcase>
-  </testsuite>
-  <testsuite name="MultiselectDropdown" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="17.095" tests="3">
-    <testcase classname="MultiselectDropdown toggles dropdown when button is clicked" name="MultiselectDropdown toggles dropdown when button is clicked" time="0.276">
-    </testcase>
-    <testcase classname="MultiselectDropdown calls onChange handler when item is clicked" name="MultiselectDropdown calls onChange handler when item is clicked" time="0.705">
-    </testcase>
-    <testcase classname="MultiselectDropdown closes menu on click away" name="MultiselectDropdown closes menu on click away" time="0.109">
-    </testcase>
-  </testsuite>
-  <testsuite name="PipedTextInput" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="17.619" tests="6">
-    <testcase classname="PipedTextInput toggles menu open/closed on click" name="PipedTextInput toggles menu open/closed on click" time="0.372">
-    </testcase>
-    <testcase classname="PipedTextInput fires onChange handler when input value changes from selecting piped text" name="PipedTextInput fires onChange handler when input value changes from selecting piped text" time="0.09">
-    </testcase>
-    <testcase classname="PipedTextInput fires onChange handler when input value changes from user typing in input box" name="PipedTextInput fires onChange handler when input value changes from user typing in input box" time="0.008">
-    </testcase>
-    <testcase classname="PipedTextInput fires onSelect handler when piped text is selected" name="PipedTextInput fires onSelect handler when piped text is selected" time="0.077">
-    </testcase>
-    <testcase classname="PipedTextInput fires onClose handler when menu is closed" name="PipedTextInput fires onClose handler when menu is closed" time="0.074">
-    </testcase>
-    <testcase classname="PipedTextInput inserts piped text at the position of the cursor in the input box when piped text is selected" name="PipedTextInput inserts piped text at the position of the cursor in the input box when piped text is selected" time="0.111">
-    </testcase>
-  </testsuite>
-  <testsuite name="TaskFields" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="18.071" tests="4">
-    <testcase classname="TaskFields only renders custom fields if custom field configuration options provided" name="TaskFields only renders custom fields if custom field configuration options provided" time="1.013">
-    </testcase>
-    <testcase classname="TaskFields fires onFieldNameChange handler when a custom field&apos;s name is changed" name="TaskFields fires onFieldNameChange handler when a custom field&apos;s name is changed" time="0.033">
-    </testcase>
-    <testcase classname="TaskFields fires onFieldAdd handler when a field is added" name="TaskFields fires onFieldAdd handler when a field is added" time="0.053">
-    </testcase>
-    <testcase classname="TaskFields fires onCustomFieldAdd handler when a custom field is added" name="TaskFields fires onCustomFieldAdd handler when a custom field is added" time="0.058">
-    </testcase>
-  </testsuite>
-  <testsuite name="PipedTextSelect" errors="0" failures="0" skipped="0" timestamp="2021-06-29T23:21:26" time="26.879" tests="18">
-    <testcase classname="PipedTextSelect filters menu items to items containing the search value as text" name="PipedTextSelect filters menu items to items containing the search value as text" time="1.028">
-    </testcase>
-    <testcase classname="PipedTextSelect filters menu items to items containing the search value as a substring" name="PipedTextSelect filters menu items to items containing the search value as a substring" time="0.174">
-    </testcase>
-    <testcase classname="PipedTextSelect filters menu items with special characters to items containing the search value" name="PipedTextSelect filters menu items with special characters to items containing the search value" time="0.152">
-    </testcase>
-    <testcase classname="PipedTextSelect renders submenu correctly when hovering over a submenu item" name="PipedTextSelect renders submenu correctly when hovering over a submenu item" time="0.554">
-    </testcase>
-    <testcase classname="PipedTextSelect hides other submenus when hovering over another submenu" name="PipedTextSelect hides other submenus when hovering over another submenu" time="0.618">
-    </testcase>
-    <testcase classname="PipedTextSelect hides other submenus when hovering over another item" name="PipedTextSelect hides other submenus when hovering over another item" time="0.387">
-    </testcase>
-    <testcase classname="PipedTextSelect fires onSelect handler when a menu item is selected" name="PipedTextSelect fires onSelect handler when a menu item is selected" time="0.148">
-    </testcase>
-    <testcase classname="PipedTextSelect doesn&apos;t fire onSelect handler when a disabled menu item is selected" name="PipedTextSelect doesn&apos;t fire onSelect handler when a disabled menu item is selected" time="0.146">
-    </testcase>
-    <testcase classname="PipedTextSelect fires onClose handler when menu item selected" name="PipedTextSelect fires onClose handler when menu item selected" time="0.148">
-    </testcase>
-    <testcase classname="PipedTextSelect fires onClose handler when nested item selected" name="PipedTextSelect fires onClose handler when nested item selected" time="1.37">
-    </testcase>
-    <testcase classname="PipedTextSelect fires onClose handler when clicking outside of the menu" name="PipedTextSelect fires onClose handler when clicking outside of the menu" time="0.207">
-    </testcase>
-    <testcase classname="PipedTextSelect displays the custom input message if none of the menu items match the search query and custom input is enabled" name="PipedTextSelect displays the custom input message if none of the menu items match the search query and custom input is enabled" time="0.626">
-    </testcase>
-    <testcase classname="PipedTextSelect correctly creates a custom locator based on the provided scheme when the user hits the &quot;enter&quot; in the search query" name="PipedTextSelect correctly creates a custom locator based on the provided scheme when the user hits the &quot;enter&quot; in the search query" time="0.541">
-    </testcase>
-    <testcase classname="PipedTextSelect calls the onClose handler when custom input is enabled and the user hits &quot;enter&quot; in the search query" name="PipedTextSelect calls the onClose handler when custom input is enabled and the user hits &quot;enter&quot; in the search query" time="0.565">
-    </testcase>
-    <testcase classname="PipedTextSelect does not call the onClose handler when custom input is disabled and the user hits &quot;enter&quot; in the search query" name="PipedTextSelect does not call the onClose handler when custom input is disabled and the user hits &quot;enter&quot; in the search query" time="0.651">
-    </testcase>
-    <testcase classname="PipedTextSelect displays piped text items provided by an async &quot;items&quot; function" name="PipedTextSelect displays piped text items provided by an async &quot;items&quot; function" time="0.555">
-    </testcase>
-    <testcase classname="PipedTextSelect displays piped text items provided by a non-async &quot;items&quot; function" name="PipedTextSelect displays piped text items provided by a non-async &quot;items&quot; function" time="0.547">
-    </testcase>
-    <testcase classname="PipedTextSelect displays loading error message if async piped text items function fails to resolve" name="PipedTextSelect displays loading error message if async piped text items function fails to resolve" time="0.557">
-    </testcase>
-  </testsuite>
-</testsuites>