@pingux/astro 2.193.0 → 2.193.2-alpha.0

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'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), (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, "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'), "p1verify", 'person_check'), (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, "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'));
+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"])(_icons, "WarningIcon", 'warning'));
 var _default = exports["default"] = icons;

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

@@ -34,6 +34,7 @@ export declare const nextGenThemeValues: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;

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

@@ -87,6 +87,10 @@ declare const _default: {
             };
         };
         tooltip: string;
+        environmentBadge: {
+            text: any;
+            background: any;
+        };
         codeEditor: {
             backgroundColor: any;
             headerColor: any;
@@ -3142,6 +3146,7 @@ declare const _default: {
         Descending: string;
         popoverMenuIcon: string;
         ErrorCircle: string;
+        HomeIcon: string;
         integrationsIcon: string;
         listViewMenu: string;
         mdiAccountCog: string;
@@ -4018,6 +4023,10 @@ declare const _default: {
             width: string;
             color: string;
         };
+        environmentBadge: {
+            backgroundColor: string;
+            color: string;
+        };
         invertedRemovableBadge: {
             backgroundColor: string;
             '& span': {
@@ -5329,6 +5338,14 @@ declare const _default: {
                 px: string;
             };
         };
+        environmentBreadcrumb: {
+            button: {
+                current: {
+                    color: string;
+                    fontWeight: number;
+                };
+            };
+        };
         fieldHelperText: {
             title: {
                 fontSize: string;
@@ -6035,6 +6052,7 @@ declare const _default: {
         popoverMenu: {
             container: {
                 minWidth: string;
+                maxWidth: string;
                 boxShadow: string;
                 transition: string;
                 '&.animate': {

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

@@ -825,6 +825,10 @@ export declare const badges: {
         width: string;
         color: string;
     };
+    environmentBadge: {
+        backgroundColor: string;
+        color: string;
+    };
     invertedRemovableBadge: {
         backgroundColor: string;
         '& span': {

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

@@ -163,6 +163,10 @@ var invertedRemovableBadge = _objectSpread({}, dark);
 var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
+var environmentBadge = {
+  backgroundColor: '#EAF2FD',
+  color: "".concat(_onyxTokens.astroTokens.color.blue[600])
+};
 var badges = exports.badges = {
   dataTableBadge: dataTableBadge,
   baseBadge: _objectSpread({}, baseBadge),
@@ -188,6 +192,7 @@ var badges = exports.badges = {
   badgeDeleteButton: badgeDeleteButton,
   itemBadgeWithSlot: itemBadgeWithSlot,
   removableBadge: removableBadge,
+  environmentBadge: environmentBadge,
   invertedRemovableBadge: invertedRemovableBadge,
   errorCalloutBadge: {
     backgroundColor: 'white !important'

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    button: {
+        current: {
+            color: string;
+            fontWeight: number;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var button = {
+  current: {
+    color: 'font.base',
+    fontWeight: 2
+  }
+};
+var _default = exports["default"] = {
+  button: button
+};

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

@@ -1,6 +1,7 @@
 declare const _default: {
     container: {
         minWidth: string;
+        maxWidth: string;
         boxShadow: string;
         transition: string;
         '&.animate': {

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

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
   minWidth: '150px',
+  maxWidth: '260px',
   boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {

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

@@ -697,6 +697,14 @@ declare const _default: {
             px: string;
         };
     };
+    environmentBreadcrumb: {
+        button: {
+            current: {
+                color: string;
+                fontWeight: number;
+            };
+        };
+    };
     fieldHelperText: {
         title: {
             fontSize: string;
@@ -1403,6 +1411,7 @@ declare const _default: {
     popoverMenu: {
         container: {
             minWidth: string;
+            maxWidth: string;
             boxShadow: string;
             transition: string;
             '&.animate': {

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

@@ -28,6 +28,7 @@ var _box = require("./box");
 var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
+var _environmentBreadcrumb = _interopRequireDefault(require("./environmentBreadcrumb"));
 var _footer = require("./footer");
 var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
 var _listview = require("./listview");
@@ -449,6 +450,7 @@ var _default = exports["default"] = {
   callout: _callout["default"],
   codeView: _codeView["default"],
   dataTable: _dataTable.dataTable,
+  environmentBreadcrumb: _environmentBreadcrumb["default"],
   fieldHelperText: fieldHelperText,
   footer: _footer.footer,
   iconWrapper: _iconWrapper["default"],

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -177,7 +177,12 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputWrapperRef,
     onResize: onResize
   });
-  useLayoutEffect(onResize, [onResize]);
+
+  // Re-measure synchronously (before paint) whenever the menu opens or closes,
+  // so the Popover renders with the correct width on the first frame.
+  // Without state.isOpen in deps, width updates rely solely on ResizeObserver
+  // which fires asynchronously after paint, causing a visible flicker.
+  useLayoutEffect(onResize, [onResize, state.isOpen]);
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth

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

@@ -19,7 +19,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context37, _context38; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context37 = ownKeys(Object(t), !0)).call(_context37, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context38 = ownKeys(Object(t))).call(_context38, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context39, _context40; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context39 = ownKeys(Object(t), !0)).call(_context39, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context40 = ownKeys(Object(t))).call(_context40, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -1575,6 +1575,97 @@ test('a blank title does not render', /*#__PURE__*/_asyncToGenerator(/*#__PURE__
     }
   }, _callee33);
 })));
+test('popover width re-measures when the menu opens to prevent flickering', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+  var mockWidth, offsetWidthSpy, button, listbox, popoverContainer;
+  return _regeneratorRuntime().wrap(function _callee34$(_context36) {
+    while (1) switch (_context36.prev = _context36.next) {
+      case 0:
+        // Simulate a scenario like the Country Picker recipe where the input wrapper
+        // starts narrow (110px) and expands to full width when the menu opens.
+        mockWidth = 110;
+        offsetWidthSpy = jest.spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function () {
+          return mockWidth;
+        });
+        getComponent();
+
+        // Simulate the wrapper expanding before the menu opens
+        // (e.g., parent CSS changes from width: 110px to width: 100%)
+        mockWidth = 500;
+        button = screen.queryByRole('button');
+        _context36.next = 7;
+        return userEvent.click(button);
+      case 7:
+        _context36.next = 9;
+        return findListbox();
+      case 9:
+        listbox = _context36.sent;
+        // The popover container receives the inline style with width/minWidth.
+        // Without the fix, menuWidth would be stale (110) because useLayoutEffect
+        // only ran on mount. With the fix, it re-measures on state.isOpen change.
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '500px',
+          'min-width': '500px'
+        });
+        offsetWidthSpy.mockRestore();
+      case 13:
+      case "end":
+        return _context36.stop();
+    }
+  }, _callee34);
+})));
+test('popover width stays in sync when closing and reopening at different widths', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
+  var mockWidth, offsetWidthSpy, button, listbox, popoverContainer;
+  return _regeneratorRuntime().wrap(function _callee35$(_context37) {
+    while (1) switch (_context37.prev = _context37.next) {
+      case 0:
+        mockWidth = 500;
+        offsetWidthSpy = jest.spyOn(window.HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function () {
+          return mockWidth;
+        });
+        getComponent();
+        button = screen.queryByRole('button'); // Open the menu at 500px
+        _context37.next = 6;
+        return userEvent.click(button);
+      case 6:
+        _context37.next = 8;
+        return findListbox();
+      case 8:
+        listbox = _context37.sent;
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '500px'
+        });
+
+        // Close the menu
+        _context37.next = 13;
+        return userEvent.click(button);
+      case 13:
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+        // Simulate wrapper shrinking back
+        mockWidth = 300;
+
+        // Reopen — width should reflect the new measurement
+        _context37.next = 17;
+        return userEvent.click(button);
+      case 17:
+        _context37.next = 19;
+        return findListbox();
+      case 19:
+        listbox = _context37.sent;
+        popoverContainer = listbox.closest('[role="presentation"]');
+        expect(popoverContainer).toHaveStyle({
+          width: '300px',
+          'min-width': '300px'
+        });
+        offsetWidthSpy.mockRestore();
+      case 23:
+      case "end":
+        return _context37.stop();
+    }
+  }, _callee35);
+})));
 describe('when isReadOnly is true', function () {
   var testProp = {
     isReadOnly: true
@@ -1599,12 +1690,12 @@ describe('when isReadOnly is true', function () {
       name: defaultProps.label
     })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
   });
-  test('the dropdown does not open when clicked', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
-    return _regeneratorRuntime().wrap(function _callee34$(_context36) {
-      while (1) switch (_context36.prev = _context36.next) {
+  test('the dropdown does not open when clicked', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
+    return _regeneratorRuntime().wrap(function _callee36$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
         case 0:
           getComponent(testProp);
-          _context36.next = 3;
+          _context38.next = 3;
           return userEvent.click(screen.getByRole('combobox', {
             name: defaultProps.label
           }));
@@ -1614,9 +1705,9 @@ describe('when isReadOnly is true', function () {
           })).not.toBeInTheDocument();
         case 4:
         case "end":
-          return _context36.stop();
+          return _context38.stop();
       }
-    }, _callee34);
+    }, _callee36);
   })));
 });
 universalComponentTests({

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -22,15 +22,12 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
-import ArrowDropDownIcon from '@pingux/mdi-react/ArrowDropDownIcon';
-import ArrowDropUpIcon from '@pingux/mdi-react/ArrowDropUpIcon';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
-import HomeIcon from '@pingux/mdi-react/HomeIcon';
 import { useFilter } from '@react-aria/i18n';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import { v4 as uuid } from 'uuid';
-import { useDebounce, useLocalOrForwardRef } from '../../hooks';
+import { useDebounce, useGetTheme, useLocalOrForwardRef } from '../../hooks';
 import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -59,6 +56,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     searchProps = props.searchProps,
     selectedItem = props.selectedItem,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp,
+    HomeIcon = icons.HomeIcon;
   var optionsNumberMessageId = useMemo(function () {
     return uuid();
   }, []);
@@ -244,10 +246,12 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, ___EmotionJSX(Icon, {
-    icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon,
+    icon: popoverState.isOpen ? MenuUp : MenuDown,
     title: {
       name: popoverState.isOpen ? 'Arrow Drop Up Icon' : 'Arrow Drop Down Icon'
-    }
+    },
+    size: "xs",
+    ml: "xs"
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
@@ -295,8 +299,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: breadcrumbsRef,
     onAction: handleOnAction,
     iconProps: {
-      color: 'neutral.70',
-      mx: 5,
+      color: 'font.base',
+      mx: 3,
       size: 'xs',
       icon: ChevronRightIcon
     }
@@ -312,7 +316,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     mr: 7,
     title: {
       name: 'Home Icon'
-    }
+    },
+    size: "sm"
   }), name), selectedItem && ___EmotionJSX(Item, {
     key: "itemsSelect",
     elementType: "Fragment"

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -114,9 +114,11 @@ export var Default = function Default(args) {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "magenta",
+    align: "right"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref) {
@@ -140,9 +142,10 @@ export var Default = function Default(args) {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text",
       align: "right"
     }) : null);
   });
@@ -225,9 +228,11 @@ export var WithSections = function WithSections() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment === null || selectedEnvironment === void 0 ? void 0 : selectedEnvironment.name), selectedEnvironment !== null && selectedEnvironment !== void 0 && selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text",
+    align: "right"
   }) : null);
   return ___EmotionJSX(EnvironmentBreadcrumb, {
     items: environments,
@@ -257,9 +262,10 @@ export var WithSections = function WithSections() {
       }, ___EmotionJSX(Box, {
         isRow: true
       }, itemName, isSandbox ? ___EmotionJSX(Badge, {
-        label: "SANDBOX",
+        label: "Sandbox",
         variant: "environmentBadge",
-        bg: "neutral.40",
+        bg: "environmentBadge.background",
+        textColor: "environmentBadge.text",
         align: "right"
       }) : null));
     });
@@ -281,9 +287,10 @@ export var DefaultOpen = function DefaultOpen() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
@@ -308,10 +315,10 @@ export var DefaultOpen = function DefaultOpen() {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };
@@ -330,9 +337,10 @@ export var ControlledMenu = function ControlledMenu() {
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
-    label: "SANDBOX",
+    label: "Sandbox",
     variant: "environmentBadge",
-    bg: "neutral.40"
+    bg: "environmentBadge.background",
+    textColor: "environmentBadge.text"
   }) : null);
   var findEnvObj = function findEnvObj(envName) {
     return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
@@ -358,10 +366,10 @@ export var ControlledMenu = function ControlledMenu() {
       key: name,
       textValue: name
     }, name, isSandbox ? ___EmotionJSX(Badge, {
-      label: "SANDBOX",
+      label: "Sandbox",
       variant: "environmentBadge",
-      bg: "neutral.40",
-      align: "right"
+      bg: "environmentBadge.background",
+      textColor: "environmentBadge.text"
     }) : null);
   });
 };

package/lib/recipes/CountryPicker.stories.js

@@ -23,7 +23,6 @@ var sx = {
   },
   comboBoxFieldWrapperOpen: {
     position: 'absolute',
-    transition: '0.2s width ease',
     width: '100%'
   },
   comboBoxFieldWrapperClose: {

package/lib/styles/colors.js

@@ -132,6 +132,10 @@ var tooltip = accent[20];
 var border = {
   hairline: '#E7EEF4'
 };
+var environmentBadge = {
+  text: badge.textColor,
+  background: neutral[40]
+};
 var allColors = {
   black: black,
   background: background,
@@ -154,7 +158,8 @@ var allColors = {
   button: button,
   warning: warning,
   slider: slider,
-  tooltip: tooltip
+  tooltip: tooltip,
+  environmentBadge: environmentBadge
 };
 export default allColors;
 function flattenColors(obj) {

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -42,6 +42,10 @@ var background = {
   card: '#1a1e22',
   hover: hoverDark
 };
+var environmentBadge = {
+  text: 'black',
+  background: astroTokensDark.color.blue[500]
+};
 var twoTone = {
   bg: {
     orange: astroTokensDark.color.orange[500],
@@ -145,6 +149,7 @@ export var colors = _objectSpread(_objectSpread({
     message: 'white',
     fieldHelper: astroTokensDark.color.gray[400]
   },
+  environmentBadge: environmentBadge,
   background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -38,7 +38,10 @@ var listBox = {
       }
     },
     '&.is-focus-visible': {
-      zIndex: 1
+      zIndex: 1,
+      outline: '1px solid #ffffff',
+      outlineOffset: '-1px',
+      boxShadow: "inset 0 0 0 2px ".concat(astroTokensDark.color.blue[500])
     }
   }
 };
@@ -178,6 +181,14 @@ var statusIcon = {
     }
   }
 };
+var environmentBreadcrumb = {
+  button: {
+    current: {
+      color: astroTokensDark.color.gray[100],
+      fontWeight: 2
+    }
+  }
+};
 export default {
   rockerButton: rockerButton,
   rangeCalendar: rangeCalendar,
@@ -191,6 +202,7 @@ export default {
   lisViewItemChart: lisViewItemChart,
   navBar: navBar,
   listBox: listBox,
+  environmentBreadcrumb: environmentBreadcrumb,
   modal: modal,
   tab: tab,
   iconBadge: iconBadge,
@@ -200,7 +212,9 @@ export default {
   tooltip: tooltip,
   popoverMenu: {
     container: {
-      background: '#23282e'
+      background: '#23282e',
+      border: '1px solid',
+      borderColor: '#39414B'
     }
   },
   dataTable: {

package/lib/styles/themes/astro/customProperties/icons.js

@@ -21,6 +21,7 @@ import Earth from '@pingux/mdi-react/EarthIcon';
 import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from '@pingux/mdi-react/FingerprintIcon';
 import GlobeIcon from '@pingux/mdi-react/GlobeIcon';
+import HomeIcon from '@pingux/mdi-react/HomeIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import KeyChainVariant from '@pingux/mdi-react/KeyChainVariantIcon';
@@ -40,4 +41,4 @@ import WebIcon from '@pingux/mdi-react/WebIcon';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, Credentials, DaVinci, PamIcon, Protect, Verify } from './navBarIcons';
-export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon));
+export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), _defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon));