@pingux/astro 1.26.1-alpha.5 → 1.27.0-alpha.0

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/recipes/ApplicationSearchDropdown.stories.js

@@ -117,6 +117,44 @@ var items = [{
   logo: _EmailIcon["default"],
   id: '8'
 }];
+var sx = {
+  appBox: {
+    alignSelf: 'center',
+    maxWidth: '260px'
+  },
+  appTitle: {
+    alignSelf: 'center',
+    fontWeight: '700',
+    mr: 'auto'
+  },
+  appDesc: {
+    alignSelf: 'center',
+    fontSize: '15px',
+    mr: 'auto'
+  },
+  pinIconBox: {
+    alignSelf: 'center',
+    ml: 'md',
+    '&.is-hovered': {
+      bg: 'transparent'
+    },
+    '&.is-pressed': {
+      'path': {
+        fill: 'active'
+      }
+    }
+  },
+  listViewRow: {
+    bg: 'red',
+    padding: '-4px'
+  },
+  listViewItem: {
+    bg: 'white',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  }
+};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -197,42 +235,21 @@ var Default = function Default() {
       ml: "-10px"
     }), (0, _react2.jsx)(_index.Box, {
       alignSelf: "center",
-      sx: {
-        maxWidth: '260px'
-      }
+      sx: sx.appBox
     }, (0, _react2.jsx)(_index.Text, {
       variant: "itemTitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontWeight: '700'
-      }
+      sx: sx.appTitle
     }, item.application), (0, _react2.jsx)(_index.Text, {
       variant: "itemSubtitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontSize: '15px'
-      }
+      sx: sx.appDesc
     }, item.description)), (0, _react2.jsx)(_index.Box, {
       alignSelf: "center"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "Pin ".concat(item.application),
-      ml: "md",
-      alignSelf: "center",
       onPress: function onPress() {
         return onPinPress();
       },
-      sx: {
-        '&.is-hovered': {
-          bg: 'transparent'
-        },
-        '&.is-pressed': {
-          'path': {
-            fill: 'active'
-          }
-        }
-      }
+      sx: sx.pinIconBox
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PinIcon["default"],
       sx: {
@@ -287,10 +304,7 @@ var Default = function Default() {
       return setIsOpen(!isOpen);
     },
     rowProps: {
-      sx: {
-        bg: 'red',
-        padding: '-4px'
-      }
+      sx: sx.listViewRow
     },
     padding: "-4px"
   }, function (item) {
@@ -300,12 +314,7 @@ var Default = function Default() {
       "data-id": item.key,
       hasSeparator: false,
       listItemProps: {
-        sx: {
-          bg: 'white',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, (0, _react2.jsx)(InnerHtml, {
       item: item

package/lib/cjs/recipes/CollapsiblePanel.stories.js

@@ -138,6 +138,33 @@ var data = [{
   subtitle: '',
   chipValue: '29'
 }];
+var sx = {
+  listViewItem: {
+    bg: 'white',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  },
+  defaultSelectedBox: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 5,
+    minHeight: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    p: 'xs',
+    maxWidth: '50%'
+  },
+  defaultSelectedTitle: {
+    fontSize: 'sm',
+    pl: 'xs',
+    maxHeight: 32,
+    overflow: 'hidden'
+  }
+};
 
 var Default = function Default() {
   var _useState = (0, _react.useState)(data),
@@ -257,15 +284,7 @@ var Default = function Default() {
       "data-id": item.key,
       listItemProps: {
         isRow: true,
-        sx: {
-          bg: 'white',
-          width: '100%',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, (0, _react2.jsx)(_.Box, {
       isRow: true
@@ -293,16 +312,7 @@ var Default = function Default() {
       variant: "listSubtitle"
     }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_.Box, {
       isRow: true,
-      sx: {
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        borderRadius: 5,
-        minHeight: 22,
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 'xs',
-        maxWidth: '50%'
-      }
+      sx: sx.defaultSelectedBox
     }, (0, _react2.jsx)(_.Icon, {
       icon: _CheckIcon["default"],
       color: "neutral.20",
@@ -311,12 +321,7 @@ var Default = function Default() {
         flexShrink: 0
       }
     }), (0, _react2.jsx)(_.Text, {
-      sx: {
-        fontSize: 'sm',
-        pl: 'xs',
-        maxHeight: 32,
-        overflow: 'hidden'
-      }
+      sx: sx.defaultSelectedTitle
     }, "Added by Filter")) : (0, _react2.jsx)(_.CheckboxField, {
       controlProps: {
         color: 'neutral.10',

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -32,25 +32,42 @@ var _default = {
   title: 'Recipes/ConditionalFilter'
 };
 exports["default"] = _default;
-
-var Default = function Default() {
-  var customChipStyles = {
+var sx = {
+  customChipStyles: {
+    marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
     },
     minWidth: '65px',
     'z-index': '1'
-  };
-  var borderedBoxStyles = {
+  },
+  borderedBoxStyles: {
     '&::after': {
       bg: 'decorative.7'
     },
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'neutral.80',
-    borderRadius: '4px'
-  };
+    borderRadius: '4px',
+    padding: 'sm',
+    width: '100%'
+  },
+  allConditionsBox: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    alignItems: 'center',
+    borderRadius: '4px',
+    marginTop: 'md'
+  },
+  defaultText: {
+    textTransform: 'none',
+    color: 'inherit'
+  }
+};
+
+var Default = function Default() {
   var allConditions = [{
     field1: 'Family Name',
     field3: 'John',
@@ -122,8 +139,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Chip, {
     label: "All",
     bg: "decorative.7",
-    mr: "sm",
-    sx: customChipStyles
+    sx: sx.customChipStyles
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -135,14 +151,7 @@ var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      sx: {
-        '&::after': {
-          bg: 'decorative.7'
-        }
-      },
-      mt: "15px"
+      sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
@@ -150,8 +159,7 @@ var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
@@ -160,18 +168,14 @@ var Default = function Default() {
     isLast: true
   }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
     mt: "md",
-    sx: borderedBoxStyles,
-    width: "100%"
+    sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Chip, {
     label: "Any",
     bg: "decorative.4",
-    mr: "sm",
-    sx: customChipStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -186,14 +190,8 @@ var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
       width: "100%",
-      sx: {
-        '&::after': {
-          bg: 'decorative.4'
-        }
-      }
+      sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
@@ -201,8 +199,7 @@ var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   })))))), (0, _react2.jsx)(_index.Button, {
@@ -235,10 +232,7 @@ var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
     name: "all",
     key: "all",
@@ -247,10 +241,7 @@ var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",
@@ -310,11 +301,7 @@ var Default = function Default() {
     mr: "sm"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    width: "100%",
-    sx: borderedBoxStyles,
-    mr: "xs"
+    sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
@@ -330,10 +317,7 @@ var Default = function Default() {
     },
     "aria-label": "any"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
     name: "all",
     key: "all",
@@ -342,10 +326,7 @@ var Default = function Default() {
     },
     "aria-label": "all"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",

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/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/recipes/ApplicationSearchDropdown.stories.js

@@ -76,6 +76,44 @@ var items = [{
   logo: Email,
   id: '8'
 }];
+var sx = {
+  appBox: {
+    alignSelf: 'center',
+    maxWidth: '260px'
+  },
+  appTitle: {
+    alignSelf: 'center',
+    fontWeight: '700',
+    mr: 'auto'
+  },
+  appDesc: {
+    alignSelf: 'center',
+    fontSize: '15px',
+    mr: 'auto'
+  },
+  pinIconBox: {
+    alignSelf: 'center',
+    ml: 'md',
+    '&.is-hovered': {
+      bg: 'transparent'
+    },
+    '&.is-pressed': {
+      'path': {
+        fill: 'active'
+      }
+    }
+  },
+  listViewRow: {
+    bg: 'red',
+    padding: '-4px'
+  },
+  listViewItem: {
+    bg: 'white',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  }
+};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -155,42 +193,21 @@ export var Default = function Default() {
       ml: "-10px"
     }), ___EmotionJSX(Box, {
       alignSelf: "center",
-      sx: {
-        maxWidth: '260px'
-      }
+      sx: sx.appBox
     }, ___EmotionJSX(Text, {
       variant: "itemTitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontWeight: '700'
-      }
+      sx: sx.appTitle
     }, item.application), ___EmotionJSX(Text, {
       variant: "itemSubtitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontSize: '15px'
-      }
+      sx: sx.appDesc
     }, item.description)), ___EmotionJSX(Box, {
       alignSelf: "center"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "Pin ".concat(item.application),
-      ml: "md",
-      alignSelf: "center",
       onPress: function onPress() {
         return onPinPress();
       },
-      sx: {
-        '&.is-hovered': {
-          bg: 'transparent'
-        },
-        '&.is-pressed': {
-          'path': {
-            fill: 'active'
-          }
-        }
-      }
+      sx: sx.pinIconBox
     }, ___EmotionJSX(Icon, {
       icon: Pin,
       sx: {
@@ -245,10 +262,7 @@ export var Default = function Default() {
       return setIsOpen(!isOpen);
     },
     rowProps: {
-      sx: {
-        bg: 'red',
-        padding: '-4px'
-      }
+      sx: sx.listViewRow
     },
     padding: "-4px"
   }, function (item) {
@@ -258,12 +272,7 @@ export var Default = function Default() {
       "data-id": item.key,
       hasSeparator: false,
       listItemProps: {
-        sx: {
-          bg: 'white',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, ___EmotionJSX(InnerHtml, {
       item: item

package/lib/recipes/CollapsiblePanel.stories.js

@@ -95,6 +95,33 @@ var data = [{
   subtitle: '',
   chipValue: '29'
 }];
+var sx = {
+  listViewItem: {
+    bg: 'white',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  },
+  defaultSelectedBox: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 5,
+    minHeight: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    p: 'xs',
+    maxWidth: '50%'
+  },
+  defaultSelectedTitle: {
+    fontSize: 'sm',
+    pl: 'xs',
+    maxHeight: 32,
+    overflow: 'hidden'
+  }
+};
 export var Default = function Default() {
   var _useState = useState(data),
       _useState2 = _slicedToArray(_useState, 2),
@@ -213,15 +240,7 @@ export var Default = function Default() {
       "data-id": item.key,
       listItemProps: {
         isRow: true,
-        sx: {
-          bg: 'white',
-          width: '100%',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, ___EmotionJSX(Box, {
       isRow: true
@@ -249,16 +268,7 @@ export var Default = function Default() {
       variant: "listSubtitle"
     }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
       isRow: true,
-      sx: {
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        borderRadius: 5,
-        minHeight: 22,
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 'xs',
-        maxWidth: '50%'
-      }
+      sx: sx.defaultSelectedBox
     }, ___EmotionJSX(Icon, {
       icon: CheckIcon,
       color: "neutral.20",
@@ -267,12 +277,7 @@ export var Default = function Default() {
         flexShrink: 0
       }
     }), ___EmotionJSX(Text, {
-      sx: {
-        fontSize: 'sm',
-        pl: 'xs',
-        maxHeight: 32,
-        overflow: 'hidden'
-      }
+      sx: sx.defaultSelectedTitle
     }, "Added by Filter")) : ___EmotionJSX(CheckboxField, {
       controlProps: {
         color: 'neutral.10',

package/lib/recipes/ConditionalFilter.stories.js

@@ -10,24 +10,41 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/ConditionalFilter'
 };
-export var Default = function Default() {
-  var customChipStyles = {
+var sx = {
+  customChipStyles: {
+    marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
     },
     minWidth: '65px',
     'z-index': '1'
-  };
-  var borderedBoxStyles = {
+  },
+  borderedBoxStyles: {
     '&::after': {
       bg: 'decorative.7'
     },
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'neutral.80',
-    borderRadius: '4px'
-  };
+    borderRadius: '4px',
+    padding: 'sm',
+    width: '100%'
+  },
+  allConditionsBox: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    alignItems: 'center',
+    borderRadius: '4px',
+    marginTop: 'md'
+  },
+  defaultText: {
+    textTransform: 'none',
+    color: 'inherit'
+  }
+};
+export var Default = function Default() {
   var allConditions = [{
     field1: 'Family Name',
     field3: 'John',
@@ -100,8 +117,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Chip, {
     label: "All",
     bg: "decorative.7",
-    mr: "sm",
-    sx: customChipStyles
+    sx: sx.customChipStyles
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
@@ -113,14 +129,7 @@ export var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
-      sx: {
-        '&::after': {
-          bg: 'decorative.7'
-        }
-      },
-      mt: "15px"
+      sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
@@ -128,8 +137,7 @@ export var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3))));
   }), ___EmotionJSX(Box, {
@@ -138,18 +146,14 @@ export var Default = function Default() {
     isLast: true
   }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
     mt: "md",
-    sx: borderedBoxStyles,
-    width: "100%"
+    sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Chip, {
     label: "Any",
     bg: "decorative.4",
-    mr: "sm",
-    sx: customChipStyles,
+    sx: sx.customChipStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
     ml: "sm"
@@ -164,14 +168,8 @@ export var Default = function Default() {
       variant: "forms.input.container",
       bg: "white",
       isRow: true,
-      alignItems: "center",
-      borderRadius: "4px",
       width: "100%",
-      sx: {
-        '&::after': {
-          bg: 'decorative.4'
-        }
-      }
+      sx: sx.allConditionsBox
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
@@ -179,8 +177,7 @@ export var Default = function Default() {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customChipStyles,
-      mr: "sm",
+      sx: sx.customChipStyles,
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));
   })))))), ___EmotionJSX(Button, {
@@ -213,10 +210,7 @@ export var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), ___EmotionJSX(RockerButton, {
     name: "all",
     key: "all",
@@ -225,10 +219,7 @@ export var Default = function Default() {
     },
     "aria-label": "temp-label"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",
@@ -288,11 +279,7 @@ export var Default = function Default() {
     mr: "sm"
   }), ___EmotionJSX(Box, {
     variant: "forms.input.container",
-    borderRadius: "4px",
-    p: "sm",
-    width: "100%",
-    sx: borderedBoxStyles,
-    mr: "xs"
+    sx: sx.borderedBoxStyles
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
@@ -308,10 +295,7 @@ export var Default = function Default() {
     },
     "aria-label": "any"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "Any")), ___EmotionJSX(RockerButton, {
     name: "all",
     key: "all",
@@ -320,10 +304,7 @@ export var Default = function Default() {
     },
     "aria-label": "all"
   }, ___EmotionJSX(Text, {
-    sx: {
-      textTransform: 'none',
-      color: 'inherit'
-    }
+    sx: sx.defaultText
   }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
     variant: "inline",
     width: "fit-content",

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.5",
+  "version": "1.27.0-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",