@pingux/astro 1.3.1 → 1.3.2-alpha.2

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -48,7 +48,6 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

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

@@ -60,8 +60,6 @@ var _overlays = require("@react-aria/overlays");
 
 var _utils = require("@react-aria/utils");
 
-var _uuid = require("uuid");
-
 var _ = require("../..");
 
 var _ListBox = _interopRequireDefault(require("../ListBox"));
@@ -262,13 +260,17 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           } else if (hasCustomValue) {
             var _context3;
 
-            var name = e.target.value;
-            var id = (0, _uuid.v4)();
-            selectionManager.toggleSelection(id);
+            var _key2 = e.target.value;
+
+            if (state.selectionManager.isSelected(_key2)) {
+              return;
+            }
+
+            selectionManager.toggleSelection(_key2);
             setCustomItems((0, _concat["default"])(_context3 = []).call(_context3, customItems, [{
-              id: id,
-              key: id,
-              name: name
+              id: _key2,
+              key: _key2,
+              name: _key2
             }]));
             setFilterString('');
           }

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

@@ -276,6 +276,80 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+
+  _userEvent["default"].type(input, items[0].name);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
 test('options can be focused via keyboard', function () {
   getComponent();
 

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -125,7 +125,8 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     state: state,
     triggerRef: triggerRef,
     label: label,
-    name: name
+    name: name,
+    isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status
   }, helperText));

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

@@ -28,6 +28,8 @@ var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("./SelectFieldBase"));
 
+var _constants = require("../Label/constants");
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -163,6 +165,20 @@ test('select field with helper text', function () {
   expect(fieldHelperText).toBeInTheDocument();
   expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });
+test('label floats after user\'s interacting', function () {
+  getComponent({
+    labelMode: _constants.modes.FLOAT,
+    value: ''
+  });
+
+  var textAreaContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(textAreaContainer).not.toHaveClass('is-float-label-active');
+
+  _userEvent["default"].tab();
+
+  expect(textAreaContainer).toHaveClass('is-float-label-active');
+});
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();
 

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -56,6 +56,8 @@ var _PopoverContainer = _interopRequireDefault(require("../../components/Popover
 
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
 
+var _constants = require("../../components/Label/constants");
+
 var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -140,6 +142,7 @@ var useSelectField = function useSelectField(props, ref) {
       menuProps = _useSelect.menuProps;
 
   var _useField = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
+    placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,
     labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
     containerProps: _objectSpread({
       isFloatLabelActive: state.selectedItem

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

@@ -63,7 +63,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -25,7 +25,6 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Text, _extends({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -27,7 +27,6 @@ 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 { v4 as uuid } from 'uuid';
 import { Chip, Icon, IconButton, PopoverContainer, ScrollBox, TextField } from '../..';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -220,13 +219,17 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           } else if (hasCustomValue) {
             var _context3;
 
-            var name = e.target.value;
-            var id = uuid();
-            selectionManager.toggleSelection(id);
+            var _key2 = e.target.value;
+
+            if (state.selectionManager.isSelected(_key2)) {
+              return;
+            }
+
+            selectionManager.toggleSelection(_key2);
             setCustomItems(_concatInstanceProperty(_context3 = []).call(_context3, customItems, [{
-              id: id,
-              key: id,
-              name: name
+              id: _key2,
+              key: _key2,
+              name: _key2
             }]));
             setFilterString('');
           }

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

@@ -212,6 +212,58 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+  userEvent.type(input, items[0].name);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
 test('options can be focused via keyboard', function () {
   getComponent();
   var input = screen.getByRole('combobox');

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -90,7 +90,8 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     state: state,
     triggerRef: triggerRef,
     label: label,
-    name: name
+    name: name,
+    isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -10,6 +10,7 @@ import statuses from '../../utils/devUtils/constants/statuses';
 import { Item } from '../../index';
 import { useSelectField } from '../../hooks';
 import SelectFieldBase from './SelectFieldBase';
+import { modes } from '../Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'a'
@@ -135,6 +136,16 @@ test('select field with helper text', function () {
   expect(fieldHelperText).toBeInTheDocument();
   expect(fieldHelperText).toHaveClass("is-".concat(statuses.ERROR));
 });
+test('label floats after user\'s interacting', function () {
+  getComponent({
+    labelMode: modes.FLOAT,
+    value: ''
+  });
+  var textAreaContainer = screen.getByTestId(testId);
+  expect(textAreaContainer).not.toHaveClass('is-float-label-active');
+  userEvent.tab();
+  expect(textAreaContainer).toHaveClass('is-float-label-active');
+});
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();
   var button = screen.getByRole('button');

package/lib/hooks/useSelectField/useSelectField.js

@@ -25,6 +25,7 @@ import { useColumnStyles, useDeprecationWarning, useField } from '..';
 import ListBox from '../../components/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';
+import { modes } from '../../components/Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var useSelectField = function useSelectField(props, ref) {
@@ -105,6 +106,7 @@ var useSelectField = function useSelectField(props, ref) {
       menuProps = _useSelect.menuProps;
 
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+    placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
     labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
     containerProps: _objectSpread({
       isFloatLabelActive: state.selectedItem

package/lib/styles/variants/text.js

@@ -43,7 +43,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },

package/package.json

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