@pingux/astro 1.5.1-alpha.1 → 1.6.0-alpha.2

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -114,7 +114,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
-      scrollBoxProps = props.scrollBoxProps;
+      scrollBoxProps = props.scrollBoxProps,
+      defaultFilter = props.defaultFilter;
   var comboBoxOptions = {
     children: children,
     isRequired: isRequired,
@@ -171,7 +172,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
-    defaultFilter: contains
+    defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
   }));
 
   var _useComboBox = (0, _combobox.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
@@ -224,7 +225,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (inputRef.current) {
       setMenuWidth(inputRef.current.offsetWidth);
     }
-  }, [inputRef, setMenuWidth, state.isOpen]);
+  }, [inputRef, setMenuWidth]);
   (0, _utils.useResizeObserver)({
     ref: inputRef,
     onResize: onResize
@@ -394,6 +395,14 @@ ComboBoxField.propTypes = {
    * `(e: KeyboardEvent) => void`
    */
   onKeyUp: _propTypes["default"].func,
+
+  /**
+   * Handler that determines the default filtering for items. If undefined, `contains` from
+   * [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) is used.
+   *
+   * `(option: string, inputValue: string) => boolean`
+   */
+  defaultFilter: _propTypes["default"].func,
   // /** Props object that is spread directly into the ScrollBox element. */
 
   /** @ignore */

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledWithCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
+exports.CustomDefaultFilter = exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledWithCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
@@ -367,7 +367,7 @@ var ControlledFiltering = function ControlledFiltering() {
     return (0, _filter["default"])(items).call(items, function (item) {
       return startsWith(item.name, filterValue);
     });
-  }, [items, filterValue]);
+  }, [startsWith, filterValue]);
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label"
   }, actions, {
@@ -520,4 +520,23 @@ var WithCustomHeight = function WithCustomHeight() {
   }));
 };
 
-exports.WithCustomHeight = WithCustomHeight;
+exports.WithCustomHeight = WithCustomHeight;
+
+var CustomDefaultFilter = function CustomDefaultFilter() {
+  var _useFilter2 = (0, _i18n.useFilter)({
+    sensitivity: 'base'
+  }),
+      startsWith = (0, _startsWith["default"])(_useFilter2);
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: animals,
+    defaultFilter: startsWith
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.CustomDefaultFilter = CustomDefaultFilter;

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

@@ -79,7 +79,7 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
     return (0, _filter["default"])(items).call(items, function (item) {
       return startsWith(item.name, filterValue);
     });
-  }, [items, filterValue]);
+  }, [startsWith, filterValue]);
   return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
     items: filteredItems,
     inputValue: filterValue,
@@ -450,6 +450,46 @@ test('should be able to use controlled filtering', /*#__PURE__*/(0, _asyncToGene
     }
   }, _callee);
 })));
+test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var options, defaultFilter, input;
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          defaultFilter = function defaultFilter(option, inputValue) {
+            return (0, _startsWith["default"])(option).call(option, inputValue);
+          };
+
+          getComponent({
+            defaultFilter: defaultFilter
+          });
+          input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
+
+          _userEvent["default"].type(input, '{arrowdown}');
+
+          _context2.next = 6;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 6:
+          options = _context2.sent;
+          expect(options).toHaveLength(items.length); // Should only list the second option
+
+          _userEvent["default"].type(input, 'K');
+
+          _context2.next = 11;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 11:
+          options = _context2.sent;
+          expect(options[0]).toHaveTextContent(items[1].name);
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
 describe('loadingState', function () {
   it('combobox should not render a loader if menu is not open', function () {
     var _getComponent = getComponent({
@@ -816,26 +856,26 @@ test('onSelectionChange works properly with custom value', function () {
 
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
-test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var _getComponent6, container, results;
 
-  return _regenerator["default"].wrap(function _callee2$(_context2) {
+  return _regenerator["default"].wrap(function _callee3$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context2.next = 4;
+          _context3.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context2.sent;
+          results = _context3.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
-  }, _callee2);
+  }, _callee3);
 })));

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -48,6 +48,7 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
+    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

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

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _timezones = _interopRequireWildcard(require("./timezones.js"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; (0, _forEach["default"])(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context9; (0, _forEach["default"])(_context9 = ownKeys(Object(source))).call(_context9, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var createSearchTags = function createSearchTags(_ref) {
+  var _context, _context2, _context3, _context4;
+
+  var gmt = _ref.gmt,
+      gmtLabel = _ref.gmtLabel,
+      timeZone = _ref.timeZone;
+  var additionalTags = '';
+  var americaTimeZone = (0, _includes["default"])(timeZone).call(timeZone, 'America') && timeZone.substring(8);
+
+  if ((0, _includes["default"])(_timezones.usCities).call(_timezones.usCities, americaTimeZone)) {
+    additionalTags = "US ".concat(americaTimeZone);
+  }
+
+  return (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "".concat(gmt, " ")).call(_context4, gmtLabel, " ")).call(_context3, timeZone, " ")).call(_context2, timeZone === null || timeZone === void 0 ? void 0 : timeZone.replace(/_/g, ' '), " ")).call(_context, additionalTags);
+};
+
+var getLocaleTime = function getLocaleTime(_ref2) {
+  var timeZone = _ref2.timeZone,
+      locales = _ref2.locales,
+      localeOptions = _ref2.localeOptions;
+  var date = new Date();
+  return date.toLocaleTimeString(locales, _objectSpread({
+    timeZone: timeZone
+  }, localeOptions));
+};
+/**
+ *  Component allows users to choose a timezone from the list.
+ *  You can checkout the default timezones list [here](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json).
+ *
+ *  Utilizes ComboBoxField component. You can use the same props as with
+ *  the ComboBoxField - they will be spread into it.
+ */
+
+
+var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var additionalTimeZones = props.additionalTimeZones,
+      emptySearchText = props.emptySearchText,
+      locales = props.locales,
+      localeOptions = props.localeOptions,
+      otherProps = (0, _objectWithoutProperties2["default"])(props, ["additionalTimeZones", "emptySearchText", "locales", "localeOptions"]);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      timeUpdate = _useState4[0],
+      setTimeUpdate = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      timeZones = _useState6[0],
+      setTimeZones = _useState6[1];
+
+  var extendedTimeZonesList = additionalTimeZones ? _objectSpread(_objectSpread({}, _timezones["default"]), additionalTimeZones) : _timezones["default"];
+  var timeZonePickerRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return timeZonePickerRef.current;
+  });
+  (0, _react.useEffect)(function () {
+    if (timeUpdate) {
+      var createTimeZoneTimes = function createTimeZoneTimes() {
+        var _context5;
+
+        return (0, _map["default"])(_context5 = (0, _entries["default"])(extendedTimeZonesList)).call(_context5, function (item) {
+          var _item$;
+
+          var gmt = item[0].substring(1, 10);
+          var gmtLabel = item[0].substring(12);
+          var timeZone = (_item$ = item[1]) === null || _item$ === void 0 ? void 0 : _item$.replace(/_/g, ' ');
+          var time = getLocaleTime({
+            timeZone: item[1],
+            locales: locales,
+            localeOptions: localeOptions
+          });
+          var searchTags = createSearchTags({
+            gmt: gmt,
+            gmtLabel: gmtLabel,
+            timeZone: timeZone
+          });
+          return {
+            gmt: gmt,
+            timeZone: timeZone,
+            time: time,
+            searchTags: searchTags
+          };
+        });
+      };
+
+      setTimeZones(createTimeZoneTimes());
+      setTimeUpdate(false);
+    }
+  }, [extendedTimeZonesList, locales, localeOptions, timeUpdate]);
+  var filterTimezones = (0, _react.useCallback)(function (timeZonesList) {
+    return (0, _filter["default"])(timeZonesList).call(timeZonesList, function (_ref3) {
+      var _context6;
+
+      var searchTags = _ref3.searchTags;
+      return (0, _indexOf["default"])(_context6 = searchTags.toUpperCase()).call(_context6, search.toUpperCase()) > -1;
+    });
+  }, [search]);
+  var filteredTimezones = (0, _react.useMemo)(function () {
+    return filterTimezones(timeZones);
+  }, [filterTimezones, timeZones]);
+
+  var sortByGMT = function sortByGMT(a, b) {
+    var aNum = (0, _parseFloat2["default"])(a.gmt.split('GMT')[1].split(':')[0]);
+    var bNum = (0, _parseFloat2["default"])(b.gmt.split('GMT')[1].split(')')[0]);
+    return aNum - bNum;
+  };
+
+  var items = (0, _react.useMemo)(function () {
+    var _context7;
+
+    if (filteredTimezones.length === 0) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: emptySearchText
+      }, emptySearchText);
+    }
+
+    return (0, _map["default"])(_context7 = (0, _sort["default"])(filteredTimezones).call(filteredTimezones, sortByGMT)).call(_context7, function (_ref4) {
+      var gmt = _ref4.gmt,
+          time = _ref4.time,
+          timeZone = _ref4.timeZone;
+      return (0, _react2.jsx)(_index.Item, {
+        key: timeZone,
+        "data-id": timeZone,
+        textValue: timeZone
+      }, (0, _react2.jsx)(_index.Box, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%"
+      }, (0, _react2.jsx)(_index.Box, {
+        flexDirection: "row"
+      }, (0, _react2.jsx)(_index.Text, {
+        variant: "timeZone.title"
+      }, timeZone), (0, _react2.jsx)(_index.Text, {
+        variant: "timeZone.subTitle"
+      }, gmt)), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+        variant: "timeZone.time"
+      }, time))));
+    });
+  }, [emptySearchText, filteredTimezones]);
+  var comboBoxFieldProps = (0, _react.useMemo)(function () {
+    return _objectSpread({
+      controlProps: {
+        sx: {
+          width: 400,
+          fontSize: 'md'
+        }
+      },
+      onInputChange: setSearch,
+      items: filteredTimezones,
+      ref: timeZonePickerRef,
+      onOpenChange: function onOpenChange(isOpen) {
+        return setTimeUpdate(isOpen);
+      },
+      disabledKeys: [{
+        emptySearchText: emptySearchText
+      }]
+    }, otherProps);
+  }, [emptySearchText, filteredTimezones, otherProps]);
+  return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, comboBoxFieldProps, {
+    disabledKeys: [emptySearchText]
+  }), items);
+});
+TimeZonePicker.propTypes = {
+  /**
+   * An object representing additional time zones to merge with the [default list](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json).
+   * The key may be customized, but the value should be a timezone string from the list in the [Time Zone Database](https://www.iana.org/time-zones).
+   *
+   * e.g. `{'(GMT+02:00) Africa/Juba': 'Africa/Juba'}`
+   */
+  additionalTimeZones: _propTypes["default"].shape({}),
+
+  /** Text that will be shown if no search results are found. */
+  emptySearchText: _propTypes["default"].string,
+
+  /** 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({})
+};
+TimeZonePicker.defaultProps = {
+  emptySearchText: 'No Search Result',
+  locales: [],
+  localeOptions: {
+    hour12: true,
+    hour: '2-digit',
+    minute: '2-digit'
+  }
+};
+var _default = TimeZonePicker;
+exports["default"] = _default;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.WithCustomTimeZone = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TimeZonePicker = _interopRequireDefault(require("./TimeZonePicker"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/TimeZonePicker',
+  component: _TimeZonePicker["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_TimeZonePicker["default"], {
+    label: "Default Example"
+  });
+};
+
+exports.Default = Default;
+
+var WithCustomTimeZone = function WithCustomTimeZone() {
+  var customTimeZone = {
+    '(GMT+02:00) Africa/Juba': 'Africa/Juba'
+  };
+  return (0, _react2.jsx)(_TimeZonePicker["default"], {
+    additionalTimeZones: customTimeZone,
+    label: "With Custom Time Zone (Africa/Juba)"
+  });
+};
+
+exports.WithCustomTimeZone = WithCustomTimeZone;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var testTimeZoneJuba = 'Africa/Juba';
+var testTimeZoneApia = 'Pacific/Apia';
+var defaultProps = {
+  label: 'Test Label'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.TimeZonePicker, (0, _extends2["default"])({}, defaultProps, props))));
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('renders ComboBoxField component', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var label = _testWrapper.screen.getByText(defaultProps.label);
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(input).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByLabelText(defaultProps.label)).toEqual([input, button]);
+  expect(label).toBeInTheDocument();
+  expect(label).toHaveTextContent(defaultProps.label);
+  expect(button).toBeInTheDocument();
+});
+test('search is working correctly', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  _userEvent["default"].type(input, testTimeZoneApia);
+
+  expect(_testWrapper.screen.getByText(testTimeZoneApia)).toBeInTheDocument();
+});
+test('custom timezone can be added', function () {
+  getComponent({
+    additionalTimeZones: {
+      '(GMT+02:00) Africa/Juba': testTimeZoneJuba
+    }
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  _userEvent["default"].type(input, testTimeZoneJuba);
+
+  expect(_testWrapper.screen.getByText(testTimeZoneJuba)).toBeInTheDocument();
+});
+test('shows custom empty search state text when no items are found', function () {
+  var testEmptyText = 'test empty text';
+  getComponent({
+    emptySearchText: testEmptyText
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  _userEvent["default"].type(input, 'awdasrf213');
+
+  expect(_testWrapper.screen.getByText(testEmptyText)).toBeInTheDocument();
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TimeZonePicker["default"];
+  }
+});
+
+var _TimeZonePicker = _interopRequireDefault(require("./TimeZonePicker"));