@pingux/astro 1.7.0 → 1.8.0-alpha.2

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -2,27 +2,72 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+
 var _index = require("../../index");
 
+var _AccordionGridContext = require("../../context/AccordionGridContext");
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var NavBarItemHeader = function NavBarItemHeader(props) {
+  var _state$selectionManag, _context;
+
   var item = props.item;
-  var icon = item.icon;
+  var icon = item.icon,
+      key = item.key,
+      className = item.className;
+
+  var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
+      state = _useContext.state;
+
+  var navState = (0, _react.useContext)(_NavBarContext.NavBarContext);
+  var isExpanded = (_state$selectionManag = state.selectionManager.selectedKeys) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.has(key);
+  var array = (0, _map["default"])(_context = item.children).call(_context, function (i) {
+    return i.key;
+  });
+  var childSelected = (0, _includes["default"])(array).call(array, navState.selectedKey);
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: childSelected && !isExpanded
+  }),
+      classNames = _useStatusClasses.classNames;
+
   return (0, _react2.jsx)(_index.Box, {
     variant: "navBar.itemHeaderContainer",
+    className: classNames,
     isRow: true
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
@@ -34,13 +79,25 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }), (0, _react2.jsx)(_index.Text, {
     variant: "navBarHeaderText"
-  }, props.item.heading));
+  }, props.item.heading), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    size: 20
+  })));
 };
 
 NavBarItemHeader.propTypes = {
   item: _propTypes["default"].shape({
     heading: _propTypes["default"].string,
-    icon: _propTypes["default"].elementType
+    icon: _propTypes["default"].elementType,
+    className: _propTypes["default"].string,
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    key: _propTypes["default"].string
   })
 };
 var _default = NavBarItemHeader;

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -58,7 +58,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
       onPressCallback = props.onPress,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _NavBarContext.useNavBarContext)();
-  var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
+  var isSelected = (0, _includes["default"])(_context = state.selectedKey).call(_context, key);
 
   var _useNavBarPress = (0, _hooks.useNavBarPress)({
     key: key,

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -42,7 +42,8 @@ var NavBarSection = function NavBarSection(props) {
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
       headerProps: {
-        variant: 'accordion.accordionGridHeaderNav'
+        variant: 'accordion.accordionGridHeaderNav',
+        hasCaret: false
       },
       bodyProps: {
         variant: 'navBar.sectionBody'
@@ -57,7 +58,9 @@ var NavBarSection = function NavBarSection(props) {
     sx: {
       pl: '15px',
       pr: '15px',
-      my: '10px'
+      my: '10px',
+      mt: '15px',
+      mb: '15px'
     }
   }, (0, _react2.jsx)(_index.Separator, {
     variant: "separator.navBarSeparator"

package/lib/cjs/components/NumberField/NumberField.js

@@ -30,6 +30,8 @@ exports["default"] = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -66,7 +68,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Number fields allow users to enter a number, and increment or
@@ -146,6 +148,32 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onBlur: onInputBlur
     });
   }, [fieldControlProps, onInputBlur, onInputFocus]);
+
+  var onInputChange = function onInputChange(e) {
+    var _context;
+
+    var minValue = props.minValue;
+    var trimmedInputValue = (0, _trim["default"])(_context = e.target.value).call(_context);
+
+    var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+      target: _objectSpread(_objectSpread({}, e.target), {}, {
+        value: trimmedInputValue
+      })
+    });
+
+    if (!trimmedInputValue && typeof minValue !== 'undefined') {
+      var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
+        target: _objectSpread(_objectSpread({}, e.target), {}, {
+          value: minValue.toString()
+        })
+      });
+
+      inputProps.onChange(minValueEvent);
+    } else {
+      inputProps.onChange(trimmedValueEvent);
+    }
+  };
+
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, (0, _react2.jsx)(_index.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_index.Box, {
@@ -156,7 +184,9 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
+    onChange: onInputChange
+  })), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/cjs/components/Text/Text.js

@@ -31,7 +31,11 @@ var ExtendedText = ( /*#__PURE__*/0, _base["default"])(_themeUi.Text, process.en
 } : {
   target: "eifd86o0",
   label: "ExtendedText"
-})(_styledSystem.layout, _styledSystem.flexbox, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3ggfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94KTtcblxuY29uc3QgVGV4dCA9IFJlYWN0LmZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IChcbiAgPEV4dGVuZGVkVGV4dCB2YXJpYW50PVwiYmFzZVwiIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+XG4pKTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuXG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuLyoqXG4gKiBUaGUgVGV4dCBjb21wb25lbnQgaXMgdXNlZCBmb3IgZGlzcGxheWluZyB0ZXh0LlxuICogVGV4dCBzdXBwb3J0cyBbVHlwb2dyYXBoeSBQcm9wcyBmcm9tIFN0eWxlZCBTeXN0ZW0gXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlLyN0eXBvZ3JhcGh5KS5cbiAqL1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4gKFxuICA8RXh0ZW5kZWRUZXh0IHZhcmlhbnQ9XCJiYXNlXCIgey4uLnByb3BzfSByZWY9e3JlZn0gLz5cbikpO1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cblxuVGV4dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHZhcmlhbnQ6IHRleHRWYXJpYW50cy5CQVNFLFxufTtcblxuVGV4dC5kaXNwbGF5TmFtZSA9ICdUZXh0JztcblxuZXhwb3J0IGRlZmF1bHQgVGV4dDtcbiJdfQ== */");
+/**
+ * The Text component is used for displaying text.
+ * Text supports [Typography Props from Styled System ](https://styled-system.com/table/#typography).
+ */
 
 var Text = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   return (0, _react2.jsx)(ExtendedText, (0, _extends2["default"])({

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithCustomWidth = exports.Default = void 0;
+exports["default"] = exports.WithCustomWidth = exports.TypographyStyleProps = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -24,6 +24,8 @@ var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _react = _interopRequireDefault(require("react"));
 
+var _themeUi = require("theme-ui");
+
 var _Text = _interopRequireDefault(require("./Text"));
 
 var _variants = require("../../utils/devUtils/constants/variants.js");
@@ -123,4 +125,56 @@ var WithCustomWidth = function WithCustomWidth() {
   }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 
-exports.WithCustomWidth = WithCustomWidth;
+exports.WithCustomWidth = WithCustomWidth;
+
+var TypographyStyleProps = function TypographyStyleProps() {
+  var textProps = {
+    fontFamily: 'times',
+    fontSize: 'md',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.';
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    gap: "md"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_Text["default"], textProps, loremText), (0, _react2.jsx)(_themeUi.Divider, null), (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_Text["default"], {
+    sx: textProps
+  }, loremText));
+};
+
+exports.TypographyStyleProps = TypographyStyleProps;
+TypographyStyleProps.argTypes = {
+  variant: {
+    control: {
+      type: 'none'
+    }
+  },
+  children: {
+    control: {
+      type: 'none'
+    }
+  },
+  color: {
+    control: {
+      type: 'none'
+    }
+  },
+  bg: {
+    control: {
+      type: 'none'
+    }
+  },
+  tabPanelProps: {
+    control: {
+      type: 'none'
+    }
+  }
+};

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

@@ -2,6 +2,24 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -18,6 +36,10 @@ var _testTheme = _interopRequireDefault(require("../../utils/testUtils/testTheme
 
 var _react2 = require("@emotion/react");
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var testId = 'test-text';
 var defaultProps = {
   'data-testid': testId
@@ -40,4 +62,28 @@ test('default text', function () {
 
   expect(text).toBeInstanceOf(HTMLSpanElement);
   expect(text).toBeInTheDocument();
+});
+test('typography props will be applied', function () {
+  var customTypographyProps = {
+    fontFamily: 'times',
+    fontSize: 'xx',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  };
+  getComponent(_objectSpread({}, customTypographyProps));
+
+  var text = _testWrapper.screen.getByTestId(testId);
+
+  expect(text).toHaveStyle({
+    fontFamily: 'times',
+    fontSize: '23px',
+    fontWeight: 900,
+    lineHeight: '2em',
+    letterSpacing: '5px',
+    textAlign: 'right',
+    fontStyle: 'italic'
+  });
 });

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

@@ -187,16 +187,16 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return aNum - bNum;
   };
 
-  var items = (0, _react.useMemo)(function () {
-    var _context7;
+  var checkIsSelectedItem = function checkIsSelectedItem() {
+    return (0, _filter["default"])(timeZones).call(timeZones, function (tz) {
+      return tz.timeZone === search;
+    }).length > 0;
+  };
 
-    if (filteredTimezones.length === 0) {
-      return (0, _react2.jsx)(_index.Item, {
-        key: emptySearchText
-      }, emptySearchText);
-    }
+  var renderTimeZones = function renderTimeZones(timeZonesToRender) {
+    var _context7;
 
-    return (0, _map["default"])(_context7 = (0, _sort["default"])(filteredTimezones).call(filteredTimezones, sortByGMT)).call(_context7, function (_ref4) {
+    return (0, _map["default"])(_context7 = (0, _sort["default"])(timeZonesToRender).call(timeZonesToRender, sortByGMT)).call(_context7, function (_ref4) {
       var gmt = _ref4.gmt,
           time = _ref4.time,
           timeZone = _ref4.timeZone;
@@ -218,7 +218,17 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         variant: "timeZone.time"
       }, time))));
     });
-  }, [emptySearchText, filteredTimezones]);
+  };
+
+  var items = (0, _react.useMemo)(function () {
+    if (filteredTimezones.length === 0) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: emptySearchText
+      }, emptySearchText);
+    }
+
+    return renderTimeZones(checkIsSelectedItem() ? timeZones : filteredTimezones);
+  }, [emptySearchText, filteredTimezones, search, timeZones]);
   var comboBoxFieldProps = (0, _react.useMemo)(function () {
     return _objectSpread({
       controlProps: {
@@ -239,7 +249,8 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, otherProps);
   }, [emptySearchText, filteredTimezones, otherProps]);
   return (0, _react2.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, comboBoxFieldProps, {
-    disabledKeys: [emptySearchText]
+    disabledKeys: [emptySearchText],
+    menuTrigger: "focus"
   }), items);
 });
 TimeZonePicker.propTypes = {

package/lib/cjs/hooks/index.js

@@ -36,6 +36,13 @@ _Object$defineProperty(exports, "useDeprecationWarning", {
   }
 });
 
+_Object$defineProperty(exports, "useFallbackImage", {
+  enumerable: true,
+  get: function get() {
+    return _useFallbackImage["default"];
+  }
+});
+
 _Object$defineProperty(exports, "useField", {
   enumerable: true,
   get: function get() {
@@ -123,4 +130,6 @@ var _useSelectField = _interopRequireDefault(require("./useSelectField"));
 
 var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));
 
-var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/hooks/useFallbackImage/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 _useFallbackImage["default"];
+  }
+});
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.js

@@ -0,0 +1,46 @@
+"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["default"] = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _react = require("react");
+
+var useFallbackImage = function useFallbackImage(_ref) {
+  var imageSrc = _ref.src,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      fallbackTimeout = _ref.fallbackTimeout,
+      onFallbackTimeout = _ref.onFallbackTimeout;
+  var displayImage = (0, _react.useMemo)(function () {
+    return document.createElement('img');
+  }, []);
+  (0, _react.useEffect)(function () {
+    displayImage.src = imageSrc;
+    displayImage.onload = onImageLoad;
+    displayImage.onerror = onImageError;
+    return function () {
+      displayImage.onload = null;
+      displayImage.onerror = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var timeoutId = 0;
+    timeoutId = (0, _setTimeout2["default"])(onFallbackTimeout, fallbackTimeout);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, []);
+  return displayImage;
+};
+
+var _default = useFallbackImage;
+exports["default"] = _default;

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var defaultProps = {
+  src: 'test-src',
+  fallbackImage: 'test-fallback-src',
+  onImageLoad: jest.fn(),
+  onImageError: jest.fn(),
+  fallbackTimeout: 5,
+  onFallbackTimeout: jest.fn()
+};
+test('should return node if all props are correct ', function () {
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(defaultProps);
+  }),
+      current = _renderHook.result.current;
+
+  expect(current).toBeInstanceOf(HTMLImageElement);
+});
+test('should not trigger onImageLoad if no fallback passed', function () {
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  });
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});
+test('should not trigger onImageLoad if component unmounted', function () {
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  }),
+      unmount = _renderHook2.unmount;
+
+  unmount();
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.js

@@ -13,16 +13,16 @@ exports["default"] = void 0;
  * @param {Object} params The accepted parameters object
  * @param {string} props.key The unique identifier that is assigned to the element being pressed
  * @param {Object} state The state object tracking selected keys
- * @param {function} state.setSelectedKeys The function that sets the selected keys
+ * @param {function} state.setSelectedKey The function that sets the selected keys
  * @callback props.onPressCallback The callback that will be called only if provided
  */
 var useNavBarPress = function useNavBarPress(_ref, state) {
   var key = _ref.key,
       onPressCallback = _ref.onPressCallback;
-  var setSelectedKeys = state.setSelectedKeys;
+  var setSelectedKey = state.setSelectedKey;
 
   var onNavPress = function onNavPress() {
-    setSelectedKeys(key);
+    setSelectedKey(key);
 
     if (onPressCallback) {
       onPressCallback();

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.test.js

@@ -9,14 +9,14 @@ var _ = _interopRequireDefault(require("./"));
 var key = 'testKey';
 test('using the onPress prop works as a callback', function () {
   var onPress = jest.fn();
-  var setSelectedKeys = jest.fn();
+  var setSelectedKey = jest.fn();
 
   var _renderHook = (0, _reactHooks.renderHook)(function () {
     return (0, _["default"])({
       key: key,
       onPressCallback: onPress
     }, {
-      setSelectedKeys: setSelectedKeys
+      setSelectedKey: setSelectedKey
     });
   }),
       result = _renderHook.result;
@@ -26,13 +26,13 @@ test('using the onPress prop works as a callback', function () {
 });
 test('if no onPress prop there is no callback', function () {
   var onPress = jest.fn();
-  var setSelectedKeys = jest.fn();
+  var setSelectedKey = jest.fn();
 
   var _renderHook2 = (0, _reactHooks.renderHook)(function () {
     return (0, _["default"])({
       key: key
     }, {
-      setSelectedKeys: setSelectedKeys
+      setSelectedKey: setSelectedKey
     });
   }),
       result = _renderHook2.result;