@pingux/astro 1.1.0-alpha.0 → 1.1.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.3...@pingux/astro@1.1.0-alpha.4) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-4992] Fix SelectField Warnings ([dab3f92](https://gitlab.corp.pingidentity.com/ux/pingux/commit/dab3f9254c5d7b1b124ed24616e4ef68f53af7d0))
+
+
+
+
+
+# [1.1.0-alpha.3](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.2...@pingux/astro@1.1.0-alpha.3) (2022-01-20)
+
+
+### Bug Fixes
+
+* [UIP-5007] ComboBoxField controlled custom input throws an exception ([9651c98](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9651c98da3b3ac158c84f378303a2d331db78cce))
+
+
+
+
+
+# [1.1.0-alpha.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.1...@pingux/astro@1.1.0-alpha.2) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5039] IconButton Square Variant ([2fecfac](https://gitlab.corp.pingidentity.com/ux/pingux/commit/2fecfac9d39974eb5dc773d210c3a830d1bd9e2a))
+
+
+
+
+
+# [1.1.0-alpha.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.0...@pingux/astro@1.1.0-alpha.1) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5026] Infinite Loading List requests page 2 instantly ([e6888cf](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e6888cfe91435fae0ab583b0ff22b2c169ba7bcd))
+
+
+
+
+
 # [1.1.0-alpha.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.1...@pingux/astro@1.1.0-alpha.0) (2022-01-19)
 
 

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

@@ -157,6 +157,12 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
+  /* istanbul ignore next */
+
+  var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
+    var newVal = key || selectedKey || '';
+    if (onSelectionChange) onSelectionChange(newVal);
+  };
 
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
@@ -164,6 +170,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: contains
   }));
 

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
+exports.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledWithCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
@@ -383,6 +383,30 @@ var ControlledFiltering = function ControlledFiltering() {
 
 exports.ControlledFiltering = ControlledFiltering;
 
+var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledWithCustomValue = ControlledWithCustomValue;
+
 var AllowCustomValue = function AllowCustomValue() {
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",

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

@@ -772,6 +772,50 @@ test('two listbox can not be open at the same time', function () {
     name: 'Tango'
   })).toBeInTheDocument();
 });
+test('should handle selecting custom option', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue(''); // type something
+
+  _userEvent["default"].type(input, 'custom'); // set input value as selected
+
+
+  _userEvent["default"].type(input, '{enter}', {
+    skipClick: true
+  });
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(input).toHaveValue('custom');
+});
+test('onSelectionChange works properly with custom value', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    hasCustomValue: true,
+    onSelectionChange: onSelectionChange,
+    onInputChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
+
+  _userEvent["default"].type(input, 'custom{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
+
+  _userEvent["default"].type(input, '{selectall}{backspace}{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('');
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var _getComponent6, container, results;
 

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.WithTooltip = exports.Inverted = exports.Default = exports["default"] = void 0;
+exports.Disabled = exports.WithTooltip = exports.Default = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -53,8 +53,10 @@ var _default = {
     isDisabled: {},
     variant: {
       control: {
-        type: 'none'
-      }
+        type: 'select',
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+      },
+      defaultValue: 'iconButton'
     }
   }
 };
@@ -62,7 +64,7 @@ exports["default"] = _default;
 
 var Default = function Default(args) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
-    "aria-label": "my-label"
+    "aria-label": "default icon button"
   }, args), (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]
   }));
@@ -70,20 +72,9 @@ var Default = function Default(args) {
 
 exports.Default = Default;
 
-var Inverted = function Inverted() {
-  return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
-    variant: "inverted"
-  }, (0, _react2.jsx)(_Icon["default"], {
-    icon: _CreateIcon["default"]
-  }));
-};
-
-exports.Inverted = Inverted;
-
 var WithTooltip = function WithTooltip() {
   return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
+    "aria-label": "icon button with tooltip",
     title: "Edit"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]
@@ -94,7 +85,7 @@ exports.WithTooltip = WithTooltip;
 
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_["default"], {
-    "aria-label": "my-label",
+    "aria-label": "disabled icon button",
     isDisabled: true
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CreateIcon["default"]

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

@@ -96,7 +96,13 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelected: isSelected
   }),
       classNames = _useStatusClasses.classNames;
+  /* Related to UIP-4992
+   * Need to remove these properties to avoid errors in the console on the external app.
+   * By the way, these properties return "undefined", so it shouldn't create issues */
 
+
+  delete optionProps.onPressStart;
+  delete optionProps.onPressUp;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "li",
     isRow: true,