@pingux/astro 2.193.1-alpha.0 → 2.193.2-alpha.0

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

@@ -187,7 +187,12 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputWrapperRef,
     onResize: onResize
   });
-  (0, _utils.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.
+  (0, _utils.useLayoutEffect)(onResize, [onResize, state.isOpen]);
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth

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

@@ -44,7 +44,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _react3 = require("@emotion/react");
 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(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 ? _forEachInstanceProperty2(_context37 = ownKeys(Object(t), !0)).call(_context37, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_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 ? _forEachInstanceProperty2(_context39 = ownKeys(Object(t), !0)).call(_context39, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_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; }; }
@@ -1582,6 +1582,97 @@ test('a blank title does not render', /*#__PURE__*/(0, _asyncToGenerator2["defau
     }
   }, _callee33);
 })));
+test('popover width re-measures when the menu opens to prevent flickering', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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 = _testWrapper.screen.queryByRole('button');
+        _context36.next = 7;
+        return _userEvent["default"].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__*/(0, _asyncToGenerator2["default"])(/*#__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 = _testWrapper.screen.queryByRole('button'); // Open the menu at 500px
+        _context37.next = 6;
+        return _userEvent["default"].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["default"].click(button);
+      case 13:
+        expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+        // Simulate wrapper shrinking back
+        mockWidth = 300;
+
+        // Reopen — width should reflect the new measurement
+        _context37.next = 17;
+        return _userEvent["default"].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
@@ -1606,12 +1697,12 @@ describe('when isReadOnly is true', function () {
       name: defaultProps.label
     })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
   });
-  test('the dropdown does not open when clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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__*/(0, _asyncToGenerator2["default"])(/*#__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["default"].click(_testWrapper.screen.getByRole('combobox', {
             name: defaultProps.label
           }));
@@ -1621,9 +1712,9 @@ describe('when isReadOnly is true', function () {
           })).not.toBeInTheDocument();
         case 4:
         case "end":
-          return _context36.stop();
+          return _context38.stop();
       }
-    }, _callee34);
+    }, _callee36);
   })));
 });
 (0, _universalComponentTest.universalComponentTests)({

package/lib/cjs/recipes/CountryPicker.stories.js

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

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/recipes/CountryPicker.stories.js

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

package/package.json

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