@pingux/astro 2.125.0-alpha.5 → 2.125.1-alpha.0

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

@@ -51,7 +51,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -247,6 +247,14 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
+  var handleBlur = function handleBlur(e) {
+    var _inputWrapperRef$curr, _listBoxRef$current;
+    var relatedTarget = e.relatedTarget || document.activeElement;
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+      return;
+    }
+    setIsOpen(false);
+  };
   var _useState9 = (0, _react.useState)('Select All'),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     selectionState = _useState10[0],
@@ -301,7 +309,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     loadingState: loadingState,
     isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed'
+    isCondensed: mode === 'condensed',
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, overlayProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
@@ -320,7 +331,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
+      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,

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

@@ -1060,6 +1060,41 @@ test('opening and closing listbox fires "onOpenChange" in condensed mode', funct
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
+test('in condensed mode, clicking outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  expect(input).toHaveFocus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  _userEvent["default"].click(document.body);
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('in condensed mode, tabbing outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  expect(input).toHaveFocus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  // one tab to move focus to select all button
+  _userEvent["default"].tab();
+  // one tab to move focus to list
+  _userEvent["default"].tab();
+  // one tab to move focus beyond lsit
+  _userEvent["default"].tab();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
 test('selected keys in condensed mode ', function () {
   getComponent({
     mode: 'condensed',

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -39,7 +39,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current2;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -235,6 +235,14 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
+  var handleBlur = function handleBlur(e) {
+    var _inputWrapperRef$curr, _listBoxRef$current;
+    var relatedTarget = e.relatedTarget || document.activeElement;
+    if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
+      return;
+    }
+    setIsOpen(false);
+  };
   var _useState9 = useState('Select All'),
     _useState10 = _slicedToArray(_useState9, 2),
     selectionState = _useState10[0],
@@ -289,7 +297,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     loadingState: loadingState,
     isLoading: loadingState === loadingStates.LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed'
+    isCondensed: mode === 'condensed',
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, overlayProps))), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
@@ -308,7 +319,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
-      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
+      'aria-controls': (_listBoxRef$current2 = listBoxRef.current) === null || _listBoxRef$current2 === void 0 ? void 0 : _listBoxRef$current2.id,
       'aria-expanded': isOpen,
       role: 'combobox',
       ref: inputRef,

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

@@ -1053,6 +1053,41 @@ test('opening and closing listbox fires "onOpenChange" in condensed mode', funct
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
+test('in condensed mode, clicking outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  userEvent.click(document.body);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('in condensed mode, tabbing outside of listbox closes listbox', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    onOpenChange: onOpenChange
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  // one tab to move focus to select all button
+  userEvent.tab();
+  // one tab to move focus to list
+  userEvent.tab();
+  // one tab to move focus beyond lsit
+  userEvent.tab();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
 test('selected keys in condensed mode ', function () {
   getComponent({
     mode: 'condensed',

package/package.json

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