@pingux/astro 2.32.0-alpha.1 → 2.32.0-alpha.11

package/lib/components/TreeView/TreeViewKeyboardDelegate.js

@@ -0,0 +1,176 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+var focusPrevious = function focusPrevious(index, refArray, flatKeyList) {
+  if (index !== 0) {
+    var key = flatKeyList[index - 1].key;
+    var _refArray$find = _findInstanceProperty(refArray).call(refArray, function (item) {
+        return item.key === key;
+      }),
+      thisRef = _refArray$find.thisRef;
+    thisRef.current.focus();
+  }
+};
+var focusNext = function focusNext(index, refArray, flatKeyList) {
+  if (index !== flatKeyList.length - 1) {
+    var key = flatKeyList[index + 1].key;
+    var _refArray$find2 = _findInstanceProperty(refArray).call(refArray, function (item) {
+        return item.key === key;
+      }),
+      thisRef = _refArray$find2.thisRef;
+    thisRef.current.focus();
+  }
+};
+export var verifyIndex = function verifyIndex(thisIndex, interval, length) {
+  var newIndex = thisIndex + interval;
+  if (newIndex < 0) {
+    return 0;
+  }
+  if (newIndex >= length) {
+    return length - 1;
+  }
+  return newIndex;
+};
+export var onHomePress = function onHomePress(key, flatKeyArray, refArray) {
+  var _thisRef$current;
+  var firstKey = flatKeyArray[0];
+  if (firstKey.key === key) {
+    return;
+  }
+  var _refArray$find3 = _findInstanceProperty(refArray).call(refArray, function (_item) {
+      return _item.key === firstKey.key;
+    }),
+    thisRef = _refArray$find3.thisRef;
+  (_thisRef$current = thisRef.current) === null || _thisRef$current === void 0 ? void 0 : _thisRef$current.focus();
+};
+export var onEndPress = function onEndPress(key, flatKeyArray, refArray) {
+  var _thisRef$current2;
+  var lastKey = flatKeyArray[flatKeyArray.length - 1];
+  if (lastKey.key === key) {
+    return;
+  }
+  var _refArray$find4 = _findInstanceProperty(refArray).call(refArray, function (_item) {
+      return _item.key === lastKey.key;
+    }),
+    thisRef = _refArray$find4.thisRef;
+  (_thisRef$current2 = thisRef.current) === null || _thisRef$current2 === void 0 ? void 0 : _thisRef$current2.focus();
+};
+export var pageUpOrDown = function pageUpOrDown(key, flatKeyArray, refArray, pageLength) {
+  var _thisRef$current3;
+  var thisIndex = _findIndexInstanceProperty(flatKeyArray).call(flatKeyArray, function (item) {
+    return item.key === key;
+  });
+  var newIndex = verifyIndex(thisIndex, pageLength, flatKeyArray.length);
+  var foundKey = flatKeyArray[newIndex].key;
+  var _refArray$find5 = _findInstanceProperty(refArray).call(refArray, function (_item) {
+      return _item.key === foundKey;
+    }),
+    thisRef = _refArray$find5.thisRef;
+  (_thisRef$current3 = thisRef.current) === null || _thisRef$current3 === void 0 ? void 0 : _thisRef$current3.focus();
+};
+export var onEnterPress = function onEnterPress(e, state, key) {
+  state.toggleKey(key);
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onLeftPress = function onLeftPress(e, focusManager, state, key, isExpanded, refArray) {
+  var isEventTargetAKey = _findInstanceProperty(refArray).call(refArray, function (_item) {
+    return _item.thisRef.current === e.target;
+  });
+  if (isExpanded && isEventTargetAKey) {
+    state.toggleKey(key);
+  }
+  if (isExpanded && !isEventTargetAKey) {
+    focusManager.focusPrevious();
+  }
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onSpacePress = function onSpacePress(e, tree, key, isSelected) {
+  if (isSelected) {
+    tree.setSelectedKeys([]);
+  } else {
+    tree.setSelectedKeys([key]);
+  }
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onUpPress = function onUpPress(e, key, refArray, flatKeyList) {
+  var foundIndex = _findIndexInstanceProperty(flatKeyList).call(flatKeyList, function (item) {
+    return item.key === key;
+  });
+  focusPrevious(foundIndex, refArray, flatKeyList);
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onTabPress = function onTabPress(e, refArray, focusManager, isSection) {
+  var isEventTargetAKey = _findInstanceProperty(refArray).call(refArray, function (_item) {
+    return _item.thisRef.current === e.target;
+  });
+  if (isEventTargetAKey && isSection) {
+    focusManager.focusNext();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+};
+export var onRightPress = function onRightPress(e, focusManager, state, key, isExpanded, refArray) {
+  if (!isExpanded) {
+    state.toggleKey(key);
+    return;
+  }
+  var isEventTargetAKey = _findInstanceProperty(refArray).call(refArray, function (_item) {
+    return _item.thisRef.current === e.target;
+  });
+  if (isExpanded && isEventTargetAKey) {
+    focusManager.focusNext();
+  }
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onDownPress = function onDownPress(e, key, refArray, flatKeyList) {
+  // find the key
+  var foundIndex = _findIndexInstanceProperty(flatKeyList).call(flatKeyList, function (item) {
+    return item.key === key;
+  });
+  focusNext(foundIndex, refArray, flatKeyList);
+  // check if first or last
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onRightLeftItemPress = function onRightLeftItemPress(e) {
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onPageUpPress = function onPageUpPress(e, key, flatKeyArray, refArray, pageLength) {
+  pageUpOrDown(key, flatKeyArray, refArray, -Math.abs(pageLength));
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var onPageDownPress = function onPageDownPress(e, key, flatKeyArray, refArray, pageLength) {
+  pageUpOrDown(key, flatKeyArray, refArray, Math.abs(pageLength));
+  e.preventDefault();
+  e.stopPropagation();
+};
+export var sectionPressHandlers = {
+  onEnterPress: onEnterPress,
+  onSpacePress: onSpacePress,
+  onLeftPress: onLeftPress,
+  onRightPress: onRightPress,
+  onUpPress: onUpPress,
+  onDownPress: onDownPress,
+  onTabPress: onTabPress,
+  onPageUpPress: onPageUpPress,
+  onPageDownPress: onPageDownPress,
+  onHomePress: onHomePress,
+  onEndPress: onEndPress
+};
+export var itemPressHandlers = {
+  onSpacePress: onSpacePress,
+  onDownPress: onDownPress,
+  onUpPress: onUpPress,
+  onRightLeftItemPress: onRightLeftItemPress,
+  onTabPress: onTabPress,
+  onPageUpPress: onPageUpPress,
+  onPageDownPress: onPageDownPress,
+  onHomePress: onHomePress,
+  onEndPress: onEndPress
+};

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

@@ -0,0 +1,496 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { onKeyDownItem } from './TreeViewItem';
+import { onLeftPress } from './TreeViewKeyboardDelegate';
+import { onKeyDownSection } from './TreeViewSection';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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
+};
+export var refArray = [{
+  key: 'testprior',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}, {
+  key: 'test',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}, {
+  key: 'testsecond',
+  thisRef: {
+    current: {
+      focus: refFocus
+    }
+  }
+}];
+export var flatKeyArray = [{
+  key: 'testprior'
+}, {
+  key: 'test'
+}, {
+  key: 'testsecond'
+}];
+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 = 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, _concatInstanceProperty(_context = []).call(_context, refArrayProp, [{
+      key: 'button',
+      thisRef: thisRef
+    }]), 5, true);
+  };
+  return ___EmotionJSX("div", null, ___EmotionJSX("button", {
+    ref: thisRef,
+    onKeyDown: function onKeyDown(e) {
+      return isInRefArray ? testOnKeyDownAddRef(e) : testOnKeyDown(e);
+    }
+  }, "let us test keypresses"));
+};
+TestComponent.propTypes = {
+  isInRefArray: PropTypes.bool,
+  isEventTargetAKey: PropTypes.bool,
+  state: PropTypes.shape({
+    toggleKey: PropTypes.func
+  }),
+  tree: PropTypes.shape({
+    setSelectedKeys: PropTypes.func
+  }),
+  focusManager: PropTypes.shape({
+    focusPrevious: PropTypes.func,
+    focusNext: PropTypes.func
+  }),
+  isExpanded: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  onKeyDown: PropTypes.func,
+  flatKeyArray: isIterableProp,
+  refArray: isIterableProp
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(TestComponent, _extends({}, defaultProps, props)));
+};
+afterEach(function () {
+  jest.clearAllMocks();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('OnEnterPress calls when enter is pressed', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Enter',
+    keyCode: 13
+  });
+  fireEvent.keyUp(button, {
+    key: 'Enter',
+    keyCode: 13
+  });
+  expect(toggleKey).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  fireEvent.keyUp(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(setSelectedKeys).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed, and selected', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection,
+    isSelected: true
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  fireEvent.keyUp(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(setSelectedKeys).toHaveBeenCalled();
+});
+test('onSpacePress calls when space is pressed, item', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem,
+    isInRefArray: false
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Space',
+    keyCode: 32
+  });
+  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: onKeyDownSection,
+    isInRefArray: false
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  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: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  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: onKeyDownSection,
+    isInRefArray: false
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  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: onKeyDownSection,
+    isExpanded: true,
+    isInRefArray: false
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  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: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  fireEvent.keyUp(button, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(toggleKey).not.toHaveBeenCalled();
+});
+test('onDownPress calls when down Arrow is pressed and expanded', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  fireEvent.keyUp(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onUpPress calls when down Arrow is pressed and expanded', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  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: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  fireEvent.keyUp(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageUpPress calls when page up is pressed', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  fireEvent.keyUp(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageUpPress calls when page up is pressed, on section', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  fireEvent.keyUp(button, {
+    key: 'PageUp',
+    keyCode: 33
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageDownPress calls when page up is pressed', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  fireEvent.keyUp(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onPageDownPress calls when page up is pressed, on section', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'PageDown',
+    keyCode: 34
+  });
+  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: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  fireEvent.keyUp(button, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onTabPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  fireEvent.keyUp(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  expect(focusNext).not.toHaveBeenCalled();
+});
+test('onTabPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  fireEvent.keyUp(button, {
+    key: 'Tab',
+    keyCode: 9
+  });
+  expect(focusNext).toHaveBeenCalled();
+});
+test('onEndPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  fireEvent.keyUp(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onEndPress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  fireEvent.keyUp(button, {
+    key: 'End',
+    keyCode: 35
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onHomePress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownSection
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  fireEvent.keyUp(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  expect(refFocus).toHaveBeenCalled();
+});
+test('onHomePress calls correct callbacks', function () {
+  getComponent({
+    onKeyDown: onKeyDownItem
+  });
+  var button = screen.getByRole('button');
+  fireEvent.keyDown(button, {
+    key: 'Home',
+    keyCode: 36
+  });
+  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();
+    }
+  };
+  onLeftPress(thisEvent, focusManager, state, 'test', true, thisRefArray);
+  expect(toggleKey).toHaveBeenCalled();
+});