@pingux/astro 1.10.0-alpha.3 → 1.10.1-alpha.0

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/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/cjs/components/SelectFieldBase/SelectFieldBase.test.js

@@ -175,7 +175,7 @@ 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 () {
+test("label floats after user's interacting", function () {
   getComponent({
     labelMode: _constants.modes.FLOAT,
     value: ''
@@ -187,7 +187,7 @@ test('label floats after user\'s interacting', function () {
 
   _userEvent["default"].tab();
 
-  expect(textAreaContainer).toHaveClass('is-float-label-active');
+  expect(textAreaContainer).toHaveClass('is-float-label');
 });
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();

package/lib/cjs/hooks/useField/useField.js

@@ -190,7 +190,7 @@ var useField = function useField() {
 
   var isFloatLabel = labelMode === _constants.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.FLOAT;
   var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
-  var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
+  var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
     'field-container': true,

package/lib/cjs/hooks/useField/useField.test.js

@@ -165,7 +165,7 @@ test('should return isFloatLabelActive class for container', function () {
   (0, _reactHooks.act)(function () {
     return result.current.fieldContainerProps.onFocus({});
   });
-  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the container loses focus within it
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label'); // Does not have the class if the container loses focus within it
 
   (0, _reactHooks.act)(function () {
     return result.current.fieldContainerProps.onBlur({

package/lib/cjs/styles/forms/label.js

@@ -54,7 +54,7 @@ var label = _objectSpread(_objectSpread({}, _text.text.label), {}, {
     left: 'md',
     mb: 0,
     transformOrigin: 'top left',
-    transition: 'all 0.2s ease-out',
+    transition: 'all 0.1s ease-out',
     pointerEvents: 'none',
     paddingRight: '25px',
     paddingLeft: '1px' // Otherwise, certain characters get cut off on the left from the overflow

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/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -136,7 +136,7 @@ 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 () {
+test("label floats after user's interacting", function () {
   getComponent({
     labelMode: modes.FLOAT,
     value: ''
@@ -144,7 +144,7 @@ test('label floats after user\'s interacting', function () {
   var textAreaContainer = screen.getByTestId(testId);
   expect(textAreaContainer).not.toHaveClass('is-float-label-active');
   userEvent.tab();
-  expect(textAreaContainer).toHaveClass('is-float-label-active');
+  expect(textAreaContainer).toHaveClass('is-float-label');
 });
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();

package/lib/hooks/useField/useField.js

@@ -159,7 +159,7 @@ var useField = function useField() {
 
   var isFloatLabel = labelMode === labelModes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.FLOAT;
   var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
-  var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
+  var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
     'field-container': true,

package/lib/hooks/useField/useField.test.js

@@ -148,7 +148,7 @@ test('should return isFloatLabelActive class for container', function () {
   act(function () {
     return result.current.fieldContainerProps.onFocus({});
   });
-  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the container loses focus within it
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label'); // Does not have the class if the container loses focus within it
 
   act(function () {
     return result.current.fieldContainerProps.onBlur({

package/lib/styles/forms/label.js

@@ -36,7 +36,7 @@ export var label = _objectSpread(_objectSpread({}, text.label), {}, {
     left: 'md',
     mb: 0,
     transformOrigin: 'top left',
-    transition: 'all 0.2s ease-out',
+    transition: 'all 0.1s ease-out',
     pointerEvents: 'none',
     paddingRight: '25px',
     paddingLeft: '1px' // Otherwise, certain characters get cut off on the left from the overflow

package/package.json

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