@pingux/astro 1.16.0-alpha.4 → 1.17.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.16.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.15.0...@pingux/astro@1.16.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* [UIP-5364] make chip icon not wrapped in a button aria-hidden ([cdf7df3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/cdf7df39dcce043faaba97f54f491057d1dc4174))
+* Added 5px padding to add btn ([1445f77](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1445f77cbb8b8ece4c6d21249c3277e409dfd87c))
+
+
+### Features
+
+* [UIP-5374] change Loader role to alert ([27e9cfa](https://gitlab.corp.pingidentity.com/ux/pingux/commit/27e9cfa578b80f164ad617f28c1dd9fa92346d10))
+* [UIP-5456] Multivalues selectedKeys not showing selected options in external app ([8342005](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8342005406d0d1c351eda6a38c7070ce21ebb19b))
+
+
+
+
+
 # [1.15.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.14.0...@pingux/astro@1.15.0) (2022-05-31)
 
 

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

@@ -81,6 +81,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/**
+ * Displays array collections providing useful functions and
+ * optimizations for arrays.
+ */
 var ArrayField = function ArrayField(props) {
   var _context2;
 
@@ -123,7 +127,7 @@ var ArrayField = function ArrayField(props) {
     });
   }, []);
   var onFieldValueChange = (0, _react.useCallback)(function (event, fieldId) {
-    var tempValue = event; // Checks if value receieved is a key or event
+    var tempValue = event; // Checks if value received is a key or event
 
     if (typeof event !== 'string') {
       tempValue = event.target.value;

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

@@ -30,6 +30,7 @@ var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Form/ArrayField',
+  component: _index.ArrayField,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'

package/lib/cjs/components/Button/Button.js

@@ -64,6 +64,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+ * Buttons are used to trigger actions or events.
+ * This component is based on the [Button - Theme-UI](https://theme-ui.com/components/button/)
+ * and includes a variety of styles, such as primary action, secondary action, or warning.
+ */
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -38,6 +38,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -78,7 +80,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 = _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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Combines an input with a listbox for a filterable dropdown list.
@@ -103,13 +105,14 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onFocusChange = props.onFocusChange,
       onKeyDown = props.onKeyDown,
       onKeyUp = props.onKeyUp,
+      hasAddOption = props.hasAddOption,
       hasCustomValue = props.hasCustomValue,
       hasNoEmptySelection = props.hasNoEmptySelection,
       defaultSelectedKey = props.defaultSelectedKey,
       selectedKey = props.selectedKey,
       onSelectionChange = props.onSelectionChange,
-      defaultItems = props.defaultItems,
-      items = props.items,
+      initialDefaultItems = props.defaultItems,
+      initialItems = props.items,
       onOpenChange = props.onOpenChange,
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
@@ -137,13 +140,11 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onFocusChange: onFocusChange,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
-    allowsCustomValue: hasCustomValue,
+    allowsCustomValue: hasAddOption || hasCustomValue,
     disallowEmptySelection: hasNoEmptySelection,
     defaultSelectedKey: defaultSelectedKey,
     selectedKey: selectedKey,
     onSelectionChange: onSelectionChange,
-    defaultItems: defaultItems,
-    items: items,
     onOpenChange: onOpenChange,
     loadingState: loadingState,
     onLoadMore: onLoadMore,
@@ -169,18 +170,47 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
     var newVal = key || selectedKey || '';
+
+    if (hasAddOption && selectedKey !== inputValue) {
+      newVal = inputValue;
+    }
+
     if (onSelectionChange) onSelectionChange(newVal);
   };
 
+  var shouldShowAddOption = hasAddOption && inputValue && selectedKey !== inputValue;
+  var addOption = "ADD: ".concat(inputValue);
+
+  var getItemsArr = function getItemsArr(initialArr) {
+    if (initialArr && shouldShowAddOption) {
+      var _context;
+
+      return (0, _concat["default"])(_context = []).call(_context, initialArr, [{
+        name: addOption,
+        key: addOption
+      }]);
+    }
+
+    return initialArr;
+  };
+
+  var defaultItems = getItemsArr(initialDefaultItems);
+  var items = getItemsArr(initialItems);
+
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
   }),
       contains = _useFilter.contains;
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
+    defaultItems: defaultItems,
+    items: items,
+    onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
   }));
+  (0, _react.useEffect)(function () {
+    if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
+  }, [shouldShowAddOption, state, addOption]);
 
   var _useComboBox = (0, _combobox.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,
@@ -286,6 +316,9 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, listbox));
 });
 ComboBoxField.propTypes = {
+  /* Whether or not adding new options to the list is enabled. */
+  hasAddOption: _propTypes["default"].bool,
+
   /** Whether the ComboBox allows a non-item matching input value to be set. */
   hasCustomValue: _propTypes["default"].bool,
 

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

@@ -14,7 +14,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
@@ -562,4 +566,56 @@ var CustomDefaultFilter = function CustomDefaultFilter() {
   }));
 };
 
-exports.CustomDefaultFilter = CustomDefaultFilter;
+exports.CustomDefaultFilter = CustomDefaultFilter;
+
+var ControlledWithAddOption = function ControlledWithAddOption() {
+  var _useState11 = (0, _react.useState)(items),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      options = _useState12[0],
+      setOptions = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(''),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      inputValue = _useState14[0],
+      setInputValue = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(''),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      selectedKey = _useState16[0],
+      setSelectedKey = _useState16[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    // Add new option to options array
+    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context2;
+
+      setOptions((0, _concat["default"])(_context2 = []).call(_context2, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: options
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledWithAddOption = ControlledWithAddOption;

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

@@ -32,6 +32,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -62,7 +66,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 _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var items = [{
   name: 'Aardvark',
@@ -121,6 +125,54 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   });
 };
 
+var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
+  var _useState3 = (0, _react.useState)(items),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedKey = _useState8[0],
+      setSelectedKey = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context;
+
+      setOptions((0, _concat["default"])(_context = []).call(_context, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return (0, _react2.jsx)(_index.ComboBoxField, {
+    label: "Example label",
+    defaultItems: options,
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  });
+};
+
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;
@@ -474,43 +526,43 @@ test('should use default contains filtering', function () {
 });
 test('should be able to use controlled filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var options, input;
-  return _regenerator["default"].wrap(function _callee$(_context) {
+  return _regenerator["default"].wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithCustomFilter, null));
           input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
 
           _userEvent["default"].type(input, '{arrowdown}');
 
-          _context.next = 5;
+          _context2.next = 5;
           return _testWrapper.screen.findAllByRole('option');
 
         case 5:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           _userEvent["default"].type(input, 'k');
 
-          _context.next = 10;
+          _context2.next = 10;
           return _testWrapper.screen.findAllByRole('option');
 
         case 10:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 12:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
 })));
 test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var options, defaultFilter, input;
-  return _regenerator["default"].wrap(function _callee2$(_context2) {
+  return _regenerator["default"].wrap(function _callee2$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           defaultFilter = function defaultFilter(option, inputValue) {
             return (0, _startsWith["default"])(option).call(option, inputValue);
@@ -523,34 +575,34 @@ test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncTo
 
           _userEvent["default"].type(input, '{arrowdown}');
 
-          _context2.next = 6;
+          _context3.next = 6;
           return _testWrapper.screen.findAllByRole('option');
 
         case 6:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           _userEvent["default"].type(input, 'K');
 
-          _context2.next = 11;
+          _context3.next = 11;
           return _testWrapper.screen.findAllByRole('option');
 
         case 11:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 13:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
   }, _callee2);
 })));
 test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var newItems, input, options;
-  return _regenerator["default"].wrap(function _callee3$(_context3) {
+  return _regenerator["default"].wrap(function _callee3$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           newItems = (0, _map["default"])(items).call(items, function (item) {
             return _objectSpread(_objectSpread({}, item), {}, {
@@ -564,11 +616,11 @@ test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGe
 
           _userEvent["default"].click(input);
 
-          _context3.next = 6;
+          _context4.next = 6;
           return _testWrapper.screen.findAllByRole('option');
 
         case 6:
-          options = _context3.sent;
+          options = _context4.sent;
 
           _userEvent["default"].click(options[0]);
 
@@ -580,7 +632,7 @@ test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGe
 
         case 11:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
   }, _callee3);
@@ -951,25 +1003,71 @@ test('onSelectionChange works properly with custom value', function () {
 
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
+test('add option shows when "hasAddOption" is provided', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var option = _testWrapper.screen.queryByRole('option');
+
+  expect(option).toBeInTheDocument();
+  expect(option).toHaveClass('is-focused');
+  expect(option).toHaveTextContent("ADD: ".concat(inputValue));
+});
+test('if "hasAddOption" is provided, then custom value is added to listbox on blur', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options[options.length - 1]).toHaveTextContent(inputValue);
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
   var _getComponent6, container, results;
 
-  return _regenerator["default"].wrap(function _callee4$(_context4) {
+  return _regenerator["default"].wrap(function _callee4$(_context5) {
     while (1) {
-      switch (_context4.prev = _context4.next) {
+      switch (_context5.prev = _context5.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context4.next = 4;
+          _context5.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context4.sent;
+          results = _context5.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
     }
   }, _callee4);

package/lib/cjs/components/Link/Link.js

@@ -44,6 +44,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
+ * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
+ *
+ */
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       isDisabled = props.isDisabled,

package/lib/cjs/components/ListView/ListView.js

@@ -107,6 +107,12 @@ function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+/**
+ * ListViews are used to display a list of items. Users can select,
+ * view, or edit items in this list. This virtualized component supports
+ * asynchronous data in infinitely scrollable lists.
+*/
+
 
 var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var disabledKeys = props.disabledKeys,

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

@@ -46,6 +46,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
 

package/lib/cjs/components/Modal/Modal.js

@@ -68,6 +68,11 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+  * Modals are overlays that interrupt a user’s workflow to convey an important message.
+  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
+  * such as Button.
+*/
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,

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

@@ -36,7 +36,7 @@ var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'NavBar',
-  component: 'NavBar',
+  component: _index.NavBar,
   subcomponents: {
     NavBarSection: _index.NavBarSection,
     NavBarItemLink: _index.NavBarItemLink,

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -44,6 +44,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * In Astro, side panels are used to show details and present modal interactions.
+ */
 var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$sx;
 

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -48,6 +48,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * List of requirements for a password, with indicators that can change to show when
+ * requirements are satisfied.
+ */
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);

package/lib/cjs/components/ScrollBox/ScrollBox.js

@@ -56,6 +56,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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; }
 
+/**
+ * Scrollbox is a container that allows content to be scrolled
+ */
 var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var maxHeight = props.maxHeight,
       children = props.children,
@@ -66,7 +69,7 @@ var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      scrollTopPostion = _useState2[0],
+      scrollTopPosition = _useState2[0],
       setScrollTopPosition = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
@@ -94,7 +97,7 @@ var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
       }
     }
-  }, [scrollTopPostion]);
+  }, [scrollTopPosition]);
   /* istanbul ignore next */
 
   var onScroll = function onScroll() {

package/lib/cjs/components/Stepper/Stepper.js

@@ -73,6 +73,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ACTIVE = _Stepper.stepStatuses.ACTIVE,
     COMPLETED = _Stepper.stepStatuses.COMPLETED,
     INACTIVE = _Stepper.stepStatuses.INACTIVE;
+/**
+ * The Stepper component acts as a wrapper for individual Step components.
+ * Stepper is used to display progress through a sequence of logical and numbered steps
+ *  usually within a configuration wizard.
+ */
+
 var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var activeStep = props.activeStep,
       onStepChange = props.onStepChange,