@pingux/astro 1.10.0-alpha.4 → 1.10.1-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.10.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.9.0...@pingux/astro@1.10.0) (2022-04-28)
+
+
+### Bug Fixes
+
+* [UIP-5300] Multiple inputs not focusable within AccordionGridGroup ([421f210](https://gitlab.corp.pingidentity.com/ux/pingux/commit/421f21046e0638c44ecb34085bd64af681301b3c))
+* [UIP-5408]  float label Tweaks ([eaa79fd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/eaa79fd1da40eed988759a0d0e4c626d1c338dc2))
+
+
+### Features
+
+* [UIP-5334] add container widths to box ([5b672d2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5b672d2b3198e637ee7b0947a221e8ae3cdb60f3))
+* [UIP-5397] ArrayField Component - Allow a limit on the number of Fields ([61dcdcd](https://gitlab.corp.pingidentity.com/ux/pingux/commit/61dcdcd929c540e8353996755889a320202ad003))
+* [UIP-5401] Add initial Slider recipe ([1fba9ae](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1fba9ae445f77359bf9db716864b7755e6d0c392))
+
+
+
+
+
 # [1.9.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.8.1...@pingux/astro@1.9.0) (2022-04-21)
 
 

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

@@ -30,6 +30,8 @@ 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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
@@ -46,8 +48,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("@react-aria/utils");
+
 var _uuid = require("uuid");
 
+var _label = require("@react-aria/label");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -56,13 +62,15 @@ var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Label = _interopRequireDefault(require("../Label"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
     _excluded2 = ["id", "onComponentRender", "fieldValue"];
 
 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); }
@@ -73,22 +81,23 @@ 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; }
 
-var ArrayField = function ArrayField(_ref) {
+var ArrayField = function ArrayField(props) {
   var _context2;
 
-  var addButtonLabel = _ref.addButtonLabel,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      label = _ref.label,
-      helperText = _ref.helperText,
-      status = _ref.status,
-      onAdd = _ref.onAdd,
-      onChange = _ref.onChange,
-      onDelete = _ref.onDelete,
-      renderField = _ref.renderField,
-      maxSize = _ref.maxSize,
-      maxSizeText = _ref.maxSizeText,
-      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var addButtonLabel = props.addButtonLabel,
+      defaultValue = props.defaultValue,
+      value = props.value,
+      label = props.label,
+      helperText = props.helperText,
+      status = props.status,
+      onAdd = props.onAdd,
+      onChange = props.onChange,
+      onDelete = props.onDelete,
+      renderField = props.renderField,
+      labelProps = props.labelProps,
+      maxSize = props.maxSize,
+      maxSizeText = props.maxSizeText,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isControlled = value !== undefined;
   var createEmptyField = (0, _react.useCallback)(function () {
     return {
@@ -133,8 +142,8 @@ var ArrayField = function ArrayField(_ref) {
       onDelete(fieldId);
     } else {
       setFieldValues(function (oldValues) {
-        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
-          var id = _ref2.id;
+        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref) {
+          var id = _ref.id;
           return id !== fieldId;
         });
       });
@@ -151,17 +160,21 @@ var ArrayField = function ArrayField(_ref) {
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
   }, [createEmptyField, onAdd]);
+
+  var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
+      raLabelProps = _useLabel.labelProps;
+
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Text["default"], {
-    variant: "label"
-  }, label), (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
+    children: label
+  }))), (0, _react2.jsx)(_Box["default"], {
     as: "ul",
     pl: "0"
-  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref3) {
-    var id = _ref3.id,
-        onComponentRender = _ref3.onComponentRender,
-        fieldValue = _ref3.fieldValue,
-        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+    var id = _ref2.id,
+        onComponentRender = _ref2.onComponentRender,
+        fieldValue = _ref2.fieldValue,
+        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
     var isDisabled = (value || fieldValues).length === 1;
     return (0, _react2.jsx)(_Box["default"], {
       as: "li",
@@ -204,6 +217,9 @@ ArrayField.propTypes = {
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
+  /** Props object that is spread directly into the label element. */
+  labelProps: _propTypes["default"].shape({}),
+
   /** Text to display before add button. Useful for errors or other info. */
   helperText: _propTypes["default"].node,
 

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

@@ -84,6 +84,15 @@ var Uncontrolled = function Uncontrolled(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
   return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        tooltipProps: {
+          direction: 'top'
+        }
+      }
+    },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",

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

@@ -36,7 +36,9 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({
+    label: "test-label"
+  }, defaultProps, props)));
 };
 
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
@@ -194,6 +196,7 @@ test('onComponentRender displays fields correctly', function () {
     }
   }];
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "test-label",
     defaultValue: componentRenderData,
     onChange: onChange
   }));
@@ -202,6 +205,7 @@ test('onComponentRender displays fields correctly', function () {
 });
 test('creates empty field when no data passed', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "test-label",
     renderField: renderField
   }));
   expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();

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

@@ -121,6 +121,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
       scrollBoxProps = props.scrollBoxProps,
+      controlProps = props.controlProps,
       defaultFilter = props.defaultFilter;
   var comboBoxOptions = {
     children: children,
@@ -238,6 +239,11 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
+  var handleInputOpen = function handleInputOpen(e) {
+    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
+    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
+  };
+
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -266,7 +272,10 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     labelProps: labelProps,
     inputRef: inputRef,
     triggerProps: buttonProps,
-    triggerRef: buttonRef
+    triggerRef: buttonRef,
+    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
+      onClick: handleInputOpen
+    })
   })), (0, _react2.jsx)(_PopoverContainer["default"], {
     isOpen: state.isOpen,
     ref: popoverRef,
@@ -414,6 +423,11 @@ ComboBoxField.propTypes = {
   /** @ignore */
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].string
+  }),
+
+  /** Props object that is spread directly into the ComboBoxInput element. */
+  controlProps: _propTypes["default"].shape({
+    onClick: _propTypes["default"].func
   })
 };
 ComboBoxField.defaultProps = {

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

@@ -300,6 +300,28 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length);
 });
+test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[0]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
 

package/lib/components/ArrayField/ArrayField.js

@@ -6,13 +6,14 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
     _excluded2 = ["id", "onComponentRender", "fieldValue"];
 
 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; }
@@ -21,31 +22,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
 import { v4 as uuid } from 'uuid';
+import { useLabel } from '@react-aria/label';
 import Box from '../Box';
 import Button from '../Button';
 import FieldHelperText from '../FieldHelperText';
 import Text from '../Text';
+import Label from '../Label';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var ArrayField = function ArrayField(_ref) {
+var ArrayField = function ArrayField(props) {
   var _context2;
 
-  var addButtonLabel = _ref.addButtonLabel,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      label = _ref.label,
-      helperText = _ref.helperText,
-      status = _ref.status,
-      onAdd = _ref.onAdd,
-      onChange = _ref.onChange,
-      onDelete = _ref.onDelete,
-      renderField = _ref.renderField,
-      maxSize = _ref.maxSize,
-      maxSizeText = _ref.maxSizeText,
-      others = _objectWithoutProperties(_ref, _excluded);
+  var addButtonLabel = props.addButtonLabel,
+      defaultValue = props.defaultValue,
+      value = props.value,
+      label = props.label,
+      helperText = props.helperText,
+      status = props.status,
+      onAdd = props.onAdd,
+      onChange = props.onChange,
+      onDelete = props.onDelete,
+      renderField = props.renderField,
+      labelProps = props.labelProps,
+      maxSize = props.maxSize,
+      maxSizeText = props.maxSizeText,
+      others = _objectWithoutProperties(props, _excluded);
 
   var isControlled = value !== undefined;
   var createEmptyField = useCallback(function () {
@@ -91,8 +96,8 @@ var ArrayField = function ArrayField(_ref) {
       onDelete(fieldId);
     } else {
       setFieldValues(function (oldValues) {
-        return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
-          var id = _ref2.id;
+        return _filterInstanceProperty(oldValues).call(oldValues, function (_ref) {
+          var id = _ref.id;
           return id !== fieldId;
         });
       });
@@ -109,17 +114,21 @@ var ArrayField = function ArrayField(_ref) {
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
   }, [createEmptyField, onAdd]);
+
+  var _useLabel = useLabel(_objectSpread({}, props)),
+      raLabelProps = _useLabel.labelProps;
+
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return ___EmotionJSX(Box, others, ___EmotionJSX(Text, {
-    variant: "label"
-  }, label), ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, others, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
+    children: label
+  }))), ___EmotionJSX(Box, {
     as: "ul",
     pl: "0"
-  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref3) {
-    var id = _ref3.id,
-        onComponentRender = _ref3.onComponentRender,
-        fieldValue = _ref3.fieldValue,
-        otherFieldProps = _objectWithoutProperties(_ref3, _excluded2);
+  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+    var id = _ref2.id,
+        onComponentRender = _ref2.onComponentRender,
+        fieldValue = _ref2.fieldValue,
+        otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
 
     var isDisabled = (value || fieldValues).length === 1;
     return ___EmotionJSX(Box, {
@@ -163,6 +172,9 @@ ArrayField.propTypes = {
   /** The rendered label for the field. */
   label: PropTypes.node,
 
+  /** Props object that is spread directly into the label element. */
+  labelProps: PropTypes.shape({}),
+
   /** Text to display before add button. Useful for errors or other info. */
   helperText: PropTypes.node,
 

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

@@ -62,6 +62,15 @@ export var Uncontrolled = function Uncontrolled(_ref) {
 
   return ___EmotionJSX(ArrayField, _extends({
     defaultValue: defaultData,
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        tooltipProps: {
+          direction: 'top'
+        }
+      }
+    },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return ___EmotionJSX(TextField, _extends({
         "aria-label": "Text field",

package/lib/components/ArrayField/ArrayField.test.js

@@ -25,7 +25,9 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ArrayField, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ArrayField, _extends({
+    label: "test-label"
+  }, defaultProps, props)));
 };
 
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
@@ -171,6 +173,7 @@ test('onComponentRender displays fields correctly', function () {
     }
   }];
   render(___EmotionJSX(ArrayField, {
+    label: "test-label",
     defaultValue: componentRenderData,
     onChange: onChange
   }));
@@ -179,6 +182,7 @@ test('onComponentRender displays fields correctly', function () {
 });
 test('creates empty field when no data passed', function () {
   render(___EmotionJSX(ArrayField, {
+    label: "test-label",
     renderField: renderField
   }));
   expect(screen.getByLabelText('Text field')).toBeInTheDocument();

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -75,6 +75,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
       scrollBoxProps = props.scrollBoxProps,
+      controlProps = props.controlProps,
       defaultFilter = props.defaultFilter;
   var comboBoxOptions = {
     children: children,
@@ -192,6 +193,11 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   useLayoutEffect(onResize, [onResize]);
 
+  var handleInputOpen = function handleInputOpen(e) {
+    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
+    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
+  };
+
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -221,7 +227,10 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelProps: labelProps,
     inputRef: inputRef,
     triggerProps: buttonProps,
-    triggerRef: buttonRef
+    triggerRef: buttonRef,
+    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
+      onClick: handleInputOpen
+    })
   })), ___EmotionJSX(PopoverContainer, {
     isOpen: state.isOpen,
     ref: popoverRef,
@@ -369,6 +378,11 @@ ComboBoxField.propTypes = {
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string
+  }),
+
+  /** Props object that is spread directly into the ComboBoxInput element. */
+  controlProps: PropTypes.shape({
+    onClick: PropTypes.func
   })
 };
 ComboBoxField.defaultProps = {

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

@@ -227,6 +227,20 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(items.length);
 });
+test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+  var input = screen.getByRole('combobox');
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  userEvent.click(screen.queryAllByRole('option')[0]);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var button = screen.queryByRole('button');

package/package.json

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