@pingux/astro 2.32.0-alpha.12 → 2.32.0-alpha.13

package/lib/cjs/components/TreeView/TreeViewKeyboardDelegate.test.js

@@ -0,0 +1,511 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.refArray = exports.flatKeyArray = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _TreeViewItem = require("./TreeViewItem");
+var _TreeViewKeyboardDelegate = require("./TreeViewKeyboardDelegate");
+var _TreeViewSection = require("./TreeViewSection");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var testId = 'test-keyboard-tree';
+var toggleKey = jest.fn();
+var setSelectedKeys = jest.fn();
+var focusPrevious = jest.fn();
+var focusNext = jest.fn();
+var refFocus = jest.fn();
+var state = {
+  toggleKey: toggleKey
+};
+var tree = {
+  setSelectedKeys: setSelectedKeys
+};
+var focusManager = {
+  focusPrevious: focusPrevious,
+  focusNext: focusNext
+};
+var refArray = [{
+  key: 'testprior',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}, {
+  key: 'test',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}, {
+  key: 'testsecond',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}];
+exports.refArray = refArray;
+var flatKeyArray = [{
+  key: 'testprior'
+}, {
+  key: 'test'
+}, {
+  key: 'testsecond'
+}];
+exports.flatKeyArray = flatKeyArray;
+var defaultProps = {
+  'data-testid': testId,
+  focusManager: focusManager,
+  state: state,
+  tree: tree,
+  key: 'test',
+  flatKeyArray: flatKeyArray,
+  refArray: refArray
+};
+var TestComponent = function TestComponent(props) {
+  var focusManagerProp = props.focusManager,
+    stateProp = props.state,
+    treeProp = props.tree,
+    isSelected = props.isSelected,
+    isExpanded = props.isExpanded,
+    _props$isInRefArray = props.isInRefArray,
+    isInRefArray = _props$isInRefArray === void 0 ? true : _props$isInRefArray,
+    flatKeyArrayProp = props.flatKeyArray,
+    refArrayProp = props.refArray;
+  var thisRef = (0, _react.useRef)(null);
+  var testOnKeyDown = function testOnKeyDown(e) {
+    props.onKeyDown(e, stateProp, 'test', treeProp, isSelected, isExpanded, focusManagerProp, flatKeyArrayProp, refArrayProp, 5, true);
+  };
+  var testOnKeyDownAddRef = function testOnKeyDownAddRef(e) {
+    var _context;
+    props.onKeyDown(e, stateProp, 'test', treeProp, isSelected, isExpanded, focusManagerProp, flatKeyArrayProp, (0, _concat["default"])(_context = []).call(_context, refArrayProp, [{
+      key: 'button',
+      thisRef: thisRef
+    }]), 5, true);
+  };
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
+    ref: thisRef,
+    onKeyDown: function onKeyDown(e) {
+      return isInRefArray ? testOnKeyDownAddRef(e) : testOnKeyDown(e);
+    }
+  }, "let us test keypresses"));
+};
+TestComponent.propTypes = {
+  isInRefArray: _propTypes["default"].bool,
+  isEventTargetAKey: _propTypes["default"].bool,
+  state: _propTypes["default"].shape({
+    toggleKey: _propTypes["default"].func
+  }),
+  tree: _propTypes["default"].shape({
+    setSelectedKeys: _propTypes["default"].func
+  }),
+  focusManager: _propTypes["default"].shape({
+    focusPrevious: _propTypes["default"].func,
+    focusNext: _propTypes["default"].func
+  }),
+  isExpanded: _propTypes["default"].bool,
+  isSelected: _propTypes["default"].bool,
+  onKeyDown: _propTypes["default"].func,
+  flatKeyArray: _isIterable.isIterableProp,
+  refArray: _isIterable.isIterableProp
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(TestComponent, (0, _extends2["default"])({}, defaultProps, props)));
+};
+afterEach(function () {
+  jest.clearAllMocks();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('OnEnterPress calls when enter is pressed', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Enter',
+    keyCode: 13
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Enter',
+    keyCode: 13
+  });
+  expect(toggleKey).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(setSelectedKeys).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed, and selected', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection,
+    isSelected: true
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(setSelectedKeys).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed, item', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem,
+    isInRefArray: false
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(setSelectedKeys).toHaveBeenCalled();
+});
+test('onLeftPress calls when Left Arrow is pressed and expanded', function () {
+  getComponent({
+    isExpanded: true,
+    onKeyDown: _TreeViewSection.onKeyDownSection,
+    isInRefArray: false
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(toggleKey).not.toHaveBeenCalled();
+  expect(focusPrevious).toHaveBeenCalled();
+});
+test('onLeftPress does not call when Left Arrow is pressed and NOT expanded', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(toggleKey).not.toHaveBeenCalled();
+  expect(focusPrevious).not.toHaveBeenCalled();
+});
+test('onRightPress calls when Right Arrow is pressed and NOT expanded', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection,
+    isInRefArray: false
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(toggleKey).toHaveBeenCalled();
+  expect(focusNext).not.toHaveBeenCalled();
+});
+test('onRightPress calls correct callback when Right Arrow is pressed and expanded', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection,
+    isExpanded: true,
+    isInRefArray: false
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(toggleKey).not.toHaveBeenCalled();
+  expect(focusNext).not.toHaveBeenCalled();
+});
+test('onLeftPress calls when Left Arrow is pressed and expanded', function () {
+  getComponent({
+    isExpanded: true,
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(toggleKey).not.toHaveBeenCalled();
+});
+test('onDownPress calls when down Arrow is pressed and expanded', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onUpPress calls when down Arrow is pressed and expanded', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onUpPress calls when down Arrow is pressed and expanded for items', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageUpPress calls when page up is pressed', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageUpPress calls when page up is pressed, on section', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageDownPress calls when page up is pressed', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageDownPress calls when page up is pressed, on section', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onDownPress calls when down Arrow is pressed and expanded, for items', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onTabPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  expect(focusNext).not.toHaveBeenCalled();
+});
+test('onTabPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  expect(focusNext).toHaveBeenCalled();
+});
+test('onEndPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onEndPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onHomePress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewSection.onKeyDownSection
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onHomePress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: _TreeViewItem.onKeyDownItem
+  });
+  var button = _testWrapper.screen.getByRole('button');
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onLeftPress calls correct callbacks, when correct props are provided', function () {
+  var thisRefArray = [{
+    thisRef: {
+      current: 'test target'
+    }
+  }];
+  var thisEvent = {
+    target: 'test target',
+    preventDefault: function preventDefault() {
+      return jest.fn();
+    },
+    stopPropagation: function stopPropagation() {
+      return jest.fn();
+    }
+  };
+  (0, _TreeViewKeyboardDelegate.onLeftPress)(thisEvent, focusManager, state, 'test', true, thisRefArray);
+  expect(toggleKey).toHaveBeenCalled();
+});

package/lib/cjs/components/TreeView/TreeViewRow.js

@@ -30,7 +30,7 @@ var _TreeViewContext = require("../../context/TreeViewContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "iconButtonProps"];
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "isParentFocused", "iconButtonProps"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -46,6 +46,7 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isExpanded = props.isExpanded,
     isSelected = props.isSelected,
     isDisabled = props.isDisabled,
+    isParentFocused = props.isParentFocused,
     iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var treeRowRef = (0, _react.useRef)();
@@ -84,13 +85,19 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var mergedProps = (0, _utils.mergeProps)(hoverProps, pressProps, others);
+
+  // console.log(`ROW: ${key} has parent focus: ${isParentFocused}`)
+
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: treeRowRef,
     isRow: true,
     alignItems: "center",
     gap: "xs",
     sx: {
-      flexGrow: 1
+      flexGrow: 1,
+      '& :focus': {
+        border: 'none'
+      }
     },
     className: classNames,
     key: "".concat(key, " box")
@@ -103,15 +110,22 @@ var TreeViewRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       size: 25,
       title: "".concat(title, " expand or collapse button")
     },
-    buttonProps: {
+    buttonProps: _objectSpread(_objectSpread({
       'aria-label': "".concat(title, " expand or collapse button")
-    }
+    }, isParentFocused && {
+      tabIndex: 0
+    }), !isParentFocused && {
+      tabIndex: -1
+    })
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     className: classNames,
     alignItems: "center",
     gap: "xs",
-    variant: "treeView.treeRow"
+    variant: "treeView.treeRow",
+    sx: !items && {
+      ml: '36px'
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     color: "focus",
     icon: mainIcon,
@@ -132,6 +146,7 @@ TreeViewRow.propTypes = {
   isSelected: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isExpanded: _propTypes["default"].bool,
+  isParentFocused: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
   iconButtonProps: _propTypes["default"].shape({