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

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -58,6 +58,8 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
+var _useDevelopmentWarning = _interopRequireDefault(require("../../hooks/useDevelopmentWarning"));
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -89,13 +91,18 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      containerProps = props.containerProps;
+      containerProps = props.containerProps,
+      navigationMode = props.navigationMode;
   var accordionGridRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionGridRef.current;
   });
+  (0, _useDevelopmentWarning["default"])({
+    message: 'Use navigationMode prop for AccordionGridGroup',
+    shouldTrigger: !navigationMode
+  });
 
   var _useListState = (0, _list.useListState)(props),
       collection = _useListState.collection;
@@ -166,6 +173,12 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       gridProps = _useGrid.gridProps;
 
   delete gridProps.onMouseDown;
+
+  if (navigationMode === 'native') {
+    delete gridProps.onKeyDown;
+    delete gridProps.onKeyDownCapture;
+  }
+
   return (0, _react2.jsx)(_AccordionGridContext.AccordionGridContext.Provider, {
     value: {
       state: state,
@@ -177,7 +190,8 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {
     return (0, _react2.jsx)(_AccordionGridItem["default"], (0, _extends2["default"])({
       key: item.key,
-      item: item
+      item: item,
+      navigationMode: navigationMode
     }, item.props), item.props.children);
   })));
 });
@@ -203,6 +217,13 @@ AccordionGridGroup.propTypes = {
    */
   onSelectionChange: _propTypes["default"].func,
 
+  /**
+   * Defines a type of navigation mode.
+   * "native" - navigation via "tab" key.
+   *  "arrows" - navigation via arrow keys.
+   */
+  navigationMode: _propTypes["default"].string,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.

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

@@ -327,7 +327,8 @@ exports.Controlled = Controlled;
 var AccordionWithInputs = function AccordionWithInputs() {
   return (0, _react2.jsx)(_AccordionGridGroup["default"], {
     items: data,
-    defaultSelectedKeys: ['Organization']
+    defaultSelectedKeys: ['Organization'],
+    navigationMode: "native"
   }, function (item) {
     return (0, _react2.jsx)(_collections.Item, {
       key: item.key

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

@@ -61,7 +61,9 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    navigationMode: "native"
+  }), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Text, null, "Header"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextField, {
@@ -300,4 +302,32 @@ test('adds focus to input on a single click after onBlur', function () {
   _userEvent["default"].click(secondInput);
 
   expect(secondInput).toHaveFocus();
+});
+test('native keyboard navigation mode toggle open/close item body', function () {
+  getComponentWithTextFields();
+
+  var firstItemHeader = _testWrapper.screen.getAllByRole('gridcell')[0];
+
+  expect(firstItemHeader).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(firstItemHeader).toHaveFocus();
+  expect(firstItemHeader).not.toHaveClass('is-selected');
+
+  _userEvent["default"].type(firstItemHeader, '{Enter}');
+
+  expect(firstItemHeader).toHaveClass('is-selected');
+
+  var firstInput = _testWrapper.screen.getByLabelText('label 1');
+
+  expect(firstInput).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(firstInput).toHaveFocus();
+
+  _userEvent["default"].type(firstInput, '{arrowup}');
+
+  expect(firstInput).toHaveFocus();
 });

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -46,7 +46,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "headerProps", "bodyProps", "children", "className"];
+var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,6 +60,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
       bodyProps = props.bodyProps,
       children = props.children,
       className = props.className,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
@@ -100,6 +101,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onMouseDown;
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
+
+  if (navigationMode === 'native') {
+    delete rowProps.onKeyDown;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     tabindex: "0"
@@ -113,11 +119,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     item: item,
     ref: cellRef,
     isDisabled: isDisabled,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, headerProps), header), (0, _react2.jsx)(_AccordionGridItemBody["default"], (0, _extends2["default"])({
     item: item,
     ref: cellBodyRef,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
 
@@ -128,7 +136,8 @@ AccordionGridItem.propTypes = {
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItem;
 exports["default"] = _default;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -40,7 +40,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "className", "children", "isSelected"];
+var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -53,6 +53,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       className = props.className,
       children = props.children,
       isSelected = props.isSelected,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
@@ -90,6 +91,12 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var ariaLabel = props['aria-label'];
   delete mergedProps.onMouseDown;
   delete mergedProps.onPointerDown;
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     variant: "accordion.accordionGridBody",
@@ -106,7 +113,8 @@ AccordionGridItemBody.propTypes = {
   'aria-label': _propTypes["default"].string,
   item: _propTypes["default"].shape({
     childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItemBody;
 exports["default"] = _default;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -48,7 +48,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["item", "className", "children", "isSelected", "hasCaret"];
+var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -62,6 +62,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       children = props.children,
       isSelected = props.isSelected,
       hasCaret = props.hasCaret,
+      navigationMode = props.navigationMode,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
@@ -112,6 +113,21 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      state.selectionManager.toggleSelection(e.target.dataset.key);
+    }
+  };
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+    delete mergedProps.onKeyUp;
+    mergedProps.tabIndex = 0;
+    mergedProps.onKeyPress = handleKeyPress;
+  }
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     ref: cellRef
@@ -148,7 +164,8 @@ AccordionGridItemHeader.propTypes = {
     props: _propTypes["default"].shape({
       isPressed: _propTypes["default"].bool
     })
-  })
+  }),
+  navigationMode: _propTypes["default"].string
 };
 var _default = AccordionGridItemHeader;
 exports["default"] = _default;

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -26,6 +26,7 @@ import { AccordionGridContext } from '../../context/AccordionGridContext';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import useDevelopmentWarning from '../../hooks/useDevelopmentWarning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var collectionTypes = {
   ITEM: 'item',
@@ -47,13 +48,18 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
   var disabledKeys = props.disabledKeys,
-      containerProps = props.containerProps;
+      containerProps = props.containerProps,
+      navigationMode = props.navigationMode;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
     return accordionGridRef.current;
   });
+  useDevelopmentWarning({
+    message: 'Use navigationMode prop for AccordionGridGroup',
+    shouldTrigger: !navigationMode
+  });
 
   var _useListState = useListState(props),
       collection = _useListState.collection;
@@ -124,6 +130,12 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       gridProps = _useGrid.gridProps;
 
   delete gridProps.onMouseDown;
+
+  if (navigationMode === 'native') {
+    delete gridProps.onKeyDown;
+    delete gridProps.onKeyDownCapture;
+  }
+
   return ___EmotionJSX(AccordionGridContext.Provider, {
     value: {
       state: state,
@@ -135,7 +147,8 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
       key: item.key,
-      item: item
+      item: item,
+      navigationMode: navigationMode
     }, item.props), item.props.children);
   })));
 });
@@ -161,6 +174,13 @@ AccordionGridGroup.propTypes = {
    */
   onSelectionChange: PropTypes.func,
 
+  /**
+   * Defines a type of navigation mode.
+   * "native" - navigation via "tab" key.
+   *  "arrows" - navigation via arrow keys.
+   */
+  navigationMode: PropTypes.string,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -289,7 +289,8 @@ export var Controlled = function Controlled() {
 export var AccordionWithInputs = function AccordionWithInputs() {
   return ___EmotionJSX(AccordionGridGroup, {
     items: data,
-    defaultSelectedKeys: ['Organization']
+    defaultSelectedKeys: ['Organization'],
+    navigationMode: "native"
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.key

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -46,7 +46,9 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
 
 var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+  return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props, {
+    navigationMode: "native"
+  }), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate"
   }, ___EmotionJSX(Text, null, "Header"), ___EmotionJSX(Box, null, ___EmotionJSX(TextField, {
@@ -223,4 +225,20 @@ test('adds focus to input on a single click after onBlur', function () {
   secondInput.blur();
   userEvent.click(secondInput);
   expect(secondInput).toHaveFocus();
+});
+test('native keyboard navigation mode toggle open/close item body', function () {
+  getComponentWithTextFields();
+  var firstItemHeader = screen.getAllByRole('gridcell')[0];
+  expect(firstItemHeader).not.toHaveFocus();
+  userEvent.tab();
+  expect(firstItemHeader).toHaveFocus();
+  expect(firstItemHeader).not.toHaveClass('is-selected');
+  userEvent.type(firstItemHeader, '{Enter}');
+  expect(firstItemHeader).toHaveClass('is-selected');
+  var firstInput = screen.getByLabelText('label 1');
+  expect(firstInput).not.toHaveFocus();
+  userEvent.tab();
+  expect(firstInput).toHaveFocus();
+  userEvent.type(firstInput, '{arrowup}');
+  expect(firstInput).toHaveFocus();
 });

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "headerProps", "bodyProps", "children", "className"];
+var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect, useRef } from 'react';
@@ -23,6 +23,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
       bodyProps = props.bodyProps,
       children = props.children,
       className = props.className,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _React$Children$toArr = React.Children.toArray(children),
@@ -63,6 +64,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onMouseDown;
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
+
+  if (navigationMode === 'native') {
+    delete rowProps.onKeyDown;
+  }
+
   return ___EmotionJSX(Box, _extends({
     as: "div",
     tabindex: "0"
@@ -76,11 +82,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     item: item,
     ref: cellRef,
     isDisabled: isDisabled,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, headerProps), header), ___EmotionJSX(AccordionGridItemBody, _extends({
     item: item,
     ref: cellBodyRef,
-    isSelected: isSelected
+    isSelected: isSelected,
+    navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
 
@@ -91,6 +99,7 @@ AccordionGridItem.propTypes = {
     key: PropTypes.string,
     rendered: PropTypes.node,
     childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItem;

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "className", "children", "isSelected"];
+var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
@@ -18,6 +18,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
       className = props.className,
       children = props.children,
       isSelected = props.isSelected,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useAccordionGridCont = useAccordionGridContext(),
@@ -55,6 +56,12 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'];
   delete mergedProps.onMouseDown;
   delete mergedProps.onPointerDown;
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+  }
+
   return ___EmotionJSX(Box, _extends({
     as: "div",
     variant: "accordion.accordionGridBody",
@@ -71,6 +78,7 @@ AccordionGridItemBody.propTypes = {
   'aria-label': PropTypes.string,
   item: PropTypes.shape({
     childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItemBody;

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "className", "children", "isSelected", "hasCaret"];
+var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { mergeProps } from '@react-aria/utils';
@@ -23,6 +23,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       isSelected = props.isSelected,
       hasCaret = props.hasCaret,
+      navigationMode = props.navigationMode,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useAccordionGridCont = useAccordionGridContext(),
@@ -74,6 +75,21 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      state.selectionManager.toggleSelection(e.target.dataset.key);
+    }
+  };
+
+  if (navigationMode === 'native') {
+    delete mergedProps.onKeyDown;
+    delete mergedProps.onKeyDownCapture;
+    delete mergedProps.onKeyUp;
+    mergedProps.tabIndex = 0;
+    mergedProps.onKeyPress = handleKeyPress;
+  }
+
   return ___EmotionJSX(Box, _extends({
     as: "div",
     ref: cellRef
@@ -110,6 +126,7 @@ AccordionGridItemHeader.propTypes = {
     props: PropTypes.shape({
       isPressed: PropTypes.bool
     })
-  })
+  }),
+  navigationMode: PropTypes.string
 };
 export default AccordionGridItemHeader;

package/package.json

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