@pingux/astro 1.32.1-alpha.6 → 1.32.1-alpha.7

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -48,6 +48,8 @@ var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _ = require("../../");
@@ -94,10 +96,16 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  var textFieldProps = _objectSpread(_objectSpread(_objectSpread({
+  var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }, controlProps), inputProps), others);
+    isReadOnly: isReadOnly,
+    containerProps: containerProps
+  }, (0, _utils.mergeProps)(inputProps, others)); // istanbul ignore next
+
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
 
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps,
@@ -167,11 +175,13 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    ref: ref,
     isRow: true,
     style: style,
     variant: "forms.comboBox.container"
-  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, containerProps, textFieldProps, {
+  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
+    wrapperProps: {
+      ref: inputWrapperRef
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -181,9 +191,6 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef,
     slots: {
       inContainer: button
-    },
-    wrapperProps: {
-      ref: inputWrapperRef
     }
   }))));
 });

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

@@ -247,11 +247,6 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
-  var handleInputOpen = function handleInputOpen(e) {
-    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
-    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
-  };
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -282,16 +277,16 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,
-    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
-      onClick: handleInputOpen
-    })
+    controlProps: controlProps
   })), (0, _react2.jsx)(_PopoverContainer["default"], {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
     isOpen: state.isOpen,
-    ref: popoverRef,
+    onClose: state.close,
     placement: placement,
-    hasNoArrow: true,
-    style: style,
-    isNonModal: true
+    ref: popoverRef,
+    style: style
   }, listbox));
 });
 ComboBoxField.propTypes = _objectSpread({

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

@@ -354,7 +354,7 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length);
 });
-test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+test('should open list on click after selection when menuTrigger is set to use focus', function () {
   getComponent({
     menuTrigger: 'focus'
   });
@@ -370,7 +370,9 @@ test('should open list on focus on click after selection when menuTrigger is set
   _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[0]);
 
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(input).toHaveFocus();
+  expect(input).toHaveFocus(); // Need to click away first, then click back
+
+  _userEvent["default"].click(document.body);
 
   _userEvent["default"].click(input);
 
@@ -498,7 +500,7 @@ test('should invoke onSelectionChange when selection is made', function () {
 
   expect(onSelectionChange).toHaveBeenNthCalledWith(1, items[2].id); // Should fire when input is cleared
 
-  _userEvent["default"].type(input, '{selectall}{backspace}');
+  _userEvent["default"].clear(input);
 
   expect(onSelectionChange).toHaveBeenNthCalledWith(2, null); // Should fire on keyboard interaction
 
@@ -1008,9 +1010,9 @@ test('two listbox can not be open at the same time', function () {
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
   expect(_testWrapper.screen.queryByRole('option', {
     name: 'Aardvark'
-  })).toBeInTheDocument();
+  })).toBeInTheDocument(); // first click closes first popover, second click opens the second popover
 
-  _userEvent["default"].click(button2);
+  _userEvent["default"].dblClick(button2);
 
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(2);
@@ -1130,4 +1132,24 @@ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerat
       }
     }
   }, _callee5);
-})));
+})));
+test('popover closes on input blur', function () {
+  getComponent();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Aardvark'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(document.body);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});

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

@@ -159,14 +159,13 @@ test('should upload a file if label clicked', /*#__PURE__*/(0, _asyncToGenerator
     }
   }, _callee2);
 })));
-test('should show the menu if label clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-  var imageUploadLabel, imagePreview;
+test('should show the menu if image preview is clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  var imagePreview;
   return _regenerator["default"].wrap(function _callee3$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
         case 0:
           getComponent();
-          imageUploadLabel = _testWrapper.screen.getByText(testLabel);
 
           _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
             target: {
@@ -174,20 +173,20 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             }
           });
 
-          _context3.next = 5;
+          _context3.next = 4;
           return _testWrapper.screen.findByTestId(imageUploadImagePreview);
 
-        case 5:
+        case 4:
           imagePreview = _context3.sent;
           expect(imagePreview).toBeInTheDocument();
-          expect(imagePreview).toHaveAttribute('src');
+          expect(imagePreview).toHaveAttribute('src'); // Click on the image preview button
 
-          _userEvent["default"].click(imageUploadLabel);
+          _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
 
           expect(_testWrapper.screen.getByText('Upload New Image')).toBeInTheDocument();
           expect(_testWrapper.screen.getByText('Remove Image')).toBeInTheDocument();
 
-        case 11:
+        case 10:
         case "end":
           return _context3.stop();
       }
@@ -404,8 +403,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__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-  var customUploadProp, customRemoveProp, imageUploadLabel, imagePreview;
+test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+  var customUploadProp, customRemoveProp, imagePreview;
   return _regenerator["default"].wrap(function _callee6$(_context6) {
     while (1) {
       switch (_context6.prev = _context6.next) {
@@ -416,7 +415,6 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             uploadItemText: customUploadProp,
             removeItemText: customRemoveProp
           });
-          imageUploadLabel = _testWrapper.screen.getByText(testLabel);
 
           _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
             target: {
@@ -424,20 +422,20 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             }
           });
 
-          _context6.next = 7;
+          _context6.next = 6;
           return _testWrapper.screen.findByTestId(imageUploadImagePreview);
 
-        case 7:
+        case 6:
           imagePreview = _context6.sent;
           expect(imagePreview).toBeInTheDocument();
-          expect(imagePreview).toHaveAttribute('src');
+          expect(imagePreview).toHaveAttribute('src'); // Click on the image preview button
 
-          _userEvent["default"].click(imageUploadLabel);
+          _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
 
           expect(_testWrapper.screen.getByText(customUploadProp)).toBeInTheDocument();
           expect(_testWrapper.screen.getByText(customRemoveProp)).toBeInTheDocument();
 
-        case 13:
+        case 12:
         case "end":
           return _context6.stop();
       }

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

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

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

@@ -95,7 +95,9 @@ test('opens listbox on focus and fires "onFocus', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
   expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
 
   var options = _testWrapper.screen.getAllByRole('option');
@@ -112,7 +114,9 @@ test('closes listbox on blur and fires "onBlur"', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   input.blur();
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -126,7 +130,9 @@ test('opening and closing listbox fires "onOpenChange"', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(true);
   input.blur();
@@ -138,7 +144,9 @@ test('multiple selection is enabled, option disappears after selection', functio
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var listbox = _testWrapper.screen.getByRole('listbox');
 
@@ -156,7 +164,9 @@ test('clicking an option renders chip with option name', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var options = _testWrapper.screen.getAllByRole('option');
 
@@ -175,7 +185,9 @@ test('clicking on delete button deletes selection, and re-adds option to list',
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var options = _testWrapper.screen.getAllByRole('option');
 
@@ -189,7 +201,10 @@ 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["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var updatedOptions = _testWrapper.screen.getAllByRole('option');
 
@@ -204,7 +219,9 @@ test('clicking an option fires "onSelectionChange"', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var listbox = _testWrapper.screen.getByRole('listbox');
 
@@ -335,7 +352,9 @@ test('in non-restrictive mode the value that was already selected using the list
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var listbox = _testWrapper.screen.getByRole('listbox');
 
@@ -357,7 +376,9 @@ test('options can be focused via keyboard', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var listbox = _testWrapper.screen.getByRole('listbox');
 
@@ -381,7 +402,9 @@ test('options can be selected via keyboard', function () {
 
   var input = _testWrapper.screen.getByRole('combobox');
 
-  input.focus();
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
 
   var listbox = _testWrapper.screen.getByRole('listbox');
 
@@ -527,4 +550,24 @@ test('read only keys with read only field', function () {
 
   expect(textArea).toHaveClass('is-read-only');
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('popover closes on input blur', function () {
+  getComponent();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Aardvark'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(document.body);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
 });

package/lib/cjs/components/PopoverContainer/PopoverContainer.js

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

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

@@ -494,4 +494,24 @@ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerat
       }
     }
   }, _callee);
-})));
+})));
+test('popover closes on button blur', function () {
+  getComponent();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'a'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(document.body);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -240,14 +240,14 @@ var useSelectField = function useSelectField(props, ref) {
     }
   }));
   var overlay = (0, _react2.jsx)(_PopoverContainer["default"], {
-    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
   }, (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, listbox));
   return {
     columnStyleProps: columnStyleProps,

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

@@ -170,12 +170,8 @@ var Row = /*#__PURE__*/(0, _react.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/lib/components/ComboBox/ComboBoxInput.js

@@ -18,10 +18,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FocusRing } from '@react-aria/focus';
 import { PressResponder, useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import { Box, Button, Icon, Loader, TextField } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
@@ -51,10 +52,16 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded);
 
-  var textFieldProps = _objectSpread(_objectSpread(_objectSpread({
+  var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }, controlProps), inputProps), others);
+    isReadOnly: isReadOnly,
+    containerProps: containerProps
+  }, mergeProps(inputProps, others)); // istanbul ignore next
+
+
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
 
   var _useHover = useHover({}),
       hoverProps = _useHover.hoverProps,
@@ -126,11 +133,13 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
   }, ___EmotionJSX(Box, _extends({
-    ref: ref,
     isRow: true,
     style: style,
     variant: "forms.comboBox.container"
-  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, containerProps, textFieldProps, {
+  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, textFieldProps, {
+    wrapperProps: {
+      ref: inputWrapperRef
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -140,9 +149,6 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef,
     slots: {
       inContainer: button
-    },
-    wrapperProps: {
-      ref: inputWrapperRef
     }
   }))));
 });

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -199,11 +199,6 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   useLayoutEffect(onResize, [onResize]);
 
-  var handleInputOpen = function handleInputOpen(e) {
-    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
-    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
-  };
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -235,16 +230,16 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,
-    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
-      onClick: handleInputOpen
-    })
+    controlProps: controlProps
   })), ___EmotionJSX(PopoverContainer, {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
     isOpen: state.isOpen,
-    ref: popoverRef,
+    onClose: state.close,
     placement: placement,
-    hasNoArrow: true,
-    style: style,
-    isNonModal: true
+    ref: popoverRef,
+    style: style
   }, listbox));
 });
 ComboBoxField.propTypes = _objectSpread({

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

@@ -278,7 +278,7 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(items.length);
 });
-test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+test('should open list on click after selection when menuTrigger is set to use focus', function () {
   getComponent({
     menuTrigger: 'focus'
   });
@@ -288,7 +288,9 @@ test('should open list on focus on click after selection when menuTrigger is set
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   userEvent.click(screen.queryAllByRole('option')[0]);
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(input).toHaveFocus();
+  expect(input).toHaveFocus(); // Need to click away first, then click back
+
+  userEvent.click(document.body);
   userEvent.click(input);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
 });
@@ -385,7 +387,7 @@ test('should invoke onSelectionChange when selection is made', function () {
   userEvent.click(screen.queryAllByRole('option')[2]);
   expect(onSelectionChange).toHaveBeenNthCalledWith(1, items[2].id); // Should fire when input is cleared
 
-  userEvent.type(input, '{selectall}{backspace}');
+  userEvent.clear(input);
   expect(onSelectionChange).toHaveBeenNthCalledWith(2, null); // Should fire on keyboard interaction
 
   userEvent.type(input, '{arrowdown}{enter}');
@@ -835,8 +837,9 @@ test('two listbox can not be open at the same time', function () {
   expect(screen.queryAllByRole('option')).toHaveLength(3);
   expect(screen.queryByRole('option', {
     name: 'Aardvark'
-  })).toBeInTheDocument();
-  userEvent.click(button2);
+  })).toBeInTheDocument(); // first click closes first popover, second click opens the second popover
+
+  userEvent.dblClick(button2);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(2);
   expect(screen.queryByRole('option', {
@@ -931,4 +934,19 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
       }
     }
   }, _callee5);
-})));
+})));
+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/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-alpha.7",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",