@pingux/astro 1.32.1-alpha.6 → 1.32.1

package/lib/components/ImageUploadField/ImageUploadField.test.js

@@ -131,31 +131,31 @@ test('should upload a file if label clicked', /*#__PURE__*/_asyncToGenerator( /*
     }
   }, _callee2);
 })));
-test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-  var imageUploadLabel, imagePreview;
+test('should show the menu if image preview is clicked when preview image exists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+  var imagePreview;
   return _regeneratorRuntime.wrap(function _callee3$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
         case 0:
           getComponent();
-          imageUploadLabel = screen.getByText(testLabel);
           fireEvent.change(screen.getByTestId('image-upload-input'), {
             target: {
               files: [file]
             }
           });
-          _context3.next = 5;
+          _context3.next = 4;
           return screen.findByTestId(imageUploadImagePreview);
 
-        case 5:
+        case 4:
           imagePreview = _context3.sent;
           expect(imagePreview).toBeInTheDocument();
-          expect(imagePreview).toHaveAttribute('src');
-          userEvent.click(imageUploadLabel);
+          expect(imagePreview).toHaveAttribute('src'); // Click on the image preview button
+
+          userEvent.click(screen.getByRole('button'));
           expect(screen.getByText('Upload New Image')).toBeInTheDocument();
           expect(screen.getByText('Remove Image')).toBeInTheDocument();
 
-        case 11:
+        case 10:
         case "end":
           return _context3.stop();
       }
@@ -352,8 +352,8 @@ test('loader size can be changed via the prop', function () {
     'font-size': "".concat(testLoaderSize, "px")
   });
 });
-test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-  var customUploadProp, customRemoveProp, imageUploadLabel, imagePreview;
+test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+  var customUploadProp, customRemoveProp, imagePreview;
   return _regeneratorRuntime.wrap(function _callee6$(_context6) {
     while (1) {
       switch (_context6.prev = _context6.next) {
@@ -364,24 +364,24 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             uploadItemText: customUploadProp,
             removeItemText: customRemoveProp
           });
-          imageUploadLabel = screen.getByText(testLabel);
           fireEvent.change(screen.getByTestId('image-upload-input'), {
             target: {
               files: [file]
             }
           });
-          _context6.next = 7;
+          _context6.next = 6;
           return screen.findByTestId(imageUploadImagePreview);
 
-        case 7:
+        case 6:
           imagePreview = _context6.sent;
           expect(imagePreview).toBeInTheDocument();
-          expect(imagePreview).toHaveAttribute('src');
-          userEvent.click(imageUploadLabel);
+          expect(imagePreview).toHaveAttribute('src'); // Click on the image preview button
+
+          userEvent.click(screen.getByRole('button'));
           expect(screen.getByText(customUploadProp)).toBeInTheDocument();
           expect(screen.getByText(customRemoveProp)).toBeInTheDocument();
 
-        case 13:
+        case 12:
         case "end":
           return _context6.stop();
       }

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -431,11 +431,13 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ariaProps, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, {
-    ref: popoverRef,
     hasNoArrow: true,
+    isDismissable: true,
     isNonModal: true,
     isOpen: isOpen,
+    onClose: close,
     placement: placement,
+    ref: popoverRef,
     style: style
   }, listbox));
 });

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -76,7 +76,8 @@ test('opens listbox on focus and fires "onFocus', function () {
     onFocus: onFocus
   });
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   expect(screen.getByRole('listbox')).toBeInTheDocument();
   var options = screen.getAllByRole('option');
   expect(options.length).toBe(items.length);
@@ -89,7 +90,8 @@ test('closes listbox on blur and fires "onBlur"', function () {
     onBlur: onBlur
   });
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   input.blur();
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -101,7 +103,8 @@ test('opening and closing listbox fires "onOpenChange"', function () {
     onOpenChange: onOpenChange
   });
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(true);
   input.blur();
@@ -111,7 +114,8 @@ test('opening and closing listbox fires "onOpenChange"', function () {
 test('multiple selection is enabled, option disappears after selection', function () {
   getComponent();
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var listbox = screen.getByRole('listbox');
   expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
   var options = within(listbox).getAllByRole('option');
@@ -125,7 +129,8 @@ test('multiple selection is enabled, option disappears after selection', functio
 test('clicking an option renders chip with option name', function () {
   getComponent();
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
   firstOption.click();
@@ -138,7 +143,8 @@ test('clicking an option renders chip with option name', function () {
 test('clicking on delete button deletes selection, and re-adds option to list', function () {
   getComponent();
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
   firstOption.click();
@@ -148,7 +154,8 @@ test('clicking on delete button deletes selection, and re-adds option to list',
   var deleteButton = chip.nextSibling;
   deleteButton.click();
   expect(chip).not.toBeInTheDocument();
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var updatedOptions = screen.getAllByRole('option');
   expect(updatedOptions[0]).toBeInTheDocument();
   expect(updatedOptions[0]).toHaveTextContent(items[0].name);
@@ -159,7 +166,8 @@ test('clicking an option fires "onSelectionChange"', function () {
     onSelectionChange: onSelectionChange
   });
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var listbox = screen.getByRole('listbox');
   var options = within(listbox).getAllByRole('option');
   var firstOption = options[0];
@@ -253,7 +261,8 @@ test('in non-restrictive mode the value that was already selected using the list
     onSelectionChange: onSelectionChange
   });
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var listbox = screen.getByRole('listbox');
   var options = within(listbox).getAllByRole('option');
   var firstOption = options[0];
@@ -268,7 +277,8 @@ test('in non-restrictive mode the value that was already selected using the list
 test('options can be focused via keyboard', function () {
   getComponent();
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var listbox = screen.getByRole('listbox');
   expect(listbox).toBeInTheDocument();
   var options = within(listbox).getAllByRole('option');
@@ -284,7 +294,8 @@ test('options can be focused via keyboard', function () {
 test('options can be selected via keyboard', function () {
   getComponent();
   var input = screen.getByRole('combobox');
-  input.focus();
+  userEvent.tab();
+  expect(input).toHaveFocus();
   var listbox = screen.getByRole('listbox');
   expect(listbox).toBeInTheDocument();
   var options = within(listbox).getAllByRole('option');
@@ -394,4 +405,19 @@ test('read only keys with read only field', function () {
   var textArea = screen.getByLabelText(defaultProps.label);
   expect(textArea).toHaveClass('is-read-only');
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('popover closes on input blur', function () {
+  getComponent();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  var input = screen.getByRole('combobox');
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  expect(screen.queryByRole('option', {
+    name: 'Aardvark'
+  })).toBeInTheDocument();
+  userEvent.click(document.body);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
 });

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -96,7 +96,7 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var _useOverlay = useOverlay(_objectSpread(_objectSpread({}, props), {}, {
-    isDismissable: isDismissable && isOpen
+    shouldCloseOnBlur: !isNotClosedOnBlur
   }), popoverRef),
       overlayProps = _useOverlay.overlayProps;
 

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -391,4 +391,19 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
       }
     }
   }, _callee);
-})));
+})));
+test('popover closes on button blur', function () {
+  getComponent();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  expect(screen.queryByRole('option', {
+    name: 'a'
+  })).toBeInTheDocument();
+  userEvent.click(document.body);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});

package/lib/hooks/useSelectField/useSelectField.js

@@ -201,14 +201,14 @@ var useSelectField = function useSelectField(props, ref) {
   }));
 
   var overlay = ___EmotionJSX(PopoverContainer, {
-    isOpen: state.isOpen,
-    ref: popoverRef,
-    placement: placement,
     hasNoArrow: true,
-    onClose: state.close,
-    style: style,
+    isDismissable: true,
     isNonModal: true,
-    isDismissable: true
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
   }, ___EmotionJSX(ScrollBox, scrollBoxProps, listbox));
 
   return {

package/lib/recipes/AttributesAndPingOneMapping.stories.js

@@ -136,12 +136,8 @@ var Row = /*#__PURE__*/memo(function (props) {
       sx: sx.comboBoxField
     },
     containerProps: {
-      'aria-label': 'selection field',
       width: '100%',
-      maxWidth: '310px',
-      sx: {
-        width: '100%'
-      }
+      maxWidth: '310px'
     },
     inputValue: inputValue,
     onInputChange: setInputValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.32.1-alpha.6",
+  "version": "1.32.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",