@pingux/astro 2.210.3 → 2.210.5-alpha.0

package/lib/cjs/components/Button/Button.js

@@ -32,6 +32,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var displayName = 'Button';
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _sx;
   var children = props.children,
     className = props.className,
     _props$isDisabled = props.isDisabled,
@@ -107,13 +108,15 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": ariaLabel,
     className: classNames,
     role: "button",
-    sx: isLoading ? {
+    variant: variant
+  }, (0, _pendoID.getPendoID)(displayName), others, {
+    sx: _objectSpread(_objectSpread({}, isLoading ? {
       display: 'flex',
       justifyContent: 'center',
-      alignItems: 'center'
-    } : {},
-    variant: variant
-  }, (0, _pendoID.getPendoID)(displayName), others), isLoading ? (0, _react2.jsx)("span", {
+      alignItems: 'center',
+      position: 'relative'
+    } : {}), (_sx = others.sx) !== null && _sx !== void 0 ? _sx : {})
+  }), isLoading ? (0, _react2.jsx)("span", {
     style: {
       visibility: 'hidden'
     }

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

@@ -144,6 +144,34 @@ test('button loading hides children and shows loader', function () {
   expect(childWrapper).not.toBeVisible();
   expect(_testWrapper.screen.getByRole('alert')).toBeInTheDocument();
 });
+test('button loading with consumer sx still centers loader inside button', function () {
+  var textContent = "I'ma button";
+  getComponent({
+    isLoading: true,
+    children: textContent,
+    sx: {
+      backgroundColor: 'red'
+    }
+  });
+
+  // Loader (role="alert") is still rendered — consumer sx did not clobber the loading structure.
+  var loader = _testWrapper.screen.getByRole('alert');
+  expect(loader).toBeInTheDocument();
+
+  // Hidden children wrapper is still rendered so layout width is preserved.
+  var childWrapper = _testWrapper.screen.getByText(textContent);
+  expect(childWrapper).toBeInTheDocument();
+  expect(childWrapper).not.toBeVisible();
+
+  // Loading + positioning styles remain applied on top of the consumer's sx.
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toHaveStyle({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative'
+  });
+});
 test('button renders children when not loading', function () {
   var textContent = "I'ma button";
   getComponent({

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

@@ -556,4 +556,126 @@ test('does not render default timezones when items prop is provided', /*#__PURE_
         return _context17.stop();
     }
   }, _callee14);
+})));
+test('controlled selectedKey cleared to null clears the input value', function () {
+  var selectedKey = 'America/New York GMT-00:00';
+  var _getComponent = getComponent({
+      selectedKey: selectedKey
+    }),
+    rerender = _getComponent.rerender;
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue(selectedKey);
+  getComponent({
+    selectedKey: null
+  }, {
+    renderFn: rerender
+  });
+  expect(input).toHaveValue('');
+});
+test('invalid timezone id in custom items renders without throwing and shows empty time', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+  var customItems, input;
+  return _regeneratorRuntime().wrap(function _callee15$(_context18) {
+    while (1) switch (_context18.prev = _context18.next) {
+      case 0:
+        customItems = [{
+          key: 'Invalid/Timezone GMT-00:00',
+          id: 'Invalid/Timezone',
+          label: 'Invalid Timezone',
+          timeZone: 'Invalid/Timezone',
+          gmt: 'GMT-00:00',
+          numericOffset: 0,
+          searchTags: 'GMT-00:00 INVALID/TIMEZONE'
+        }];
+        getComponent({
+          items: customItems
+        });
+        input = _testWrapper.screen.getByRole('combobox');
+        _context18.next = 5;
+        return _userEvent["default"].type(input, 'Invalid');
+      case 5:
+        expect(_testWrapper.screen.getByText('Invalid/Timezone')).toBeInTheDocument();
+        expect(_testWrapper.screen.getByText('GMT-00:00')).toBeInTheDocument();
+        // The catch block (source line 116) sets timeData.get(tz.id) to '' for invalid timezone ids.
+        // Time strings produced by toLocaleTimeString with hour12:true (the default) include AM/PM.
+        // GMT offsets (e.g. "GMT-00:00") do not, so this regex distinguishes the two.
+        expect(_testWrapper.screen.queryByText(/\d{1,2}:\d{2}\s+(AM|PM)/i)).not.toBeInTheDocument();
+      case 8:
+      case "end":
+        return _context18.stop();
+    }
+  }, _callee15);
+})));
+test('US city name search returns matching US timezone results', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+  var input;
+  return _regeneratorRuntime().wrap(function _callee16$(_context19) {
+    while (1) switch (_context19.prev = _context19.next) {
+      case 0:
+        getComponent();
+        input = _testWrapper.screen.getByRole('combobox');
+        _context19.next = 4;
+        return _userEvent["default"].type(input, 'Los Angeles');
+      case 4:
+        expect(_testWrapper.screen.getByText('America/Los Angeles')).toBeInTheDocument();
+      case 5:
+      case "end":
+        return _context19.stop();
+    }
+  }, _callee16);
+})));
+test('locales prop is accepted and the component renders without error', function () {
+  getComponent({
+    locales: 'en-GB'
+  });
+  expect(_testWrapper.screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('localeOptions prop is accepted and the component renders without error', function () {
+  getComponent({
+    localeOptions: {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  });
+  expect(_testWrapper.screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('pressing ArrowDown opens the dropdown listbox', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+  var input;
+  return _regeneratorRuntime().wrap(function _callee17$(_context20) {
+    while (1) switch (_context20.prev = _context20.next) {
+      case 0:
+        getComponent();
+        input = _testWrapper.screen.getByRole('combobox');
+        expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+        _context20.next = 5;
+        return _userEvent["default"].tab();
+      case 5:
+        _context20.next = 7;
+        return _userEvent["default"].type(input, '{arrowdown}', {
+          skipClick: true
+        });
+      case 7:
+        expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+      case 8:
+      case "end":
+        return _context20.stop();
+    }
+  }, _callee17);
+})));
+test('clicking the button opens the dropdown listbox', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+  var button;
+  return _regeneratorRuntime().wrap(function _callee18$(_context21) {
+    while (1) switch (_context21.prev = _context21.next) {
+      case 0:
+        getComponent();
+        expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+        button = _testWrapper.screen.getByRole('button');
+        _context21.next = 5;
+        return _userEvent["default"].click(button);
+      case 5:
+        expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+      case 6:
+      case "end":
+        return _context21.stop();
+    }
+  }, _callee18);
 })));

package/lib/cjs/styles/themes/next-gen/customProperties/icons.js

@@ -20,5 +20,5 @@ var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/cons
 var _navBarIcons = require("../../astro/customProperties/navBarIcons");
 var _icons;
 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); }
-var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
+var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'));
 var _default = exports["default"] = icons;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -5684,6 +5684,11 @@ declare const _default: {
                 my: string;
             };
         };
+        helpHint: {
+            popoverContainer: {
+                fontWeight: number;
+            };
+        };
         iconWrapper: {
             xs: {
                 justifyContent: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -755,6 +755,11 @@ declare const _default: {
             my: string;
         };
     };
+    helpHint: {
+        popoverContainer: {
+            fontWeight: number;
+        };
+    };
     iconWrapper: {
         xs: {
             justifyContent: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -458,6 +458,11 @@ var imageUpload = {
     }
   }
 };
+var helpHint = {
+  popoverContainer: {
+    fontWeight: 0
+  }
+};
 var _default = exports["default"] = {
   accordion: _accordion["default"],
   accordionGrid: _accordionGrid["default"],
@@ -472,6 +477,7 @@ var _default = exports["default"] = {
   environmentBreadcrumb: _environmentBreadcrumb["default"],
   fieldHelperText: fieldHelperText,
   footer: _footer.footer,
+  helpHint: helpHint,
   iconWrapper: _iconWrapper["default"],
   listBox: listBox,
   listView: _listview.listView,

package/lib/components/Button/Button.js

@@ -22,6 +22,7 @@ import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'Button';
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _sx;
   var children = props.children,
     className = props.className,
     _props$isDisabled = props.isDisabled,
@@ -97,13 +98,15 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": ariaLabel,
     className: classNames,
     role: "button",
-    sx: isLoading ? {
+    variant: variant
+  }, getPendoID(displayName), others, {
+    sx: _objectSpread(_objectSpread({}, isLoading ? {
       display: 'flex',
       justifyContent: 'center',
-      alignItems: 'center'
-    } : {},
-    variant: variant
-  }, getPendoID(displayName), others), isLoading ? ___EmotionJSX("span", {
+      alignItems: 'center',
+      position: 'relative'
+    } : {}), (_sx = others.sx) !== null && _sx !== void 0 ? _sx : {})
+  }), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'
     }

package/lib/components/Button/Button.test.js

@@ -141,6 +141,34 @@ test('button loading hides children and shows loader', function () {
   expect(childWrapper).not.toBeVisible();
   expect(screen.getByRole('alert')).toBeInTheDocument();
 });
+test('button loading with consumer sx still centers loader inside button', function () {
+  var textContent = "I'ma button";
+  getComponent({
+    isLoading: true,
+    children: textContent,
+    sx: {
+      backgroundColor: 'red'
+    }
+  });
+
+  // Loader (role="alert") is still rendered — consumer sx did not clobber the loading structure.
+  var loader = screen.getByRole('alert');
+  expect(loader).toBeInTheDocument();
+
+  // Hidden children wrapper is still rendered so layout width is preserved.
+  var childWrapper = screen.getByText(textContent);
+  expect(childWrapper).toBeInTheDocument();
+  expect(childWrapper).not.toBeVisible();
+
+  // Loading + positioning styles remain applied on top of the consumer's sx.
+  var button = screen.getByRole('button');
+  expect(button).toHaveStyle({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative'
+  });
+});
 test('button renders children when not loading', function () {
   var textContent = "I'ma button";
   getComponent({

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

@@ -553,4 +553,126 @@ test('does not render default timezones when items prop is provided', /*#__PURE_
         return _context17.stop();
     }
   }, _callee14);
+})));
+test('controlled selectedKey cleared to null clears the input value', function () {
+  var selectedKey = 'America/New York GMT-00:00';
+  var _getComponent = getComponent({
+      selectedKey: selectedKey
+    }),
+    rerender = _getComponent.rerender;
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue(selectedKey);
+  getComponent({
+    selectedKey: null
+  }, {
+    renderFn: rerender
+  });
+  expect(input).toHaveValue('');
+});
+test('invalid timezone id in custom items renders without throwing and shows empty time', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+  var customItems, input;
+  return _regeneratorRuntime().wrap(function _callee15$(_context18) {
+    while (1) switch (_context18.prev = _context18.next) {
+      case 0:
+        customItems = [{
+          key: 'Invalid/Timezone GMT-00:00',
+          id: 'Invalid/Timezone',
+          label: 'Invalid Timezone',
+          timeZone: 'Invalid/Timezone',
+          gmt: 'GMT-00:00',
+          numericOffset: 0,
+          searchTags: 'GMT-00:00 INVALID/TIMEZONE'
+        }];
+        getComponent({
+          items: customItems
+        });
+        input = screen.getByRole('combobox');
+        _context18.next = 5;
+        return userEvent.type(input, 'Invalid');
+      case 5:
+        expect(screen.getByText('Invalid/Timezone')).toBeInTheDocument();
+        expect(screen.getByText('GMT-00:00')).toBeInTheDocument();
+        // The catch block (source line 116) sets timeData.get(tz.id) to '' for invalid timezone ids.
+        // Time strings produced by toLocaleTimeString with hour12:true (the default) include AM/PM.
+        // GMT offsets (e.g. "GMT-00:00") do not, so this regex distinguishes the two.
+        expect(screen.queryByText(/\d{1,2}:\d{2}\s+(AM|PM)/i)).not.toBeInTheDocument();
+      case 8:
+      case "end":
+        return _context18.stop();
+    }
+  }, _callee15);
+})));
+test('US city name search returns matching US timezone results', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+  var input;
+  return _regeneratorRuntime().wrap(function _callee16$(_context19) {
+    while (1) switch (_context19.prev = _context19.next) {
+      case 0:
+        getComponent();
+        input = screen.getByRole('combobox');
+        _context19.next = 4;
+        return userEvent.type(input, 'Los Angeles');
+      case 4:
+        expect(screen.getByText('America/Los Angeles')).toBeInTheDocument();
+      case 5:
+      case "end":
+        return _context19.stop();
+    }
+  }, _callee16);
+})));
+test('locales prop is accepted and the component renders without error', function () {
+  getComponent({
+    locales: 'en-GB'
+  });
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('localeOptions prop is accepted and the component renders without error', function () {
+  getComponent({
+    localeOptions: {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  });
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('pressing ArrowDown opens the dropdown listbox', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+  var input;
+  return _regeneratorRuntime().wrap(function _callee17$(_context20) {
+    while (1) switch (_context20.prev = _context20.next) {
+      case 0:
+        getComponent();
+        input = screen.getByRole('combobox');
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+        _context20.next = 5;
+        return userEvent.tab();
+      case 5:
+        _context20.next = 7;
+        return userEvent.type(input, '{arrowdown}', {
+          skipClick: true
+        });
+      case 7:
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      case 8:
+      case "end":
+        return _context20.stop();
+    }
+  }, _callee17);
+})));
+test('clicking the button opens the dropdown listbox', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+  var button;
+  return _regeneratorRuntime().wrap(function _callee18$(_context21) {
+    while (1) switch (_context21.prev = _context21.next) {
+      case 0:
+        getComponent();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+        button = screen.getByRole('button');
+        _context21.next = 5;
+        return userEvent.click(button);
+      case 5:
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+      case 6:
+      case "end":
+        return _context21.stop();
+    }
+  }, _callee18);
 })));

package/lib/styles/themes/next-gen/customProperties/icons.js

@@ -8,5 +8,5 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'help_outline'), "ModalCloseIcon", 'close'));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'));
 export default icons;

package/lib/styles/themes/next-gen/variants/variants.js

@@ -448,6 +448,11 @@ var imageUpload = {
     }
   }
 };
+var helpHint = {
+  popoverContainer: {
+    fontWeight: 0
+  }
+};
 export default {
   accordion: accordion,
   accordionGrid: accordionGrid,
@@ -462,6 +467,7 @@ export default {
   environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
   footer: footer,
+  helpHint: helpHint,
   iconWrapper: iconWrapper,
   listBox: listBox,
   listView: listView,

package/package.json

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