@pingux/astro 1.23.0-alpha.3 → 1.23.0-alpha.4

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -102,7 +102,6 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

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

@@ -105,6 +105,12 @@ function useListLayout(state) {
  * ListViews are used to display a list of items. Users can select,
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
+ *
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
 */
 
 

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -48,6 +48,8 @@ var _toggle = require("@react-stately/toggle");
 
 var _switch = require("@react-aria/switch");
 
+var _interactions = require("@react-aria/interactions");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -113,6 +115,12 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _toggle.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = (0, _interactions.usePress)({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = (0, _omit["default"])(props, (0, _keys["default"])(others));
 
   var _useSwitch = (0, _switch.useSwitch)(_objectSpread({
@@ -124,9 +132,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,

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

@@ -54,11 +54,11 @@ var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {
@@ -73,7 +73,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -68,7 +68,6 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

package/lib/components/ListView/ListView.js

@@ -59,6 +59,12 @@ export function useListLayout(state) {
  * ListViews are used to display a list of items. Users can select,
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
+ *
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
 */
 
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/SwitchField/SwitchField.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { useToggleState } from '@react-stately/toggle';
 import { useSwitch } from '@react-aria/switch';
+import { usePress } from '@react-aria/interactions';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -71,6 +72,12 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = usePress({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = omit(props, _Object$keys(others));
 
   var _useSwitch = useSwitch(_objectSpread({
@@ -82,9 +89,9 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = useField(_objectSpread(_objectSpread({
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,

package/lib/styles/forms/switch.js

@@ -33,11 +33,11 @@ export var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, defaultFocus)
 };
 export var thumb = {
   width: 20,
@@ -51,7 +51,7 @@ export var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/package.json

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