@pingux/astro 2.178.0-alpha.0 → 2.178.2-alpha.0

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.js

@@ -35,7 +35,7 @@ var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _helper = require("./helper");
 var _timezones = _interopRequireWildcard(require("./timezones"));
 var _react2 = require("@emotion/react");
-var _excluded = ["additionalTimeZones", "emptySearchText", "locales", "localeOptions"];
+var _excluded = ["additionalTimeZones", "emptySearchText", "locales", "localeOptions", "selectedKey", "onSelectionChange", "inputValue", "onInputChange"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context8 = ownKeys(Object(t), !0)).call(_context8, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context9 = ownKeys(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -58,15 +58,23 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     emptySearchText = props.emptySearchText,
     locales = props.locales,
     localeOptions = props.localeOptions,
+    selectedKeyProp = props.selectedKey,
+    onSelectionChangeProp = props.onSelectionChange,
+    inputValueProp = props.inputValue,
+    onInputChangeProp = props.onInputChange,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useState = (0, _react.useState)(''),
+  var isSelectionControlled = selectedKeyProp !== undefined;
+  var isInputControlled = inputValueProp !== undefined;
+  var _useState = (0, _react.useState)(selectedKeyProp || ''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    search = _useState2[0],
-    setSearch = _useState2[1];
-  var _useState3 = (0, _react.useState)(''),
+    internalInputValue = _useState2[0],
+    setInternalInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(selectedKeyProp || ''),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    selectedKey = _useState4[0],
-    setSelectedKey = _useState4[1];
+    internalSelectedKey = _useState4[0],
+    setInternalSelectedKey = _useState4[1];
+  var inputValue = isInputControlled ? inputValueProp : internalInputValue;
+  var selectedKey = isSelectionControlled ? selectedKeyProp : internalSelectedKey;
   var timeZonePickerRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -100,20 +108,36 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return a.numericOffset - b.numericOffset;
     });
   }, [additionalTimeZones]);
+
+  // Sync internal input value when controlled selectedKey changes externally
+  (0, _react.useEffect)(function () {
+    if (isSelectionControlled) {
+      if (selectedKeyProp) {
+        var item = (0, _find["default"])(allTimeZones).call(allTimeZones, function (tz) {
+          return tz.key === selectedKeyProp;
+        });
+        if (item && !isInputControlled) {
+          setInternalInputValue(item.key);
+        }
+      } else if (!isInputControlled) {
+        setInternalInputValue('');
+      }
+    }
+  }, [selectedKeyProp, isSelectionControlled, isInputControlled, allTimeZones]);
   var filteredItems = (0, _react.useMemo)(function () {
     var selectedItem = (0, _find["default"])(allTimeZones).call(allTimeZones, function (tz) {
       return tz.key === selectedKey;
     });
-    var isExactMatch = selectedItem && selectedItem.key === search;
-    if (!search || isExactMatch) {
+    var isExactMatch = selectedItem && selectedItem.key === inputValue;
+    if (!inputValue || isExactMatch) {
       return allTimeZones;
     }
-    var upperSearch = search.toUpperCase();
+    var upperSearch = inputValue.toUpperCase();
     return (0, _filter["default"])(allTimeZones).call(allTimeZones, function (tz) {
       var _context7;
       return (0, _includes["default"])(_context7 = tz.searchTags).call(_context7, upperSearch);
     });
-  }, [search, selectedKey, allTimeZones]);
+  }, [inputValue, selectedKey, allTimeZones]);
   var timeData = (0, _react.useMemo)(function () {
     var now = new Date();
     var map = new _map2["default"]();
@@ -125,10 +149,16 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return map;
   }, [allTimeZones, locales, localeOptions]);
   var onInputChange = function onInputChange(value) {
-    setSearch(value);
+    if (!isInputControlled) {
+      setInternalInputValue(value);
+    }
     if (value === '') {
-      setSelectedKey(null);
+      if (!isSelectionControlled) {
+        setInternalSelectedKey(null);
+      }
+      onSelectionChangeProp === null || onSelectionChangeProp === void 0 || onSelectionChangeProp(null);
     }
+    onInputChangeProp === null || onInputChangeProp === void 0 || onInputChangeProp(value);
   };
   var onSelectionChange = function onSelectionChange(key) {
     if (!key) return;
@@ -136,14 +166,20 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return item.key === key;
     });
     if (selectedItem) {
-      setSearch(selectedItem.key);
-      setSelectedKey(key);
+      if (!isInputControlled) {
+        setInternalInputValue(selectedItem.key);
+      }
+      if (!isSelectionControlled) {
+        setInternalSelectedKey(key);
+      }
+      onSelectionChangeProp === null || onSelectionChangeProp === void 0 || onSelectionChangeProp(key);
+      onInputChangeProp === null || onInputChangeProp === void 0 || onInputChangeProp(selectedItem.key);
     }
   };
   return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('TimeZonePicker'), otherProps, {
     ref: timeZonePickerRef,
     items: filteredItems,
-    inputValue: search,
+    inputValue: inputValue,
     selectedKey: selectedKey,
     onInputChange: onInputChange,
     onSelectionChange: onSelectionChange,
@@ -191,7 +227,15 @@ TimeZonePicker.propTypes = {
   /** Locale(s) to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_locales) for more info. */
   locales: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
   /** Custom options to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_options) for more info. */
-  localeOptions: _propTypes["default"].shape({})
+  localeOptions: _propTypes["default"].shape({}),
+  /** The key of the currently selected item (controlled). */
+  selectedKey: _propTypes["default"].string,
+  /** Handler called when the selection changes. Receives the selected key. */
+  onSelectionChange: _propTypes["default"].func,
+  /** The current input value (controlled). */
+  inputValue: _propTypes["default"].string,
+  /** Handler called when the input value changes. */
+  onInputChange: _propTypes["default"].func
 };
 TimeZonePicker.defaultProps = {
   emptySearchText: 'No Search Result',

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.stories.js

@@ -5,7 +5,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithCustomTimeZone = exports.Default = void 0;
+exports["default"] = exports.WithCustomTimeZone = exports.Default = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -28,6 +29,19 @@ var Default = exports.Default = function Default(args) {
     label: "Default Example"
   }));
 };
+var Controlled = exports.Controlled = function Controlled(args) {
+  var _React$useState = _react["default"].useState('Pacific/Apia GMT+13:00'),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    selectedTimeZone = _React$useState2[0],
+    setSelectedTimeZone = _React$useState2[1];
+  return (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, args, {
+    label: "Controlled Example",
+    selectedKey: selectedTimeZone,
+    onSelectionChange: function onSelectionChange(key) {
+      return setSelectedTimeZone(key);
+    }
+  }));
+};
 var WithCustomTimeZone = exports.WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.test.js

@@ -20,7 +20,7 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _helper = require("./helper");
 var _react2 = require("@emotion/react");
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context6; _forEachInstanceProperty(_context6 = ["next", "throw", "return"]).call(_context6, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context7; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty(_context7 = this.tryEntries).call(_context7, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context12; _forEachInstanceProperty(_context12 = ["next", "throw", "return"]).call(_context12, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context13; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty(_context13 = this.tryEntries).call(_context13, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
 jest.mock('./helper', function () {
   return {
     getGmtAndOffset: jest.fn().mockReturnValue({
@@ -164,4 +164,233 @@ test('selecting a timezone updates the input value', /*#__PURE__*/(0, _asyncToGe
         return _context4.stop();
     }
   }, _callee4);
-})));
+})));
+test('controlled selectedKey sets the input value', function () {
+  var selectedKey = 'America/New York GMT-00:00';
+  getComponent({
+    selectedKey: selectedKey
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue(selectedKey);
+});
+test('controlled onSelectionChange is called when an item is selected', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var onSelectionChange, timezone, gmtAndOffset, expectedKey, input, option;
+  return _regeneratorRuntime().wrap(function _callee5$(_context6) {
+    var _context7;
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        timezone = 'America/New York';
+        gmtAndOffset = (0, _helper.getGmtAndOffset)(timezone);
+        expectedKey = (0, _concat["default"])(_context7 = "".concat(timezone, " ")).call(_context7, gmtAndOffset.gmt);
+        getComponent({
+          onSelectionChange: onSelectionChange
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context6.next = 8;
+        return _userEvent["default"].type(input, timezone);
+      case 8:
+        option = _testWrapper.screen.getByRole('option', {
+          key: expectedKey
+        });
+        _context6.next = 11;
+        return _userEvent["default"].click(option);
+      case 11:
+        expect(onSelectionChange).toHaveBeenCalledWith(expectedKey);
+      case 12:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee5);
+})));
+test('controlled onSelectionChange is called with null when input is cleared', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var onSelectionChange, input;
+  return _regeneratorRuntime().wrap(function _callee6$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        getComponent({
+          onSelectionChange: onSelectionChange,
+          selectedKey: 'America/New York GMT-00:00'
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context8.next = 5;
+        return _userEvent["default"].clear(input);
+      case 5:
+        expect(onSelectionChange).toHaveBeenCalledWith(null);
+      case 6:
+      case "end":
+        return _context8.stop();
+    }
+  }, _callee6);
+})));
+test('controlled onInputChange is called when typing', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var onInputChange, input;
+  return _regeneratorRuntime().wrap(function _callee7$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
+      case 0:
+        onInputChange = jest.fn();
+        getComponent({
+          onInputChange: onInputChange
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context9.next = 5;
+        return _userEvent["default"].type(input, 'Pac');
+      case 5:
+        expect(onInputChange).toHaveBeenCalled();
+      case 6:
+      case "end":
+        return _context9.stop();
+    }
+  }, _callee7);
+})));
+test('supports controlled inputValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  var onInputChange, input;
+  return _regeneratorRuntime().wrap(function _callee8$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
+      case 0:
+        onInputChange = jest.fn();
+        getComponent({
+          inputValue: 'Pacific',
+          onInputChange: onInputChange
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        expect(input).toHaveValue('Pacific');
+      case 4:
+      case "end":
+        return _context0.stop();
+    }
+  }, _callee8);
+})));
+test('passes isDisabled to ComboBoxField', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toBeDisabled();
+});
+test('passes isRequired to ComboBoxField', function () {
+  getComponent({
+    isRequired: true
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toBeRequired();
+});
+test('passes isReadOnly to ComboBoxField', function () {
+  getComponent({
+    isReadOnly: true
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveAttribute('readonly');
+});
+test('passes placeholder to ComboBoxField', function () {
+  getComponent({
+    placeholder: 'Select a timezone'
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveAttribute('placeholder', 'Select a timezone');
+});
+test('passes helperText to ComboBoxField', function () {
+  getComponent({
+    helperText: 'Choose your preferred timezone'
+  });
+  expect(_testWrapper.screen.getByText('Choose your preferred timezone')).toBeInTheDocument();
+});
+test('passes status to ComboBoxField', function () {
+  getComponent({
+    status: 'error',
+    helperText: 'This field is required'
+  });
+  expect(_testWrapper.screen.getByText('This field is required')).toBeInTheDocument();
+});
+test('calls onOpenChange when menu opens', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+  var onOpenChange, input;
+  return _regeneratorRuntime().wrap(function _callee9$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
+      case 0:
+        onOpenChange = jest.fn();
+        getComponent({
+          onOpenChange: onOpenChange
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context1.next = 5;
+        return _userEvent["default"].type(input, 'America');
+      case 5:
+        expect(onOpenChange).toHaveBeenCalledWith(true, 'input');
+      case 6:
+      case "end":
+        return _context1.stop();
+    }
+  }, _callee9);
+})));
+test('clears selection when input is cleared in uncontrolled mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
+  var onSelectionChange, onInputChange, timezone, gmtAndOffset, expectedOptionText, input, option;
+  return _regeneratorRuntime().wrap(function _callee0$(_context10) {
+    var _context11;
+    while (1) switch (_context10.prev = _context10.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        onInputChange = jest.fn();
+        timezone = 'America/New York';
+        gmtAndOffset = (0, _helper.getGmtAndOffset)(timezone);
+        expectedOptionText = (0, _concat["default"])(_context11 = "".concat(timezone, " ")).call(_context11, gmtAndOffset.gmt);
+        getComponent({
+          onSelectionChange: onSelectionChange,
+          onInputChange: onInputChange
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context10.next = 9;
+        return _userEvent["default"].type(input, timezone);
+      case 9:
+        option = _testWrapper.screen.getByRole('option', {
+          key: expectedOptionText
+        });
+        _context10.next = 12;
+        return _userEvent["default"].click(option);
+      case 12:
+        expect(onSelectionChange).toHaveBeenCalledWith(expectedOptionText);
+        _context10.next = 15;
+        return _userEvent["default"].clear(input);
+      case 15:
+        expect(onInputChange).toHaveBeenCalledWith('');
+      case 16:
+      case "end":
+        return _context10.stop();
+    }
+  }, _callee0);
+})));
+test('displays pre-selected value on initial render with controlled selectedKey', function () {
+  var timezone = 'America/New York';
+  var gmtAndOffset = (0, _helper.getGmtAndOffset)(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    selectedKey: expectedOptionText
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});
+test('displays pre-selected value with additionalTimeZones', function () {
+  var timezone = 'Africa/Juba';
+  var gmtAndOffset = (0, _helper.getGmtAndOffset)(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    additionalTimeZones: {
+      '(GMT+02:00) Africa/Juba': testTimeZoneJuba
+    },
+    selectedKey: expectedOptionText
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});
+test('displays pre-selected value with controlled inputValue', function () {
+  var timezone = 'America/New York';
+  var gmtAndOffset = (0, _helper.getGmtAndOffset)(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    selectedKey: expectedOptionText,
+    inputValue: expectedOptionText,
+    onInputChange: jest.fn()
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["additionalTimeZones", "emptySearchText", "locales", "localeOptions"];
+var _excluded = ["additionalTimeZones", "emptySearchText", "locales", "localeOptions", "selectedKey", "onSelectionChange", "inputValue", "onInputChange"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context9 = ownKeys(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
@@ -20,7 +20,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, ComboBoxField, Item, Text } from '../../index';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
@@ -46,15 +46,23 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     emptySearchText = props.emptySearchText,
     locales = props.locales,
     localeOptions = props.localeOptions,
+    selectedKeyProp = props.selectedKey,
+    onSelectionChangeProp = props.onSelectionChange,
+    inputValueProp = props.inputValue,
+    onInputChangeProp = props.onInputChange,
     otherProps = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(''),
+  var isSelectionControlled = selectedKeyProp !== undefined;
+  var isInputControlled = inputValueProp !== undefined;
+  var _useState = useState(selectedKeyProp || ''),
     _useState2 = _slicedToArray(_useState, 2),
-    search = _useState2[0],
-    setSearch = _useState2[1];
-  var _useState3 = useState(''),
+    internalInputValue = _useState2[0],
+    setInternalInputValue = _useState2[1];
+  var _useState3 = useState(selectedKeyProp || ''),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedKey = _useState4[0],
-    setSelectedKey = _useState4[1];
+    internalSelectedKey = _useState4[0],
+    setInternalSelectedKey = _useState4[1];
+  var inputValue = isInputControlled ? inputValueProp : internalInputValue;
+  var selectedKey = isSelectionControlled ? selectedKeyProp : internalSelectedKey;
   var timeZonePickerRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -88,20 +96,36 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       return a.numericOffset - b.numericOffset;
     });
   }, [additionalTimeZones]);
+
+  // Sync internal input value when controlled selectedKey changes externally
+  useEffect(function () {
+    if (isSelectionControlled) {
+      if (selectedKeyProp) {
+        var item = _findInstanceProperty(allTimeZones).call(allTimeZones, function (tz) {
+          return tz.key === selectedKeyProp;
+        });
+        if (item && !isInputControlled) {
+          setInternalInputValue(item.key);
+        }
+      } else if (!isInputControlled) {
+        setInternalInputValue('');
+      }
+    }
+  }, [selectedKeyProp, isSelectionControlled, isInputControlled, allTimeZones]);
   var filteredItems = useMemo(function () {
     var selectedItem = _findInstanceProperty(allTimeZones).call(allTimeZones, function (tz) {
       return tz.key === selectedKey;
     });
-    var isExactMatch = selectedItem && selectedItem.key === search;
-    if (!search || isExactMatch) {
+    var isExactMatch = selectedItem && selectedItem.key === inputValue;
+    if (!inputValue || isExactMatch) {
       return allTimeZones;
     }
-    var upperSearch = search.toUpperCase();
+    var upperSearch = inputValue.toUpperCase();
     return _filterInstanceProperty(allTimeZones).call(allTimeZones, function (tz) {
       var _context7;
       return _includesInstanceProperty(_context7 = tz.searchTags).call(_context7, upperSearch);
     });
-  }, [search, selectedKey, allTimeZones]);
+  }, [inputValue, selectedKey, allTimeZones]);
   var timeData = useMemo(function () {
     var now = new Date();
     var map = new _Map();
@@ -113,10 +137,16 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     return map;
   }, [allTimeZones, locales, localeOptions]);
   var onInputChange = function onInputChange(value) {
-    setSearch(value);
+    if (!isInputControlled) {
+      setInternalInputValue(value);
+    }
     if (value === '') {
-      setSelectedKey(null);
+      if (!isSelectionControlled) {
+        setInternalSelectedKey(null);
+      }
+      onSelectionChangeProp === null || onSelectionChangeProp === void 0 || onSelectionChangeProp(null);
     }
+    onInputChangeProp === null || onInputChangeProp === void 0 || onInputChangeProp(value);
   };
   var onSelectionChange = function onSelectionChange(key) {
     if (!key) return;
@@ -124,14 +154,20 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       return item.key === key;
     });
     if (selectedItem) {
-      setSearch(selectedItem.key);
-      setSelectedKey(key);
+      if (!isInputControlled) {
+        setInternalInputValue(selectedItem.key);
+      }
+      if (!isSelectionControlled) {
+        setInternalSelectedKey(key);
+      }
+      onSelectionChangeProp === null || onSelectionChangeProp === void 0 || onSelectionChangeProp(key);
+      onInputChangeProp === null || onInputChangeProp === void 0 || onInputChangeProp(selectedItem.key);
     }
   };
   return ___EmotionJSX(ComboBoxField, _extends({}, getPendoID('TimeZonePicker'), otherProps, {
     ref: timeZonePickerRef,
     items: filteredItems,
-    inputValue: search,
+    inputValue: inputValue,
     selectedKey: selectedKey,
     onInputChange: onInputChange,
     onSelectionChange: onSelectionChange,
@@ -179,7 +215,15 @@ TimeZonePicker.propTypes = {
   /** Locale(s) to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_locales) for more info. */
   locales: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   /** Custom options to use when generating the time format. See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#using_options) for more info. */
-  localeOptions: PropTypes.shape({})
+  localeOptions: PropTypes.shape({}),
+  /** The key of the currently selected item (controlled). */
+  selectedKey: PropTypes.string,
+  /** Handler called when the selection changes. Receives the selected key. */
+  onSelectionChange: PropTypes.func,
+  /** The current input value (controlled). */
+  inputValue: PropTypes.string,
+  /** Handler called when the input value changes. */
+  onInputChange: PropTypes.func
 };
 TimeZonePicker.defaultProps = {
   emptySearchText: 'No Search Result',

package/lib/components/TimeZonePicker/TimeZonePicker.stories.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -20,6 +21,19 @@ export var Default = function Default(args) {
     label: "Default Example"
   }));
 };
+export var Controlled = function Controlled(args) {
+  var _React$useState = React.useState('Pacific/Apia GMT+13:00'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedTimeZone = _React$useState2[0],
+    setSelectedTimeZone = _React$useState2[1];
+  return ___EmotionJSX(TimeZonePicker, _extends({}, args, {
+    label: "Controlled Example",
+    selectedKey: selectedTimeZone,
+    onSelectionChange: function onSelectionChange(key) {
+      return setSelectedTimeZone(key);
+    }
+  }));
+};
 export var WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'

package/lib/components/TimeZonePicker/TimeZonePicker.test.js

@@ -10,7 +10,7 @@ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context6; _forEachInstanceProperty(_context6 = ["next", "throw", "return"]).call(_context6, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context7; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty(_context7 = this.tryEntries).call(_context7, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context12; _forEachInstanceProperty(_context12 = ["next", "throw", "return"]).call(_context12, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context13; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty(_context13 = this.tryEntries).call(_context13, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { OverlayProvider, TimeZonePicker } from '../../index';
@@ -161,4 +161,233 @@ test('selecting a timezone updates the input value', /*#__PURE__*/_asyncToGenera
         return _context4.stop();
     }
   }, _callee4);
-})));
+})));
+test('controlled selectedKey sets the input value', function () {
+  var selectedKey = 'America/New York GMT-00:00';
+  getComponent({
+    selectedKey: selectedKey
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue(selectedKey);
+});
+test('controlled onSelectionChange is called when an item is selected', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var onSelectionChange, timezone, gmtAndOffset, expectedKey, input, option;
+  return _regeneratorRuntime().wrap(function _callee5$(_context6) {
+    var _context7;
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        timezone = 'America/New York';
+        gmtAndOffset = getGmtAndOffset(timezone);
+        expectedKey = _concatInstanceProperty(_context7 = "".concat(timezone, " ")).call(_context7, gmtAndOffset.gmt);
+        getComponent({
+          onSelectionChange: onSelectionChange
+        });
+        input = screen.getByRole('combobox');
+        _context6.next = 8;
+        return userEvent.type(input, timezone);
+      case 8:
+        option = screen.getByRole('option', {
+          key: expectedKey
+        });
+        _context6.next = 11;
+        return userEvent.click(option);
+      case 11:
+        expect(onSelectionChange).toHaveBeenCalledWith(expectedKey);
+      case 12:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee5);
+})));
+test('controlled onSelectionChange is called with null when input is cleared', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var onSelectionChange, input;
+  return _regeneratorRuntime().wrap(function _callee6$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        getComponent({
+          onSelectionChange: onSelectionChange,
+          selectedKey: 'America/New York GMT-00:00'
+        });
+        input = screen.getByRole('combobox');
+        _context8.next = 5;
+        return userEvent.clear(input);
+      case 5:
+        expect(onSelectionChange).toHaveBeenCalledWith(null);
+      case 6:
+      case "end":
+        return _context8.stop();
+    }
+  }, _callee6);
+})));
+test('controlled onInputChange is called when typing', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var onInputChange, input;
+  return _regeneratorRuntime().wrap(function _callee7$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
+      case 0:
+        onInputChange = jest.fn();
+        getComponent({
+          onInputChange: onInputChange
+        });
+        input = screen.getByRole('combobox');
+        _context9.next = 5;
+        return userEvent.type(input, 'Pac');
+      case 5:
+        expect(onInputChange).toHaveBeenCalled();
+      case 6:
+      case "end":
+        return _context9.stop();
+    }
+  }, _callee7);
+})));
+test('supports controlled inputValue', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  var onInputChange, input;
+  return _regeneratorRuntime().wrap(function _callee8$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
+      case 0:
+        onInputChange = jest.fn();
+        getComponent({
+          inputValue: 'Pacific',
+          onInputChange: onInputChange
+        });
+        input = screen.getByRole('combobox');
+        expect(input).toHaveValue('Pacific');
+      case 4:
+      case "end":
+        return _context0.stop();
+    }
+  }, _callee8);
+})));
+test('passes isDisabled to ComboBoxField', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toBeDisabled();
+});
+test('passes isRequired to ComboBoxField', function () {
+  getComponent({
+    isRequired: true
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toBeRequired();
+});
+test('passes isReadOnly to ComboBoxField', function () {
+  getComponent({
+    isReadOnly: true
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveAttribute('readonly');
+});
+test('passes placeholder to ComboBoxField', function () {
+  getComponent({
+    placeholder: 'Select a timezone'
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveAttribute('placeholder', 'Select a timezone');
+});
+test('passes helperText to ComboBoxField', function () {
+  getComponent({
+    helperText: 'Choose your preferred timezone'
+  });
+  expect(screen.getByText('Choose your preferred timezone')).toBeInTheDocument();
+});
+test('passes status to ComboBoxField', function () {
+  getComponent({
+    status: 'error',
+    helperText: 'This field is required'
+  });
+  expect(screen.getByText('This field is required')).toBeInTheDocument();
+});
+test('calls onOpenChange when menu opens', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+  var onOpenChange, input;
+  return _regeneratorRuntime().wrap(function _callee9$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
+      case 0:
+        onOpenChange = jest.fn();
+        getComponent({
+          onOpenChange: onOpenChange
+        });
+        input = screen.getByRole('combobox');
+        _context1.next = 5;
+        return userEvent.type(input, 'America');
+      case 5:
+        expect(onOpenChange).toHaveBeenCalledWith(true, 'input');
+      case 6:
+      case "end":
+        return _context1.stop();
+    }
+  }, _callee9);
+})));
+test('clears selection when input is cleared in uncontrolled mode', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
+  var onSelectionChange, onInputChange, timezone, gmtAndOffset, expectedOptionText, input, option;
+  return _regeneratorRuntime().wrap(function _callee0$(_context10) {
+    var _context11;
+    while (1) switch (_context10.prev = _context10.next) {
+      case 0:
+        onSelectionChange = jest.fn();
+        onInputChange = jest.fn();
+        timezone = 'America/New York';
+        gmtAndOffset = getGmtAndOffset(timezone);
+        expectedOptionText = _concatInstanceProperty(_context11 = "".concat(timezone, " ")).call(_context11, gmtAndOffset.gmt);
+        getComponent({
+          onSelectionChange: onSelectionChange,
+          onInputChange: onInputChange
+        });
+        input = screen.getByRole('combobox');
+        _context10.next = 9;
+        return userEvent.type(input, timezone);
+      case 9:
+        option = screen.getByRole('option', {
+          key: expectedOptionText
+        });
+        _context10.next = 12;
+        return userEvent.click(option);
+      case 12:
+        expect(onSelectionChange).toHaveBeenCalledWith(expectedOptionText);
+        _context10.next = 15;
+        return userEvent.clear(input);
+      case 15:
+        expect(onInputChange).toHaveBeenCalledWith('');
+      case 16:
+      case "end":
+        return _context10.stop();
+    }
+  }, _callee0);
+})));
+test('displays pre-selected value on initial render with controlled selectedKey', function () {
+  var timezone = 'America/New York';
+  var gmtAndOffset = getGmtAndOffset(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    selectedKey: expectedOptionText
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});
+test('displays pre-selected value with additionalTimeZones', function () {
+  var timezone = 'Africa/Juba';
+  var gmtAndOffset = getGmtAndOffset(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    additionalTimeZones: {
+      '(GMT+02:00) Africa/Juba': testTimeZoneJuba
+    },
+    selectedKey: expectedOptionText
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});
+test('displays pre-selected value with controlled inputValue', function () {
+  var timezone = 'America/New York';
+  var gmtAndOffset = getGmtAndOffset(timezone);
+  var expectedOptionText = "".concat(timezone, " ").concat(gmtAndOffset.gmt);
+  getComponent({
+    selectedKey: expectedOptionText,
+    inputValue: expectedOptionText,
+    onInputChange: jest.fn()
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue(expectedOptionText);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.178.0-alpha.0",
+  "version": "2.178.2-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",