@pingux/astro 1.26.1-alpha.7 → 1.27.0-alpha.1

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

@@ -207,26 +207,26 @@ var Controlled = function Controlled() {
       fieldValues = _React$useState2[0],
       setFieldValues = _React$useState2[1];
 
-  function handleOnChange(values) {
+  var handleOnChange = function handleOnChange(values) {
     setFieldValues(values);
-  }
+  };
 
-  function handleOnAdd() {
+  var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
 
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [defaultEmptyField]);
     });
-  }
+  };
 
-  function handleOnDelete(fieldId) {
+  var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
       return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
         var id = _ref2.id;
         return id !== fieldId;
       });
     });
-  }
+  };
 
   return (0, _react2.jsx)(_index.ArrayField, {
     value: fieldValues,

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -230,7 +230,10 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "boxes.fileInputFieldWrapper"
   }, (0, _utils.mergeProps)(fieldContainerProps, others), {
     className: classNames
-  }, getRootProps()), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }, getRootProps(), {
+    // to pass accessibility test, this removes focusable dependents
+    role: "none"
+  }), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -294,8 +297,8 @@ FileInputField.propTypes = {
    * */
   fileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.required,
-    name: _propTypes["default"].string.required,
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),
@@ -303,8 +306,8 @@ FileInputField.propTypes = {
   /** Default array of objects for uploaded files. */
   defaultFileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     fileObj: _propTypes["default"].shape({}),
-    id: _propTypes["default"].string.required,
-    name: _propTypes["default"].string.required,
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
     downloadLink: _propTypes["default"].string,
     status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
   })),

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -168,7 +168,7 @@ LinkSelectField.propTypes = {
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
    */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].any),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
 
   /** The label for the select element. */
   label: _propTypes["default"].node,

package/lib/cjs/components/ListBox/Option.js

@@ -124,7 +124,10 @@ Option.propTypes = {
   hasVirtualFocus: _propTypes["default"].bool,
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({}),
+    props: _propTypes["default"].shape({
+      'data-id': _propTypes["default"].string,
+      isSeparator: _propTypes["default"].bool
+    }),
     rendered: _propTypes["default"].node
   }),
   state: _propTypes["default"].shape({

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -174,7 +174,8 @@ MenuItem.propTypes = {
     key: _propTypes["default"].string,
     props: _propTypes["default"].shape({
       'data-id': _propTypes["default"].string,
-      isSeparator: _propTypes["default"].bool
+      isSeparator: _propTypes["default"].bool,
+      isPressed: _propTypes["default"].bool
     }),
     rendered: _propTypes["default"].node,
     isDisabled: _propTypes["default"].bool

package/lib/cjs/components/Messages/Message.js

@@ -184,7 +184,8 @@ Message.propTypes = {
       icon: _propTypes["default"].elementType,
 
       /* Hides the message with an animated transition */
-      isHidden: _propTypes["default"].bool
+      isHidden: _propTypes["default"].bool,
+      'data-id': _propTypes["default"].string
     })
   }),
 

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

@@ -84,7 +84,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 _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Complex control that lets you choose several tags from the dropdown list.
@@ -96,7 +96,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Stately.
  */
 var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context4;
+  var _context6;
 
   var defaultSelectedKeys = props.defaultSelectedKeys,
       direction = props.direction,
@@ -231,7 +231,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputRef.current) {
-      setMenuWidth(inputRef.current.offsetWidth);
+      setMenuWidth("".concat(inputRef.current.offsetWidth + 2, "px"));
     }
   }, [inputRef, isOpen, setMenuWidth]);
   (0, _utils.useResizeObserver)({
@@ -323,7 +323,39 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     selectionManager.toggleSelection(key);
   };
 
-  var readOnlyItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
+  var readOnlyTextItem = function readOnlyTextItem(key, name) {
+    return (0, _react2.jsx)(_.Text, {
+      key: key,
+      role: "presentation",
+      label: name,
+      variant: "bodyStrong",
+      sx: {
+        bg: 'accent.95',
+        fontSize: 'sm',
+        alignSelf: 'center',
+        ':not(:last-of-type):after': {
+          content: "\",\xA0\""
+        }
+      }
+    }, name);
+  };
+
+  var readOnlyInputEntry = (0, _react2.jsx)(_react["default"].Fragment, null, isReadOnly && (readOnlyKeys.length ? (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var _context4, _context5;
+
+    var item = (0, _find["default"])(_context4 = (0, _concat["default"])(_context5 = []).call(_context5, initialItems, customItems)).call(_context4, function (el) {
+      return el.key === key;
+    });
+
+    if (item) {
+      return readOnlyTextItem(item.key, item.name);
+    }
+
+    return null;
+  }) : (0, _map["default"])(initialItems).call(initialItems, function (item) {
+    return readOnlyTextItem(item.key, item.name);
+  })));
+  var readOnlyItems = (0, _react2.jsx)(_react["default"].Fragment, null, !isReadOnly && (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = (0, _find["default"])(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
@@ -345,10 +377,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     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 selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context6 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context6, function (key) {
+    var _context7, _context8;
 
-    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+    var item = (0, _find["default"])(_context7 = (0, _concat["default"])(_context8 = []).call(_context8, initialItems, customItems)).call(_context7, function (el) {
       return el.key === key;
     });
 
@@ -403,7 +435,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     placeholder: placeholder,
     wrapperProps: {
       ref: inputRef,
-      variant: 'forms.input.multivaluesWrapper'
+      variant: 'forms.input.multivaluesWrapper',
+      sx: isReadOnly && {
+        boxShadow: 'inset 0 0 0 100px #e5e9f8',
+        border: 'none'
+      }
     },
     status: status
   });
@@ -414,12 +450,14 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       if (_onBlur) _onBlur(e.nativeEvent);
     },
     onChange: function onChange(e) {
-      setIsOpen(true);
       setFilterString(e.target.value);
       if (onInputChange) onInputChange(e.target.value);
     },
     onFocus: function onFocus(e) {
-      setIsOpen(true);
+      if (!isReadOnly) {
+        setIsOpen(true);
+      }
+
       if (_onFocus) _onFocus(e.nativeEvent);
     },
     onKeyDown: keyDown,
@@ -427,7 +465,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems)
+      beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
     value: filterString
   }, inputProps)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
@@ -570,6 +608,7 @@ MultivaluesField.propTypes = {
 };
 MultivaluesField.defaultProps = {
   direction: 'bottom',
+  isReadOnly: false,
   mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300

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

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Error = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.ReadOnlyField = exports.Error = exports.Default = exports.Controlled = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -398,4 +398,34 @@ var Error = function Error(args) {
   }));
 };
 
-exports.Error = Error;
+exports.Error = Error;
+
+var ReadOnlyField = function ReadOnlyField(args) {
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+      isOpen = _useState20[0],
+      setIsOpen = _useState20[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args, {
+    isReadOnly: true,
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.ReadOnlyField = ReadOnlyField;

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

@@ -493,4 +493,38 @@ test(' multivalue field with helper text', function () {
 
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+});
+test('read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+
+  var chip = _testWrapper.screen.queryAllByRole('presentation');
+
+  expect(chip[0]).toHaveAttribute('label', items[0].name);
+  expect(chip[1]).toHaveAttribute('label', items[1].name);
+  expect(chip[2]).toHaveAttribute('label', items[2].name);
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('read only keys with read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly,
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+
+  var chip = _testWrapper.screen.queryAllByRole('presentation');
+
+  expect(chip[0]).toHaveAttribute('label', items[1].name);
+  expect(chip[1]).toHaveAttribute('label', items[2].name);
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
 });

package/lib/cjs/components/SelectField/SelectField.js

@@ -104,7 +104,7 @@ SelectField.propTypes = {
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
    */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].any),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
 
   /** The label for the select element. */
   label: _propTypes["default"].node,

package/lib/cjs/components/Tab/Tab.js

@@ -46,7 +46,7 @@ var _ = require("../..");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"];
+var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
 
 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); }
 
@@ -74,6 +74,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
       titleAttr = itemProps.titleAttr,
+      title = itemProps.title,
       otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
   var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
@@ -149,9 +150,19 @@ CollectionTab.propTypes = {
   isDisabled: _propTypes["default"].bool,
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({}),
-    rendered: _propTypes["default"].node,
-    tabLineProps: _propTypes["default"].shape({})
+    props: _propTypes["default"].shape({
+      icon: _propTypes["default"].shape({}),
+      isDisabled: _propTypes["default"].bool,
+      textValue: _propTypes["default"].string,
+      tabLineProps: _propTypes["default"].shape({}),
+      tabLabelProps: _propTypes["default"].shape({}),
+      content: _propTypes["default"].shape({}),
+      titleAttr: _propTypes["default"].string,
+      title: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].object]),
+      separator: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].bool]),
+      list: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
+    }),
+    rendered: _propTypes["default"].node
   }),
   mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -246,10 +246,10 @@ TabPicker.propTypes = {
   state: _propTypes["default"].shape({
     collection: _propTypes["default"].shape({}),
     selectedKey: _propTypes["default"].string,
-    setSelectedKey: _propTypes["default"]["function"],
+    setSelectedKey: _propTypes["default"].func,
     selectionManager: _propTypes["default"].shape({
       focusedKey: _propTypes["default"].string,
-      setFocusedKey: _propTypes["default"]["function"]
+      setFocusedKey: _propTypes["default"].func
     })
   })
 };

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -12,7 +12,7 @@ test('default useOverlayPanelState', function () {
   }),
       result = _renderHook.result;
 
-  expect(result.current).toEqual(expect.objectContaining({
+  var obj = {
     state: {
       open: expect.any(Function),
       close: expect.any(Function),
@@ -20,5 +20,6 @@ test('default useOverlayPanelState', function () {
       isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function)
-  }));
+  };
+  expect(result.current).toEqual(obj);
 });

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

@@ -143,7 +143,15 @@ var useSelectField = function useSelectField(props, ref) {
       labelProps = _useSelect.labelProps,
       triggerProps = _useSelect.triggerProps,
       valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps;
+      menuProps = _useSelect.menuProps; // The following props are being passed into multiple
+  // DOM elements that leads to multiple test failures
+  // and these props are never used in any components
+  // that depend on useSelectField
+
+
+  delete menuProps.shouldSelectOnPressUp;
+  delete menuProps.shouldFocusOnHover;
+  delete menuProps.disallowEmptySelection;
 
   var _useField = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
     placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,

package/lib/cjs/styles/forms/input.js

@@ -187,6 +187,8 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   pr: 10,
   pb: 5,
   pl: 12,
+  borderRadius: '2px',
+  alignItems: 'center',
   '&.has-no-status-indicator': {
     left: 0
   },

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

@@ -173,7 +173,7 @@ var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
-  p: 3,
+  p: 2.54,
   border: '1px solid',
   borderColor: 'neutral.80'
 });

package/lib/components/ArrayField/ArrayField.stories.js

@@ -182,26 +182,26 @@ export var Controlled = function Controlled() {
       fieldValues = _React$useState2[0],
       setFieldValues = _React$useState2[1];
 
-  function handleOnChange(values) {
+  var handleOnChange = function handleOnChange(values) {
     setFieldValues(values);
-  }
+  };
 
-  function handleOnAdd() {
+  var handleOnAdd = function handleOnAdd() {
     setFieldValues(function (oldValues) {
       var _context;
 
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField]);
     });
-  }
+  };
 
-  function handleOnDelete(fieldId) {
+  var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
       return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
         var id = _ref2.id;
         return id !== fieldId;
       });
     });
-  }
+  };
 
   return ___EmotionJSX(ArrayField, {
     value: fieldValues,

package/lib/components/FileInputField/FileInputField.js

@@ -180,7 +180,10 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "boxes.fileInputFieldWrapper"
   }, mergeProps(fieldContainerProps, others), {
     className: classNames
-  }, getRootProps()), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
+  }, getRootProps(), {
+    // to pass accessibility test, this removes focusable dependents
+    role: "none"
+  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -244,8 +247,8 @@ FileInputField.propTypes = {
    * */
   fileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
-    id: PropTypes.string.required,
-    name: PropTypes.string.required,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),
@@ -253,8 +256,8 @@ FileInputField.propTypes = {
   /** Default array of objects for uploaded files. */
   defaultFileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
-    id: PropTypes.string.required,
-    name: PropTypes.string.required,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     downloadLink: PropTypes.string,
     status: PropTypes.oneOf(_Object$values(statuses))
   })),

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -131,7 +131,7 @@ LinkSelectField.propTypes = {
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
    */
-  items: PropTypes.arrayOf(PropTypes.any),
+  items: PropTypes.arrayOf(PropTypes.shape({})),
 
   /** The label for the select element. */
   label: PropTypes.node,

package/lib/components/ListBox/Option.js

@@ -86,7 +86,10 @@ Option.propTypes = {
   hasVirtualFocus: PropTypes.bool,
   item: PropTypes.shape({
     key: PropTypes.string,
-    props: PropTypes.shape({}),
+    props: PropTypes.shape({
+      'data-id': PropTypes.string,
+      isSeparator: PropTypes.bool
+    }),
     rendered: PropTypes.node
   }),
   state: PropTypes.shape({

package/lib/components/MenuItem/MenuItem.js

@@ -141,7 +141,8 @@ MenuItem.propTypes = {
     key: PropTypes.string,
     props: PropTypes.shape({
       'data-id': PropTypes.string,
-      isSeparator: PropTypes.bool
+      isSeparator: PropTypes.bool,
+      isPressed: PropTypes.bool
     }),
     rendered: PropTypes.node,
     isDisabled: PropTypes.bool

package/lib/components/Messages/Message.js

@@ -141,7 +141,8 @@ Message.propTypes = {
       icon: PropTypes.elementType,
 
       /* Hides the message with an animated transition */
-      isHidden: PropTypes.bool
+      isHidden: PropTypes.bool,
+      'data-id': PropTypes.string
     })
   }),
 

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -18,7 +18,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 
 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 _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -28,7 +28,7 @@ import { FocusScope } from '@react-aria/focus';
 import { useListState } from '@react-stately/list';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, TextField } from '../..';
+import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { usePropWarning } from '../../hooks';
@@ -46,7 +46,7 @@ import FieldHelperText from '../FieldHelperText';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context4;
+  var _context6;
 
   var defaultSelectedKeys = props.defaultSelectedKeys,
       direction = props.direction,
@@ -181,7 +181,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputRef.current) {
-      setMenuWidth(inputRef.current.offsetWidth);
+      setMenuWidth("".concat(inputRef.current.offsetWidth + 2, "px"));
     }
   }, [inputRef, isOpen, setMenuWidth]);
   useResizeObserver({
@@ -273,7 +273,40 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionManager.toggleSelection(key);
   };
 
-  var readOnlyItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
+  var readOnlyTextItem = function readOnlyTextItem(key, name) {
+    return ___EmotionJSX(Text, {
+      key: key,
+      role: "presentation",
+      label: name,
+      variant: "bodyStrong",
+      sx: {
+        bg: 'accent.95',
+        fontSize: 'sm',
+        alignSelf: 'center',
+        ':not(:last-of-type):after': {
+          content: "\",\xA0\""
+        }
+      }
+    }, name);
+  };
+
+  var readOnlyInputEntry = ___EmotionJSX(React.Fragment, null, isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var _context4, _context5;
+
+    var item = _findInstanceProperty(_context4 = _concatInstanceProperty(_context5 = []).call(_context5, initialItems, customItems)).call(_context4, function (el) {
+      return el.key === key;
+    });
+
+    if (item) {
+      return readOnlyTextItem(item.key, item.name);
+    }
+
+    return null;
+  }) : _mapInstanceProperty(initialItems).call(initialItems, function (item) {
+    return readOnlyTextItem(item.key, item.name);
+  })));
+
+  var readOnlyItems = ___EmotionJSX(React.Fragment, null, !isReadOnly && _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
     var item = _findInstanceProperty(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
@@ -296,10 +329,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context4 = _Array$from(selectionManager.selectedKeys)).call(_context4, function (key) {
-    var _context5, _context6;
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context6 = _Array$from(selectionManager.selectedKeys)).call(_context6, function (key) {
+    var _context7, _context8;
 
-    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+    var item = _findInstanceProperty(_context7 = _concatInstanceProperty(_context8 = []).call(_context8, initialItems, customItems)).call(_context7, function (el) {
       return el.key === key;
     });
 
@@ -355,7 +388,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     placeholder: placeholder,
     wrapperProps: {
       ref: inputRef,
-      variant: 'forms.input.multivaluesWrapper'
+      variant: 'forms.input.multivaluesWrapper',
+      sx: isReadOnly && {
+        boxShadow: 'inset 0 0 0 100px #e5e9f8',
+        border: 'none'
+      }
     },
     status: status
   });
@@ -366,12 +403,14 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       if (_onBlur) _onBlur(e.nativeEvent);
     },
     onChange: function onChange(e) {
-      setIsOpen(true);
       setFilterString(e.target.value);
       if (onInputChange) onInputChange(e.target.value);
     },
     onFocus: function onFocus(e) {
-      setIsOpen(true);
+      if (!isReadOnly) {
+        setIsOpen(true);
+      }
+
       if (_onFocus) _onFocus(e.nativeEvent);
     },
     onKeyDown: keyDown,
@@ -379,7 +418,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems)
+      beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
     value: filterString
   }, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
@@ -522,6 +561,7 @@ MultivaluesField.propTypes = {
 };
 MultivaluesField.defaultProps = {
   direction: 'bottom',
+  isReadOnly: false,
   mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300

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

@@ -346,4 +346,31 @@ export var Error = function Error(args) {
       "data-id": item.name
     }, item.name);
   }));
+};
+export var ReadOnlyField = function ReadOnlyField(args) {
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      isOpen = _useState20[0],
+      setIsOpen = _useState20[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    items: items
+  }, args, {
+    isReadOnly: true,
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
 };

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

@@ -368,4 +368,30 @@ test(' multivalue field with helper text', function () {
   var helper = screen.getByText(helperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+});
+test('read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+  var chip = screen.queryAllByRole('presentation');
+  expect(chip[0]).toHaveAttribute('label', items[0].name);
+  expect(chip[1]).toHaveAttribute('label', items[1].name);
+  expect(chip[2]).toHaveAttribute('label', items[2].name);
+  var textArea = screen.getByLabelText(defaultProps.label);
+  expect(textArea).toHaveClass('is-read-only');
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('read only keys with read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly,
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+  var chip = screen.queryAllByRole('presentation');
+  expect(chip[0]).toHaveAttribute('label', items[1].name);
+  expect(chip[1]).toHaveAttribute('label', items[2].name);
+  var textArea = screen.getByLabelText(defaultProps.label);
+  expect(textArea).toHaveClass('is-read-only');
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
 });

package/lib/components/SelectField/SelectField.js

@@ -75,7 +75,7 @@ SelectField.propTypes = {
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
    */
-  items: PropTypes.arrayOf(PropTypes.any),
+  items: PropTypes.arrayOf(PropTypes.shape({})),
 
   /** The label for the select element. */
   label: PropTypes.node,

package/lib/components/Tab/Tab.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"];
+var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTab } from '@react-aria/tabs';
@@ -38,6 +38,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
       titleAttr = itemProps.titleAttr,
+      title = itemProps.title,
       otherItemProps = _objectWithoutProperties(itemProps, _excluded);
 
   var state = useContext(TabsContext);
@@ -113,9 +114,19 @@ CollectionTab.propTypes = {
   isDisabled: PropTypes.bool,
   item: PropTypes.shape({
     key: PropTypes.string,
-    props: PropTypes.shape({}),
-    rendered: PropTypes.node,
-    tabLineProps: PropTypes.shape({})
+    props: PropTypes.shape({
+      icon: PropTypes.shape({}),
+      isDisabled: PropTypes.bool,
+      textValue: PropTypes.string,
+      tabLineProps: PropTypes.shape({}),
+      tabLabelProps: PropTypes.shape({}),
+      content: PropTypes.shape({}),
+      titleAttr: PropTypes.string,
+      title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.object]),
+      separator: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+      list: PropTypes.arrayOf(PropTypes.shape({}))
+    }),
+    rendered: PropTypes.node
   }),
   mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),

package/lib/components/TabPicker/TabPicker.js

@@ -207,10 +207,10 @@ TabPicker.propTypes = {
   state: PropTypes.shape({
     collection: PropTypes.shape({}),
     selectedKey: PropTypes.string,
-    setSelectedKey: PropTypes["function"],
+    setSelectedKey: PropTypes.func,
     selectionManager: PropTypes.shape({
       focusedKey: PropTypes.string,
-      setFocusedKey: PropTypes["function"]
+      setFocusedKey: PropTypes.func
     })
   })
 };

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -6,7 +6,7 @@ test('default useOverlayPanelState', function () {
   }),
       result = _renderHook.result;
 
-  expect(result.current).toEqual(expect.objectContaining({
+  var obj = {
     state: {
       open: expect.any(Function),
       close: expect.any(Function),
@@ -14,5 +14,6 @@ test('default useOverlayPanelState', function () {
       isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function)
-  }));
+  };
+  expect(result.current).toEqual(obj);
 });

package/lib/hooks/useSelectField/useSelectField.js

@@ -103,7 +103,15 @@ var useSelectField = function useSelectField(props, ref) {
       labelProps = _useSelect.labelProps,
       triggerProps = _useSelect.triggerProps,
       valueProps = _useSelect.valueProps,
-      menuProps = _useSelect.menuProps;
+      menuProps = _useSelect.menuProps; // The following props are being passed into multiple
+  // DOM elements that leads to multiple test failures
+  // and these props are never used in any components
+  // that depend on useSelectField
+
+
+  delete menuProps.shouldSelectOnPressUp;
+  delete menuProps.shouldFocusOnHover;
+  delete menuProps.disallowEmptySelection;
 
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
     placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,

package/lib/styles/forms/input.js

@@ -165,6 +165,8 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   pr: 10,
   pb: 5,
   pl: 12,
+  borderRadius: '2px',
+  alignItems: 'center',
   '&.has-no-status-indicator': {
     left: 0
   },

package/lib/styles/variants/boxes.js

@@ -153,7 +153,7 @@ var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
 });
 
 var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
-  p: 3,
+  p: 2.54,
   border: '1px solid',
   borderColor: 'neutral.80'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.26.1-alpha.7",
+  "version": "1.27.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -137,7 +137,7 @@
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",