@pingux/astro 2.123.0-alpha.2 → 2.123.1-alpha.0

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

@@ -52,9 +52,9 @@ var _excluded = ["items"],
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context13, _context14; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(source), !0)).call(_context13, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context14 = ownKeys(Object(source))).call(_context14, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context8, _listBoxRef$current2;
+  var _context10, _listBoxRef$current2;
   var initialItems = props.items,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var defaultSelectedKeys = otherProps.defaultSelectedKeys,
@@ -207,17 +207,33 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     minWidth: menuWidth
   });
   (0, _react.useEffect)(function () {
-    if (defaultSelectedKeys) selectionManager.setSelectedKeys(defaultSelectedKeys);
+    if (defaultSelectedKeys) {
+      selectionManager.setSelectedKeys(defaultSelectedKeys);
+      setItems(function (prevItems) {
+        return (0, _filter["default"])(prevItems).call(prevItems, function (item) {
+          var _context3;
+          return !(0, _includes["default"])(_context3 = (0, _from["default"])(defaultSelectedKeys)).call(_context3, item.key);
+        });
+      });
+    }
   }, []);
   (0, _react.useEffect)(function () {
-    if (selectedKeys) selectionManager.setSelectedKeys(selectedKeys);
+    if (selectedKeys) {
+      selectionManager.setSelectedKeys(selectedKeys);
+      setItems(function (prevItems) {
+        return (0, _filter["default"])(prevItems).call(prevItems, function (item) {
+          var _context4;
+          return !(0, _includes["default"])(_context4 = (0, _from["default"])(selectedKeys)).call(_context4, item.key);
+        });
+      });
+    }
   }, []);
   (0, _react.useEffect)(function () {
     if (onOpenChange) onOpenChange(isOpen);
     if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
-    var _context3, _context4;
+    var _context5, _context6;
     var key = (0, _trim["default"])(inputValue).call(inputValue);
     if (key === '') {
       return;
@@ -225,8 +241,8 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     if (state.selectionManager.isSelected(key)) {
       return;
     }
-    selectionManager.setSelectedKeys((0, _concat["default"])(_context3 = []).call(_context3, (0, _from["default"])(selectionManager.state.selectedKeys), [key]));
-    setCustomItems((0, _concat["default"])(_context4 = []).call(_context4, customItems, [{
+    selectionManager.setSelectedKeys((0, _concat["default"])(_context5 = []).call(_context5, (0, _from["default"])(selectionManager.state.selectedKeys), [key]));
+    setCustomItems((0, _concat["default"])(_context6 = []).call(_context6, customItems, [{
       id: key,
       key: key,
       name: key
@@ -304,8 +320,8 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var deleteItem = function deleteItem(key, e) {
-    var _context5;
-    var activeBadgesKeys = (0, _reduce["default"])(_context5 = closeBadgeRefs.current).call(_context5, function (result, item) {
+    var _context7;
+    var activeBadgesKeys = (0, _reduce["default"])(_context7 = closeBadgeRefs.current).call(_context7, function (result, item) {
       if (item) {
         result.push(item.dataset.item);
       }
@@ -340,8 +356,8 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }, name);
   };
   var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context6, _context7;
-    var item = (0, _find["default"])(_context6 = (0, _concat["default"])(_context7 = []).call(_context7, initialItems, customItems)).call(_context6, function (el) {
+    var _context8, _context9;
+    var item = (0, _find["default"])(_context8 = (0, _concat["default"])(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
       return el.key === key;
     });
     if (item) {
@@ -405,9 +421,9 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       }
     }))));
   };
-  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context8 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context8, function (key, i) {
-    var _context9, _context10;
-    var item = (0, _find["default"])(_context9 = (0, _concat["default"])(_context10 = []).call(_context10, initialItems, customItems)).call(_context9, function (el) {
+  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context10 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context10, function (key, i) {
+    var _context11, _context12;
+    var item = (0, _find["default"])(_context11 = (0, _concat["default"])(_context12 = []).call(_context12, initialItems, customItems)).call(_context11, function (el) {
       return el.key === key;
     });
     if (item) {

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

@@ -682,6 +682,20 @@ test('default selected keys', function () {
   var secondBadge = _testWrapper.screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('default selected keys are removed from the list', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].click(input);
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect((0, _testWrapper.within)(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('selected keys', function () {
   getComponent({
     selectedKeys: [items[1].key, items[2].key]
@@ -693,6 +707,20 @@ test('selected keys', function () {
   var secondBadge = _testWrapper.screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('selected keys are removed from the list', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].click(input);
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect((0, _testWrapper.within)(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('read only keys', function () {
   getComponent({
     readOnlyKeys: [items[1].key, items[2].key]

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -12,7 +12,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["items"],
   _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(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 _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context13, _context14; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(source), !0)).call(_context13, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context14 = ownKeys(Object(source))).call(_context14, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -42,7 +42,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context8, _listBoxRef$current2;
+  var _context10, _listBoxRef$current2;
   var initialItems = props.items,
     otherProps = _objectWithoutProperties(props, _excluded);
   var defaultSelectedKeys = otherProps.defaultSelectedKeys,
@@ -195,17 +195,33 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth: menuWidth
   });
   useEffect(function () {
-    if (defaultSelectedKeys) selectionManager.setSelectedKeys(defaultSelectedKeys);
+    if (defaultSelectedKeys) {
+      selectionManager.setSelectedKeys(defaultSelectedKeys);
+      setItems(function (prevItems) {
+        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
+          var _context3;
+          return !_includesInstanceProperty(_context3 = _Array$from(defaultSelectedKeys)).call(_context3, item.key);
+        });
+      });
+    }
   }, []);
   useEffect(function () {
-    if (selectedKeys) selectionManager.setSelectedKeys(selectedKeys);
+    if (selectedKeys) {
+      selectionManager.setSelectedKeys(selectedKeys);
+      setItems(function (prevItems) {
+        return _filterInstanceProperty(prevItems).call(prevItems, function (item) {
+          var _context4;
+          return !_includesInstanceProperty(_context4 = _Array$from(selectedKeys)).call(_context4, item.key);
+        });
+      });
+    }
   }, []);
   useEffect(function () {
     if (onOpenChange) onOpenChange(isOpen);
     if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
-    var _context3, _context4;
+    var _context5, _context6;
     var key = _trimInstanceProperty(inputValue).call(inputValue);
     if (key === '') {
       return;
@@ -213,8 +229,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (state.selectionManager.isSelected(key)) {
       return;
     }
-    selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [key]));
-    setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
+    selectionManager.setSelectedKeys(_concatInstanceProperty(_context5 = []).call(_context5, _Array$from(selectionManager.state.selectedKeys), [key]));
+    setCustomItems(_concatInstanceProperty(_context6 = []).call(_context6, customItems, [{
       id: key,
       key: key,
       name: key
@@ -292,8 +308,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
   var deleteItem = function deleteItem(key, e) {
-    var _context5;
-    var activeBadgesKeys = _reduceInstanceProperty(_context5 = closeBadgeRefs.current).call(_context5, function (result, item) {
+    var _context7;
+    var activeBadgesKeys = _reduceInstanceProperty(_context7 = closeBadgeRefs.current).call(_context7, function (result, item) {
       if (item) {
         result.push(item.dataset.item);
       }
@@ -328,8 +344,8 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }, name);
   };
   var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context6, _context7;
-    var item = _findInstanceProperty(_context6 = _concatInstanceProperty(_context7 = []).call(_context7, initialItems, customItems)).call(_context6, function (el) {
+    var _context8, _context9;
+    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
       return el.key === key;
     });
     if (item) {
@@ -393,9 +409,9 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }))));
   };
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context8 = _Array$from(selectionManager.selectedKeys)).call(_context8, function (key, i) {
-    var _context9, _context10;
-    var item = _findInstanceProperty(_context9 = _concatInstanceProperty(_context10 = []).call(_context10, initialItems, customItems)).call(_context9, function (el) {
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context10 = _Array$from(selectionManager.selectedKeys)).call(_context10, function (key, i) {
+    var _context11, _context12;
+    var item = _findInstanceProperty(_context11 = _concatInstanceProperty(_context12 = []).call(_context12, initialItems, customItems)).call(_context11, function (el) {
       return el.key === key;
     });
     if (item) {

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

@@ -675,6 +675,20 @@ test('default selected keys', function () {
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('default selected keys are removed from the list', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.click(input);
+  var listbox = screen.queryByRole('listbox');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('selected keys', function () {
   getComponent({
     selectedKeys: [items[1].key, items[2].key]
@@ -686,6 +700,20 @@ test('selected keys', function () {
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
+test('selected keys are removed from the list', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.click(input);
+  var listbox = screen.queryByRole('listbox');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
+});
 test('read only keys', function () {
   getComponent({
     readOnlyKeys: [items[1].key, items[2].key]

package/package.json

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