@pingux/astro 2.210.4-alpha.0 → 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/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/package.json

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