@pingux/astro 1.10.1-alpha.2 → 1.11.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.10.0...@pingux/astro@1.11.0) (2022-05-05)
+
+
+### Bug Fixes
+
+* [UIP-5359] refactor Array Field to include label ([ea9c306](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ea9c306e062b43721d410f52ae5b34e44ea429a5))
+* [UIP-5380] Combobox doesnt open when clicked into after selection ([795675d](https://gitlab.corp.pingidentity.com/ux/pingux/commit/795675d74a1ad8c525ed72acf679dd51c8a57a98))
+* [UIP-5405] Rename MultiSelectFilter component ([5167f64](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5167f647d1996f9ec33cba2e5ddc00408ca32069))
+
+
+### Features
+
+* [UIP-5409] Read Only Chips in Multivalues Field ([71b8b29](https://gitlab.corp.pingidentity.com/ux/pingux/commit/71b8b292d9d4fd8c75a297c5918f5cede8b947b4))
+
+
+
+
+
 # [1.10.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.9.0...@pingux/astro@1.10.0) (2022-04-28)
 
 

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

@@ -114,6 +114,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       onOpenChange = props.onOpenChange,
       onSelectionChange = props.onSelectionChange,
       placeholder = props.placeholder,
+      _props$readOnlyKeys = props.readOnlyKeys,
+      readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps;
   var hasCustomValue = mode === 'non-restrictive';
@@ -162,7 +164,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         return contains(item.textValue, filterString);
       });
     },
-    items: items,
+    items: (0, _filter["default"])(items).call(items, function (_ref) {
+      var key = _ref.key;
+      return !(0, _includes["default"])(readOnlyKeys).call(readOnlyKeys, key);
+    }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
   }));
@@ -309,10 +314,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     selectionManager.toggleSelection(key);
   };
 
-  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context4 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context4, function (key) {
-    var _context5, _context6;
-
-    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+  var readOnlyItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var item = (0, _find["default"])(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
 
@@ -320,25 +323,33 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       return (0, _react2.jsx)(_.Chip, {
         key: item.key,
         role: "presentation",
-        bg: "active",
-        color: "white",
         label: item.name,
-        sx: {
-          alignSelf: 'center',
-          cursor: 'default',
-          height: '100%',
-          m: 5,
-          mr: 10,
-          ml: 0,
-          py: 3,
-          pr: 0
-        },
+        variant: "boxes.readOnlyChip",
+        bg: "white",
         textProps: {
           sx: {
-            fontWeight: 500,
-            textTransform: 'none'
+            color: 'text.primary'
           }
         }
+      });
+    }
+
+    return null;
+  }));
+  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context4 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context4, function (key) {
+    var _context5, _context6;
+
+    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+      return el.key === key;
+    });
+
+    if (item) {
+      return (0, _react2.jsx)(_.Chip, {
+        key: item.key,
+        role: "presentation",
+        variant: "boxes.selectedItemChip",
+        bg: "active",
+        label: item.name
       }, (0, _react2.jsx)(_.IconButton, {
         "aria-label": "delete",
         onPress: function onPress() {
@@ -406,7 +417,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: selectedItems
+      beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
   }, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
@@ -517,6 +528,11 @@ MultivaluesField.propTypes = {
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
 
+  /**
+   * The item keys that are readonly. These items cannot be changed or selected.
+   */
+  readOnlyKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
   /** The currently selected keys in the collection (controlled). */
   selectedKeys: _isIterable.isIterableProp,
   // /** Props object that is spread directly into the ScrollBox element. */

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

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -217,4 +217,18 @@ var WithCustomSize = function WithCustomSize(args) {
   }))));
 };
 
-exports.WithCustomSize = WithCustomSize;
+exports.WithCustomSize = WithCustomSize;
+
+var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithReadOnlyValues = WithReadOnlyValues;

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

@@ -458,4 +458,25 @@ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerat
       }
     }
   }, _callee);
-})));
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});

package/lib/cjs/styles/variants/boxes.js

@@ -133,6 +133,27 @@ var chip = {
   }
 };
 exports.chip = chip;
+
+var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0
+});
+
+var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  py: 3,
+  pr: 0
+});
+
+var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  p: 3,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -309,6 +330,8 @@ var _default = {
   base: base,
   card: card,
   chip: chip,
+  selectedItemChip: selectedItemChip,
+  readOnlyChip: readOnlyChip,
   copy: copy,
   datePicker: datePicker,
   environmentChip: environmentChip,

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -67,6 +67,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       onOpenChange = props.onOpenChange,
       onSelectionChange = props.onSelectionChange,
       placeholder = props.placeholder,
+      _props$readOnlyKeys = props.readOnlyKeys,
+      readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps;
   var hasCustomValue = mode === 'non-restrictive';
@@ -115,7 +117,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         return contains(item.textValue, filterString);
       });
     },
-    items: items,
+    items: _filterInstanceProperty(items).call(items, function (_ref) {
+      var key = _ref.key;
+      return !_includesInstanceProperty(readOnlyKeys).call(readOnlyKeys, key);
+    }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
   }));
@@ -262,10 +267,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionManager.toggleSelection(key);
   };
 
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context4 = _Array$from(selectionManager.selectedKeys)).call(_context4, function (key) {
-    var _context5, _context6;
-
-    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+  var readOnlyItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
 
@@ -273,25 +276,34 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return ___EmotionJSX(Chip, {
         key: item.key,
         role: "presentation",
-        bg: "active",
-        color: "white",
         label: item.name,
-        sx: {
-          alignSelf: 'center',
-          cursor: 'default',
-          height: '100%',
-          m: 5,
-          mr: 10,
-          ml: 0,
-          py: 3,
-          pr: 0
-        },
+        variant: "boxes.readOnlyChip",
+        bg: "white",
         textProps: {
           sx: {
-            fontWeight: 500,
-            textTransform: 'none'
+            color: 'text.primary'
           }
         }
+      });
+    }
+
+    return null;
+  }));
+
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context4 = _Array$from(selectionManager.selectedKeys)).call(_context4, function (key) {
+    var _context5, _context6;
+
+    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+      return el.key === key;
+    });
+
+    if (item) {
+      return ___EmotionJSX(Chip, {
+        key: item.key,
+        role: "presentation",
+        variant: "boxes.selectedItemChip",
+        bg: "active",
+        label: item.name
       }, ___EmotionJSX(IconButton, {
         "aria-label": "delete",
         onPress: function onPress() {
@@ -360,7 +372,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: selectedItems
+      beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
   }, inputProps)), ___EmotionJSX(PopoverContainer, {
@@ -471,6 +483,11 @@ MultivaluesField.propTypes = {
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
 
+  /**
+   * The item keys that are readonly. These items cannot be changed or selected.
+   */
+  readOnlyKeys: PropTypes.arrayOf(PropTypes.string),
+
   /** The currently selected keys in the collection (controlled). */
   selectedKeys: isIterableProp,
   // /** Props object that is spread directly into the ScrollBox element. */

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -171,4 +171,15 @@ export var WithCustomSize = function WithCustomSize(args) {
       "data-id": item.name
     }, item.name);
   }))));
+};
+export var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
 };

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

@@ -342,4 +342,19 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
       }
     }
   }, _callee);
-})));
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});

package/lib/styles/variants/boxes.js

@@ -113,6 +113,27 @@ export var chip = {
     }
   }
 };
+
+var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0
+});
+
+var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  py: 3,
+  pr: 0
+});
+
+var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  p: 3,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -289,6 +310,8 @@ export default {
   base: base,
   card: card,
   chip: chip,
+  selectedItemChip: selectedItemChip,
+  readOnlyChip: readOnlyChip,
   copy: copy,
   datePicker: datePicker,
   environmentChip: environmentChip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.10.1-alpha.2",
+  "version": "1.11.1-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",