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

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({

package/lib/components/TreeView/TreeViewSection.js

@@ -1,19 +1,105 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { useFocusRing } from '@react-aria/focus';
 import { useOption } from '@react-aria/listbox';
+import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from '../../context/TreeViewContext';
+import { useStatusClasses } from '../../hooks';
 import { Box, TreeViewItem } from '../../index';
 import { SectionOrItemRender } from './TreeView';
+import { sectionPressHandlers } from './TreeViewKeyboardDelegate';
 import TreeViewRow from './TreeViewRow';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var onKeyDownSection = function onKeyDownSection(e, state, key, tree, isSelected, isExpanded, focusManager, flatKeyArray, refArray, pageLength, isFocused) {
+  switch (e.which) {
+    case 9:
+      if (isFocused) {
+        sectionPressHandlers.onTabPress(e, refArray, focusManager, true, key);
+      }
+      break;
+    case 13:
+      sectionPressHandlers.onEnterPress(e, state, key);
+      break;
+    case 32:
+      sectionPressHandlers.onSpacePress(e, tree, key, isSelected);
+      break;
+    case 33:
+      sectionPressHandlers.onPageUpPress(e, key, flatKeyArray, refArray, pageLength);
+      break;
+    case 34:
+      sectionPressHandlers.onPageDownPress(e, key, flatKeyArray, refArray, pageLength);
+      break;
+    case 36:
+      sectionPressHandlers.onHomePress(key, flatKeyArray, refArray);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+    case 35:
+      sectionPressHandlers.onEndPress(key, flatKeyArray, refArray);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+    case 37:
+      sectionPressHandlers.onLeftPress(e, focusManager, state, key, isExpanded, refArray);
+      break;
+    case 38:
+      sectionPressHandlers.onUpPress(e, key, refArray, flatKeyArray);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+    case 39:
+      if (isFocused) {
+        sectionPressHandlers.onRightPress(e, focusManager, state, key, isExpanded, refArray);
+      }
+      break;
+    case 40:
+      sectionPressHandlers.onDownPress(e, key, refArray, flatKeyArray);
+      e.preventDefault();
+      e.stopPropagation();
+      break;
+    default:
+      /* istanbul ignore next */
+      break;
+  }
+};
+export var removeRefFromArrayHelper = function removeRefFromArrayHelper(prevState, keyToRemove) {
+  if (_someInstanceProperty(prevState).call(prevState, function (item) {
+    return item.key === keyToRemove;
+  })) {
+    var _context;
+    var newArray = _concatInstanceProperty(_context = []).call(_context, _filterInstanceProperty(prevState).call(prevState, function (_item) {
+      return _item.key !== keyToRemove;
+    }));
+    return newArray;
+  }
+  return prevState;
+};
+export var addRefToArrayHelper = function addRefToArrayHelper(prevState, keyToAdd, refToAdd) {
+  if (!_someInstanceProperty(prevState).call(prevState, function (i) {
+    return i.key === keyToAdd;
+  })) {
+    var _context2;
+    var thisObj = {
+      key: keyToAdd,
+      thisRef: refToAdd
+    };
+    return _concatInstanceProperty(_context2 = []).call(_context2, prevState, [thisObj]);
+  }
+  return prevState;
+};
 var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context;
+  var _context3;
   var item = props.item,
     items = props.items,
     title = props.title,
+    focusManager = props.focusManager,
+    onKeyDown = props.onKeyDown,
     level = props.level,
     position = props.position,
     setSize = props.setSize;
@@ -24,51 +110,107 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
     return treeSectionRef.current;
   });
   var _useTreeViewContext = useTreeViewContext(),
-    state = _useTreeViewContext.state;
+    state = _useTreeViewContext.state,
+    tree = _useTreeViewContext.tree,
+    refArray = _useTreeViewContext.refArray,
+    setRefs = _useTreeViewContext.setRefs,
+    flatKeyArray = _useTreeViewContext.flatKeyArray,
+    pageLength = _useTreeViewContext.pageLength,
+    setLastFocusedItem = _useTreeViewContext.setLastFocusedItem,
+    lastFocusedItem = _useTreeViewContext.lastFocusedItem;
   var _useOption = useOption({
       key: key
     }, state, treeSectionRef),
     optionProps = _useOption.optionProps,
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocused = _useFocusRing.isFocused;
+  var _useFocusRing2 = useFocusRing({
+      within: true
+    }),
+    focusPropsWithin = _useFocusRing2.focusProps,
+    isFocusedWithin = _useFocusRing2.isFocused;
   var isExpanded = state.expandedKeys.has(key);
+  var onKeyDownFunction = function onKeyDownFunction(e) {
+    onKeyDownSection(e, state, key, tree, isSelected, isExpanded, focusManager, flatKeyArray, refArray, pageLength, isFocused);
+    if (onKeyDown) {
+      onKeyDown(e, key);
+    }
+  };
+  var addRefToArray = function addRefToArray(thisKey, thisRef) {
+    setRefs(function (prev) {
+      return addRefToArrayHelper(prev, thisKey, thisRef);
+    });
+  };
+  var removeRefFromArray = function removeRefFromArray() {
+    setRefs(function (prev) {
+      return removeRefFromArrayHelper(prev, key);
+    });
+  };
+
+  // adds and removes refs on mount and dismount
+  useEffect(function () {
+    // this  runs on mount
+    addRefToArray(key, treeSectionRef);
+    return function () {
+      // this runs on cleanup
+      removeRefFromArray(key, refArray);
+    };
+  }, []);
+  var mergedProps = mergeProps(focusPropsWithin, focusProps, optionProps, {
+    onFocus: function onFocus() {
+      return setLastFocusedItem(key);
+    }
+  });
+  var _useStatusClasses = useStatusClasses('', {
+      isFocused: isFocused
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     ref: treeSectionRef,
     as: "li",
-    sx: {
-      ':not(:last-child)': {
-        pb: 'sm'
-      }
-    },
     "aria-expanded": isExpanded,
-    "aria-disabled": isDisabled,
+    "aria-disabled": isDisabled
+  }, mergedProps, {
+    role: "treeitem",
+    variant: "treeView.wrapper",
+    className: classNames,
+    "aria-selected": isSelected,
     "aria-level": level,
     "aria-setsize": setSize,
-    "aria-posinset": position + 1
-  }, optionProps, {
-    role: "treeitem",
-    "aria-selected": isSelected
+    "aria-posinset": position + 1,
+    onKeyDown: function onKeyDown(e) {
+      return onKeyDownFunction(e);
+    },
+    tabIndex: lastFocusedItem === key ? 0 : -1
   }), ___EmotionJSX(TreeViewRow, {
     item: item,
     title: title,
     items: items,
     isExpanded: isExpanded,
     isSelected: isSelected,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isParentFocused: isFocusedWithin
   }), isExpanded && ___EmotionJSX(Box, {
     as: "ul",
     role: "group",
     key: "".concat(item.key, " ul"),
     sx: {
-      pl: 'md'
+      pl: 'md',
+      '& :focus': {
+        border: 'none'
+      }
     }
-  }, _mapInstanceProperty(_context = _Array$from(items)).call(_context, function (_item, _index) {
+  }, _mapInstanceProperty(_context3 = _Array$from(items)).call(_context3, function (_item, _index) {
     var _item$value$items;
     return SectionOrItemRender(((_item$value$items = _item.value.items) === null || _item$value$items === void 0 ? void 0 : _item$value$items.length) > 0, ___EmotionJSX(TreeViewSection, {
       item: _item,
       items: _item.children,
       title: _item.value.title,
       key: _item.value.title,
+      focusManager: focusManager,
       level: level + 1,
       position: _index,
       setSize: items.length
@@ -76,6 +218,7 @@ var TreeViewSection = /*#__PURE__*/forwardRef(function (props, ref) {
       item: _item,
       title: _item.value.title,
       key: _item.value.title,
+      focusManager: focusManager,
       level: level + 1,
       position: _index,
       setSize: items.length
@@ -88,6 +231,8 @@ TreeViewSection.propTypes = {
     key: PropTypes.string
   }),
   title: PropTypes.string,
+  focusManager: PropTypes.shape({}),
+  onKeyDown: PropTypes.func,
   level: PropTypes.number,
   position: PropTypes.number,
   setSize: PropTypes.number

package/lib/components/TreeView/TreeViewWrapper.js

@@ -0,0 +1,31 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { FocusScope, useFocusManager } from '@react-aria/focus';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeViewWrapper = function TreeViewWrapper(props) {
+  var children = props.children;
+  var items = _mapInstanceProperty(children).call(children, function (child) {
+    return {
+      item: child,
+      key: child.key
+    };
+  });
+  return ___EmotionJSX(FocusScope, {
+    restoreFocus: false,
+    contain: false
+  }, _mapInstanceProperty(items).call(items, function (_ref) {
+    var item = _ref.item,
+      key = _ref.key;
+    return ___EmotionJSX(FocusableItem, {
+      key: key
+    }, item);
+  }));
+};
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = useFocusManager();
+  var childWithFocusHandle = /*#__PURE__*/React.cloneElement(props.children, {
+    focusManager: focusManager
+  });
+  return childWithFocusHandle;
+};
+export default TreeViewWrapper;

package/lib/hooks/useImageUploadState/useImageUploadState.js

@@ -35,11 +35,15 @@ var useImageUploadState = function useImageUploadState(inputRef) {
     if (previewImage && previewImage !== defaultPreviewImage) {
       setIsMenuOpen(true);
     } else {
-      inputRef.current.click();
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
     }
   }, [defaultPreviewImage, previewImage, inputRef]);
   var handleInputChange = useCallback(function (event) {
     var _event$target;
+    if (!event.target.files) {
+      return;
+    }
     var eventFileType = (_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.files[0]) === null || _event$target === void 0 || (_event$target = _event$target.type) === null || _event$target === void 0 ? void 0 : _event$target.split('/')[0];
     if (fileTypes !== null && fileTypes !== void 0 && _includesInstanceProperty(fileTypes).call(fileTypes, eventFileType)) {
       if (onChange && typeof onChange === 'function') {
@@ -52,9 +56,8 @@ var useImageUploadState = function useImageUploadState(inputRef) {
           var _event$target2;
           setIsImageType(true);
           var reader = new FileReader();
-          reader.onload = function (_ref) {
-            var result = _ref.target.result;
-            setPreviewImage(result);
+          reader.onload = function () {
+            setPreviewImage(reader.result);
           };
           reader.readAsDataURL((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.files[0]);
         } else {
@@ -76,8 +79,8 @@ var useImageUploadState = function useImageUploadState(inputRef) {
     return setPreviewImage(defaultPreviewImage);
   }, [defaultPreviewImage]);
   var showFileDialog = useCallback(function () {
-    var _inputRef$current;
-    return inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    var _inputRef$current2;
+    return inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.click();
   }, [inputRef]);
   var handleLabelClick = useCallback(function (e) {
     e.preventDefault();

package/lib/hooks/useModalState/useModalState.js

@@ -1,14 +1,4 @@
 import { useOverlayTriggerState } from 'react-stately';
-
-/**
- * Returns state-related data and functions for use with a Modal component.
- * @param {Object} [props] Properties provided to the state
- * @param {Boolean} [props.isDefaultOpen] Whether the modal is open by default (uncontrolled).
- * @param {Boolean} [props.isOpen] Whether the modal is currently open (controlled).
- * @param {Function} [props.onOpenChange] Handler that is called when the open state changes.
- * `(isOpen: boolean) => void`
- * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
- */
 var useModalState = function useModalState() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var isDefaultOpen = props.isDefaultOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.32.0-alpha.10",
+  "version": "2.32.0-alpha.11",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",