@pingux/astro 2.139.0-alpha.0 → 2.139.0-alpha.2

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

@@ -101,10 +101,14 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    activeDescendant = _useState8[0],
-    setActiveDescendant = _useState8[1];
+    initialItems = _useState8[0],
+    setInitialItems = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
@@ -117,6 +121,9 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       inputValue: filterString
     }),
     showLoading = _useInputLoader.showLoading;
+  (0, _react.useEffect)(function () {
+    setInitialItems((0, _from["default"])(items));
+  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -195,10 +202,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -271,12 +278,12 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState11 = (0, _react.useState)('Select All'),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    selectionState = _useState12[0],
-    setSelectionState = _useState12[1];
+  var _useState13 = (0, _react.useState)('Select All'),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    selectionState = _useState14[0],
+    setSelectionState = _useState14[1];
   var arrayItems = (0, _from["default"])(items);
-  var itemCount = (0, _reduce["default"])(arrayItems).call(arrayItems, function (count, obj) {
+  var itemCount = (0, _reduce["default"])(initialItems).call(initialItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;

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

@@ -1113,6 +1113,22 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
 });
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    defaultSelectedKeys: [items[1].key, items[2].key],
+    onInputChange: onInputChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  var value = 'Aardvark';
+  _userEvent["default"].type(input, value);
+  var listbox = _testWrapper.screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
+});
 test('onInputChange is called in condensed mode ', function () {
   var onInputChange = jest.fn();
   getComponent({

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -89,10 +89,14 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = useState(''),
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    activeDescendant = _useState8[0],
-    setActiveDescendant = _useState8[1];
+    initialItems = _useState8[0],
+    setInitialItems = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
@@ -105,6 +109,9 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputValue: filterString
     }),
     showLoading = _useInputLoader.showLoading;
+  useEffect(function () {
+    setInitialItems(_Array$from(items));
+  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -183,10 +190,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -259,12 +266,12 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState11 = useState('Select All'),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectionState = _useState12[0],
-    setSelectionState = _useState12[1];
+  var _useState13 = useState('Select All'),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectionState = _useState14[0],
+    setSelectionState = _useState14[1];
   var arrayItems = _Array$from(items);
-  var itemCount = _reduceInstanceProperty(arrayItems).call(arrayItems, function (count, obj) {
+  var itemCount = _reduceInstanceProperty(initialItems).call(initialItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;

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

@@ -1106,6 +1106,22 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(screen.getByText('2 Selected')).toBeInTheDocument();
 });
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    defaultSelectedKeys: [items[1].key, items[2].key],
+    onInputChange: onInputChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'Aardvark';
+  userEvent.type(input, value);
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(screen.getByText('2 Selected')).toBeInTheDocument();
+});
 test('onInputChange is called in condensed mode ', function () {
   var onInputChange = jest.fn();
   getComponent({

package/package.json

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