@pingux/astro 2.32.0-alpha.9 → 2.32.0

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();
+});

package/lib/components/TreeView/TreeViewRow.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "iconButtonProps"];
+var _excluded = ["title", "mainIcon", "lastIcon", "item", "items", "isExpanded", "isSelected", "isDisabled", "isParentFocused", "iconButtonProps"];
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
@@ -35,6 +35,7 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     isExpanded = props.isExpanded,
     isSelected = props.isSelected,
     isDisabled = props.isDisabled,
+    isParentFocused = props.isParentFocused,
     iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded);
   var treeRowRef = useRef();
@@ -73,13 +74,19 @@ var TreeViewRow = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var mergedProps = mergeProps(hoverProps, pressProps, others);
+
+  // console.log(`ROW: ${key} has parent focus: ${isParentFocused}`)
+
   return ___EmotionJSX(Box, _extends({
     ref: treeRowRef,
     isRow: true,
     alignItems: "center",
     gap: "xs",
     sx: {
-      flexGrow: 1
+      flexGrow: 1,
+      '& :focus': {
+        border: 'none'
+      }
     },
     className: classNames,
     key: "".concat(key, " box")
@@ -92,15 +99,22 @@ var TreeViewRow = /*#__PURE__*/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
+    })
   }), ___EmotionJSX(Box, {
     isRow: true,
     className: classNames,
     alignItems: "center",
     gap: "xs",
-    variant: "treeView.treeRow"
+    variant: "treeView.treeRow",
+    sx: !items && {
+      ml: '36px'
+    }
   }, ___EmotionJSX(Icon, {
     color: "focus",
     icon: mainIcon,
@@ -121,6 +135,7 @@ TreeViewRow.propTypes = {
   isSelected: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isExpanded: PropTypes.bool,
+  isParentFocused: PropTypes.bool,
   title: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({})),
   iconButtonProps: PropTypes.shape({