@pingux/astro 1.41.0-alpha.0 → 1.41.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.40.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.40.0...@pingux/astro@1.40.1) (2023-01-26)
+
+
+### Bug Fixes
+
+* [UIP-5926] CopyText: respect parent width ([6be0ee9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6be0ee9f68f10659ac4fc70229dbdbed5ded4201))
+* [UIP-5951] Remove empty sections in search results for EnvironmentBreadcrumb ([5d4563a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5d4563a293279d056918c8fbfe72f32ca505043e))
+* [UIP-5985][UIP-5989] Astro Accordion Fixes ([c4c6d1e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c4c6d1e1ae5f407010ddd1227865a5eb812e20a0))
+
+
+
+
+
 # [1.40.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.39.2...@pingux/astro@1.40.0) (2023-01-17)
 
 

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -40,6 +40,8 @@ var _checkbox = require("@react-aria/checkbox");
 
 var _toggle = require("@react-stately/toggle");
 
+var _interactions = require("@react-aria/interactions");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uuid = require("uuid");
@@ -84,6 +86,9 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     defaultSelected: isDefaultSelected || controlProps.isDefaultSelected
   }, props), controlProps);
 
+  var _usePress = (0, _interactions.usePress)(props),
+      containerPressProps = _usePress.pressProps;
+
   var state = (0, _toggle.useToggleState)(checkboxProps);
   var checkboxRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -103,7 +108,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useCheckbox = (0, _checkbox.useCheckbox)(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({}, props), {}, {
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
     statusClasses: {
       isIndeterminate: isIndeterminate
     },

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

@@ -26,6 +26,8 @@ var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/consta
 
 var _ListView = _interopRequireDefault(require("./ListView"));
 
+var _CheckboxField = _interopRequireDefault(require("../CheckboxField"));
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -104,6 +106,31 @@ var getComponentEmpty = function getComponentEmpty() {
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props))));
 };
 
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$renderFn = _ref3.renderFn,
+      renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
+
+  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true
+  }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    items: items
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.key,
+      textValue: item.name,
+      "data-id": item.key
+    }, (0, _react2.jsx)(_CheckboxField["default"], {
+      label: item.name,
+      containerProps: {
+        'data-testid': 'TestID'
+      }
+    }));
+  })));
+};
+
 test('renders listview component', function () {
   getComponent();
 
@@ -354,4 +381,15 @@ test('when user navigates with tab and arrows keys, onFocus is called and the is
       }
     }
   }, _callee7);
-})));
+})));
+test('list view not receive focus when click on checkbox', function () {
+  getComponentWithCheckbox();
+
+  var listItem = _testWrapper.screen.getAllByRole('gridcell');
+
+  var checkbox = _testWrapper.screen.getAllByTestId('TestID');
+
+  expect(listItem[0]).not.toHaveClass('is-focused');
+  checkbox[0].click();
+  expect(listItem[0]).not.toHaveClass('is-focused');
+});

package/lib/components/CheckboxField/CheckboxField.js

@@ -17,6 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useCheckbox } from '@react-aria/checkbox';
 import { useToggleState } from '@react-stately/toggle';
+import { usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../../';
@@ -47,6 +48,9 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultSelected: isDefaultSelected || controlProps.isDefaultSelected
   }, props), controlProps);
 
+  var _usePress = usePress(props),
+      containerPressProps = _usePress.pressProps;
+
   var state = useToggleState(checkboxProps);
   var checkboxRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -66,7 +70,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
-  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
     statusClasses: {
       isIndeterminate: isIndeterminate
     },

package/lib/components/ListView/ListView.test.js

@@ -10,6 +10,7 @@ import { Item } from '@react-stately/collections';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import ListView from './ListView';
+import CheckboxField from '../CheckboxField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   key: 'Aardvark',
@@ -87,6 +88,31 @@ var getComponentEmpty = function getComponentEmpty() {
   }, ___EmotionJSX(ListView, _extends({}, defaultProps, props))));
 };
 
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$renderFn = _ref3.renderFn,
+      renderFn = _ref3$renderFn === void 0 ? render : _ref3$renderFn;
+
+  return renderFn(___EmotionJSX(FocusScope, {
+    restoreFocus: true
+  }, ___EmotionJSX(ListView, _extends({}, defaultProps, props, {
+    items: items
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      textValue: item.name,
+      "data-id": item.key
+    }, ___EmotionJSX(CheckboxField, {
+      label: item.name,
+      containerProps: {
+        'data-testid': 'TestID'
+      }
+    }));
+  })));
+};
+
 test('renders listview component', function () {
   getComponent();
   var listView = screen.getByTestId(testId);
@@ -309,4 +335,12 @@ test('when user navigates with tab and arrows keys, onFocus is called and the is
       }
     }
   }, _callee7);
-})));
+})));
+test('list view not receive focus when click on checkbox', function () {
+  getComponentWithCheckbox();
+  var listItem = screen.getAllByRole('gridcell');
+  var checkbox = screen.getAllByTestId('TestID');
+  expect(listItem[0]).not.toHaveClass('is-focused');
+  checkbox[0].click();
+  expect(listItem[0]).not.toHaveClass('is-focused');
+});

package/package.json

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