@pingux/astro 1.37.0 → 1.37.1-alpha.0

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

@@ -158,6 +158,62 @@ test('clicking an option renders chip with option name', function () {
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('after clicking an option, and then clicking the text input, the listbox remains open', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('no chips are rendered, if nothing is selected', function () {
+  getComponent({
+    isReadOnly: false
+  });
+  expect(screen.queryByRole('presentation')).not.toBeInTheDocument(0);
+});
+test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var input, options, firstOption, value, listbox, filteredOptions;
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = screen.getByRole('combobox');
+          userEvent.tab();
+          expect(input).toHaveFocus();
+          options = screen.getAllByRole('option');
+          firstOption = options[0];
+          firstOption.click();
+          expect(firstOption).not.toBeInTheDocument();
+          _context.next = 10;
+          return userEvent.clear(input);
+
+        case 10:
+          value = 'ka';
+          _context.next = 13;
+          return userEvent.type(input, value);
+
+        case 13:
+          listbox = screen.queryByRole('listbox');
+          expect(listbox).toBeInTheDocument();
+          filteredOptions = within(listbox).getAllByRole('option');
+          expect(filteredOptions.length).toBe(1);
+
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
 test('clicking on delete button deletes selection, and re-adds option to list', function () {
   getComponent();
   var input = screen.getByRole('combobox');
@@ -201,7 +257,8 @@ test('clicking an option fires "onSelectionChange"', function () {
 test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
   var onInputChange = jest.fn();
   getComponent({
-    onInputChange: onInputChange
+    onInputChange: onInputChange,
+    mode: 'non-restrictive'
   });
   var input = screen.getByRole('combobox');
   var value = 'aa';
@@ -213,6 +270,71 @@ test('changing the input value opens listbox, filters options, and fires "onInpu
   expect(onInputChange).toBeCalledTimes(value.length);
   expect(onInputChange).toHaveBeenCalledWith(value);
 });
+test('in non-restrictive mode, a chip gets added if there is input, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.tab();
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(input.value).toBe('');
+});
+test('in non-restrictive mode, a chip gets added if there is only one matching filtered option, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  var value = 'Aardvark';
+  userEvent.type(input, value);
+  userEvent.tab();
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(firstOption).not.toBeInTheDocument();
+});
+test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var input, value1, value2, listbox, options2;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = screen.getByRole('combobox');
+          value1 = 'longstring';
+          userEvent.type(input, value1);
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+          value2 = '';
+          _context2.next = 8;
+          return userEvent.clear(input);
+
+        case 8:
+          _context2.next = 10;
+          return userEvent.type(input, value2);
+
+        case 10:
+          listbox = screen.getByRole('listbox');
+          options2 = within(listbox).getAllByRole('option');
+          expect(options2.length).toBe(items.length);
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
 test('changing the input value and hitting enter by default do nothing', function () {
   getComponent();
   var input = screen.getByRole('combobox');
@@ -220,8 +342,7 @@ test('changing the input value and hitting enter by default do nothing', functio
   var value = 'custom';
   userEvent.type(input, value);
   userEvent.type(input, '{enter}');
-  expect(input).toHaveValue(value);
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
 });
 test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
   getComponent({
@@ -239,6 +360,18 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).toBeCalledTimes(0);
+});
 test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
   var onSelectionChange = jest.fn();
   getComponent({
@@ -350,28 +483,28 @@ test('selected keys', function () {
   var secondChip = screen.getByText(items[2].name);
   expect(secondChip).toBeInTheDocument();
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
   var _getComponent, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context.next = 4;
+          _context3.next = 4;
           return axe(container);
 
         case 4:
-          results = _context.sent;
+          results = _context3.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context3.stop();
       }
     }
-  }, _callee);
+  }, _callee3);
 })));
 test('read only keys', function () {
   getComponent({
@@ -450,7 +583,7 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   var value = 'custom';
   userEvent.type(input, value);
-  expect(input).toHaveValue(value);
+  expect(input).toHaveValue('');
   userEvent.type(input, '{enter}');
   expect(onFormSubmit).not.toHaveBeenCalled();
 });

package/lib/hooks/useField/useField.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
 
 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; }
 
@@ -58,6 +58,7 @@ var useField = function useField() {
       isIndeterminate = props.isIndeterminate,
       isReadOnly = props.isReadOnly,
       isRequired = props.isRequired,
+      isRestrictiveMultivalues = props.isRestrictiveMultivalues,
       isSelected = props.isSelected,
       label = props.label,
       labelMode = props.labelMode,
@@ -187,7 +188,7 @@ var useField = function useField() {
     name: name,
     onChange: fieldOnChange,
     placeholder: placeholder,
-    readOnly: isReadOnly,
+    readOnly: isRestrictiveMultivalues ? true : isReadOnly,
     required: isRequired,
     role: role,
     spellCheck: spellCheck,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.0",
+  "version": "1.37.1-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",