@pingux/astro 1.26.1-alpha.7 → 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/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/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.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",