@pingux/astro 1.25.1-alpha.0 → 1.25.1-alpha.3

package/README.md

@@ -19,10 +19,11 @@ Yarn:
 
 ## Usage
 
-All apps should be wrapped in an <AstroWrapper> for full functionality and styling.
+All apps should be wrapped in an `<AstroWrapper>` for full functionality and styling.
 
 ```
-Import { AstroWrapper } from ‘@pingux/astro’;
+import { AstroWrapper } from ‘@pingux/astro’;
+
 <AstroWrapper>
   <App />
 </AstroWrapper>
@@ -34,7 +35,7 @@ Astro uses [Storybook](https://storybook.js.org/) for component documentation. O
 
 `yarn && yarn start`
 
-The Storybook server defaults to  `https://localhost:6006` . This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
+The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
 Component prop documentation is available under the “documentation” tab per each component story. Most props can be toggled and configured for preview purposes within the prop table.
 
@@ -63,12 +64,6 @@ Astro’s [changelog](CHANGELOG.md) notes all features and bug fixes within each
 
 Astro is closed for open contributions. However, we are appreciative of bug reports and suggestions. Please use GitHub Issues to submit bug reports and suggestions.
 
-
-## Roadmap
-
-Astro is currently in a beta stage. For more information on when 1.0.0 will be released keep an eye out for our upcoming roadmap.
-
-
 ## Licensing
 
 This project is licensed under the Apache license. See the [LICENSE](LICENSE) file for more information.

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

@@ -28,6 +28,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
@@ -70,6 +72,10 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _hooks = require("../../hooks");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
 var _react2 = require("@emotion/react");
 
 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); }
@@ -96,8 +102,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       direction = props.direction,
       _props$disabledKeys = props.disabledKeys,
       disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
+      containerProps = props.containerProps,
       hasAutoFocus = props.hasAutoFocus,
       hasNoStatusIndicator = props.hasNoStatusIndicator,
+      helperText = props.helperText,
       customInputProps = props.inputProps,
       isDisabled = props.isDisabled,
       isNotFlippable = props.isNotFlippable,
@@ -117,7 +125,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       _props$readOnlyKeys = props.readOnlyKeys,
       readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
-      scrollBoxProps = props.scrollBoxProps;
+      scrollBoxProps = props.scrollBoxProps,
+      status = props.status;
   var hasCustomValue = mode === 'non-restrictive';
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
 
@@ -395,10 +404,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     wrapperProps: {
       ref: inputRef,
       variant: 'forms.input.multivaluesWrapper'
-    }
+    },
+    status: status
   });
 
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       setIsOpen(false);
       if (_onBlur) _onBlur(e.nativeEvent);
@@ -420,7 +430,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
-  }, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
+  }, inputProps)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText), (0, _react2.jsx)(_.PopoverContainer, {
     ref: popoverRef,
     hasNoArrow: true,
     isNonModal: true,
@@ -430,6 +442,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, listbox));
 });
 MultivaluesField.propTypes = {
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: _propTypes["default"].shape({}),
+
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: _isIterable.isIterableProp,
 
@@ -447,6 +462,9 @@ MultivaluesField.propTypes = {
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
 
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
   /**
    * Props that get passed as-is to the underlying TextField element
    */
@@ -545,14 +563,18 @@ MultivaluesField.propTypes = {
   /** @ignore */
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object, _propTypes["default"].number])
-  })
+  }),
+
+  /** Determines the input status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
 };
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300
-  }
+  },
+  status: _statuses["default"].DEFAULT
 };
 var _default = MultivaluesField;
 exports["default"] = _default;

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.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Error = exports.Default = exports.Controlled = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -24,6 +24,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ = require("../..");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react2 = require("@emotion/react");
 
 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); }
@@ -67,6 +69,18 @@ var _default = {
       control: {
         type: 'none'
       }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
     }
   },
   parameters: {
@@ -354,4 +368,34 @@ var WithReadOnlyValues = function WithReadOnlyValues(args) {
   }));
 };
 
-exports.WithReadOnlyValues = WithReadOnlyValues;
+exports.WithReadOnlyValues = WithReadOnlyValues;
+
+var Error = function Error(args) {
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      isOpen = _useState18[0],
+      setIsOpen = _useState18[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"])({}, args, {
+    items: items,
+    helperText: "Here is some helpful text...",
+    status: "error",
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Error = Error;

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

@@ -18,6 +18,8 @@ var _index = require("../../index");
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -479,4 +481,16 @@ test('read only keys', function () {
   expect(secondChip).toBeInTheDocument();
   var deleteButton2 = firstChip.nextSibling;
   expect(deleteButton2).toBeNull();
+});
+test(' multivalue field with helper text', function () {
+  var helperText = 'helper text';
+  getComponent({
+    helperText: helperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(helperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });

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

@@ -10,6 +10,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.Default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
@@ -40,42 +42,52 @@ var items = [{
 }];
 
 var Default = function Default() {
-  var CustomOnSvg = function CustomOnSvg() {
-    return (0, _react2.jsx)("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOnSvg = function CustomOnSvg(props) {
+    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, (0, _react2.jsx)("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
-      fill: "#CACED3"
-    }), (0, _react2.jsx)("path", {
-      d: "M9.83325 10.6251V6.37511H15.4999V2.94678L21.0533 8.50011L15.4999 14.0534V10.6251H9.83325Z",
-      fill: "#4462ED"
+    }, props), (0, _react2.jsx)("path", {
+      d: "M5.33325 6.66666V8.66666H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66666Z",
+      fill: "currentColor"
     }), (0, _react2.jsx)("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10ZM22 8.5L16 3V6H10V11H16V14L22 8.5Z",
-      fill: "#515F6B"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
     }));
   };
 
-  var CustomOffSvg = function CustomOffSvg() {
-    return (0, _react2.jsx)("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOffSvg = function CustomOffSvg(props) {
+    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, (0, _react2.jsx)("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+    }, props), (0, _react2.jsx)("path", {
+      d: "M5.33325 6.66667V8.66667H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66667Z",
       fill: "#CACED3"
     }), (0, _react2.jsx)("path", {
-      d: "M9.83331 10.6251V6.37511H15.5V2.94678L21.0533 8.50011L15.5 14.0534V10.6251H9.83331Z",
-      fill: "#4462ED"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
+    }));
+  };
+
+  var CustomRightSvg = function CustomRightSvg(props) {
+    return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), (0, _react2.jsx)("path", {
+      d: "M8 4L4 0V2.18182H0V5.81818H4V8L8 4Z",
+      fill: "currentColor"
     }));
   };
 
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
     sx: {
       alignItems: 'center'
     },
@@ -104,8 +116,7 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     sx: {
-      ml: '5px',
-      mr: '5px',
+      mx: 'sm',
       flexShrink: 0
     }
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
@@ -113,10 +124,10 @@ var Default = function Default() {
     defaultIcon: CustomOffSvg,
     title: "Bidirectional/ Outbound toggle",
     iconProps: {
-      size: 20
+      size: 16
     },
     buttonProps: {
-      variant: 'svgIconButton'
+      variant: 'bidirectionalIconButton'
     }
   })), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
@@ -142,19 +153,103 @@ var Default = function Default() {
       marginLeft: '12px',
       marginRight: '12px'
     }
-  }, (0, _react2.jsx)(_index.IconButton, null, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Edit"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CogsIcon["default"],
+    color: "neutral.30",
+    size: 20,
+    title: "edit icon"
+  })), (0, _react2.jsx)(_index.IconButton, {
+    ml: "5px",
+    "aria-label": "Delete"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DeleteIcon["default"],
+    color: "neutral.30",
+    size: 20,
+    title: "delete icon"
+  })))), (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      alignItems: 'center'
+    },
+    isRow: true
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DragVerticalIcon["default"],
+    size: 25,
+    color: "neutral.50"
+  }), (0, _react2.jsx)(_index.ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      mx: 'sm',
+      flexShrink: 0
+    }
+  }, (0, _react2.jsx)(_index.IconButtonToggle, {
+    toggledIcon: CustomRightSvg,
+    defaultIcon: CustomRightSvg,
+    title: "This attribute does not support write-back.",
+    iconProps: {
+      size: 8
+    },
+    buttonProps: {
+      variant: 'bidirectionalIconButton'
+    }
+  })), (0, _react2.jsx)(_index.ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Edit"
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
     color: "neutral.30",
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px"
+    ml: "5px",
+    "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
     color: "neutral.30",
     size: 20,
     title: "delete icon"
-  }))));
+  })))));
 };
 
 exports.Default = Default;

package/lib/cjs/styles/theme.js

@@ -84,7 +84,9 @@ var _default = {
   forms: _forms["default"],
   text: _variants.text,
   images: _variants.images,
-  buttons: _variants.buttons,
+  buttons: _objectSpread(_objectSpread({}, _variants.buttons), {}, {
+    bidirectionalIconButton: _variants.bidirectionalIconButton
+  }),
   textColors: _text.textColors,
   links: _variants.links,
   variants: _variants.variants

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("./buttons");
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var bidirectionalIconButton = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, _buttons.defaultFocus)
+};
+var _default = bidirectionalIconButton;
+exports["default"] = _default;

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

@@ -17,10 +17,18 @@ _Object$defineProperty(exports, "__esModule", {
 var _exportNames = {
   variants: true,
   buttons: true,
+  bidirectionalIconButton: true,
   images: true,
   links: true
 };
 
+_Object$defineProperty(exports, "bidirectionalIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _bidirectionalIconButton["default"];
+  }
+});
+
 _Object$defineProperty(exports, "buttons", {
   enumerable: true,
   get: function get() {
@@ -53,6 +61,8 @@ var _variants = _interopRequireDefault(require("./variants"));
 
 var _buttons = _interopRequireDefault(require("./buttons"));
 
+var _bidirectionalIconButton = _interopRequireDefault(require("./bidirectionalIconButton"));
+
 var _images = _interopRequireDefault(require("./images"));
 
 var _links = _interopRequireDefault(require("./links"));

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -5,6 +5,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -27,10 +28,12 @@ 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 { Chip, Icon, IconButton, PopoverContainer, ScrollBox, TextField } from '../..';
+import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, TextField } from '../..';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { usePropWarning } from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
+import FieldHelperText from '../FieldHelperText';
 /**
  * Complex control that lets you choose several tags from the dropdown list.
  * Or to add your own values in non-restrictive mode.
@@ -49,8 +52,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       direction = props.direction,
       _props$disabledKeys = props.disabledKeys,
       disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
+      containerProps = props.containerProps,
       hasAutoFocus = props.hasAutoFocus,
       hasNoStatusIndicator = props.hasNoStatusIndicator,
+      helperText = props.helperText,
       customInputProps = props.inputProps,
       isDisabled = props.isDisabled,
       isNotFlippable = props.isNotFlippable,
@@ -70,7 +75,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$readOnlyKeys = props.readOnlyKeys,
       readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
-      scrollBoxProps = props.scrollBoxProps;
+      scrollBoxProps = props.scrollBoxProps,
+      status = props.status;
   var hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
 
@@ -350,10 +356,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     wrapperProps: {
       ref: inputRef,
       variant: 'forms.input.multivaluesWrapper'
-    }
+    },
+    status: status
   });
 
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextField, _extends({
+  return ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       setIsOpen(false);
       if (_onBlur) _onBlur(e.nativeEvent);
@@ -375,7 +382,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
-  }, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status
+  }, helperText), ___EmotionJSX(PopoverContainer, {
     ref: popoverRef,
     hasNoArrow: true,
     isNonModal: true,
@@ -385,6 +394,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, listbox));
 });
 MultivaluesField.propTypes = {
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: PropTypes.shape({}),
+
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: isIterableProp,
 
@@ -402,6 +414,9 @@ MultivaluesField.propTypes = {
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
 
+  /** Text rendered below the input. */
+  helperText: PropTypes.node,
+
   /**
    * Props that get passed as-is to the underlying TextField element
    */
@@ -500,13 +515,17 @@ MultivaluesField.propTypes = {
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number])
-  })
+  }),
+
+  /** Determines the input status indicator and helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses))
 };
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300
-  }
+  },
+  status: statuses.DEFAULT
 };
 export default MultivaluesField;

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Box, Item, MultivaluesField, OverlayProvider } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/MultivaluesField',
@@ -40,6 +41,18 @@ export default {
       control: {
         type: 'none'
       }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
     }
   },
   parameters: {
@@ -306,4 +319,31 @@ export var WithReadOnlyValues = function WithReadOnlyValues(args) {
       "data-id": item.name
     }, item.name);
   }));
+};
+export var Error = function Error(args) {
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isOpen = _useState18[0],
+      setIsOpen = _useState18[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({}, args, {
+    items: items,
+    helperText: "Here is some helpful text...",
+    status: "error",
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
 };

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

@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { Item, MultivaluesField, OverlayProvider } from '../../index';
 import { render, screen, within } from '../../utils/testUtils/testWrapper';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   id: 1,
@@ -357,4 +358,14 @@ test('read only keys', function () {
   expect(secondChip).toBeInTheDocument();
   var deleteButton2 = firstChip.nextSibling;
   expect(deleteButton2).toBeNull();
+});
+test(' multivalue field with helper text', function () {
+  var helperText = 'helper text';
+  getComponent({
+    helperText: helperText,
+    status: statuses.ERROR
+  });
+  var helper = screen.getByText(helperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
 });

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
 import DeleteIcon from 'mdi-react/DeleteIcon';
@@ -19,42 +20,52 @@ var items = [{
   id: '3'
 }];
 export var Default = function Default() {
-  var CustomOnSvg = function CustomOnSvg() {
-    return ___EmotionJSX("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOnSvg = function CustomOnSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
-      fill: "#CACED3"
-    }), ___EmotionJSX("path", {
-      d: "M9.83325 10.6251V6.37511H15.4999V2.94678L21.0533 8.50011L15.4999 14.0534V10.6251H9.83325Z",
-      fill: "#4462ED"
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66666V8.66666H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66666Z",
+      fill: "currentColor"
     }), ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10ZM22 8.5L16 3V6H10V11H16V14L22 8.5Z",
-      fill: "#515F6B"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
     }));
   };
 
-  var CustomOffSvg = function CustomOffSvg() {
-    return ___EmotionJSX("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOffSvg = function CustomOffSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66667V8.66667H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66667Z",
       fill: "#CACED3"
     }), ___EmotionJSX("path", {
-      d: "M9.83331 10.6251V6.37511H15.5V2.94678L21.0533 8.50011L15.5 14.0534V10.6251H9.83331Z",
-      fill: "#4462ED"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
+    }));
+  };
+
+  var CustomRightSvg = function CustomRightSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M8 4L4 0V2.18182H0V5.81818H4V8L8 4Z",
+      fill: "currentColor"
     }));
   };
 
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     sx: {
       alignItems: 'center'
     },
@@ -83,8 +94,7 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     sx: {
-      ml: '5px',
-      mr: '5px',
+      mx: 'sm',
       flexShrink: 0
     }
   }, ___EmotionJSX(IconButtonToggle, {
@@ -92,10 +102,91 @@ export var Default = function Default() {
     defaultIcon: CustomOffSvg,
     title: "Bidirectional/ Outbound toggle",
     iconProps: {
-      size: 20
+      size: 16
+    },
+    buttonProps: {
+      variant: 'bidirectionalIconButton'
+    }
+  })), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
+    icon: CogsIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "edit icon"
+  })), ___EmotionJSX(IconButton, {
+    ml: "5px",
+    "aria-label": "Delete"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "delete icon"
+  })))), ___EmotionJSX(Box, {
+    sx: {
+      alignItems: 'center'
+    },
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 25,
+    color: "neutral.50"
+  }), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    sx: {
+      mx: 'sm',
+      flexShrink: 0
+    }
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: CustomRightSvg,
+    defaultIcon: CustomRightSvg,
+    title: "This attribute does not support write-back.",
+    iconProps: {
+      size: 8
     },
     buttonProps: {
-      variant: 'svgIconButton'
+      variant: 'bidirectionalIconButton'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,
@@ -121,17 +212,20 @@ export var Default = function Default() {
       marginLeft: '12px',
       marginRight: '12px'
     }
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
     color: "neutral.30",
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px"
+    ml: "5px",
+    "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
     color: "neutral.30",
     size: 20,
     title: "delete icon"
-  }))));
+  })))));
 };

package/lib/styles/theme.js

@@ -17,7 +17,7 @@ import colors, { accent, line, shadow, focus } from './colors';
 import { fontSizes, fontWeights, textColors } from './text';
 import breakpoints from './breakpoints';
 import forms from './forms';
-import { variants, buttons, text, images, links } from './variants';
+import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -52,7 +52,9 @@ export default {
   forms: forms,
   text: text,
   images: images,
-  buttons: buttons,
+  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
+    bidirectionalIconButton: bidirectionalIconButton
+  }),
   textColors: textColors,
   links: links,
   variants: variants

package/lib/styles/variants/bidirectionalIconButton.js

@@ -0,0 +1,34 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { defaultFocus } from './buttons';
+var bidirectionalIconButton = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+export default bidirectionalIconButton;

package/lib/styles/variants/index.js

@@ -1,5 +1,6 @@
 export { default as variants } from './variants';
 export { default as buttons } from './buttons';
+export { default as bidirectionalIconButton } from './bidirectionalIconButton';
 export { default as images } from './images';
 export { default as links } from './links';
 export * from './text';

package/package.json

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