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

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

@@ -0,0 +1,123 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.usCities = exports["default"] = void 0;
+var _default = {
+  '(GMT-11:00) Pago Pago': 'Pacific/Pago_Pago',
+  '(GMT-10:00) Hawaii Time': 'Pacific/Honolulu',
+  '(GMT-08:00) Pacific Time': 'America/Los_Angeles',
+  '(GMT-08:00) Pacific Time - Tijuana': 'America/Tijuana',
+  '(GMT-07:00) Mountain Time': 'America/Denver',
+  '(GMT-07:00) Mountain Time - Arizona': 'America/Phoenix',
+  '(GMT-07:00) Mountain Time - Chihuahua, Mazatlan': 'America/Mazatlan',
+  '(GMT-06:00) Central Time': 'America/Chicago',
+  '(GMT-06:00) Central Time - Mexico City': 'America/Mexico_City',
+  '(GMT-06:00) Central Time - Regina': 'America/Regina',
+  '(GMT-06:00) Guatemala': 'America/Guatemala',
+  '(GMT-05:00) Bogota': 'America/Bogota',
+  '(GMT-05:00) Eastern Time': 'America/New_York',
+  '(GMT-05:00) Lima': 'America/Lima',
+  '(GMT-04:30) Caracas': 'America/Caracas',
+  '(GMT-04:00) Atlantic Time - Halifax': 'America/Halifax',
+  '(GMT-04:00) Guyana': 'America/Guyana',
+  '(GMT-04:00) La Paz': 'America/La_Paz',
+  '(GMT-03:00) Buenos Aires': 'America/Argentina/Buenos_Aires',
+  '(GMT-03:00) Godthab': 'America/Godthab',
+  '(GMT-03:00) Montevideo': 'America/Montevideo',
+  '(GMT-03:30) Newfoundland Time - St. Johns': 'America/St_Johns',
+  '(GMT-03:00) Santiago': 'America/Santiago',
+  '(GMT-02:00) Sao Paulo': 'America/Sao_Paulo',
+  '(GMT-02:00) South Georgia': 'Atlantic/South_Georgia',
+  '(GMT-01:00) Azores': 'Atlantic/Azores',
+  '(GMT-01:00) Cape Verde': 'Atlantic/Cape_Verde',
+  '(GMT+00:00) Casablanca': 'Africa/Casablanca',
+  '(GMT+00:00) Dublin': 'Europe/Dublin',
+  '(GMT+00:00) Lisbon': 'Europe/Lisbon',
+  '(GMT+00:00) London': 'Europe/London',
+  '(GMT+00:00) Monrovia': 'Africa/Monrovia',
+  '(GMT+01:00) Algiers': 'Africa/Algiers',
+  '(GMT+01:00) Amsterdam': 'Europe/Amsterdam',
+  '(GMT+01:00) Berlin': 'Europe/Berlin',
+  '(GMT+01:00) Brussels': 'Europe/Brussels',
+  '(GMT+01:00) Budapest': 'Europe/Budapest',
+  '(GMT+01:00) Central European Time - Belgrade': 'Europe/Belgrade',
+  '(GMT+01:00) Central European Time - Prague': 'Europe/Prague',
+  '(GMT+01:00) Copenhagen': 'Europe/Copenhagen',
+  '(GMT+01:00) Madrid': 'Europe/Madrid',
+  '(GMT+01:00) Paris': 'Europe/Paris',
+  '(GMT+01:00) Rome': 'Europe/Rome',
+  '(GMT+01:00) Stockholm': 'Europe/Stockholm',
+  '(GMT+01:00) Vienna': 'Europe/Vienna',
+  '(GMT+01:00) Warsaw': 'Europe/Warsaw',
+  '(GMT+02:00) Athens': 'Europe/Athens',
+  '(GMT+02:00) Bucharest': 'Europe/Bucharest',
+  '(GMT+02:00) Cairo': 'Africa/Cairo',
+  '(GMT+02:00) Jerusalem': 'Asia/Jerusalem',
+  '(GMT+02:00) Johannesburg': 'Africa/Johannesburg',
+  '(GMT+02:00) Helsinki': 'Europe/Helsinki',
+  '(GMT+02:00) Kiev': 'Europe/Kiev',
+  '(GMT+02:00) Moscow-01 - Kaliningrad': 'Europe/Kaliningrad',
+  '(GMT+02:00) Riga': 'Europe/Riga',
+  '(GMT+02:00) Sofia': 'Europe/Sofia',
+  '(GMT+02:00) Tallinn': 'Europe/Tallinn',
+  '(GMT+02:00) Vilnius': 'Europe/Vilnius',
+  '(GMT+03:00) Istanbul': 'Europe/Istanbul',
+  '(GMT+03:00) Baghdad': 'Asia/Baghdad',
+  '(GMT+03:00) Nairobi': 'Africa/Nairobi',
+  '(GMT+03:00) Minsk': 'Europe/Minsk',
+  '(GMT+03:00) Riyadh': 'Asia/Riyadh',
+  '(GMT+03:00) Moscow+00 - Moscow': 'Europe/Moscow',
+  '(GMT+03:30) Tehran': 'Asia/Tehran',
+  '(GMT+04:00) Baku': 'Asia/Baku',
+  '(GMT+04:00) Moscow+01 - Samara': 'Europe/Samara',
+  '(GMT+04:00) Tbilisi': 'Asia/Tbilisi',
+  '(GMT+04:00) Yerevan': 'Asia/Yerevan',
+  '(GMT+04:30) Kabul': 'Asia/Kabul',
+  '(GMT+05:00) Karachi': 'Asia/Karachi',
+  '(GMT+05:00) Moscow+02 - Yekaterinburg': 'Asia/Yekaterinburg',
+  '(GMT+05:00) Tashkent': 'Asia/Tashkent',
+  '(GMT+05:30) Colombo': 'Asia/Colombo',
+  '(GMT+06:00) Almaty': 'Asia/Almaty',
+  '(GMT+06:00) Dhaka': 'Asia/Dhaka',
+  '(GMT+06:30) Rangoon': 'Asia/Rangoon',
+  '(GMT+07:00) Bangkok': 'Asia/Bangkok',
+  '(GMT+07:00) Jakarta': 'Asia/Jakarta',
+  '(GMT+07:00) Moscow+04 - Krasnoyarsk': 'Asia/Krasnoyarsk',
+  '(GMT+08:00) China Time - Beijing': 'Asia/Shanghai',
+  '(GMT+08:00) Hong Kong': 'Asia/Hong_Kong',
+  '(GMT+08:00) Kuala Lumpur': 'Asia/Kuala_Lumpur',
+  '(GMT+08:00) Moscow+05 - Irkutsk': 'Asia/Irkutsk',
+  '(GMT+08:00) Singapore': 'Asia/Singapore',
+  '(GMT+08:00) Taipei': 'Asia/Taipei',
+  '(GMT+08:00) Ulaanbaatar': 'Asia/Ulaanbaatar',
+  '(GMT+08:00) Western Time - Perth': 'Australia/Perth',
+  '(GMT+09:00) Moscow+06 - Yakutsk': 'Asia/Yakutsk',
+  '(GMT+09:00) Seoul': 'Asia/Seoul',
+  '(GMT+09:00) Tokyo': 'Asia/Tokyo',
+  '(GMT+09:30) Central Time - Darwin': 'Australia/Darwin',
+  '(GMT+10:00) Eastern Time - Brisbane': 'Australia/Brisbane',
+  '(GMT+10:00) Guam': 'Pacific/Guam',
+  '(GMT+10:00) Moscow+07 - Magadan': 'Asia/Magadan',
+  '(GMT+10:00) Moscow+07 - Yuzhno-Sakhalinsk': 'Asia/Vladivostok',
+  '(GMT+10:00) Port Moresby': 'Pacific/Port_Moresby',
+  '(GMT+10:30) Central Time - Adelaide': 'Australia/Adelaide',
+  '(GMT+11:00) Eastern Time - Hobart': 'Australia/Hobart',
+  '(GMT+11:00) Eastern Time - Melbourne, Sydney': 'Australia/Sydney',
+  '(GMT+11:00) Guadalcanal': 'Pacific/Guadalcanal',
+  '(GMT+11:00) Noumea': 'Pacific/Noumea',
+  '(GMT+12:00) Majuro': 'Pacific/Majuro',
+  '(GMT+12:00) Moscow+09 - Petropavlovsk-Kamchatskiy': 'Asia/Kamchatka',
+  '(GMT+13:00) Auckland': 'Pacific/Auckland',
+  '(GMT+13:00) Fakaofo': 'Pacific/Fakaofo',
+  '(GMT+13:00) Fiji': 'Pacific/Fiji',
+  '(GMT+13:00) Tongatapu': 'Pacific/Tongatapu',
+  '(GMT+14:00) Apia': 'Pacific/Apia'
+};
+exports["default"] = _default;
+var usCities = ['Los Angeles', 'Denver', 'Phoenix', 'Chicago', 'New York'];
+exports.usCities = usCities;

package/lib/cjs/index.js

@@ -91,6 +91,7 @@ var _exportNames = {
   TextField: true,
   TextArea: true,
   TextAreaField: true,
+  TimeZonePicker: true,
   TooltipTrigger: true,
   Item: true,
   Section: true,
@@ -618,6 +619,13 @@ _Object$defineProperty(exports, "TextAreaField", {
   }
 });
 
+_Object$defineProperty(exports, "TimeZonePicker", {
+  enumerable: true,
+  get: function get() {
+    return _TimeZonePicker["default"];
+  }
+});
+
 _Object$defineProperty(exports, "TooltipTrigger", {
   enumerable: true,
   get: function get() {
@@ -1595,6 +1603,8 @@ _forEachInstanceProperty(_context65 = _Object$keys(_TextAreaField)).call(_contex
   });
 });
 
+var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicker"));
+
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
 
 _forEachInstanceProperty(_context66 = _Object$keys(_TooltipTrigger)).call(_context66, function (key) {

package/lib/cjs/styles/variants/text.js

@@ -195,6 +195,33 @@ var maskedValue = {
     fontWeight: 700
   }
 };
+var timeZone = {
+  title: {
+    color: 'neutral.10',
+    fontSize: 'md',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  subTitle: {
+    color: 'neutral.40',
+    fontSize: 'sm',
+    ml: 10,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  time: {
+    color: 'neutral.10',
+    fontSize: 'sm',
+    fontWeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  }
+};
 var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -254,7 +281,8 @@ var text = {
   label: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     color: 'text.secondary',
-    fontFamily: 'standard'
+    fontFamily: 'standard',
+    fontWeight: 1
   }),
   listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
@@ -307,6 +335,7 @@ var text = {
     color: 'text.primary',
     fontFamily: 'standard'
   }),
-  tooltipContent: tooltipContent
+  tooltipContent: tooltipContent,
+  timeZone: timeZone
 };
 exports.text = text;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -73,7 +73,8 @@ var ComboBoxField = /*#__PURE__*/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,
@@ -130,7 +131,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
-    defaultFilter: contains
+    defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
   }));
 
   var _useComboBox = useComboBox(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
@@ -183,7 +184,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (inputRef.current) {
       setMenuWidth(inputRef.current.offsetWidth);
     }
-  }, [inputRef, setMenuWidth, state.isOpen]);
+  }, [inputRef, setMenuWidth]);
   useResizeObserver({
     ref: inputRef,
     onResize: onResize
@@ -354,6 +355,14 @@ ComboBoxField.propTypes = {
    * `(e: KeyboardEvent) => void`
    */
   onKeyUp: PropTypes.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.func,
   // /** Props object that is spread directly into the ScrollBox element. */
 
   /** @ignore */

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

@@ -317,7 +317,7 @@ export var ControlledFiltering = function ControlledFiltering() {
     return _filterInstanceProperty(items).call(items, function (item) {
       return startsWith(item.name, filterValue);
     });
-  }, [items, filterValue]);
+  }, [startsWith, filterValue]);
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label"
   }, actions, {
@@ -441,4 +441,20 @@ export var WithCustomHeight = function WithCustomHeight() {
       key: item.name
     }, item.name);
   }));
+};
+export var CustomDefaultFilter = function CustomDefaultFilter() {
+  var _useFilter2 = useFilter({
+    sensitivity: 'base'
+  }),
+      startsWith = _startsWithInstanceProperty(_useFilter2);
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: animals,
+    defaultFilter: startsWith
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
 };

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

@@ -58,7 +58,7 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
     return _filterInstanceProperty(items).call(items, function (item) {
       return startsWith(item.name, filterValue);
     });
-  }, [items, filterValue]);
+  }, [startsWith, filterValue]);
   return ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, {
     items: filteredItems,
     inputValue: filterValue,
@@ -356,6 +356,44 @@ test('should be able to use controlled filtering', /*#__PURE__*/_asyncToGenerato
     }
   }, _callee);
 })));
+test('should be able to use custom default filtering', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var options, defaultFilter, input;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          defaultFilter = function defaultFilter(option, inputValue) {
+            return _startsWithInstanceProperty(option).call(option, inputValue);
+          };
+
+          getComponent({
+            defaultFilter: defaultFilter
+          });
+          input = screen.queryByRole('combobox'); // Should list all without filterable input
+
+          userEvent.type(input, '{arrowdown}');
+          _context2.next = 6;
+          return screen.findAllByRole('option');
+
+        case 6:
+          options = _context2.sent;
+          expect(options).toHaveLength(items.length); // Should only list the second option
+
+          userEvent.type(input, 'K');
+          _context2.next = 11;
+          return 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({
@@ -674,26 +712,26 @@ test('onSelectionChange works properly with custom value', function () {
   userEvent.type(input, '{selectall}{backspace}{enter}');
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
   var _getComponent6, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+  return _regeneratorRuntime.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 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/components/FieldHelperText/FieldHelperText.js

@@ -25,6 +25,7 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Text, _extends({
     ref: ref,
+    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -0,0 +1,230 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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; _forEachInstanceProperty(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import defaultTimezones, { usCities } from './timezones.js';
+import { Box, ComboBoxField, Item, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var createSearchTags = function createSearchTags(_ref) {
+  var _context, _context2, _context3, _context4;
+
+  var gmt = _ref.gmt,
+      gmtLabel = _ref.gmtLabel,
+      timeZone = _ref.timeZone;
+  var additionalTags = '';
+  var americaTimeZone = _includesInstanceProperty(timeZone).call(timeZone, 'America') && timeZone.substring(8);
+
+  if (_includesInstanceProperty(usCities).call(usCities, americaTimeZone)) {
+    additionalTags = "US ".concat(americaTimeZone);
+  }
+
+  return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_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__*/forwardRef(function (props, ref) {
+  var additionalTimeZones = props.additionalTimeZones,
+      emptySearchText = props.emptySearchText,
+      locales = props.locales,
+      localeOptions = props.localeOptions,
+      otherProps = _objectWithoutProperties(props, ["additionalTimeZones", "emptySearchText", "locales", "localeOptions"]);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      timeUpdate = _useState4[0],
+      setTimeUpdate = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      timeZones = _useState6[0],
+      setTimeZones = _useState6[1];
+
+  var extendedTimeZonesList = additionalTimeZones ? _objectSpread(_objectSpread({}, defaultTimezones), additionalTimeZones) : defaultTimezones;
+  var timeZonePickerRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return timeZonePickerRef.current;
+  });
+  useEffect(function () {
+    if (timeUpdate) {
+      var createTimeZoneTimes = function createTimeZoneTimes() {
+        var _context5;
+
+        return _mapInstanceProperty(_context5 = _Object$entries(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 = useCallback(function (timeZonesList) {
+    return _filterInstanceProperty(timeZonesList).call(timeZonesList, function (_ref3) {
+      var _context6;
+
+      var searchTags = _ref3.searchTags;
+      return _indexOfInstanceProperty(_context6 = searchTags.toUpperCase()).call(_context6, search.toUpperCase()) > -1;
+    });
+  }, [search]);
+  var filteredTimezones = useMemo(function () {
+    return filterTimezones(timeZones);
+  }, [filterTimezones, timeZones]);
+
+  var sortByGMT = function sortByGMT(a, b) {
+    var aNum = _parseFloat(a.gmt.split('GMT')[1].split(':')[0]);
+
+    var bNum = _parseFloat(b.gmt.split('GMT')[1].split(')')[0]);
+
+    return aNum - bNum;
+  };
+
+  var items = useMemo(function () {
+    var _context7;
+
+    if (filteredTimezones.length === 0) {
+      return ___EmotionJSX(Item, {
+        key: emptySearchText
+      }, emptySearchText);
+    }
+
+    return _mapInstanceProperty(_context7 = _sortInstanceProperty(filteredTimezones).call(filteredTimezones, sortByGMT)).call(_context7, function (_ref4) {
+      var gmt = _ref4.gmt,
+          time = _ref4.time,
+          timeZone = _ref4.timeZone;
+      return ___EmotionJSX(Item, {
+        key: timeZone,
+        "data-id": timeZone,
+        textValue: timeZone
+      }, ___EmotionJSX(Box, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%"
+      }, ___EmotionJSX(Box, {
+        flexDirection: "row"
+      }, ___EmotionJSX(Text, {
+        variant: "timeZone.title"
+      }, timeZone), ___EmotionJSX(Text, {
+        variant: "timeZone.subTitle"
+      }, gmt)), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+        variant: "timeZone.time"
+      }, time))));
+    });
+  }, [emptySearchText, filteredTimezones]);
+  var comboBoxFieldProps = 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 ___EmotionJSX(ComboBoxField, _extends({}, 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.shape({}),
+
+  /** Text that will be shown if no search results are found. */
+  emptySearchText: PropTypes.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.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({})
+};
+TimeZonePicker.defaultProps = {
+  emptySearchText: 'No Search Result',
+  locales: [],
+  localeOptions: {
+    hour12: true,
+    hour: '2-digit',
+    minute: '2-digit'
+  }
+};
+export default TimeZonePicker;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import TimeZonePicker from './TimeZonePicker';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/TimeZonePicker',
+  component: TimeZonePicker
+};
+export var Default = function Default() {
+  return ___EmotionJSX(TimeZonePicker, {
+    label: "Default Example"
+  });
+};
+export var WithCustomTimeZone = function WithCustomTimeZone() {
+  var customTimeZone = {
+    '(GMT+02:00) Africa/Juba': 'Africa/Juba'
+  };
+  return ___EmotionJSX(TimeZonePicker, {
+    additionalTimeZones: customTimeZone,
+    label: "With Custom Time Zone (Africa/Juba)"
+  });
+};