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

package/dist/main.es.js

@@ -1,4 +1,4 @@
-/*! @license @qualtrics/plugin-ui-react 1.3.3
+/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.0
 Qualtrics Software License Agreement
 
 1. General.
@@ -57,19 +57,19 @@ 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 } from '@qualtrics/ui-react';
-import { ErrorIcon, PipedTextIcon, RemoveItemIcon } from '@qualtrics/ui-react/icons';
+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 '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 'core-js/modules/es.array.filter.js';
-import 'regenerator-runtime/runtime.js';
 import _cloneDeep from 'lodash.clonedeep';
 import 'core-js/modules/es.array.is-array.js';
 import { Manager, Reference, Popper } from 'react-popper';
 import ReactDOM from 'react-dom';
 import 'core-js/modules/web.timers.js';
+import uuid, { v4 } from 'uuid';
 import 'core-js/modules/es.function.name.js';
 import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.array.iterator.js';
@@ -77,7 +77,6 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.object.assign.js';
 import _cloneDeepWith from 'lodash.clonedeepwith';
-import uuid from 'uuid';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.search.js';
 
@@ -108,8 +107,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = ".react-app {\n  background-color: RGBA(0, 0, 0, 0.1); }\n";
-styleInject(css_248z$b);
+var css_248z$j = ".react-app {\n  background-color: RGBA(0, 0, 0, 0.1); }\n";
+styleInject(css_248z$j);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -137,6 +136,351 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _regeneratorRuntime() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+  _regeneratorRuntime = function () {
+    return exports;
+  };
+
+  var exports = {},
+      Op = Object.prototype,
+      hasOwn = Op.hasOwnProperty,
+      $Symbol = "function" == typeof Symbol ? Symbol : {},
+      iteratorSymbol = $Symbol.iterator || "@@iterator",
+      asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+      toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function (obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+        generator = Object.create(protoGenerator.prototype),
+        context = new Context(tryLocsList || []);
+    return generator._invoke = function (innerFn, self, context) {
+      var state = "suspendedStart";
+      return function (method, arg) {
+        if ("executing" === state) throw new Error("Generator is already running");
+
+        if ("completed" === state) {
+          if ("throw" === method) throw arg;
+          return doneResult();
+        }
+
+        for (context.method = method, context.arg = arg;;) {
+          var delegate = context.delegate;
+
+          if (delegate) {
+            var delegateResult = maybeInvokeDelegate(delegate, context);
+
+            if (delegateResult) {
+              if (delegateResult === ContinueSentinel) continue;
+              return delegateResult;
+            }
+          }
+
+          if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+            if ("suspendedStart" === state) throw state = "completed", context.arg;
+            context.dispatchException(context.arg);
+          } else "return" === context.method && context.abrupt("return", context.arg);
+          state = "executing";
+          var record = tryCatch(innerFn, self, context);
+
+          if ("normal" === record.type) {
+            if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+            return {
+              value: record.arg,
+              done: context.done
+            };
+          }
+
+          "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+        }
+      };
+    }(innerFn, self, context), generator;
+  }
+
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+
+  exports.wrap = wrap;
+  var ContinueSentinel = {};
+
+  function Generator() {}
+
+  function GeneratorFunction() {}
+
+  function GeneratorFunctionPrototype() {}
+
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+  var getProto = Object.getPrototypeOf,
+      NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function (method) {
+      define(prototype, method, function (arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+
+      if ("throw" !== record.type) {
+        var result = record.arg,
+            value = result.value;
+        return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+
+      reject(record.arg);
+    }
+
+    var previousPromise;
+
+    this._invoke = function (method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function (resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+
+      return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+    };
+  }
+
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+
+    if (undefined === method) {
+      if (context.delegate = null, "throw" === context.method) {
+        if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
+        context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
+      }
+
+      return ContinueSentinel;
+    }
+
+    var record = tryCatch(method, delegate.iterator, context.arg);
+    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+    var info = record.arg;
+    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+  }
+
+  function pushTryEntry(locs) {
+    var entry = {
+      tryLoc: locs[0]
+    };
+    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+  }
+
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal", delete record.arg, entry.completion = record;
+  }
+
+  function Context(tryLocsList) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+  }
+
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) return iteratorMethod.call(iterable);
+      if ("function" == typeof iterable.next) return iterable;
+
+      if (!isNaN(iterable.length)) {
+        var i = -1,
+            next = function next() {
+          for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+
+          return next.value = undefined, next.done = !0, next;
+        };
+
+        return next.next = next;
+      }
+    }
+
+    return {
+      next: doneResult
+    };
+  }
+
+  function doneResult() {
+    return {
+      value: undefined,
+      done: !0
+    };
+  }
+
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (object) {
+    var keys = [];
+
+    for (var key in object) keys.push(key);
+
+    return keys.reverse(), function next() {
+      for (; keys.length;) {
+        var key = keys.pop();
+        if (key in object) return next.value = key, next.done = !1, next;
+      }
+
+      return next.done = !0, next;
+    };
+  }, exports.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+    },
+    stop: function () {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    dispatchException: function (exception) {
+      if (this.done) throw exception;
+      var context = this;
+
+      function handle(loc, caught) {
+        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+      }
+
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i],
+            record = entry.completion;
+        if ("root" === entry.tryLoc) return handle("end");
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+              hasFinally = hasOwn.call(entry, "finallyLoc");
+
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+
+      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+      var record = finallyEntry ? finallyEntry.completion : {};
+      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+    },
+    complete: function (record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function (finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    catch: function (tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+
+          if ("throw" === record.type) {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+
+          return thrown;
+        }
+      }
+
+      throw new Error("illegal catch attempt");
+    },
+    delegateYield: function (iterable, resultName, nextLoc) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, exports;
+}
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -242,18 +586,17 @@ function _inherits(subClass, superClass) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -580,7 +923,7 @@ function languageCodeAdapter(languageCode) {
   return adaptedCode;
 }
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -661,8 +1004,8 @@ var Portal = function (_Component) {
   return Portal;
 }(Component);
 
-var css_248z$a = ".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$a);
+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 globalClickRegistry = new EventRegistry();
 var DEFAULT_PLACEMENT = 'bottom-start';
@@ -776,10 +1119,10 @@ function initGlobalListener() {
   });
 }
 
-var css_248z$9 = "div[role=\"menu\"] .piped-text-search-input-container {\n  padding: 5px 10px; }\n\n.piped-text-search-input {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .piped-text-search-input input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n\n.piped-text-menu-empty-anchor {\n  /* the margin-right hack was not in harmony with tao.\n      now, the empty-anchor is truly empty */ }\n\n.piped-text-submenu-item-container {\n  position: relative; }\n  .piped-text-submenu-item-container .piped-text-menu .piped-text-submenu-anchor {\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    min-width: 100%; }\n\n.piped-text-menu-item, .piped-text-submenu-item {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis; }\n  .piped-text-menu-item:not(.piped-text-header):not(.piped-text-disabled):hover, .piped-text-submenu-item:not(.piped-text-header):not(.piped-text-disabled):hover {\n    cursor: pointer;\n    background: RGBA(50, 54, 58, 0.08); }\n  .piped-text-menu-item.piped-text-header, .piped-text-submenu-item.piped-text-header {\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 700;\n    padding: 12px; }\n  .piped-text-menu-item.piped-text-disabled:not(.piped-text-header), .piped-text-submenu-item.piped-text-disabled:not(.piped-text-header) {\n    color: RGB(116, 119, 122); }\n\n.piped-text-submenu-item {\n  padding-right: 24px; }\n\n.piped-text-information-message {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  color: #74777A;\n  text-align: center;\n  white-space: pre-line; }\n\n.piped-text-loading-spinner {\n  width: fit-content;\n  margin: 0 auto; }\n\n.piped-text-error-container {\n  color: #BB0000; }\n  .piped-text-error-container .piped-text-error-icon {\n    padding: 8px 0; }\n    .piped-text-error-container .piped-text-error-icon svg {\n      fill: #BB0000;\n      display: block;\n      margin: 0 auto; }\n  .piped-text-error-container .piped-text-error-text {\n    text-align: center;\n    white-space: pre-line;\n    padding: 0 12px 8px; }\n\n.embedded-data-menu {\n  padding: 10px 12px;\n  user-select: none;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  align-content: center;\n  padding: 4px 8px 8px; }\n  .embedded-data-menu input.q-plugin-popover-input {\n    box-sizing: border-box;\n    height: 36px;\n    padding: 7px 9px; }\n";
-styleInject(css_248z$9);
+var 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 (props, ref) {
+var EmbeddedDataMenu = React.forwardRef(function EmbeddedDataMeny(props, ref) {
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       inputValue = _useState2[0],
@@ -847,7 +1190,8 @@ var EmbeddedDataMenu = React.forwardRef(function (props, ref) {
     ignoreClickSelector: ignoreClickSelector,
     placement: props.placement || 'right-start'
   }, React.createElement("div", {
-    className: "embedded-data-menu"
+    className: "embedded-data-menu",
+    ref: ref
   }, React.createElement("div", null, React.createElement(InputGroup, null, React.createElement(Input, {
     onChange: handleInputChange,
     invalid: isInputInvalid,
@@ -862,8 +1206,151 @@ var EmbeddedDataMenu = React.forwardRef(function (props, ref) {
   }))))));
 });
 
-var css_248z$8 = "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$8);
+/**
+ * Copied from: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/hooks/useId/useId.js
+ * Returns an ID that is stable across renders.
+ * @param {string=} defaultExternalId - ID to be used instead of a randomly generated ID. This ID is only considered on mount, so changes to this ID are ignored.
+ * @returns {String} If an external ID is passed in, the external ID. Otherwise, a randomly generated ID.
+ */
+function useId(defaultExternalId) {
+    var currentId = useState(function () {
+        return defaultExternalId !== null && defaultExternalId !== void 0 ? defaultExternalId : v4();
+    })[0];
+    return currentId;
+}
+
+var css_248z$g = "";
+styleInject(css_248z$g);
+
+var css_248z$f = "";
+styleInject(css_248z$f);
+
+// const WrappedPipedTextMenu = PipedTextMenu as PipedTextMenuType;
+var PipedTextSubmenuItem = React.forwardRef(function PipedTextSubmenuItem(props, ref) {
+    var submenuAnchorRef = useRef(null);
+    var submenuItemId = 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, 
+            //@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 },
+            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 EMBEDDED_DATA_LOCATOR$1 = '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)));
+    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) {
+            menuItemHeaderClass = (menuItem.header === true)
+                ? 'piped-text-header'
+                : '';
+            menuItemDisabledClass = (menuItem.disabled === true)
+                ? 'piped-text-disabled'
+                : '';
+            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 {
+            innerContent = (React.createElement("div", { onClick: function () { return handleMenuItemClick(menuItem); }, onMouseEnter: function () { return handleMenuItemHovered(menuItem); } },
+                React.createElement("div", { className: "piped-text-menu-item" }, 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));
+        return menuItemEl;
+    }
+    function handleEmbeddedDataItemClick(menuItem) {
+        props.onEmbeddedDataItemClick(menuItem);
+    }
+    function handleMenuItemClick(menuItem) {
+        props.onMenuItemClicked(menuItem);
+    }
+    function handleSubmenuHover(menuItem) {
+        props.onSubmenuHover(menuItem);
+    }
+    function handleMenuItemHovered(menuItem) {
+        props.onMenuItemHover(menuItem);
+    }
+    function handleEmbeddedDataSelect(edLocator) {
+        var edMenuItem;
+        /* Instead of returning the menuItem, we'll construct one that matches the interface.
+            There is no mappable "menuItem" here, when ED values are added they can be different
+            potentially every time, so we trigger events generically ad hoc
+        */
+        edMenuItem = {
+            value: {
+                locator: edLocator,
+            },
+        };
+        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) {
@@ -896,31 +1383,64 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
       setSearchValue = _useState8[1];
 
   var _useState9 = useState(undefined),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isSubmenu = _useState10[0],
-      setIsSubmenu = _useState10[1];
+      _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 _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      popoverEl = _useState12[0],
-      setPopoverEl = _useState12[1];
+  var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      popoverEl = _useState20[0],
+      setPopoverEl = _useState20[1];
 
   var popoverRefCb = useCallback(function (el) {
     setPopoverEl(el);
   }, []);
 
-  var _useState13 = useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      searchBoxEl = _useState14[0],
-      setSearchBoxEl = _useState14[1];
+  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');
 
@@ -929,17 +1449,11 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
       var nextIsSubmenu = anchorRefElRole === 'menuitem';
       setIsSubmenu(nextIsSubmenu);
     }
-
-    if (isSubmenu === true) ; else if (isSubmenu === false) {
-      if (popoverEl !== null) {
-        popoverEl.focus();
-      }
-    }
-  }, [popoverEl, searchBoxEl, props.anchorRef, isSubmenu]);
+  }, [popoverEl]);
   useEffect(function () {
-    _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
+    _asyncToGenerator(_regeneratorRuntime().mark(function _callee() {
       var newMenuItems;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
@@ -1040,7 +1554,7 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
     return JSON.stringify(item).toLowerCase().includes(searchVal);
   };
 
-  var menuItemClicked = function menuItemClicked(menuItem, $e) {
+  var menuItemClicked = function menuItemClicked(menuItem) {
     if (!menuItem.disabled) {
       props.onSelected(menuItem);
     }
@@ -1053,118 +1567,47 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
     reRenderMenus();
   };
 
-  var handleEmbeddedDataSelect = function handleEmbeddedDataSelect(edLocator) {
-    var edMenuItem;
-    edMenuItem = {
-      value: {
-        locator: edLocator
-      }
-    };
-    props.onSelected(edMenuItem);
-  };
-
-  var SubmenuItem = function SubmenuItem(props) {
-    var submenuAnchorRef = useRef(null);
-    var menuItem = props.menuItem;
-    return React.createElement("div", {
-      "data-testid": "piped-text-submenu",
-      className: "piped-text-submenu-item-container"
-    }, menuItem.show && React.createElement(PipedTextMenu, {
-      items: menuItem.submenu.items,
-      show: menuItem.show,
-      placement: "right-start",
-      onClose: function onClose() {
-        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 anchor(ref) {
-        return React.createElement("div", {
-          ref: ref,
-          className: "piped-text-submenu-anchor"
-        });
-      },
-      anchorRef: submenuAnchorRef
-    }), React.createElement("div", {
-      className: "piped-text-submenu-item",
-      "aria-haspopup": "menu",
-      role: "menuitem",
-      onMouseEnter: function onMouseEnter($e) {
-        return submenuHovered(menuItem);
-      },
-      ref: submenuAnchorRef
-    }, React.createElement("div", {
-      className: "label-text"
-    }, menuItem.label), React.createElement("div", {
-      className: "piped-text-icon"
-    }, React.createElement(Icon, {
-      type: IconTypes.ChevronRight,
-      size: "medium"
-    }))));
-  };
-
   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));
     }
 
-    return menuItems.map(function (menuItem) {
-      var menuItemHeaderClass, menuItemDisabledClass, menuItemClassName;
+    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 (menuItem.hasSubmenu) {
-        return React.createElement(SubmenuItem, {
-          key: menuItem.key,
-          menuItem: menuItem
-        });
-      } else if (menuItem.header === true || menuItem.disabled === true) {
-        menuItemHeaderClass = menuItem.header === true ? 'piped-text-header' : '';
-        menuItemDisabledClass = menuItem.disabled === true ? 'piped-text-disabled' : '';
-        menuItemClassName = "piped-text-menu-item ".concat(menuItemHeaderClass, " ").concat(menuItemDisabledClass);
-        return React.createElement("div", {
-          key: menuItem.key,
-          className: menuItemClassName
-        }, menuItem.label);
-      } else if (menuItem.value === EMBEDDED_DATA_LOCATOR) {
-        return React.createElement("div", {
-          key: menuItem.key,
-          onClick: function onClick($e) {
-            return embeddedDataItemClicked(menuItem);
-          },
-          onMouseEnter: function onMouseEnter($e) {
-            return menuItemHovered();
-          }
-        }, React.createElement(EmbeddedDataMenu, {
-          show: menuItem.show,
-          onSelect: handleEmbeddedDataSelect,
-          anchor: function anchor(ref) {
-            return React.createElement("div", {
-              ref: ref,
-              className: "embedded-data-menu-anchor"
-            });
-          }
-        }), React.createElement("div", {
-          className: "piped-text-menu-item"
-        }, menuItem.label));
-      } else {
-        return React.createElement("div", {
-          key: menuItem.key,
-          onMouseEnter: function onMouseEnter($e) {
-            return menuItemHovered();
-          },
-          onClick: function onClick($e) {
-            return menuItemClicked(menuItem);
-          }
-        }, React.createElement("div", {
-          className: "piped-text-menu-item"
-        }, menuItem.label));
+      if (isFocusable) {
+        nextFocusMenuItems.push(menuItemEl);
       }
+
+      return menuItemEl;
     });
+    setFocusMenuItems(nextFocusMenuItems);
+    return pipedTextMenuItems;
   };
 
   var handleSearchSubmit = function handleSearchSubmit(e) {
@@ -1217,7 +1660,6 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
     if (isLoadError) {
       return getLoadError();
     } else {
-      var itemsToRender = (menuItems || []).filter(matchesSearch);
       return React.createElement("div", {
         className: "piped-text-popover-menu"
       }, React.createElement("div", {
@@ -1237,7 +1679,7 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
           return handleSearchInputClick($e);
         },
         ref: searchBoxRefCb
-      }))), menuItems === undefined ? getLoadingSpinner() : getPipedTextMenuItems(itemsToRender));
+      }))), menuItems === undefined ? getLoadingSpinner() : menuChildren);
     }
   };
 
@@ -1250,20 +1692,35 @@ var PipedTextMenu = React.forwardRef(function PipedTextMenu(props, ref) {
     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) {
-    if (!isSubmenu && searchBoxEl !== null) {
-      searchBoxEl.focus();
-    }
 
     evt.stopPropagation();
   }
@@ -1306,8 +1763,32 @@ function pipedTextDataAdapter(pipedTextData, recursed) {
   return pipedTextData;
 }
 
-var css_248z$7 = ".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";
-styleInject(css_248z$7);
+function checkDefaultMenuItem(menuItem) {
+  return !(checkEmbeddedDataMenuItem(menuItem) || checkDecoratedMenuItem(menuItem) || checkSubmenuMenuItemItem(menuItem));
+}
+
+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;
+}
+
+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";
+styleInject(css_248z$d);
 
 var defaultAnchor = function defaultAnchor(ref) {
   return React.createElement("div", {
@@ -1329,6 +1810,7 @@ function PipedTextSelect(props) {
 
   var defaultAnchorRef = useRef(null);
   var externalAnchor = props.anchor;
+  var ariaLabelledBy = props['aria-labelledby'];
   useEffect(function () {
     return function () {
       return onClose();
@@ -1368,7 +1850,8 @@ function PipedTextSelect(props) {
     items: pipedTextItems,
     anchor: actualAnchor,
     anchorRef: anchorRef,
-    ignoreClickSelector: props.ignoreClickSelector
+    ignoreClickSelector: props.ignoreClickSelector,
+    "aria-labelledby": ariaLabelledBy
   }));
 
   function initializePipedText() {
@@ -1378,12 +1861,13 @@ function PipedTextSelect(props) {
   }
 }
 
-var css_248z$6 = ".piped-text-input .piped-text-input-toggle, .piped-text-input .piped-text-select-container {\n  display: inline-block; }\n\n.piped-text-input .piped-text-input-toggle {\n  display: flex; }\n  .piped-text-input .piped-text-input-toggle input {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle input:first-child {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0; }\n  .piped-text-input .piped-text-input-toggle.multiline-input textarea {\n    flex: 1 1;\n    box-sizing: border-box; }\n  .piped-text-input .piped-text-input-toggle input + button, .piped-text-input .piped-text-input-toggle textarea + button {\n    margin-left: 4px; }\n\n.piped-text-input .addon-text-container {\n  /*\n      These styles are intended to match CFE QDS components,\n        notably FormField and InputField.\n        See: https://gitlab-app.eng.qops.net/cfe/ui/-/blob/master/packages/ui-react/src/FormField/Caption.less\n    */\n  margin-top: 6px; }\n  .piped-text-input .addon-text-container .helper-text, .piped-text-input .addon-text-container .error-text {\n    font-size: 12px; }\n  .piped-text-input .addon-text-container .helper-text {\n    color: #74777a;\n    fill: #74777a; }\n    .piped-text-input .addon-text-container .helper-text + .error-text {\n      margin-top: 4px; }\n  .piped-text-input .addon-text-container .error-text {\n    display: flex;\n    align-items: center;\n    color: #b00;\n    fill: #b00; }\n    .piped-text-input .addon-text-container .error-text .error-text-icon svg {\n      margin-left: -2px;\n      margin-right: 3px;\n      width: 16px;\n      height: 16px; }\n";
-styleInject(css_248z$6);
+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";
+styleInject(css_248z$c);
 
 function PipedTextInput(props) {
     var _a = useState(false), showMenu = _a[0], setShowMenu = _a[1];
     var _b = useState(), cursorPosition = _b[0], setCursorPosition = _b[1];
+    var pipedTextButtonId = useId();
     var pipedTextButtonRef = useRef(null);
     /*
       This has to be an Object type ref instead of 'string' or React will lose
@@ -1419,10 +1903,10 @@ function PipedTextInput(props) {
             React.createElement(Input, __assign({ value: inputRefValue.value, onChange: function (evt) {
                     onInputChange(evt);
                 }, onBlur: onInputBlur, placeholder: placeholder, multiline: multiline }, restProps)),
-            React.createElement(IconButton, { "aria-label": "PipedText", "aria-haspopup": "menu", "aria-expanded": showMenu ? true : undefined, role: "button", onClick: toggleMenu, ref: pipedTextButtonRef },
+            React.createElement(IconButton, { id: pipedTextButtonId, "aria-label": "PipedText", "aria-haspopup": "menu", "aria-expanded": showMenu ? true : undefined, role: "button", onClick: toggleMenu, ref: pipedTextButtonRef },
                 React.createElement(PipedTextIcon, null)),
             React.createElement("div", { className: "piped-text-select-container" },
-                React.createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle", anchorRef: pipedTextButtonRef }))),
+                React.createElement(PipedTextSelect, { items: items, onSelect: pipedTextSelected, show: showMenu, onClose: handleClose, ignoreClickSelector: "piped-text-input-toggle", anchorRef: pipedTextButtonRef, "aria-labelledby": pipedTextButtonId }))),
         showAddonText() && (React.createElement("div", { className: "addon-text-container" },
             helperText && (React.createElement("div", { className: "helper-text" }, helperText)),
             errorText && (React.createElement("div", { className: "error-text" },
@@ -1494,8 +1978,8 @@ function PipedTextInput(props) {
     }
 }
 
-var css_248z$5 = ".field-row {\n  min-width: 475px;\n  display: flex;\n  align-items: center; }\n  .field-row .field-selector, .field-row .field-input, .field-row .delete-row, .field-row .required-indicator {\n    display: inline-block; }\n  .field-row .field-selector, .field-row .field-input {\n    padding: 0 10px; }\n  .field-row .custom-field-name, .field-row .field-input, .field-row .delete-row {\n    box-sizing: border-box; }\n  .field-row .field-selector {\n    min-width: 30%; }\n    .field-row .field-selector.required-field button:hover {\n      cursor: not-allowed; }\n    .field-row .field-selector .required-indicator-container {\n      padding-left: 12px;\n      display: flex;\n      color: #32363A; }\n      .field-row .field-selector .required-indicator-container .required-indicator-text {\n        min-width: 0;\n        font-size: 14px; }\n      .field-row .field-selector .required-indicator-container .required-indicator-symbol {\n        margin-top: -2px; }\n    .field-row .field-selector .left-align {\n      text-align: left; }\n    .field-row .field-selector .custom-field-name {\n      padding-left: 16px;\n      padding-right: 30px; }\n      .field-row .field-selector .custom-field-name input {\n        text-align: center;\n        display: inline-block;\n        width: 100%;\n        padding: 0; }\n  .field-row .field-input-container {\n    display: flex;\n    flex: 1 0;\n    align-items: center; }\n    .field-row .field-input-container .field-input {\n      flex: 1;\n      min-width: 0;\n      margin-right: 4px; }\n    .field-row .field-input-container .delete-row {\n      max-width: 36px;\n      margin-left: 12px;\n      vertical-align: middle; }\n      .field-row .field-input-container .delete-row .icon-wrapper {\n        display: block;\n        width: fit-content;\n        margin: 0 auto;\n        min-width: 41px; }\n        .field-row .field-input-container .delete-row .icon-wrapper:hover {\n          cursor: pointer; }\n  .field-row .full-width {\n    width: 100%; }\n";
-styleInject(css_248z$5);
+var css_248z$b = ".field-row {\n  min-width: 475px;\n  display: flex;\n  align-items: center; }\n  .field-row .field-selector, .field-row .field-input, .field-row .delete-row, .field-row .required-indicator {\n    display: inline-block; }\n  .field-row .field-selector, .field-row .field-input {\n    padding: 0 10px; }\n  .field-row .custom-field-name, .field-row .field-input, .field-row .delete-row {\n    box-sizing: border-box; }\n  .field-row .field-selector {\n    min-width: 30%; }\n    .field-row .field-selector.required-field button:hover {\n      cursor: not-allowed; }\n    .field-row .field-selector .required-indicator-container {\n      padding-left: 12px;\n      display: flex;\n      color: #32363A; }\n      .field-row .field-selector .required-indicator-container .required-indicator-text {\n        min-width: 0;\n        font-size: 14px; }\n      .field-row .field-selector .required-indicator-container .required-indicator-symbol {\n        margin-top: -2px; }\n    .field-row .field-selector .left-align {\n      text-align: left; }\n    .field-row .field-selector .custom-field-name {\n      padding-left: 16px;\n      padding-right: 30px; }\n      .field-row .field-selector .custom-field-name input {\n        text-align: center;\n        display: inline-block;\n        width: 100%;\n        padding: 0; }\n  .field-row .field-input-container {\n    display: flex;\n    flex: 1 0;\n    align-items: center; }\n    .field-row .field-input-container .field-input {\n      flex: 1;\n      min-width: 0;\n      margin-right: 4px; }\n    .field-row .field-input-container .delete-row {\n      max-width: 36px;\n      margin-left: 12px;\n      vertical-align: middle; }\n      .field-row .field-input-container .delete-row .icon-wrapper {\n        display: block;\n        width: fit-content;\n        margin: 0 auto;\n        min-width: 41px; }\n        .field-row .field-input-container .delete-row .icon-wrapper:hover {\n          cursor: pointer; }\n  .field-row .full-width {\n    width: 100%; }\n";
+styleInject(css_248z$b);
 
 function FieldRow(props) {
   var _useState = useState(props.children),
@@ -1669,8 +2153,8 @@ function FieldRow(props) {
   }, getRowDelete())));
 }
 
-var css_248z$4 = "";
-styleInject(css_248z$4);
+var css_248z$a = "";
+styleInject(css_248z$a);
 
 function FieldItem(props) {
   var label = props.name || undefined;
@@ -1687,8 +2171,8 @@ function FieldItem(props) {
   }, label);
 }
 
-var css_248z$3 = ".task-fields {\n  margin-right: 100px; }\n  .task-fields .add-field-button .add-field-button-label {\n    padding: 0 3px; }\n  .task-fields .field-headers {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .task-fields .field-headers .field-row {\n      color: #6A6D70;\n      font-weight: bold; }\n      .task-fields .field-headers .field-row .field-selector label, .task-fields .field-headers .field-row .field-input label {\n        font-size: 12px; }\n      .task-fields .field-headers .field-row .field-selector {\n        padding-top: 0;\n        padding-right: 24px;\n        padding-bottom: 0;\n        padding-left: 0; }\n      .task-fields .field-headers .field-row .field-input {\n        padding-top: 0;\n        padding-right: 0;\n        padding-bottom: 0;\n        padding-left: 12px; }\n  .task-fields .field-rows {\n    padding-bottom: 12px; }\n    .task-fields .field-rows .field-row {\n      border-top: 1px solid #E5E5E5; }\n      .task-fields .field-rows .field-row .field-selector {\n        padding-top: 8px;\n        padding-right: 12px;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n      .task-fields .field-rows .field-row .field-input {\n        border-left: 1px solid #E5E5E5;\n        padding-top: 8px;\n        padding-right: 0;\n        padding-bottom: 8px;\n        padding-left: 12px; }\n\n.q-popover .field-item {\n  padding: 5px 32px; }\n  .q-popover .field-item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
-styleInject(css_248z$3);
+var 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";
+styleInject(css_248z$9);
 
 var uuidv4 = uuid.v4;
 var CUSTOM_TYPE = 'custom';
@@ -2073,8 +2557,8 @@ function AddFieldHeaders(props) {
   }
 }
 
-var css_248z$2 = ".select-item .item {\n  padding: 5px 32px;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%; }\n  .select-item .item .checked-container, .select-item .item .item-content {\n    display: inline-block; }\n  .select-item .item .checked-container {\n    margin-bottom: -3px;\n    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }\n    .select-item .item .checked-container.checked {\n      opacity: 1; }\n    .select-item .item .checked-container:not(.checked) {\n      opacity: 0; }\n  .select-item .item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
-styleInject(css_248z$2);
+var css_248z$8 = ".select-item .item {\n  padding: 5px 32px;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%; }\n  .select-item .item .checked-container, .select-item .item .item-content {\n    display: inline-block; }\n  .select-item .item .checked-container {\n    margin-bottom: -3px;\n    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.1s; }\n    .select-item .item .checked-container.checked {\n      opacity: 1; }\n    .select-item .item .checked-container:not(.checked) {\n      opacity: 0; }\n  .select-item .item:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
+styleInject(css_248z$8);
 
 function SelectItem(props) {
   var checked = props.checked || false;
@@ -2096,8 +2580,8 @@ function SelectItem(props) {
   }, children)));
 }
 
-var css_248z$1 = "";
-styleInject(css_248z$1);
+var css_248z$7 = "";
+styleInject(css_248z$7);
 
 function MultiselectDropdown(props) {
   var _useState = useState(false),
@@ -2152,8 +2636,8 @@ function MultiselectDropdown(props) {
   })));
 }
 
-var css_248z = ".dynamic-search-input .search-input {\n  box-sizing: border-box; }\n\n.dynamic-search-popover-child {\n  padding: 5px 32px; }\n  .dynamic-search-popover-child:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
-styleInject(css_248z);
+var css_248z$6 = ".dynamic-search-input .search-input {\n  box-sizing: border-box; }\n\n.dynamic-search-popover-child {\n  padding: 5px 32px; }\n  .dynamic-search-popover-child:hover {\n    cursor: pointer;\n    user-select: none;\n    background: #007ac0;\n    color: #fff;\n    fill: #fff; }\n";
+styleInject(css_248z$6);
 
 function DynamicSearchInput(props) {
   var _useState = useState(false),
@@ -2218,9 +2702,9 @@ function DynamicSearchInput(props) {
   };
 
   var defaultSearch = function () {
-    var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(value) {
+    var _ref = _asyncToGenerator(_regeneratorRuntime().mark(function _callee(value) {
       var results;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
@@ -2253,9 +2737,9 @@ function DynamicSearchInput(props) {
   }();
 
   var handleInputChange = function () {
-    var _ref2 = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(event) {
+    var _ref2 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee2(event) {
       var inputVal, searchFunc, results, resultsType, nextSearchResults;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
@@ -2336,4 +2820,307 @@ function SearchItem(props) {
   }, props.children);
 }
 
-export { DynamicSearchInput, FieldItem, MultiselectDropdown, PipedTextInput, PipedTextSelect, PluginSdkService, Popover, SelectItem, TaskFields, languageCodeAdapter };
+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";
+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))))));
+    function getCaptureEventButton() {
+        if (capturing) {
+            return (React.createElement("div", { className: "capture-event-button-container" },
+                React.createElement(Button, { kind: "secondary", onClick: cancelCapture }, props.cancelCaptureTranslation)));
+        }
+        else {
+            return (React.createElement("div", { className: "capture-event-button-container" },
+                React.createElement(Button, { kind: "primary", onClick: startCapture }, props.captureNextEventTranslation)));
+        }
+    }
+    function startCapture() {
+        setCapturing(true);
+        props.onStart();
+    }
+    function cancelCapture() {
+        setCapturing(false);
+        setWaitingLabel(props.waitingForEventTranslation);
+        props.onCancel();
+    }
+}
+
+var css_248z$4 = ".copy-text {\n  display: flex;\n  column-gap: 8px; }\n  .copy-text .input-container {\n    width: 100%; }\n    .copy-text .input-container .input-textbox {\n      width: 100%; }\n  .copy-text .copy-button-container .selected-button {\n    display: flex; }\n    .copy-text .copy-button-container .selected-button .selected-button-text {\n      display: flex;\n      align-self: center; }\n";
+styleInject(css_248z$4);
+
+var COPY_BUTTON_SELECTED_TEXT_TIME = 1.5 * 1000; // seconds * milliseconds
+function CopyText(props) {
+    var _a = useState(false), copyButtonSelected = _a[0], setCopyButtonSelected = _a[1];
+    return (React.createElement("div", { className: "copy-text" },
+        React.createElement("div", { className: "input-container" },
+            React.createElement(Input, { className: "input-textbox", defaultValue: props.text, "aria-readonly": true, readOnly: true })),
+        React.createElement("div", { className: "copy-button-container" },
+            React.createElement(Button, { kind: "secondary", disabled: copyButtonSelected, onClick: copyTextToClipboard }, getCopyButtonContent()))));
+    function copyTextToClipboard() {
+        try {
+            navigator.clipboard.writeText(props.text);
+            setCopyButtonSelected(true);
+            setTimeout(function () { return setCopyButtonSelected(false); }, COPY_BUTTON_SELECTED_TEXT_TIME);
+        }
+        catch (err) {
+            console.error('Failed to copy text');
+            console.error(err);
+        }
+    }
+    function getCopyButtonContent() {
+        if (copyButtonSelected) {
+            return (React.createElement("div", { className: "selected-button" },
+                React.createElement("div", { className: "selected-button-icon" },
+                    React.createElement(CheckIcon, null)),
+                React.createElement("div", { className: "selected-button-text" }, props.copySelectedTranslation)));
+        }
+        else {
+            return (React.createElement("div", { className: "default-button" }, props.copyTranslation));
+        }
+    }
+}
+
+var css_248z$3 = ".field-mapper {\n  padding-bottom: 12px; }\n  .field-mapper .field-mapper-row-container .field-mapper-row {\n    border-top: 1px solid #E5E5E5; }\n  .field-mapper .field-mapper-row-container.field-mapper-header-row {\n    margin-bottom: 10px;\n    padding-left: 12px; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-row {\n      border: 0; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key, .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value {\n      border: 0;\n      display: flex;\n      align-items: center; }\n      .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key .field-mapper-header-cell, .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value .field-mapper-header-cell {\n        color: #6A6D70;\n        font-weight: bold;\n        font-size: 12px; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-key {\n      padding-top: 0;\n      padding-right: 24px;\n      padding-bottom: 0;\n      padding-left: 0; }\n    .field-mapper .field-mapper-row-container.field-mapper-header-row .field-mapper-value {\n      padding-top: 0;\n      padding-right: 0;\n      padding-bottom: 0;\n      padding-left: 12px; }\n  .field-mapper .add-field-button-container {\n    padding-top: 12px; }\n";
+styleInject(css_248z$3);
+
+function isString(val) {
+    return (typeof val) === 'string';
+}
+
+var css_248z$2 = ".field-mapper-row .field-mapper-row-content {\n  display: flex; }\n  .field-mapper-row .field-mapper-row-content .field-mapper-key-container {\n    flex: 4; }\n  .field-mapper-row .field-mapper-row-content .field-mapper-value-container {\n    flex: 7; }\n  .field-mapper-row .field-mapper-row-content .remove-row-container {\n    min-height: 100%;\n    padding: 8px 12px;\n    border-left: 1px solid #E5E5E5; }\n    .field-mapper-row .field-mapper-row-content .remove-row-container.hide-remove-button {\n      border: 0; }\n    .field-mapper-row .field-mapper-row-content .remove-row-container .empty-remove-button {\n      min-width: 36px; }\n";
+styleInject(css_248z$2);
+
+var css_248z$1 = ".field-mapper-key {\n  display: flex;\n  align-items: center;\n  padding-top: 8px;\n  padding-right: 12px;\n  padding-bottom: 8px;\n  padding-left: 12px;\n  height: 100%; }\n  .field-mapper-key .required-field-container {\n    display: flex; }\n    .field-mapper-key .required-field-container .required-field-text {\n      min-width: 0;\n      font-size: 14px; }\n    .field-mapper-key .required-field-container .required-field-symbol {\n      margin-top: -2px; }\n";
+styleInject(css_248z$1);
+
+var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
+    var _a, _b, _c, _d, _e;
+    var availableFields;
+    var onFieldKeyChange;
+    availableFields = Array.isArray(props.availableFields)
+        ? props.availableFields
+        : [];
+    onFieldKeyChange = (typeof props.onFieldKeyChange === 'function')
+        ? props.onFieldKeyChange
+        : function () { return undefined; };
+    return (React.createElement("div", { className: "field-mapper-key", 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))
+            : (((_b = props.selectedField) === null || _b === void 0 ? void 0 : _b.required) === true)
+                ? (React.createElement("div", { className: "required-field-container" },
+                    React.createElement("div", { className: "required-field-text" }, (_c = props.selectedField) === null || _c === void 0 ? void 0 : _c.label),
+                    React.createElement("div", { className: "required-field-symbol" }, "*")))
+                : (React.createElement(Dropdown, { onChange: handleFieldKeyChange },
+                    React.createElement(DropdownButton, { label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
+                    React.createElement(DropdownList, null, (_e = props.availableFields) === null || _e === void 0 ? void 0 : _e.map(function (fieldItem) {
+                        return (React.createElement(DropdownOption, { key: fieldItem.key, label: fieldItem.label, value: fieldItem.value }));
+                    }))))))));
+    function handleFieldKeyChange(value) {
+        var foundSelectedFieldKey;
+        foundSelectedFieldKey = availableFields.find(function (availableField) {
+            return availableField.value === value;
+        });
+        if (foundSelectedFieldKey === undefined) {
+            return;
+        }
+        onFieldKeyChange(props.selectedField, foundSelectedFieldKey);
+    }
+    function fieldMapperKeyDropdownDisabled() {
+        var hasAvailableFields;
+        hasAvailableFields = (availableFields === null || availableFields === void 0 ? void 0 : availableFields.length) > 0;
+        return !hasAvailableFields;
+    }
+});
+
+var css_248z = ".field-mapper-value {\n  border-left: 1px solid #E5E5E5;\n  padding-top: 8px;\n  padding-right: 12px;\n  padding-bottom: 8px;\n  padding-left: 12px;\n  height: 100%; }\n";
+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)
+        ? 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 },
+        React.createElement("div", { className: "field-mapper-row-content" },
+            React.Children.map(props.children, function (child) {
+                return getWrappedKeyValue(child);
+            }),
+            React.createElement("div", { className: 'remove-row-container' + ((props.showRemove === false) ? ' hide-remove-button' : '') }, (props.showRemove === false)
+                ? (React.createElement("div", { className: "empty-remove-button" }))
+                : (React.createElement(IconButton
+                /*
+                  TODO: Require an i18n string to be passed in for a11y labels
+                */
+                , { "aria-label": "Remove", onClick: function ($e) { return handleRemoveClick(); } },
+                    React.createElement(RemoveItemIcon, null)))))));
+    function handleRemoveClick(evt) {
+        var _a;
+        (_a = props.onFieldRemove) === null || _a === void 0 ? void 0 : _a.call(props, props.selectedField);
+    }
+    function getWrappedKeyValue(child) {
+        var _a, _b, _c, _d;
+        var wrappedEl;
+        var fieldMapperKeyProps, fieldMapperValueProps;
+        var includeAvailableFields, includeSelectedField;
+        var includePipedTextItems, includeOnChange;
+        fieldMapperKeyProps = {};
+        fieldMapperValueProps = {};
+        switch (child.type) {
+            case FieldMapperKey:
+                includeAvailableFields = (!Array.isArray(child.props.availableFields)
+                    && (((_a = props.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0));
+                includeSelectedField = (((typeof child.props.selectedField) !== 'object')
+                    && (props.selectedField !== undefined));
+                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 (React.isValidElement(child)
+                    && (includeAvailableFields
+                        || includeSelectedField)) {
+                    child = React.cloneElement(child, fieldMapperKeyProps);
+                }
+                wrappedEl = (React.createElement("div", { className: "field-mapper-key-container" }, child));
+                break;
+            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'));
+                if (includePipedTextItems) {
+                    fieldMapperValueProps.pipedTextItems = props.pipedTextItems;
+                }
+                if (includeOnChange) {
+                    fieldMapperValueProps.onChange = function (value) {
+                        props.onChange(props.selectedField, value);
+                    };
+                }
+                if (React.isValidElement(child)
+                    && includePipedTextItems) {
+                    child = React.cloneElement(child, fieldMapperValueProps);
+                }
+                wrappedEl = (React.createElement("div", { className: "field-mapper-value-container" }, child));
+                break;
+            default:
+                wrappedEl = child;
+        }
+        return wrappedEl;
+    }
+});
+
+var MISSING_TRANSLATION_WARNING = '{{MISSING_I18N_STRING}}';
+var FieldMapper = React.forwardRef(function FieldMapper(props, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    return (React.createElement("div", { className: 'field-mapper ' + ((_a = props.className) !== null && _a !== void 0 ? _a : ''), ref: ref },
+        hasHeaderRow() && (React.createElement("div", { className: "field-mapper-row-container field-mapper-header-row" },
+            React.createElement(FieldMapperRow, { showRemove: false },
+                React.createElement(FieldMapperKey, null,
+                    React.createElement("div", { className: "field-mapper-header-cell field-mapper-key-header" }, (_b = props.fieldKeysHeaderText) !== null && _b !== void 0 ? _b : '')),
+                React.createElement(FieldMapperValue, null,
+                    React.createElement("div", { className: "field-mapper-header-cell field-mapper-value-header" }, (_c = props.fieldValuesHeaderText) !== null && _c !== void 0 ? _c : ''))))),
+        React.createElement("div", { className: "field-mapper-row-container" }, React.Children.map(props.children, function (child) {
+            return getWrappedFieldRow(child);
+        })),
+        React.createElement("div", { className: "add-field-button-container" }, isAddFieldDisabled()
+            ? (React.createElement(Button, { disabled: true, kind: "secondary", className: "add-field-button" },
+                React.createElement("div", { className: "add-field-icon" },
+                    React.createElement(AddIcon, null)),
+                React.createElement("div", { className: "add-field-button-label" }, (_d = props.addFieldLabel) !== null && _d !== void 0 ? _d : MISSING_TRANSLATION_WARNING)))
+            : (React.createElement(Dropdown, null,
+                React.createElement(DropdownButton, null,
+                    React.createElement(Button, { className: "add-field-button", kind: "secondary" },
+                        React.createElement("div", { className: "add-field-icon" },
+                            React.createElement(AddIcon, null)),
+                        React.createElement("div", { className: "add-field-button-label" }, (_e = props.addFieldLabel) !== null && _e !== void 0 ? _e : MISSING_TRANSLATION_WARNING))),
+                React.createElement(DropdownList, null, (_f = props.availableFields) === null || _f === void 0 ? void 0 : _f.map(function (fieldItem) {
+                    return (React.createElement(DropdownOption, { key: fieldItem.key, value: fieldItem.value, label: fieldItem.label, onSelect: function ($e) {
+                            handleDropdownSelect(fieldItem.value);
+                        } }));
+                })))))));
+    function hasHeaderRow() {
+        return (isString(props.fieldKeysHeaderText)
+            || isString(props.fieldValuesHeaderText));
+    }
+    function getWrappedFieldRow(child) {
+        var _a, _b, _c;
+        var wrappedEl;
+        var fieldMapperRowProps;
+        var includeAvailableFields, includeOnFieldRemove, includePipedTextItems, includeOnFieldValueChange, includeShowRemove;
+        fieldMapperRowProps = {};
+        switch (child.type) {
+            case FieldMapperRow:
+                wrappedEl = child;
+                break;
+            default:
+                wrappedEl = (React.createElement(FieldMapperRow, null, child));
+        }
+        includeAvailableFields = (!Array.isArray(wrappedEl.props.availableFields)
+            && (((_a = props.availableFields) === null || _a === void 0 ? void 0 : _a.length) > 0));
+        includeOnFieldRemove = (((typeof wrappedEl.props.onFieldRemove) !== 'function')
+            && ((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')
+            && (typeof props.onFieldValueChange === 'function'));
+        includeShowRemove = (((typeof wrappedEl.props.showRemove !== 'boolean'))
+            && ((typeof ((_c = child.props.selectedField) === null || _c === void 0 ? void 0 : _c.required)) === 'boolean'));
+        if (includeAvailableFields) {
+            fieldMapperRowProps.availableFields = props.availableFields.slice();
+        }
+        if (includeOnFieldRemove) {
+            fieldMapperRowProps.onFieldRemove = function (fieldItem) {
+                return props.onFieldRemove(fieldItem);
+            };
+        }
+        if (includePipedTextItems) {
+            fieldMapperRowProps.pipedTextItems = props.pipedTextItems;
+        }
+        if (includeOnFieldValueChange) {
+            fieldMapperRowProps.onChange = function (fieldItem, inputValue) {
+                return props.onFieldValueChange(fieldItem, inputValue);
+            };
+        }
+        if (includeShowRemove) {
+            fieldMapperRowProps.showRemove = !child.props.selectedField.required;
+        }
+        wrappedEl = React.cloneElement(wrappedEl, fieldMapperRowProps);
+        return wrappedEl;
+    }
+    function handleDropdownSelect(value) {
+        var foundFieldMapperItem;
+        foundFieldMapperItem = props.availableFields.find(function (availableField) {
+            return availableField.value === value;
+        });
+        if (foundFieldMapperItem) {
+            props.onFieldAdd(foundFieldMapperItem);
+        }
+    }
+    function isAddFieldDisabled() {
+        var hasAvailableFields;
+        hasAvailableFields = ((Array.isArray(props.availableFields))
+            && (props.availableFields.length > 0));
+        return !hasAvailableFields;
+    }
+});
+
+export { CaptureEvent, CopyText, DynamicSearchInput, FieldItem, FieldMapper, FieldMapperKey, FieldMapperRow, FieldMapperValue, MultiselectDropdown, PipedTextInput, PipedTextSelect, PluginSdkService, Popover, SelectItem, TaskFields, languageCodeAdapter };