@qualtrics/plugin-ui-react 1.4.0-alpha.0 → 1.4.0-alpha.2

package/dist/main.es.js

@@ -1,4 +1,4 @@
-/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.0
+/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.2
 Qualtrics Software License Agreement
 
 1. General.
@@ -57,26 +57,25 @@ 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, useCallback } from 'react';
 import _get from 'lodash.get';
-import { Button, InputGroup, Input, Icon, IconTypes, LoadingSpinner, IconButton, Tooltip, SelectMenu, MenuItem, Label, Dropdown, DropdownButton, DropdownList, DropdownOption } from '@qualtrics/ui-react';
-import { ErrorIcon, PipedTextIcon, RemoveItemIcon, CheckIcon, AddIcon } from '@qualtrics/ui-react/icons';
+import { Button, Icon, IconTypes, InputGroup, Input, LoadingSpinner, IconButton, Tooltip, SelectMenu, MenuItem, Label, FormField, InputField, Dropdown, DropdownButton, DropdownList, DropdownOption } from '@qualtrics/ui-react';
+import { ErrorIcon, PipedTextIcon, RemoveItemIcon, SuccessIcon, CheckIcon, AddIcon } from '@qualtrics/ui-react/icons';
 import 'core-js/modules/es.string.anchor.js';
-import 'core-js/modules/es.array.filter.js';
-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 _cloneDeep from 'lodash.clonedeep';
+import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.is-array.js';
 import { Manager, Reference, Popper } from 'react-popper';
 import ReactDOM from 'react-dom';
-import 'core-js/modules/web.timers.js';
 import uuid, { v4 } from 'uuid';
+import 'core-js/modules/es.array.map.js';
 import 'core-js/modules/es.function.name.js';
 import 'core-js/modules/es.array.slice.js';
 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 'core-js/modules/es.array.filter.js';
 import _cloneDeepWith from 'lodash.clonedeepwith';
+import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.search.js';
 
@@ -107,8 +106,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$j = ".react-app {\n  background-color: RGBA(0, 0, 0, 0.1); }\n";
-styleInject(css_248z$j);
+var css_248z$m = ".react-app {\n  background-color: RGBA(0, 0, 0, 0.1); }\n";
+styleInject(css_248z$m);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -896,6 +895,7 @@ var languageCodeMapping = {
   'ES-ES': 'es-419',
   FI: 'fi',
   FR: 'fr',
+  'FR-CA': 'fr-CA',
   ID: 'id',
   IT: 'it',
   JA: 'ja',
@@ -959,6 +959,54 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var Portal = function (_Component) {
@@ -1004,8 +1052,8 @@ var Portal = function (_Component) {
   return Portal;
 }(Component);
 
-var css_248z$i = ".q-popover {\n  position: absolute;\n  z-index: 1000;\n  padding: 4px 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: #32363A;\n  fill: #333;\n  list-style: none;\n  min-width: 160px;\n  max-width: 500px;\n  min-height: 10px;\n  max-height: 99%;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 0px 10px 1px rgba(0, 0, 0, 0.14), 0 0px 10px 2px rgba(0, 0, 0, 0.12);\n  z-index: 9000; }\n\nbody .q-popover {\n  max-height: 50vh;\n  overflow-y: scroll;\n  max-width: 30vw; }\n";
-styleInject(css_248z$i);
+var css_248z$l = ".q-popover {\n  position: absolute;\n  z-index: 1000;\n  padding: 4px 0;\n  font-size: 14px;\n  line-height: 20px;\n  color: #32363A;\n  fill: #333;\n  list-style: none;\n  min-width: 160px;\n  max-width: 500px;\n  min-height: 10px;\n  max-height: 99%;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 0px 10px 1px rgba(0, 0, 0, 0.14), 0 0px 10px 2px rgba(0, 0, 0, 0.12);\n  z-index: 9000; }\n\nbody .q-popover {\n  max-height: 50vh;\n  overflow-y: scroll;\n  max-width: 30vw; }\n";
+styleInject(css_248z$l);
 
 var globalClickRegistry = new EventRegistry();
 var DEFAULT_PLACEMENT = 'bottom-start';
@@ -1119,92 +1167,8 @@ function initGlobalListener() {
   });
 }
 
-var css_248z$h = "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$h);
-
-var EmbeddedDataMenu = React.forwardRef(function EmbeddedDataMeny(props, ref) {
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isInputInvalid = _useState4[0],
-      setIsInputInvalid = _useState4[1];
-
-  var inputRef = useRef();
-  var anchor = props.anchor;
-
-  var onClose = props.onClose || function () {};
-
-  var popoverClassName = 'embedded-data-menu-content';
-  var ignoreClickSelector = popoverClassName;
-
-  var onSelect = props.onSelect || function () {};
-
-  useEffect(function () {
-    setTimeout(function () {
-      if (_get(inputRef, 'current.focus') !== undefined) {
-        inputRef.current.focus();
-      }
-    });
-  }, [props.show]);
-
-  var handleInputChange = function handleInputChange($e) {
-    var inputValue = ($e.target.value || '').trim();
-    var uriEncodedValue = encodeURIComponent(inputValue);
-    setInputValue(uriEncodedValue);
-
-    if (uriEncodedValue.length > 0 && isInputInvalid) {
-      setIsInputInvalid(false);
-    }
-  };
-
-  var handleAddButtonClick = function handleAddButtonClick() {
-    var locatorString;
-
-    if ((inputValue || '').trim().length < 1) {
-      setIsInputInvalid(true);
-      return;
-    }
-
-    locatorString = "${e://Field/".concat(inputValue, "}");
-    onSelect(locatorString);
-  };
-
-  var handleInputKeyDown = function handleInputKeyDown($e) {
-    var key = $e.key;
-
-    if (key !== 'Enter') {
-      return;
-    }
-
-    handleAddButtonClick();
-  };
-
-  return React.createElement(Popover, {
-    show: props.show,
-    anchor: anchor,
-    onClose: onClose,
-    ignoreClickSelector: ignoreClickSelector,
-    placement: props.placement || 'right-start'
-  }, React.createElement("div", {
-    className: "embedded-data-menu",
-    ref: ref
-  }, React.createElement("div", null, React.createElement(InputGroup, null, React.createElement(Input, {
-    onChange: handleInputChange,
-    invalid: isInputInvalid,
-    onKeyDown: handleInputKeyDown,
-    ref: inputRef,
-    className: "q-plugin-popover-input"
-  }), React.createElement(Button, {
-    kind: "primary",
-    onClick: handleAddButtonClick
-  }, React.createElement(Icon, {
-    type: IconTypes.Add
-  }))))));
-});
+var css_248z$k = ".piped-text-menu-list .piped-text-popover-menu > * {\n  min-height: 32px; }\n";
+styleInject(css_248z$k);
 
 /**
  * Copied from: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/hooks/useId/useId.js
@@ -1219,58 +1183,494 @@ function useId(defaultExternalId) {
     return currentId;
 }
 
-var css_248z$g = "";
-styleInject(css_248z$g);
+var css_248z$j = "";
+styleInject(css_248z$j);
 
-var css_248z$f = "";
-styleInject(css_248z$f);
+function PipedTextMenuLoadError(props) {
+    return (React.createElement("div", { className: "piped-text-popover-container" },
+        React.createElement("div", { className: "piped-text-error-container" },
+            React.createElement("div", { className: "piped-text-error-icon" },
+                React.createElement(ErrorIcon, { size: "medium" })),
+            props.errorText && (React.createElement("div", { className: "piped-text-error-text" }, props.errorText)))));
+}
+
+var EMBEDDED_DATA_LOCATOR = 'embeddedData';
+function checkEmbeddedDataMenuItem(menuItem) {
+    return menuItem.value === EMBEDDED_DATA_LOCATOR;
+}
+function checkDecoratedMenuItem(menuItem) {
+    return (menuItem.header === true)
+        || (menuItem.disabled === true);
+}
+function checkSubmenuMenuItemItem(menuItem) {
+    return !!menuItem.hasSubmenu;
+}
+function checkMenuItemFocusable(menuItem) {
+    var isEmbeddedData, isSubmenu, isDefaultMenuItem;
+    isEmbeddedData = checkEmbeddedDataMenuItem(menuItem);
+    isSubmenu = checkSubmenuMenuItemItem(menuItem);
+    isDefaultMenuItem = checkDefaultMenuItem(menuItem);
+    return (isEmbeddedData
+        || isSubmenu
+        || isDefaultMenuItem);
+}
+function checkDefaultMenuItem(menuItem) {
+    return !(checkEmbeddedDataMenuItem(menuItem)
+        || checkDecoratedMenuItem(menuItem)
+        || checkSubmenuMenuItemItem(menuItem));
+}
+
+var css_248z$i = "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-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.piped-text-menu-item-container.highlighted-menu-item {\n  background: RGBA(50, 54, 58, 0.08); }\n\n.piped-text-menu-item-container .piped-text-menu-item, .piped-text-menu-item-container .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-container .piped-text-menu-item:not(.piped-text-header):not(.piped-text-disabled):hover, .piped-text-menu-item-container .piped-text-submenu-item:not(.piped-text-header):not(.piped-text-disabled):hover {\n    cursor: pointer; }\n  .piped-text-menu-item-container .piped-text-menu-item.piped-text-header, .piped-text-menu-item-container .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-container .piped-text-menu-item.piped-text-disabled:not(.piped-text-header), .piped-text-menu-item-container .piped-text-submenu-item.piped-text-disabled:not(.piped-text-header) {\n    color: RGB(116, 119, 122); }\n";
+styleInject(css_248z$i);
+
+var css_248z$h = "";
+styleInject(css_248z$h);
 
 // const WrappedPipedTextMenu = PipedTextMenu as PipedTextMenuType;
 var PipedTextSubmenuItem = React.forwardRef(function PipedTextSubmenuItem(props, ref) {
     var submenuAnchorRef = useRef(null);
-    var submenuItemId = useId();
+    var submenuAnchorId = useId();
     var menuItem = props.menuItem;
-    return (React.createElement("div", { "data-testid": "piped-text-submenu", className: "piped-text-submenu-item-container" },
-        menuItem.show && (React.createElement(PipedTextMenu, { "aria-labelledby": submenuItemId, 
+    return (React.createElement("div", { "data-testid": "piped-text-submenu", className: "piped-text-submenu-item-container", role: 'presentation' },
+        menuItem.show && (React.createElement(PipedTextMenu, { "aria-labelledby": submenuAnchorId, 
             //@ts-ignore
             items: menuItem.submenu.items, show: menuItem.show, placement: "right-start", onClose: function () {
                 menuItem.show = false;
-            }, allowCustom: menuItem.submenu.allowCustom, customScheme: menuItem.submenu.customScheme, customInputMessage: menuItem.submenu.customInputMessage, searchPlaceholder: menuItem.submenu.searchPlaceholder, errorText: menuItem.submenu.errorText, onSelected: menuItemClicked, anchor: function (ref) { return (React.createElement("div", { ref: ref, className: "piped-text-submenu-anchor" })); }, anchorRef: submenuAnchorRef })),
-        React.createElement("div", { 
-            // aria-haspopup="menu"
-            // id={subMenuItemId}
-            className: "piped-text-submenu-item", 
-            // role="menuitem"
-            onMouseEnter: function () { return submenuHovered(menuItem); }, ref: submenuAnchorRef },
+            }, allowCustom: menuItem.submenu.allowCustom, customScheme: menuItem.submenu.customScheme, customInputMessage: menuItem.submenu.customInputMessage, searchPlaceholder: menuItem.submenu.searchPlaceholder, errorText: menuItem.submenu.errorText, onSelected: menuItemClicked, anchor: function (ref) { return (React.createElement("div", { ref: ref, className: "piped-text-submenu-anchor" })); }, anchorRef: submenuAnchorRef, keyboardCtrl: props.keyboardCtrl, pipedTextMenuId: props.pipedTextMenuId })),
+        React.createElement("div", { id: submenuAnchorId, className: "piped-text-submenu-item", ref: submenuAnchorRef },
             React.createElement("div", { className: "label-text" }, menuItem.label),
             React.createElement("div", { className: "piped-text-icon" },
                 React.createElement(Icon, { type: IconTypes.ChevronRight, size: "medium" })))));
     function menuItemClicked(menuItem) {
         props.onMenuItemClick(menuItem);
     }
-    function submenuHovered(menuItem) {
-        props.onSubmenuHover(menuItem);
+});
+
+var css_248z$g = "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-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$g);
+
+var css_248z$f = "";
+styleInject(css_248z$f);
+
+var TEXT_INPUT_KEYS_TO_ALLOW = [
+    'ArrowDown',
+    'Escape',
+    'Tab',
+    'PageUp',
+    'Home',
+    'PageDown',
+    'End',
+    'Enter',
+];
+var PipedTextMenuFocusItem = /** @class */ (function () {
+    function PipedTextMenuFocusItem(currentContainer, menuItems) {
+        this.currentContainer = currentContainer;
+        this.menuItems = menuItems;
+        this.highlightedIdx = -1;
+    }
+    PipedTextMenuFocusItem.prototype.setMenuItems = function (menuItems) {
+        this.menuItems = menuItems;
+    };
+    PipedTextMenuFocusItem.prototype.findMenuItemIdx = function (menuItemRef) {
+        return this.menuItems.findIndex(function (menuItem) {
+            return menuItem.current === menuItemRef.current;
+        });
+    };
+    return PipedTextMenuFocusItem;
+}());
+var PipedTextMenuKeyboardCtrl = /** @class */ (function () {
+    function PipedTextMenuKeyboardCtrl() {
+        this.menuFocusItems = [];
+        this.currFocusItemIdx = -1;
     }
+    PipedTextMenuKeyboardCtrl.prototype.getFocusMenu = function (containerRef) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (focusItem) {
+            return focusItem.currentContainer.current === containerRef.current;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            return undefined;
+        }
+        return this.menuFocusItems[foundMenuFocusItemIdx];
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getCurrentFocusMenu = function () {
+        return this.menuFocusItems[this.currFocusItemIdx];
+    };
+    PipedTextMenuKeyboardCtrl.prototype.addMenu = function (containerRef, menuItemRefs) {
+        var menuToSet, foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === containerRef.current;
+        });
+        if ((this.menuFocusItems.length === 0)
+            || (foundMenuFocusItemIdx === -1)) {
+            menuToSet = new PipedTextMenuFocusItem(containerRef, menuItemRefs);
+            this.menuFocusItems.push(menuToSet);
+        }
+        else {
+            menuToSet = this.menuFocusItems[foundMenuFocusItemIdx];
+            menuToSet.setMenuItems(menuItemRefs);
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.removeMenu = function (containerRef) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === containerRef.current;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            console.error(this);
+            console.error(containerRef);
+            throw new Error('Could not find a matching PipedTextMenu');
+        }
+        this.menuFocusItems.splice(foundMenuFocusItemIdx, 1);
+    };
+    PipedTextMenuKeyboardCtrl.prototype.handleKeyEvent = function ($e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var key;
+        var currFocusMenu, nextFocusMenu, nextFocusElemRef;
+        var highlightedItem;
+        key = $e.key;
+        currFocusMenu = this.getCurrentFocusMenu();
+        if (currFocusMenu === undefined) {
+            // technically an error case...
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown':
+                /*
+                  In the current focused submenu, advance to the next available menu item
+                    and set it to highlighted, and trigger a focus on the menu item element
+                */
+                if (currFocusMenu.highlightedIdx < (currFocusMenu.menuItems.length - 1)) {
+                    nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.highlightedIdx + 1];
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_a = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+            case 'ArrowUp':
+                /*
+                  In the current focused submenu, advance to the previous available menu item
+                    and set it to highlighted, and trigger a focus on the menu item element
+                */
+                if (currFocusMenu.highlightedIdx > 0) {
+                    nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.highlightedIdx - 1];
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_b = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'ArrowRight':
+                this.focusNextSubmenu();
+                break;
+            case 'ArrowLeft':
+            case 'Escape':
+                /*
+                  Set the previous (parent) submenu as the current focused menu.
+                  If it has a child menuitem to highlight, focus the highlighted menu item.
+                  If no menuitem is highlighted in the target submenu, call focus() on the
+                    container element; the container element focus event handler is expected to
+                    respond to the event and set it's own highlighted element and index.
+                */
+                if (this.currFocusItemIdx > 0) {
+                    $e.stopPropagation();
+                    nextFocusMenu = this.menuFocusItems[this.currFocusItemIdx - 1];
+                    if (nextFocusMenu !== undefined) {
+                        highlightedItem = nextFocusMenu.menuItems[nextFocusMenu.highlightedIdx];
+                        if (highlightedItem === undefined) {
+                            (_d = (_c = nextFocusMenu.currentContainer) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
+                        }
+                        else {
+                            (_e = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.current) === null || _e === void 0 ? void 0 : _e.focus();
+                        }
+                    }
+                }
+                break;
+            case 'PageUp':
+            case 'Home':
+                /*
+                  Focus the first menuitem in the current focus menu
+                */
+                nextFocusElemRef = currFocusMenu.menuItems[0];
+                if (nextFocusElemRef) {
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_f = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _f === void 0 ? void 0 : _f.focus();
+                }
+                break;
+            case 'PageDown':
+            case 'End':
+                /*
+                  Focus the last menuitem in the current focus menu
+                */
+                nextFocusElemRef = currFocusMenu.menuItems[currFocusMenu.menuItems.length - 1];
+                if (nextFocusElemRef) {
+                    this.setFocusMenuHighlightedIdx(currFocusMenu.currentContainer, nextFocusElemRef);
+                    (_g = nextFocusElemRef === null || nextFocusElemRef === void 0 ? void 0 : nextFocusElemRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+                }
+                break;
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.focusNextSubmenu = function () {
+        var _a, _b, _c;
+        var currFocusMenu, nextFocusMenu, highlightedItem;
+        currFocusMenu = this.getCurrentFocusMenu();
+        if (currFocusMenu === undefined) {
+            // technically an error case...
+            return;
+        }
+        nextFocusMenu = this.menuFocusItems[this.currFocusItemIdx + 1];
+        if (nextFocusMenu !== undefined) {
+            highlightedItem = nextFocusMenu.menuItems[nextFocusMenu.highlightedIdx];
+            if (highlightedItem === undefined) {
+                (_b = (_a = nextFocusMenu.currentContainer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_c = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getCurrentFocusMenuRef = function () {
+        var _a;
+        return (_a = this.getCurrentFocusMenu()) === null || _a === void 0 ? void 0 : _a.currentContainer;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.isMenuItemInCurrentFocusMenu = function (menuItemRef) {
+        var currentFocusMenu, foundFocusMenuItemRef;
+        currentFocusMenu = this.getCurrentFocusMenu();
+        foundFocusMenuItemRef = currentFocusMenu.menuItems.find(function (menuItem) {
+            return menuItem.current === menuItemRef.current;
+        });
+        return foundFocusMenuItemRef !== undefined;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.setFocus = function (focusedEl) {
+        var foundMenuFocusItemIdx;
+        foundMenuFocusItemIdx = this.menuFocusItems.findIndex(function (menuFocusItem) {
+            return menuFocusItem.currentContainer.current === focusedEl;
+        });
+        if (foundMenuFocusItemIdx === -1) {
+            console.error(this);
+            console.error(focusedEl);
+            throw new Error('Could not find a matching PipedTextMenu');
+        }
+        this.currFocusItemIdx = foundMenuFocusItemIdx;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.getFocusMenuHighlightedIdx = function (containerRef) {
+        var focusMenu;
+        focusMenu = this.getFocusMenu(containerRef);
+        if (focusMenu === undefined) {
+            return -1;
+        }
+        return focusMenu.highlightedIdx;
+    };
+    PipedTextMenuKeyboardCtrl.prototype.setFocusMenuHighlightedIdx = function (containerRef, highlightedItemRef) {
+        var foundMenuFocusItem, foundHighlightedItemIdx;
+        foundMenuFocusItem = this.getFocusMenu(containerRef);
+        if (foundMenuFocusItem === undefined) {
+            return;
+        }
+        foundHighlightedItemIdx = foundMenuFocusItem.findMenuItemIdx(highlightedItemRef);
+        if (foundHighlightedItemIdx === -1) {
+            return;
+        }
+        foundMenuFocusItem.highlightedIdx = foundHighlightedItemIdx;
+    };
+    return PipedTextMenuKeyboardCtrl;
+}());
+
+function EmbeddedDataInput(props) {
+    var _a = useState(''), inputValue = _a[0], setInputValue = _a[1];
+    var _b = useState(false), isInputInvalid = _b[0], setIsInputInvalid = _b[1];
+    var containerRef = useRef();
+    var inputRef = useRef();
+    useEffect(function () {
+        props.keyboardCtrl.addMenu(containerRef, [
+            inputRef,
+        ]);
+    }, [
+        containerRef
+    ]);
+    useEffect(function () {
+        var $destroy = function () {
+            props.keyboardCtrl.removeMenu(containerRef);
+        };
+        return $destroy;
+    }, []);
+    return (React.createElement("div", { className: 'embedded-data-input', tabIndex: -1, "aria-labelledby": props.ariaLabelledById, ref: containerRef, onFocus: handleContainerFocus, onKeyDown: handleContainerKeyDown },
+        React.createElement(InputGroup, null,
+            React.createElement(Input, { onChange: function ($e) {
+                    handleInputChange($e);
+                }, invalid: isInputInvalid, onKeyDown: handleInputKeyDown, className: 'q-plugin-popover-input', ref: inputRef }),
+            React.createElement(Button, { kind: 'primary', onClick: handleAddButtonClick, onKeyDown: handleAddButtonKeyDown, onFocus: function ($e) {
+                    $e.stopPropagation();
+                } },
+                React.createElement(Icon, { type: IconTypes.Add })))));
+    function handleContainerFocus($e) {
+        var _a;
+        if ($e.currentTarget === containerRef.current) {
+            props.keyboardCtrl.setFocus(containerRef.current);
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            props.keyboardCtrl.setFocusMenuHighlightedIdx(containerRef, inputRef);
+            $e.stopPropagation();
+            $e.preventDefault();
+        }
+    }
+    function handleContainerKeyDown($e) {
+        switch ($e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft':
+            case 'Escape':
+                props.keyboardCtrl.handleKeyEvent($e);
+                $e.preventDefault(); // prevent scroll
+                break;
+            case 'Enter':
+                handleAddButtonClick();
+                /*
+                  We don't want Enter key events to bubble, because when the
+                    menu closes after enter the focus will return to the
+                    piped-text anchor button, and Enter would reopen the base menu
+                */
+                $e.stopPropagation();
+                $e.preventDefault();
+                break;
+            case 'PageUp':
+            case 'Home':
+            case 'PageDown':
+            case 'End':
+                $e.stopPropagation();
+                $e.preventDefault();
+                break;
+        }
+    }
+    function handleInputKeyDown($e) {
+        var key = $e.key;
+        if (!TEXT_INPUT_KEYS_TO_ALLOW.includes($e.key)) {
+            $e.stopPropagation();
+        }
+        if (!$e.shiftKey && (key === 'Tab')) {
+            /*
+              User can tab forward to focus add Button element
+                without closing the popover menu
+            */
+            $e.stopPropagation();
+        }
+    }
+    function handleAddButtonKeyDown($e) {
+        if ($e.shiftKey && ($e.key === 'Tab')) {
+            /*
+              User can shift+tab back to focus Text Input element
+                without closing the popover menu
+            */
+            $e.stopPropagation();
+        }
+    }
+    function handleAddButtonClick() {
+        var locatorString;
+        // Indicate a validation error if the inputValue is empty.
+        //  We do not need to provide an error message, via UX guidelines
+        //  input validation errors indicate "Required" implicitly by default.
+        if ((inputValue || '').trim().length < 1) {
+            setIsInputInvalid(true);
+            return;
+        }
+        locatorString = "${e://Field/".concat(inputValue, "}");
+        props.onSelect(locatorString);
+    }
+    function handleInputChange($e) {
+        var nextInputValue = ($e.target.value || '').trim();
+        var uriEncodedValue = encodeURIComponent(nextInputValue);
+        setInputValue(uriEncodedValue);
+        if ((uriEncodedValue.length > 0) && isInputInvalid) {
+            setIsInputInvalid(false);
+        }
+    }
+}
+
+var EmbeddedDataMenu = React.forwardRef(function EmbeddedDataMenu(props, ref) {
+    var anchor = props.anchor;
+    var onClose = props.onClose || (function () { return undefined; });
+    var popoverClassName = 'embedded-data-menu-content';
+    var ignoreClickSelector = popoverClassName;
+    var onSelect = props.onSelect || (function () { return undefined; });
+    return (React.createElement(Popover, { show: props.show, anchor: anchor, onClose: onClose, ignoreClickSelector: ignoreClickSelector, placement: props.placement || 'right-start' },
+        React.createElement("div", { className: "embedded-data-menu", ref: ref },
+            React.createElement(EmbeddedDataInput, { onSelect: onSelect, keyboardCtrl: props.keyboardCtrl, ariaLabelledById: props.ariaLabelledById }))));
 });
 
-var EMBEDDED_DATA_LOCATOR$1 = 'embeddedData';
+/*
+  Combines refs for using ForwardRef to manage a localRef in the component, while
+    still allowing the passed ref to function
+
+  See following reference implementations:
+    https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/utils/mergeRefs/mergeRefs.ts
+    https://github.com/gregberge/react-merge-refs/blob/main/src/index.tsx
+*/
+function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if ((typeof ref) === 'function') {
+                ref(value);
+            }
+            else if (ref !== null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+
+// export const EMBEDDED_DATA_LOCATOR = 'embeddedData';
 var PipedTextMenuItem = React.forwardRef(function PipedTextMenuItem(props, ref) {
-    var submenuId = useId();
-    return (React.createElement("div", { className: 'piped-text-menu-item-container', ref: ref }, getMenuItemContent(props.menuItem)));
+    var _a = useState(), ariaHaspopup = _a[0], setAriaHaspopup = _a[1];
+    var _b = useState(), tabIndex = _b[0], setTabIndex = _b[1];
+    var _c = useState(), role = _c[0], setRole = _c[1];
+    var _d = useState(), _isSubmenu = _d[0], setIsSubmenu = _d[1];
+    var _e = useState(), _isDecorated = _e[0], setIsDecorated = _e[1];
+    var _f = useState(), _isFocusable = _f[0], setIsFocusable = _f[1];
+    var _g = useState(), _isEmbeddedDataMenu = _g[0], setIsEmbeddedDataMenu = _g[1];
+    var localRef = useRef();
+    var submenuItemId = useId();
+    var pipedTextMenuId = useId();
+    useEffect(function () {
+        var nextIsFocusable, nextIsDecorated, nextIsSubmenu, nextIsEmbeddedDataMenu;
+        var nextTabIndex, nextAriaHaspopup, nextRole;
+        if (props.menuItem === undefined) {
+            return;
+        }
+        nextIsFocusable = checkMenuItemFocusable(props.menuItem);
+        nextIsSubmenu = checkSubmenuMenuItemItem(props.menuItem);
+        nextIsEmbeddedDataMenu = checkEmbeddedDataMenuItem(props.menuItem);
+        nextIsDecorated = checkDecoratedMenuItem(props.menuItem);
+        if (nextIsFocusable) {
+            nextTabIndex = -1;
+            nextRole = 'menuitem';
+        }
+        if (nextIsSubmenu || nextIsEmbeddedDataMenu) {
+            nextAriaHaspopup = 'menu';
+        }
+        setAriaHaspopup(nextAriaHaspopup);
+        setTabIndex(nextTabIndex);
+        setRole(nextRole);
+        setIsSubmenu(nextIsSubmenu);
+        setIsDecorated(nextIsDecorated);
+        setIsFocusable(nextIsFocusable);
+        setIsEmbeddedDataMenu(nextIsEmbeddedDataMenu);
+    }, [
+        props.menuItem,
+    ]);
+    return (React.createElement("div", { className: 'piped-text-menu-item-container ' + ((props.isHighlighted)
+            ? 'highlighted-menu-item'
+            : ''), ref: mergeRefs([
+            ref,
+            localRef,
+        ]), "aria-haspopup": ariaHaspopup, tabIndex: tabIndex, role: role, id: ariaHaspopup ? submenuItemId : undefined, "aria-controls": ariaHaspopup ? pipedTextMenuId : undefined, "aria-expanded": props.menuItem.show, onFocus: function ($e) {
+            handleMenuItemFocused(props.menuItem);
+        }, onKeyDown: function ($e) {
+            handleKeyDown($e);
+        }, onMouseEnter: handleMouseEnter, onClick: handleClick }, getMenuItemContent(props.menuItem)));
     function getMenuItemContent(menuItem) {
         var innerContent, menuItemEl;
         var menuItemHeaderClass, menuItemDisabledClass, menuItemClassName;
-        var isSubmenu = checkSubmenuMenuItemItem$1(menuItem);
-        var isDecorated = checkDecoratedMenuItem$1(menuItem);
-        var isEmbeddedDataMenuItem = checkEmbeddedDataMenuItem$1(menuItem);
-        var isFocusable = checkMenuItemFocusable$1(menuItem);
-        var role = isSubmenu
-            ? 'submenu'
-            : 'menuitemradio';
-        if (isSubmenu) {
-            innerContent = (React.createElement(PipedTextSubmenuItem, { key: menuItem.key, menuItem: menuItem, onSubmenuHover: handleSubmenuHover, onMenuItemClick: handleMenuItemClick }));
-        }
-        else if (isDecorated) {
+        if (_isSubmenu) {
+            innerContent = (React.createElement(PipedTextSubmenuItem, { key: menuItem.key, menuItem: menuItem, onMenuItemClick: handleMenuItemClick, keyboardCtrl: props.keyboardCtrl, pipedTextMenuId: pipedTextMenuId }));
+        }
+        else if (_isDecorated) {
             menuItemHeaderClass = (menuItem.header === true)
                 ? 'piped-text-header'
                 : '';
@@ -1280,35 +1680,73 @@ var PipedTextMenuItem = React.forwardRef(function PipedTextMenuItem(props, ref)
             menuItemClassName = "piped-text-menu-item ".concat(menuItemHeaderClass, " ").concat(menuItemDisabledClass);
             innerContent = (React.createElement("div", { className: menuItemClassName }, menuItem.label));
         }
-        else if (isEmbeddedDataMenuItem) {
-            innerContent = (React.createElement("div", { onClick: function () {
-                    handleEmbeddedDataItemClick(menuItem);
-                }, onMouseEnter: function () { return handleMenuItemHovered(menuItem); } },
-                React.createElement(EmbeddedDataMenu
-                //@ts-ignore
-                , { 
-                    //@ts-ignore
-                    show: menuItem.show, onSelect: handleEmbeddedDataSelect, anchor: function (ref) { return (React.createElement("div", { ref: ref, className: "embedded-data-menu-anchor" })); } }),
-                React.createElement("div", { className: "piped-text-menu-item" }, menuItem.label)));
+        else if (_isEmbeddedDataMenu) {
+            innerContent = (React.createElement("div", { role: 'presentation' },
+                React.createElement(EmbeddedDataMenu, { show: menuItem.show, onSelect: handleEmbeddedDataSelect, anchor: function (_ref) { return (React.createElement("div", { ref: _ref, className: "embedded-data-menu-anchor", "aria-hidden": 'true' })); }, keyboardCtrl: props.keyboardCtrl, ariaLabelledById: submenuItemId }),
+                React.createElement("div", { className: "piped-text-submenu-item" },
+                    React.createElement("div", { className: 'label-text' }, menuItem.label),
+                    React.createElement("div", { className: "piped-text-icon" },
+                        React.createElement(Icon, { type: IconTypes.ChevronRight, size: 'medium' })))));
         }
         else {
-            innerContent = (React.createElement("div", { onClick: function () { return handleMenuItemClick(menuItem); }, onMouseEnter: function () { return handleMenuItemHovered(menuItem); } },
-                React.createElement("div", { className: "piped-text-menu-item" }, menuItem.label)));
+            innerContent = (React.createElement("div", { className: "piped-text-menu-item", role: 'presentation' }, menuItem.label));
         }
-        menuItemEl = (React.createElement("div", { "aria-haspopup": isSubmenu ? 'menu' : undefined, id: isSubmenu ? submenuId : undefined, role: role, className: "piped-text-menu-item-content", tabIndex: isFocusable ? -1 : undefined }, innerContent));
+        menuItemEl = (React.createElement("div", { className: "piped-text-menu-item-content", role: 'presentation' }, innerContent));
         return menuItemEl;
     }
-    function handleEmbeddedDataItemClick(menuItem) {
-        props.onEmbeddedDataItemClick(menuItem);
+    function handleClick($e) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            handleSubmenuItemClick(props.menuItem);
+        }
+        else if (_isFocusable) {
+            handleMenuItemClick(props.menuItem);
+        }
+    }
+    function handleMouseEnter($e) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            handleSubmenuHover(props.menuItem);
+        }
+        else if (_isFocusable) {
+            handleMenuItemHovered(props.menuItem);
+        }
+    }
+    function handleKeyDown($e) {
+        if (!props.isHighlighted) {
+            return;
+        }
+        if (!props.keyboardCtrl.isMenuItemInCurrentFocusMenu(localRef)) {
+            return;
+        }
+        if (($e.key === ' ')
+            || ($e.key === 'Enter')) {
+            if (_isSubmenu || _isEmbeddedDataMenu) {
+                props.onSubmenuItemClick(props.menuItem);
+            }
+            else {
+                props.onMenuItemClicked(props.menuItem);
+            }
+            $e.preventDefault(); // prevent scroll
+        }
+    }
+    function handleMenuItemFocused(menuItem) {
+        if (_isSubmenu || _isEmbeddedDataMenu) {
+            props.onSubmenuHover(menuItem, localRef);
+        }
+        else {
+            props.onMenuItemHover(menuItem, localRef);
+        }
+    }
+    function handleSubmenuItemClick(menuItem) {
+        props.onSubmenuItemClick(menuItem);
     }
     function handleMenuItemClick(menuItem) {
         props.onMenuItemClicked(menuItem);
     }
     function handleSubmenuHover(menuItem) {
-        props.onSubmenuHover(menuItem);
+        props.onSubmenuHover(menuItem, localRef);
     }
     function handleMenuItemHovered(menuItem) {
-        props.onMenuItemHover(menuItem);
+        props.onMenuItemHover(menuItem, localRef);
     }
     function handleEmbeddedDataSelect(edLocator) {
         var edMenuItem;
@@ -1323,468 +1761,451 @@ var PipedTextMenuItem = React.forwardRef(function PipedTextMenuItem(props, ref)
         };
         props.onMenuItemClicked(edMenuItem);
     }
-});
-function checkEmbeddedDataMenuItem$1(menuItem) {
-    return menuItem.value === EMBEDDED_DATA_LOCATOR$1;
-}
-function checkDecoratedMenuItem$1(menuItem) {
-    return (menuItem.header === true)
-        || (menuItem.disabled === true);
-}
-function checkSubmenuMenuItemItem$1(menuItem) {
-    return !!menuItem.hasSubmenu;
-}
-function checkMenuItemFocusable$1(menuItem) {
-    var isEmbeddedData, isSubmenu, isDefaultMenuItem;
-    isEmbeddedData = checkEmbeddedDataMenuItem$1(menuItem);
-    isSubmenu = checkSubmenuMenuItemItem$1(menuItem);
-    isDefaultMenuItem = checkDefaultMenuItem$1(menuItem);
-    return (isEmbeddedData
-        || isSubmenu
-        || isDefaultMenuItem);
-}
-function checkDefaultMenuItem$1(menuItem) {
-    return !(checkEmbeddedDataMenuItem$1(menuItem)
-        || checkDecoratedMenuItem$1(menuItem)
-        || checkSubmenuMenuItemItem$1(menuItem));
-}
-
-var css_248z$e = "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";
-styleInject(css_248z$e);
-
-var EMBEDDED_DATA_LOCATOR = 'embeddedData';
-var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
-  var defaultMenuItems = undefined;
-
-  if (typeof props.items !== 'function') {
-    defaultMenuItems = _cloneDeep(props.items);
-  }
-
-  var optionsRef = useRef({});
-
-  var _useState = useState(defaultMenuItems),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuItems = _useState2[0],
-      setMenuItems = _useState2[1];
-
-  var _useState3 = useState(props.show),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isMenuOpen = _useState4[0],
-      setIsMenuOpen = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isLoadError = _useState6[0],
-      setIsLoadError = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      searchValue = _useState8[0],
-      setSearchValue = _useState8[1];
-
-  var _useState9 = useState(undefined),
-      _useState10 = _slicedToArray(_useState9, 2);
-      _useState10[0];
-      var setIsSubmenu = _useState10[1];
-
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      itemsToRender = _useState12[0],
-      setItemsToRender = _useState12[1];
-
-  var externalAriaLabelledBy = props['aria-labelledby'];
-  var popoverAriaLabelledBy = useId();
-
-  var _useState13 = useState([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      menuChildren = _useState14[0],
-      setMenuChildren = _useState14[1];
-
-  var _useState15 = useState(-1),
-      _useState16 = _slicedToArray(_useState15, 2),
-      higlightedItemIndex = _useState16[0],
-      setHighlightedItemIndex = _useState16[1];
-
-  var _useState17 = useState([]),
-      _useState18 = _slicedToArray(_useState17, 2);
-      _useState18[0];
-      var setFocusMenuItems = _useState18[1];
-
-  var onClose = props.onClose || function () {
-    return undefined;
-  };
-
-  var _useState19 = useState(null),
-      _useState20 = _slicedToArray(_useState19, 2),
-      popoverEl = _useState20[0],
-      setPopoverEl = _useState20[1];
-
-  var popoverRefCb = useCallback(function (el) {
-    setPopoverEl(el);
-  }, []);
-
-  var _useState21 = useState(null),
-      _useState22 = _slicedToArray(_useState21, 2);
-      _useState22[0];
-      var setSearchBoxEl = _useState22[1];
-
-  var searchBoxRefCb = useCallback(function (el) {
-    setSearchBoxEl(el);
-  }, []);
-  useEffect(function () {
-    var nextMenuChildren;
-    nextMenuChildren = getPipedTextMenuItems(itemsToRender);
-    setMenuChildren(nextMenuChildren);
-  }, [itemsToRender]);
-  useEffect(function () {
-    var nextItemsToRender;
-    nextItemsToRender = (menuItems || []).filter(matchesSearch);
-    setItemsToRender(nextItemsToRender);
-  }, [searchValue, menuItems]);
-  useEffect(function () {
-    var anchorRefEl = _get(props, 'anchorRef.current');
-
-    if (anchorRefEl) {
-      var anchorRefElRole = anchorRefEl.getAttribute('role');
-      var nextIsSubmenu = anchorRefElRole === 'menuitem';
-      setIsSubmenu(nextIsSubmenu);
-    }
-  }, [popoverEl]);
-  useEffect(function () {
-    _asyncToGenerator(_regeneratorRuntime().mark(function _callee() {
-      var newMenuItems;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(typeof props.items === 'function')) {
-                _context.next = 13;
-                break;
-              }
-
-              _context.prev = 1;
-              _context.next = 4;
-              return props.items();
-
-            case 4:
-              newMenuItems = _context.sent;
-              newMenuItems = pipedTextDataAdapter(newMenuItems);
-              setMenuItems(newMenuItems);
-              _context.next = 12;
-              break;
-
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](1);
-              setIsLoadError(true);
-
-            case 12:
-              if (typeof optionsRef.current.scheduleUpdate === 'function') {
-                optionsRef.current.scheduleUpdate();
-              }
-
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[1, 9]]);
-    }))();
-  }, [props.items]);
-  useEffect(function () {
-    if (props.show) {
-      setIsMenuOpen(true);
-    }
-  }, [props.show]);
-  useEffect(function () {
-    return function () {
-      return onClose();
-    };
-  }, []);
-
-  var _onClose = function _onClose() {
-    onToggleClick(false);
-    onClose();
-  };
-
-  var reRenderMenus = function reRenderMenus() {
-    var nextMenuItems;
-    nextMenuItems = _cloneDeep(menuItems);
-    setMenuItems(nextMenuItems);
-  };
-
-  var onToggleClick = function onToggleClick(force) {
-    var nextIsMenuOpen;
-    nextIsMenuOpen = typeof force === 'boolean' ? force : !isMenuOpen;
-    setIsMenuOpen(nextIsMenuOpen);
-  };
-
-  var submenuHovered = function submenuHovered(menuItem, evt) {
-    var nextMenuItems;
-    closeSubmenus(menuItems);
-
-    if (!menuItem.show) {
-      menuItem.show = true;
-    }
-
-    nextMenuItems = _cloneDeep(menuItems);
-    setMenuItems(nextMenuItems);
-  };
-
-  var menuItemHovered = function menuItemHovered(menuItem, evt) {
-    var nextMenuItems;
-    closeSubmenus(menuItems);
-    nextMenuItems = _cloneDeep(menuItems);
-    setMenuItems(nextMenuItems);
-  };
-
-  var onSearchInputChange = function onSearchInputChange(evt) {
-    var searchVal;
-    searchVal = evt.target.value;
-    setSearchValue(searchVal);
-  };
-
-  var handleSearchInputClick = function handleSearchInputClick(evt) {
-    evt.stopPropagation();
-  };
-
-  var matchesSearch = function matchesSearch(item) {
-    var searchVal = searchValue || '';
-    searchVal = searchVal.trim().toLowerCase();
-    return JSON.stringify(item).toLowerCase().includes(searchVal);
-  };
-
-  var menuItemClicked = function menuItemClicked(menuItem) {
-    if (!menuItem.disabled) {
-      props.onSelected(menuItem);
-    }
-
-    onClose();
-  };
-
-  var embeddedDataItemClicked = function embeddedDataItemClicked(menuItem, $e) {
-    menuItem.show = true;
-    reRenderMenus();
-  };
-
-  var getPipedTextMenuItems = function getPipedTextMenuItems(menuItems) {
-    var pipedTextMenuItems, nextFocusMenuItems;
-    pipedTextMenuItems = [];
-    nextFocusMenuItems = [];
-
-    if (menuItems.length === 0 && props.allowCustom === true && props.customInputMessage) {
-      return React.createElement("div", null, React.createElement("div", {
-        className: "piped-text-information-message"
-      }, props.customInputMessage));
-    }
-
-    pipedTextMenuItems = menuItems.map(function (menuItem) {
-      var isFocusable, menuItemEl;
-      var menuItemRef = React.createRef();
-      isFocusable = checkMenuItemFocusable(menuItem);
-      menuItemEl = React.createElement(PipedTextMenuItem, {
-        key: menuItem.key,
-        menuItem: menuItem,
-        onSubmenuHover: function onSubmenuHover(menuItem) {
-          submenuHovered(menuItem);
-        },
-        onMenuItemClicked: function onMenuItemClicked(menuItem) {
-          menuItemClicked(menuItem);
-        },
-        onMenuItemHover: function onMenuItemHover(menuItem) {
-          menuItemHovered();
-        },
-        onEmbeddedDataItemClick: function onEmbeddedDataItemClick(menuItem) {
-          embeddedDataItemClicked(menuItem);
-        },
-        ref: menuItemRef
-      });
-
-      if (isFocusable) {
-        nextFocusMenuItems.push(menuItemEl);
-      }
-
-      return menuItemEl;
-    });
-    setFocusMenuItems(nextFocusMenuItems);
-    return pipedTextMenuItems;
-  };
-
-  var handleSearchSubmit = function handleSearchSubmit(e) {
-    e.preventDefault();
-
-    if (!(props.allowCustom === true && props.customScheme)) {
-      return;
-    }
-
-    var value = searchValue.trim();
-
-    if (value === '') {
-      return;
-    }
-
-    var locator = "${".concat(props.customScheme, "://Field/").concat(encodeURIComponent(value), "}");
-    var selected = {
-      value: {
-        locator: locator
-      }
-    };
-    props.onSelected(selected);
-    onClose();
-  };
-
-  var getLoadError = function getLoadError() {
-    return React.createElement("div", {
-      className: "piped-text-popover-container"
-    }, React.createElement("div", {
-      className: "piped-text-error-container"
-    }, React.createElement("div", {
-      className: "piped-text-error-icon"
-    }, React.createElement(ErrorIcon, {
-      size: "medium"
-    })), props.errorText && React.createElement("div", {
-      className: "piped-text-error-text"
-    }, props.errorText)));
-  };
-
-  var getLoadingSpinner = function getLoadingSpinner() {
-    return React.createElement("div", {
-      className: "piped-text-loading-spinner"
-    }, React.createElement(LoadingSpinner, {
-      show: true,
-      size: "medium"
-    }));
-  };
-
-  var getMenuContent = function getMenuContent() {
-    if (isLoadError) {
-      return getLoadError();
-    } else {
-      return React.createElement("div", {
-        className: "piped-text-popover-menu"
-      }, React.createElement("div", {
-        className: "piped-text-search-input"
-      }, React.createElement("form", {
-        onSubmit: handleSearchSubmit
-      }, React.createElement(Input, {
-        small: true,
-        full: true,
-        placeholder: props.searchPlaceholder,
-        className: "q-plugin-popover-input",
-        value: searchValue,
-        onChange: function onChange($e) {
-          return onSearchInputChange($e);
-        },
-        onClick: function onClick($e) {
-          return handleSearchInputClick($e);
-        },
-        ref: searchBoxRefCb
-      }))), menuItems === undefined ? getLoadingSpinner() : menuChildren);
-    }
-  };
-
-  return React.createElement("div", {
-    className: "piped-text-menu"
-  }, React.createElement(Popover, {
-    show: isMenuOpen,
-    onClose: _onClose,
-    placement: props.placement || 'right-start',
-    anchor: props.anchor,
-    ignoreClickSelector: props.ignoreClickSelector
-  }, React.createElement("div", {
-    id: popoverAriaLabelledBy,
-    "aria-labelledby": externalAriaLabelledBy,
-    role: "menu",
-    className: "piped-text-popover-container",
-    ref: popoverRefCb,
-    onFocus: function onFocus($e) {
-      return handleFocus($e);
-    },
-    onKeyDown: function onKeyDown($e) {
-      return handleKeyDown($e);
-    },
-    tabIndex: props.tabIndex !== undefined ? props.tabIndex : -1
-  }, getMenuContent()), React.createElement(OptionsPlaceholder, {
-    optionsRef: optionsRef
-  })));
-
-  function handleKeyDown(evt) {
-    var nextFocusElIdx;
-
-    if (evt.key === 'ArrowDown') {
-      if (higlightedItemIndex < menuChildren.length) {
-        nextFocusElIdx = higlightedItemIndex + 1;
-        menuChildren[nextFocusElIdx];
-        setHighlightedItemIndex(nextFocusElIdx);
-      }
-    } else if (evt.key === 'ArrowUp') ;
-  }
-
-  function handleFocus(evt) {
-
-    evt.stopPropagation();
-  }
 });
 
-function OptionsPlaceholder() {
-  return React.createElement("span", null);
-}
-
-function closeSubmenus(menuItems) {
-  menuItems.forEach(function (item) {
-    if (item.show) {
-      item.show = false;
-    }
-  });
-}
-
-function pipedTextDataAdapter(pipedTextData, recursed) {
-  var uniqueKey;
-
-  if (!recursed) {
-    pipedTextData = _cloneDeep(pipedTextData);
-  }
-
-  uniqueKey = 1;
-  pipedTextData.forEach(function (pipedTextItem) {
-    pipedTextItem.key = pipedTextItem.key || uniqueKey++;
-    pipedTextItem.hasSubmenu = !!_get(pipedTextItem, 'submenu.items.length') || typeof _get(pipedTextItem, 'submenu.items') === 'function';
-
-    if (pipedTextItem.hasSubmenu || pipedTextItem.value === EMBEDDED_DATA_LOCATOR) {
-      pipedTextItem.show = false;
-    }
-
-    if (pipedTextItem.hasSubmenu) {
-      if (!(typeof pipedTextItem.submenu.items === 'function')) {
-        pipedTextDataAdapter(pipedTextItem.submenu.items, true);
-      }
-    }
-  });
-  return pipedTextData;
-}
-
-function checkDefaultMenuItem(menuItem) {
-  return !(checkEmbeddedDataMenuItem(menuItem) || checkDecoratedMenuItem(menuItem) || checkSubmenuMenuItemItem(menuItem));
-}
-
-function checkEmbeddedDataMenuItem(menuItem) {
-  return menuItem.value === EMBEDDED_DATA_LOCATOR;
-}
+var PipedTextSearchInput = React.forwardRef(function PipedTextSearchInput(props, ref) {
+    var textInputRef = React.useRef();
+    return (React.createElement("div", { className: 'piped-text-search-input', tabIndex: -1, ref: ref, onFocus: handleContainerFocus },
+        React.createElement("form", { onSubmit: props.onSearchSubmit },
+            React.createElement(Input, { small: true, full: true, className: "q-plugin-popover-input", ref: textInputRef, placeholder: props.searchPlaceholder, value: props.value, onChange: props.onInputChange, onClick: props.onInputClick, onKeyDown: handleKeyDown, role: 'searchbox' }))));
+    function handleKeyDown($e) {
+        if (!TEXT_INPUT_KEYS_TO_ALLOW.includes($e.key)) {
+            $e.stopPropagation();
+        }
+    }
+    function handleContainerFocus($e) {
+        var _a;
+        if ($e.target !== textInputRef.current) {
+            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        props.onFocus($e);
+    }
+});
 
-function checkDecoratedMenuItem(menuItem) {
-  return menuItem.header === true || menuItem.disabled === true;
+var PipedTextMenuList = React.forwardRef(function PipedTextMenuList(props, ref) {
+    var _this = this;
+    var _a, _b;
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(false), isLoadError = _d[0], setIsLoadError = _d[1];
+    var _e = useState(), menuItems = _e[0], setMenuItems = _e[1];
+    var _f = useState(), itemsToRender = _f[0], setItemsToRender = _f[1];
+    var _g = useState(), menuChildren = _g[0], setMenuChildren = _g[1];
+    var _h = useState(), focusMenuItems = _h[0], setFocusMenuItems = _h[1];
+    var _j = useState(''), searchValue = _j[0], setSearchValue = _j[1];
+    var _k = useState(false), autoFocusedOnOpen = _k[0], setAutoFocusedOnOpen = _k[1];
+    var pipedTextMenuId = (_a = props.pipedTextMenuId) !== null && _a !== void 0 ? _a : useId();
+    var externalAriaLabelledBy = props['aria-labelledby'];
+    var localRef = useRef();
+    var searchRef = useRef();
+    /*
+      We need to track whether or not the menu component has rendered, and the
+        localRef is available, so that we can add it to the keyboardCtrl
+        before the menuItems have finished loading
+    */
+    var _l = useState(false), isLocalRefReady = _l[0], setIsLocalRefReady = _l[1];
+    var localRefReadyCb = useCallback(function (node) {
+        if (node) {
+            setIsLocalRefReady(true);
+        }
+    }, []);
+    var _m = useState(false), isSearchRefReady = _m[0], setIsSearchRefReady = _m[1];
+    var searchRefReadyCb = useCallback(function (node) {
+        if (node) {
+            setIsSearchRefReady(true);
+        }
+    }, []);
+    var isRoot = props.keyboardCtrl === undefined;
+    var _o = useState(isRoot
+        ? new PipedTextMenuKeyboardCtrl
+        : props.keyboardCtrl), keyboardCtrl = _o[0]; _o[1];
+    var schedulePopoverUpdate = function () {
+        var _a;
+        if (typeof ((_a = props.popoverOptionsRef) === null || _a === void 0 ? void 0 : _a.current.scheduleUpdate) === 'function') {
+            props.popoverOptionsRef.current.scheduleUpdate();
+        }
+    };
+    useEffect(function () {
+        var $destroy = function () {
+            keyboardCtrl.removeMenu(localRef);
+        };
+        return $destroy;
+    }, []);
+    useEffect(function () {
+        var nextMenuItemRefs, focusMenuItemRefs;
+        if (localRef.current
+            && searchRef.current
+            && menuChildren
+            && !isLoading) {
+            focusMenuItemRefs = React.Children.map(focusMenuItems, function (menuChild) {
+                return menuChild.ref;
+            });
+            nextMenuItemRefs = __spreadArray([
+                searchRef
+            ], focusMenuItemRefs, true);
+            keyboardCtrl.addMenu(localRef, nextMenuItemRefs);
+            if (isRoot && (autoFocusedOnOpen === false)) {
+                setTimeout(function () {
+                    var _a;
+                    /*
+                      Hack - see https://github.com/floating-ui/react-popper/issues/395
+                        Without this, the page jitters on focus as the page scroll position
+                        updates. Using setTimeout, we give Popper one render cycle to
+                        set its own position before triggering the autofocus - then the input
+                        element will have correct positioning by the time we call .focus()
+                    */
+                    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+                setAutoFocusedOnOpen(true);
+            }
+        }
+    }, [
+        localRef,
+        menuChildren,
+        keyboardCtrl,
+        isLoading,
+    ]);
+    useEffect(function () {
+        var menuItemRefs;
+        if (isLocalRefReady) {
+            menuItemRefs = [];
+            if (isSearchRefReady) {
+                menuItemRefs.push(searchRef);
+            }
+            keyboardCtrl.addMenu(localRef, menuItemRefs);
+        }
+    }, [
+        isLocalRefReady,
+        isSearchRefReady,
+    ]);
+    useEffect(function () {
+        if (props.items === undefined) {
+            return;
+        }
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var rawMenuItems, nextMenuItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!((typeof props.items) === 'function')) return [3 /*break*/, 5];
+                        setIsLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, props.items()];
+                    case 2:
+                        rawMenuItems = _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a.sent();
+                        setIsLoadError(true);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        setIsLoading(false);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        rawMenuItems = props.items;
+                        _a.label = 6;
+                    case 6:
+                        try {
+                            nextMenuItems = pipedTextDataAdapter(rawMenuItems);
+                            setMenuItems(nextMenuItems);
+                        }
+                        catch (e) {
+                            setIsLoadError(true);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [
+        props.items,
+    ]);
+    useEffect(function () {
+        var nextItemsToRender;
+        if (menuItems === undefined) {
+            return;
+        }
+        nextItemsToRender = (menuItems || []).filter(matchesSearch);
+        setItemsToRender(nextItemsToRender);
+    }, [
+        searchValue,
+        menuItems,
+    ]);
+    useEffect(function () {
+        var nextMenuChildren;
+        if (!Array.isArray(itemsToRender)) {
+            return;
+        }
+        nextMenuChildren = getPipedTextMenuItems(itemsToRender);
+        setMenuChildren(nextMenuChildren);
+    }, [
+        itemsToRender,
+    ]);
+    schedulePopoverUpdate();
+    return (React.createElement("div", { className: "piped-text-menu-list ".concat((_b = props.className) !== null && _b !== void 0 ? _b : ''), ref: mergeRefs([
+            ref,
+            localRef,
+            localRefReadyCb,
+        ]), id: pipedTextMenuId, "aria-labelledby": externalAriaLabelledBy, role: "menu", 
+        // role="listbox"
+        tabIndex: (props.tabIndex === undefined)
+            ? -1
+            : props.tabIndex, onKeyDown: function ($e) {
+            handleKeyDown($e);
+        }, onFocus: function ($e) {
+            handleMenuListFocus($e);
+        } },
+        React.createElement("div", { className: "piped-text-popover-menu", role: 'presentation' }, ((isLoadError)
+            ? (React.createElement(PipedTextMenuLoadError, { errorText: props.errorText }))
+            : (React.createElement(React.Fragment, null,
+                React.createElement(PipedTextSearchInput, { ref: mergeRefs([
+                        searchRef,
+                        searchRefReadyCb,
+                    ]), value: searchValue, onSearchSubmit: handleSearchSubmit, searchPlaceholder: props.searchPlaceholder, onInputChange: function ($e) { return onSearchInputChange($e); }, onInputClick: function ($e) { return handleSearchInputClick($e); }, onFocus: function () {
+                        handleSearchFocus();
+                    } }),
+                (isLoading)
+                    ? (React.createElement("div", { className: "piped-text-loading-spinner" },
+                        React.createElement(LoadingSpinner, { show: true, size: "medium" })))
+                    : menuChildren))))));
+    function handleMenuListFocus($e) {
+        var _a;
+        if ($e.currentTarget === localRef.current) {
+            keyboardCtrl.setFocus(localRef.current);
+            if (keyboardCtrl.getFocusMenuHighlightedIdx(localRef) === -1) {
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            $e.stopPropagation();
+            $e.preventDefault();
+        }
+    }
+    function handleKeyDown($e) {
+        var currFocusMenuContainerRef;
+        switch ($e.key) {
+            case 'Tab':
+                onClose();
+        }
+        props === null || props === void 0 ? void 0 : props.menuKeyDown($e);
+        currFocusMenuContainerRef = keyboardCtrl.getCurrentFocusMenuRef();
+        if (localRef.current !== (currFocusMenuContainerRef === null || currFocusMenuContainerRef === void 0 ? void 0 : currFocusMenuContainerRef.current)) {
+            return;
+        }
+        switch ($e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft':
+            case 'Escape':
+            case 'PageUp':
+            case 'Home':
+            case 'PageDown':
+            case 'End':
+                keyboardCtrl.handleKeyEvent($e);
+                $e.preventDefault(); // prevent scroll
+                break;
+        }
+    }
+    function onClose() {
+        var _a;
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+    function onSearchInputChange(evt) {
+        var nextSearchValue;
+        nextSearchValue = evt.target.value;
+        setSearchValue(nextSearchValue);
+    }
+    function handleSearchInputClick(evt) {
+        evt.stopPropagation();
+    }
+    function matchesSearch(menuItem) {
+        var searchVal;
+        searchVal = searchValue || '';
+        return JSON.stringify(menuItem).toLowerCase().includes(searchVal.toLowerCase());
+    }
+    function handleSearchSubmit(e) {
+        var searchVal, locator, selected;
+        e.preventDefault();
+        if (!(props.allowCustom === true && props.customScheme)) {
+            return;
+        }
+        searchVal = searchValue.trim();
+        if (searchVal === '') {
+            return;
+        }
+        locator = "${".concat(props.customScheme, "://Field/").concat(encodeURIComponent(searchVal), "}");
+        selected = {
+            value: {
+                locator: locator,
+            },
+        };
+        props.onSelected(selected);
+        onClose();
+    }
+    function getPipedTextMenuItems(_menuItems) {
+        var pipedTextMenuItems, nextFocusMenuItems;
+        var focusItemIdx, currHighlightedIdx;
+        pipedTextMenuItems = [];
+        nextFocusMenuItems = [];
+        if (_menuItems.length === 0 && props.allowCustom === true && props.customInputMessage) {
+            return (React.createElement("div", null,
+                React.createElement("div", { className: "piped-text-information-message" }, props.customInputMessage)));
+        }
+        focusItemIdx = 0;
+        currHighlightedIdx = keyboardCtrl.getFocusMenuHighlightedIdx(localRef);
+        pipedTextMenuItems = _menuItems.map(function (menuItem) {
+            var isFocusable, menuItemEl;
+            var isHighlighted;
+            var menuItemRef = React.createRef();
+            isFocusable = checkMenuItemFocusable(menuItem);
+            isHighlighted = (isFocusable) && ((currHighlightedIdx - 1) === focusItemIdx);
+            menuItemEl = (React.createElement(PipedTextMenuItem, { ref: menuItemRef, key: menuItem.key, menuItem: menuItem, onSubmenuHover: submenuHovered, onMenuItemHover: menuSelectItemHovered, onMenuItemClicked: menuItemClicked, onSubmenuItemClick: submenuItemClicked, onEmbeddedDataItemClick: embeddedDataItemClicked, keyboardCtrl: keyboardCtrl, isHighlighted: isHighlighted }));
+            if (isFocusable) {
+                nextFocusMenuItems.push(menuItemEl);
+                focusItemIdx++;
+            }
+            return menuItemEl;
+        });
+        setFocusMenuItems(nextFocusMenuItems);
+        return pipedTextMenuItems;
+    }
+    function submenuHovered(menuItem, menuItemRef) {
+        var nextMenuItems;
+        nextMenuItems = menuItems.slice();
+        handleMenuItemHovered(menuItem, menuItemRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+        if (!menuItem.show) {
+            menuItem.show = true;
+        }
+    }
+    function menuSelectItemHovered(menuItem, menuItemRef) {
+        var nextMenuItems;
+        nextMenuItems = menuItems.slice();
+        handleMenuItemHovered(menuItem, menuItemRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+    }
+    function handleSearchFocus() {
+        var _a;
+        var nextMenuItems;
+        nextMenuItems = (_a = menuItems === null || menuItems === void 0 ? void 0 : menuItems.slice()) !== null && _a !== void 0 ? _a : [];
+        keyboardCtrl.setFocusMenuHighlightedIdx(localRef, searchRef);
+        closeSubmenus(nextMenuItems);
+        setMenuItems(nextMenuItems);
+    }
+    function handleMenuItemHovered(menuItem, menuItemRef) {
+        var _a;
+        keyboardCtrl.setFocusMenuHighlightedIdx(localRef, menuItemRef);
+        (_a = menuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function menuItemClicked(menuItem) {
+        if (!menuItem.disabled) {
+            props.onSelected(menuItem);
+        }
+    }
+    function submenuItemClicked(menuItem) {
+        console.log('PipedTextMenuList submenu click');
+        keyboardCtrl.focusNextSubmenu();
+    }
+    function embeddedDataItemClicked(menuItem) {
+        // let nextMenuItems: PipedTextMenuItemData[];
+        // nextMenuItems = menuItems.slice();
+        // menuItem.show = true;
+        // setMenuItems(nextMenuItems);
+    }
+});
+function closeSubmenus(menuItems) {
+    menuItems.forEach(function (item) {
+        if (item.show) {
+            item.show = false;
+        }
+    });
 }
 
-function checkSubmenuMenuItemItem(menuItem) {
-  return !!menuItem.hasSubmenu;
-}
+var css_248z$e = "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-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";
+styleInject(css_248z$e);
 
-function checkMenuItemFocusable(menuItem) {
-  var isEmbeddedData, isSubmenu, isDefaultMenuItem;
-  isEmbeddedData = checkEmbeddedDataMenuItem(menuItem);
-  isSubmenu = checkSubmenuMenuItemItem(menuItem);
-  isDefaultMenuItem = checkDefaultMenuItem(menuItem);
-  return isEmbeddedData || isSubmenu || isDefaultMenuItem;
+/* eslint-disable-next-line prefer-arrow-callback */
+var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
+    var optionsRef = useRef({});
+    var _a = useState(props.show), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
+    var externalAriaLabelledBy = props['aria-labelledby'];
+    var onClose = props.onClose || (function () { return undefined; });
+    /*
+      This ref is left for use cases where the
+        container popover may need to be referenced
+        directly
+    */
+    var _b = useState(null); _b[0]; var setPopoverEl = _b[1];
+    var popoverRefCb = useCallback(function (el) {
+        setPopoverEl(el);
+    }, []);
+    useEffect(function () {
+        if (props.show) {
+            setIsMenuOpen(true);
+        }
+    }, [props.show]);
+    useEffect(function () {
+        return function () { return onClose(); };
+    }, []);
+    var _onClose = function () {
+        onToggleClick(false);
+        onClose();
+    };
+    var onToggleClick = function (force) {
+        var nextIsMenuOpen;
+        nextIsMenuOpen = ((typeof force) === 'boolean')
+            ? force
+            : !isMenuOpen;
+        setIsMenuOpen(nextIsMenuOpen);
+    };
+    return (React.createElement("div", { className: "piped-text-menu" },
+        React.createElement(Popover, { show: isMenuOpen, onClose: _onClose, placement: props.placement || 'right-start', anchor: props.anchor, ignoreClickSelector: props.ignoreClickSelector },
+            React.createElement(PipedTextMenuList, { className: "piped-text-popover-container", items: props.items, errorText: props.errorText, "aria-labelledby": externalAriaLabelledBy, ref: popoverRefCb, allowCustom: props.allowCustom, customInputMessage: props.customInputMessage, customScheme: props.customScheme, searchPlaceholder: props.searchPlaceholder, onSelected: function (menuItem) {
+                    props.onSelected(menuItem);
+                    closeAndFocusAnchor();
+                }, onClose: function () { return onClose(); }, popoverOptionsRef: optionsRef, keyboardCtrl: props.keyboardCtrl, menuKeyDown: handleMenuKeyDown, pipedTextMenuId: props.pipedTextMenuId }),
+            React.createElement(OptionsPlaceholder, { optionsRef: optionsRef }))));
+    function handleMenuKeyDown($e) {
+        switch ($e.key) {
+            case 'Tab':
+            case 'Escape':
+                closeAndFocusAnchor();
+                break;
+        }
+    }
+    function closeAndFocusAnchor() {
+        var _a, _b;
+        onClose();
+        (_b = (_a = props.anchorRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+});
+function OptionsPlaceholder(props) {
+    return (React.createElement("div", null));
+}
+/*
+  Takes piped text menu input data and formats it to be compatible
+    with the piped-text-select component(s)
+*/
+function pipedTextDataAdapter(pipedTextData, recursed) {
+    var uniqueKey;
+    if (!recursed) {
+        pipedTextData = _cloneDeep(pipedTextData);
+    }
+    uniqueKey = 1;
+    pipedTextData.forEach(function (pipedTextItem) {
+        pipedTextItem.key = pipedTextItem.key || uniqueKey++;
+        pipedTextItem.hasSubmenu = (!!_get(pipedTextItem, 'submenu.items.length') || ((typeof _get(pipedTextItem, 'submenu.items')) === 'function'));
+        if (pipedTextItem.hasSubmenu || pipedTextItem.value === EMBEDDED_DATA_LOCATOR) {
+            pipedTextItem.show = false; // used by menu component to show/hide submenu popover
+        }
+        if (pipedTextItem.hasSubmenu) {
+            if (!(typeof pipedTextItem.submenu.items === 'function')) {
+                pipedTextDataAdapter(pipedTextItem.submenu.items, true);
+            }
+        }
+    });
+    return pipedTextData;
 }
 
 var css_248z$d = ".piped-text-dropdown button[type=button].popover-toggle-button {\n  min-width: 128px; }\n\n.piped-text-popover-container {\n  padding: 0; }\n  .piped-text-popover-container > * {\n    min-height: 32px; }\n  .piped-text-popover-container .piped-text-submenu-item .label-text, .piped-text-popover-container .piped-text-submenu-item > .piped-text-icon {\n    display: inline-block;\n    vertical-align: middle;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    -webkit-hyphens: auto;\n    -ms-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto; }\n  .piped-text-popover-container .piped-text-submenu-item .piped-text-icon {\n    display: inline-block;\n    box-sizing: content-box;\n    position: absolute;\n    right: 0;\n    max-width: 24px;\n    min-width: 24px;\n    max-height: 24px; }\n    .piped-text-popover-container .piped-text-submenu-item .piped-text-icon > svg {\n      position: relative;\n      margin-left: -5px;\n      margin-top: -3px; }\n";
@@ -1861,7 +2282,7 @@ function PipedTextSelect(props) {
   }
 }
 
-var css_248z$c = ".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";
+var css_248z$c = ".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.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";
 styleInject(css_248z$c);
 
 function PipedTextInput(props) {
@@ -2171,7 +2592,7 @@ function FieldItem(props) {
   }, label);
 }
 
-var css_248z$9 = ".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";
+var css_248z$9 = ".task-fields .add-field-button {\n  margin-right: 100px; }\n  .task-fields .add-field-button .add-field-button-label {\n    padding: 0 3px; }\n\n.task-fields .field-table {\n  padding-right: 100px;\n  overflow-x: auto; }\n  .task-fields .field-table .field-headers {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .task-fields .field-table .field-headers .field-row {\n      color: #6A6D70;\n      font-weight: bold; }\n      .task-fields .field-table .field-headers .field-row .field-selector label, .task-fields .field-table .field-headers .field-row .field-input label {\n        font-size: 12px; }\n      .task-fields .field-table .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-table .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-table .field-rows {\n    padding-bottom: 12px; }\n    .task-fields .field-table .field-rows .field-row {\n      border-top: 1px solid #E5E5E5; }\n      .task-fields .field-table .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-table .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$9);
 
 var uuidv4 = uuid.v4;
@@ -2444,6 +2865,9 @@ function TaskFields(props) {
   }, [props.values]);
   return React.createElement("div", {
     className: "task-fields"
+  }, React.createElement("div", {
+    className: "field-table",
+    tabIndex: "0"
   }, React.createElement("div", {
     className: "field-headers"
   }, React.createElement(AddFieldHeaders, {
@@ -2451,7 +2875,7 @@ function TaskFields(props) {
     inputHeaderText: props.fieldInputsHeaderText
   })), React.createElement("div", {
     className: "field-rows"
-  }, getFieldRows()), React.createElement("div", {
+  }, getFieldRows())), React.createElement("div", {
     className: "add-field-container"
   }, React.createElement(AddFieldButton, {
     label: props.addFieldLabel,
@@ -2820,41 +3244,37 @@ function SearchItem(props) {
   }, props.children);
 }
 
-var css_248z$5 = ".capture-event .capture-event-controls {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 15px; }\n  .capture-event .capture-event-controls .waiting-message {\n    display: flex;\n    align-items: center; }\n    .capture-event .capture-event-controls .waiting-message .waiting-label {\n      color: #74777a;\n      margin-left: 8px; }\n\n.capture-event .payload-block {\n  text-align: left; }\n  .capture-event .payload-block .payload-label {\n    text-decoration: underline;\n    margin-bottom: 3px; }\n";
+var css_248z$5 = ".capture-event .capture-event-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 20px; }\n  .capture-event .capture-event-controls .status-message {\n    font-size: 12px;\n    line-height: 16px;\n    display: flex;\n    align-items: center;\n    gap: 4px; }\n    .capture-event .capture-event-controls .status-message.pending {\n      color: #74777a; }\n    .capture-event .capture-event-controls .status-message.success {\n      color: #107e3e;\n      fill: #107e3e; }\n    .capture-event .capture-event-controls .status-message.failure {\n      color: #bb0000;\n      fill: #bb0000; }\n";
 styleInject(css_248z$5);
 
 function CaptureEvent(props) {
-    var _a = useState(props.payload), payload = _a[0]; _a[1];
-    var _b = useState(props.capturing || false), capturing = _b[0], setCapturing = _b[1];
-    var _c = useState(props.waitingForEventTranslation), waitingLabel = _c[0], setWaitingLabel = _c[1];
     return (React.createElement("div", { className: "capture-event" },
         React.createElement("div", { className: "capture-event-controls" },
             getCaptureEventButton(),
-            capturing && (React.createElement("div", { className: "waiting-message" },
-                React.createElement(LoadingSpinner, { show: true, size: 'small' }),
-                React.createElement("div", { className: "waiting-label" }, waitingLabel)))),
-        payload && (React.createElement("div", { className: "payload-block" },
-            React.createElement("div", { className: "payload-label" }, "".concat(props.payloadTranslation, ":")),
-            React.createElement("div", { className: "payload" },
-                React.createElement("pre", null, payload))))));
+            getStatusMessage()),
+        props.payload !== undefined && (React.createElement(FormField, { isReadOnly: true },
+            React.createElement(InputField, { "aria-readonly": true, label: props.payloadLabelTranslation, multiline: true, readOnly: true, full: true, value: props.payload, className: "polled-response-output" })))));
     function getCaptureEventButton() {
-        if (capturing) {
+        if (props.status === 'pending') {
             return (React.createElement("div", { className: "capture-event-button-container" },
-                React.createElement(Button, { kind: "secondary", onClick: cancelCapture }, props.cancelCaptureTranslation)));
+                React.createElement(Button, { kind: "secondary", onClick: function () { return props.onCancel(); } }, props.cancelCaptureTranslation)));
         }
         else {
             return (React.createElement("div", { className: "capture-event-button-container" },
-                React.createElement(Button, { kind: "primary", onClick: startCapture }, props.captureNextEventTranslation)));
+                React.createElement(Button, { kind: "primary", onClick: function () { return props.onStart(); } }, props.startCaptureTranslation)));
         }
     }
-    function startCapture() {
-        setCapturing(true);
-        props.onStart();
-    }
-    function cancelCapture() {
-        setCapturing(false);
-        setWaitingLabel(props.waitingForEventTranslation);
-        props.onCancel();
+    function getStatusMessage() {
+        var statusMessages = {
+            default: ['', undefined],
+            pending: [props.pendingStatusTranslation, React.createElement(LoadingSpinner, { size: "small", show: true })],
+            success: [props.successStatusTranslation, React.createElement(SuccessIcon, { size: "small" })],
+            failure: [props.failureStatusTranslation, React.createElement(ErrorIcon, { size: "small" })]
+        };
+        var _a = statusMessages[props.status], statusLabel = _a[0], statusIcon = _a[1];
+        return (React.createElement("div", { className: "status-message ".concat(props.status) },
+            statusIcon,
+            statusLabel));
     }
 }
 
@@ -2913,10 +3333,10 @@ var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
     availableFields = Array.isArray(props.availableFields)
         ? props.availableFields
         : [];
-    onFieldKeyChange = (typeof props.onFieldKeyChange === 'function')
-        ? props.onFieldKeyChange
+    onFieldKeyChange = (typeof props.onChange === 'function')
+        ? props.onChange
         : function () { return undefined; };
-    return (React.createElement("div", { className: "field-mapper-key", ref: ref }, (React.Children.count(props.children) > 0)
+    return (React.createElement("div", { className: "field-mapper-key" + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
         ? props.children
         : (React.createElement("div", { className: "field-mapper-key-dropdown" }, fieldMapperKeyDropdownDisabled()
             ? (React.createElement(Button, { disabled: true }, (_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.label))
@@ -2951,14 +3371,14 @@ styleInject(css_248z);
 
 var FieldMapperValue = React.forwardRef(function FieldMapperValue(props, ref) {
     var _a, _b;
-    return (React.createElement("div", { className: "field-mapper-value" }, (React.Children.count(props.children) > 0)
+    return (React.createElement("div", { className: "field-mapper-value" + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
         ? props.children
         : (React.createElement("div", { className: "piped-text-input-value-container" },
             React.createElement(PipedTextInput, { items: (_a = props.pipedTextItems) !== null && _a !== void 0 ? _a : [], onChange: (_b = props.onChange) !== null && _b !== void 0 ? _b : (function () { return undefined; }) })))));
 });
 
 var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
-    return (React.createElement("div", { className: "field-mapper-row", ref: ref },
+    return (React.createElement("div", { className: "field-mapper-row" + (props.className ? ' ' + props.className : ''), ref: ref },
         React.createElement("div", { className: "field-mapper-row-content" },
             React.Children.map(props.children, function (child) {
                 return getWrappedKeyValue(child);
@@ -2979,8 +3399,8 @@ var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
         var _a, _b, _c, _d;
         var wrappedEl;
         var fieldMapperKeyProps, fieldMapperValueProps;
-        var includeAvailableFields, includeSelectedField;
-        var includePipedTextItems, includeOnChange;
+        var includeAvailableFields, includeSelectedField, includeOnFieldKeyChange;
+        var includePipedTextItems, includeOnFieldValueChange;
         fieldMapperKeyProps = {};
         fieldMapperValueProps = {};
         switch (child.type) {
@@ -2989,12 +3409,19 @@ var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
                     && (((_a = props.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0));
                 includeSelectedField = (((typeof child.props.selectedField) !== 'object')
                     && (props.selectedField !== undefined));
+                includeOnFieldKeyChange = (((typeof child.props.onChange) !== 'function')
+                    && ((typeof props.onFieldKeyChange) === 'function'));
                 if (includeAvailableFields) {
                     fieldMapperKeyProps.availableFields = (_c = (_b = props.availableFields) === null || _b === void 0 ? void 0 : _b.slice()) !== null && _c !== void 0 ? _c : [];
                 }
                 if (includeSelectedField) {
                     fieldMapperKeyProps.selectedField = Object.assign({}, props.selectedField);
                 }
+                if (includeOnFieldKeyChange) {
+                    fieldMapperKeyProps.onChange = function (prevField, fieldItem) {
+                        props.onFieldKeyChange(prevField, fieldItem);
+                    };
+                }
                 if (React.isValidElement(child)
                     && (includeAvailableFields
                         || includeSelectedField)) {
@@ -3005,14 +3432,14 @@ var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
             case FieldMapperValue:
                 includePipedTextItems = (!Array.isArray(child.props.pipedTextItems)
                     && (((_d = props.pipedTextItems) === null || _d === void 0 ? void 0 : _d.length) > 0));
-                includeOnChange = (((typeof child.props.onChange) !== 'function')
-                    && ((typeof props.onChange) === 'function'));
+                includeOnFieldValueChange = (((typeof child.props.onChange) !== 'function')
+                    && ((typeof props.onFieldValueChange) === 'function'));
                 if (includePipedTextItems) {
                     fieldMapperValueProps.pipedTextItems = props.pipedTextItems;
                 }
-                if (includeOnChange) {
+                if (includeOnFieldValueChange) {
                     fieldMapperValueProps.onChange = function (value) {
-                        props.onChange(props.selectedField, value);
+                        props.onFieldValueChange(props.selectedField, value);
                     };
                 }
                 if (React.isValidElement(child)
@@ -3065,7 +3492,7 @@ var FieldMapper = React.forwardRef(function FieldMapper(props, ref) {
         var _a, _b, _c;
         var wrappedEl;
         var fieldMapperRowProps;
-        var includeAvailableFields, includeOnFieldRemove, includePipedTextItems, includeOnFieldValueChange, includeShowRemove;
+        var includeAvailableFields, includeOnFieldRemove, includePipedTextItems, includeOnFieldKeyChange, includeOnFieldValueChange, includeShowRemove;
         fieldMapperRowProps = {};
         switch (child.type) {
             case FieldMapperRow:
@@ -3080,7 +3507,9 @@ var FieldMapper = React.forwardRef(function FieldMapper(props, ref) {
             && ((typeof props.onFieldRemove) === 'function'));
         includePipedTextItems = (!Array.isArray(wrappedEl.props.pipedTextItems)
             && (((_b = props.pipedTextItems) === null || _b === void 0 ? void 0 : _b.length) > 0));
-        includeOnFieldValueChange = (((typeof wrappedEl.props.onChange) !== 'function')
+        includeOnFieldKeyChange = (((typeof wrappedEl.props.onFieldKeyChange) !== 'function')
+            && (typeof props.onFieldKeyChange === 'function'));
+        includeOnFieldValueChange = (((typeof wrappedEl.props.onFieldValueChange) !== 'function')
             && (typeof props.onFieldValueChange === 'function'));
         includeShowRemove = (((typeof wrappedEl.props.showRemove !== 'boolean'))
             && ((typeof ((_c = child.props.selectedField) === null || _c === void 0 ? void 0 : _c.required)) === 'boolean'));
@@ -3095,8 +3524,13 @@ var FieldMapper = React.forwardRef(function FieldMapper(props, ref) {
         if (includePipedTextItems) {
             fieldMapperRowProps.pipedTextItems = props.pipedTextItems;
         }
+        if (includeOnFieldKeyChange) {
+            fieldMapperRowProps.onFieldKeyChange = function (prevField, fieldItem) {
+                return props.onFieldKeyChange(prevField, fieldItem);
+            };
+        }
         if (includeOnFieldValueChange) {
-            fieldMapperRowProps.onChange = function (fieldItem, inputValue) {
+            fieldMapperRowProps.onFieldValueChange = function (fieldItem, inputValue) {
                 return props.onFieldValueChange(fieldItem, inputValue);
             };
         }