@pingux/astro 2.57.0-alpha.5 → 2.57.0-alpha.7

package/lib/cjs/components/ListBox/ListBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListLayout } from '@react-stately/layout';
+import { ListLayout } from 'listbox-layout';
 import { ListBoxProps } from '../../types';
 export declare const collectionTypes: {
     ITEM: string;

package/lib/cjs/components/ListBox/ListBox.js

@@ -25,8 +25,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _i18n = require("@react-aria/i18n");
 var _listbox = require("@react-aria/listbox");
-var _virtualizer = require("@react-aria/virtualizer");
-var _layout = require("@react-stately/layout");
+var _listboxLayout = require("listbox-layout");
+var _listboxVirtualizer = require("listbox-virtualizer");
 var _hooks = require("../../hooks");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _index = require("./index");
@@ -50,7 +50,7 @@ function useListBoxLayout(state) {
     sensitivity: 'base'
   });
   var layout = (0, _react.useMemo)(function () {
-    return new _layout.ListLayout({
+    return new _listboxLayout.ListLayout({
       estimatedRowHeight: 41,
       estimatedHeadingHeight: 26,
       padding: 4,
@@ -145,7 +145,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return c.viewType === 'item';
       })));
     }
-    return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
+    return (0, _react2.jsx)(_listboxVirtualizer.VirtualizerItem, {
       key: reusableView.key,
       reusableView: reusableView,
       parent: parent
@@ -153,7 +153,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
+  }, (0, _react2.jsx)(_listboxVirtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
       outline: 'none'

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

@@ -255,17 +255,17 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               selectionManager.toggleSelection(selectionManager.focusedKey);
               setFilterString('');
             }
-          } else if (hasCustomValue && filteredItems.length === 1) {
-            selectTheOnlyFilteredItem();
-          } else if (!hasCustomValue) {
-            setFilterString('');
-            close();
-          } else if (hasCustomValue) {
+          } else if (hasCustomValue && !selectionManager.focusedKey) {
             var _key = e.target.value;
             if (_key === '') {
               return;
             }
             addNewBadgeFromInput(e.target.value);
+          } else if (hasCustomValue && filteredItems.length === 1) {
+            selectTheOnlyFilteredItem();
+          } else if (!hasCustomValue) {
+            setFilterString('');
+            close();
           }
           break;
         }

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

@@ -703,6 +703,36 @@ test('should clear the input text onBlur and enter when a single filter result i
   });
   expect(input).toHaveValue('');
 });
+test('in non-restrictive mode the partial string values should be accepted', function () {
+  var itemsWithDuplicatePartialString = [{
+    id: 1,
+    name: 'echo:read',
+    key: 'echo:read'
+  }, {
+    id: 2,
+    name: 'echo:write',
+    key: 'echo:write'
+  }, {
+    id: 3,
+    name: 'echo:delete',
+    key: 'echo:delete'
+  }];
+  getComponent({
+    mode: 'non-restrictive',
+    items: itemsWithDuplicatePartialString
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'echo:r';
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{enter}');
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByText(value)).toBeInTheDocument();
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{enter}');
+  expect(input).not.toHaveValue('');
+  expect(input).toHaveValue(value);
+});
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({

package/lib/components/ListBox/ListBox.js

@@ -17,8 +17,8 @@ import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { mergeProps } from 'react-aria';
 import { useCollator } from '@react-aria/i18n';
 import { useListBox } from '@react-aria/listbox';
-import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
-import { ListLayout } from '@react-stately/layout';
+import { ListLayout } from 'listbox-layout';
+import { Virtualizer, VirtualizerItem } from 'listbox-virtualizer';
 import { useLocalOrForwardRef } from '../../hooks';
 import Loader from '../Loader';
 import { Option } from './index';

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -243,17 +243,17 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
               setFilterString('');
             }
-          } else if (hasCustomValue && filteredItems.length === 1) {
-            selectTheOnlyFilteredItem();
-          } else if (!hasCustomValue) {
-            setFilterString('');
-            close();
-          } else if (hasCustomValue) {
+          } else if (hasCustomValue && !selectionManager.focusedKey) {
             var _key = e.target.value;
             if (_key === '') {
               return;
             }
             addNewBadgeFromInput(e.target.value);
+          } else if (hasCustomValue && filteredItems.length === 1) {
+            selectTheOnlyFilteredItem();
+          } else if (!hasCustomValue) {
+            setFilterString('');
+            close();
           }
           break;
         }

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

@@ -700,6 +700,36 @@ test('should clear the input text onBlur and enter when a single filter result i
   });
   expect(input).toHaveValue('');
 });
+test('in non-restrictive mode the partial string values should be accepted', function () {
+  var itemsWithDuplicatePartialString = [{
+    id: 1,
+    name: 'echo:read',
+    key: 'echo:read'
+  }, {
+    id: 2,
+    name: 'echo:write',
+    key: 'echo:write'
+  }, {
+    id: 3,
+    name: 'echo:delete',
+    key: 'echo:delete'
+  }];
+  getComponent({
+    mode: 'non-restrictive',
+    items: itemsWithDuplicatePartialString
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'echo:r';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
+  expect(screen.queryByText(value)).toBeInTheDocument();
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).not.toHaveValue('');
+  expect(input).toHaveValue(value);
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.57.0-alpha.5",
+  "version": "2.57.0-alpha.7",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -105,6 +105,8 @@
     "classnames": "^2.2.6",
     "countries-list": "^2.6.1",
     "emotion-normalize": "^11.0.1",
+    "listbox-layout": "npm:@react-stately/layout@3.9.0",
+    "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "pluralize": "^8.0.0",