@pingux/astro 1.23.0-alpha.2 → 1.23.0

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -172,7 +172,7 @@ var ArrayField = function ArrayField(props) {
     }
   }, [isControlled]);
   var onFieldAdd = (0, _react.useCallback)(function () {
-    if (onAddRef.current) {
+    if (isControlled) {
       return onAddRef.current();
     }
 
@@ -181,7 +181,7 @@ var ArrayField = function ArrayField(props) {
 
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField]);
+  }, [createEmptyField, isControlled]);
 
   var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;

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

@@ -79,7 +79,11 @@ test('adds one text field and new empty field is added', function () {
 });
 test('onAdd callback is fired when adding field', function () {
   var onAdd = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
   getComponent({
+    value: value,
+    defaultValue: defaultValue,
     onAdd: onAdd,
     renderField: renderField
   });

package/lib/cjs/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -54,7 +54,8 @@ var CollapsiblePanelItem = /*#__PURE__*/(0, _react.forwardRef)(function (props,
         fill: 'inherit'
       }
     },
-    onPress: onPress
+    onPress: onPress,
+    "aria-label": "icon"
   }, iconElement)));
 });
 CollapsiblePanelItem.propTypes = {

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/recipes/CollapsiblePanel.stories.js

@@ -150,6 +150,8 @@ var Default = function Default() {
       searchValue = _useState4[0],
       setSearchValue = _useState4[1];
 
+  var checkBoxRef = (0, _react.useRef)(null);
+
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
   }),
@@ -325,7 +327,11 @@ var Default = function Default() {
       },
       isSelected: (0, _some["default"])(selectedItems).call(selectedItems, function (el) {
         return el.key === item.key;
-      })
+      }),
+      ref: checkBoxRef,
+      onClick: function onClick() {
+        return checkBoxRef.current.focus();
+      }
     }));
   })), (0, _react2.jsx)(_.CollapsiblePanel, {
     items: selectedItems,

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/ArrayField/ArrayField.js

@@ -118,7 +118,7 @@ var ArrayField = function ArrayField(props) {
     }
   }, [isControlled]);
   var onFieldAdd = useCallback(function () {
-    if (onAddRef.current) {
+    if (isControlled) {
       return onAddRef.current();
     }
 
@@ -127,7 +127,7 @@ var ArrayField = function ArrayField(props) {
 
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField]);
+  }, [createEmptyField, isControlled]);
 
   var _useLabel = useLabel(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;

package/lib/components/ArrayField/ArrayField.test.js

@@ -66,7 +66,11 @@ test('adds one text field and new empty field is added', function () {
 });
 test('onAdd callback is fired when adding field', function () {
   var onAdd = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
   getComponent({
+    value: value,
+    defaultValue: defaultValue,
     onAdd: onAdd,
     renderField: renderField
   });

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -30,7 +30,8 @@ var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: 'inherit'
       }
     },
-    onPress: onPress
+    onPress: onPress,
+    "aria-label": "icon"
   }, iconElement)));
 });
 CollapsiblePanelItem.propTypes = {

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/recipes/CollapsiblePanel.stories.js

@@ -16,7 +16,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 import { useFilter } from '@react-aria/i18n';
 import AccountIcon from 'mdi-react/AccountIcon';
 import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
@@ -106,6 +106,8 @@ export var Default = function Default() {
       searchValue = _useState4[0],
       setSearchValue = _useState4[1];
 
+  var checkBoxRef = useRef(null);
+
   var _useFilter = useFilter({
     sensitivity: 'base'
   }),
@@ -281,7 +283,11 @@ export var Default = function Default() {
       },
       isSelected: _someInstanceProperty(selectedItems).call(selectedItems, function (el) {
         return el.key === item.key;
-      })
+      }),
+      ref: checkBoxRef,
+      onClick: function onClick() {
+        return checkBoxRef.current.focus();
+      }
     }));
   })), ___EmotionJSX(CollapsiblePanel, {
     items: selectedItems,

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.2",
+  "version": "1.23.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",