@pingux/astro 2.32.0-alpha.8 → 2.32.0

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/useField/useField.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 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 { useEffect, useState } from 'react';
@@ -27,24 +27,21 @@ import { useStatusClasses } from '..';
  * @param {{}} props Props for the field
  * @returns {{}} Prop objects to be spread into field components.
  */
-var useField = function useField() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+// TODO: replace with LabelProps instead of ThemeUILabelProps
+// once Label component is rewritten to ts
+var useField = function useField(props) {
   var autocomplete = props.autocomplete,
     autoComplete = props.autoComplete,
     autoCorrect = props.autoCorrect,
-    children = props.children,
     className = props.className,
     _props$containerProps = props.containerProps,
     containerProps = _props$containerProps === void 0 ? {} : _props$containerProps,
     _props$controlProps = props.controlProps,
     controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
-    defaultText = props.defaultText,
     defaultValue = props.defaultValue,
-    direction = props.direction,
-    disabledKeys = props.disabledKeys,
     hasAutoFocus = props.hasAutoFocus,
     hasNoStatusIndicator = props.hasNoStatusIndicator,
-    helperText = props.helperText,
     hintText = props.hintText,
     id = props.id,
     isDefaultSelected = props.isDefaultSelected,
@@ -53,7 +50,6 @@ var useField = function useField() {
     isReadOnly = props.isReadOnly,
     isRequired = props.isRequired,
     isRestrictiveMultivalues = props.isRestrictiveMultivalues,
-    isSelected = props.isSelected,
     label = props.label,
     labelMode = props.labelMode,
     _props$labelProps = props.labelProps,
@@ -63,15 +59,9 @@ var useField = function useField() {
     onBlur = props.onBlur,
     _props$onChange = props.onChange,
     onChange = _props$onChange === void 0 ? noop : _props$onChange,
-    onClear = props.onClear,
     onFocus = props.onFocus,
-    onFocusChange = props.onFocusChange,
-    onLoadMore = props.onLoadMore,
-    onOpenChange = props.onOpenChange,
-    onSelectionChange = props.onSelectionChange,
     placeholder = props.placeholder,
     role = props.role,
-    selectedKey = props.selectedKey,
     spellCheck = props.spellCheck,
     _props$status = props.status,
     status = _props$status === void 0 ? statuses.DEFAULT : _props$status,
@@ -107,6 +97,7 @@ var useField = function useField() {
     } else {
       setHasValue(false);
     }
+
     // adding this function resolves the error brought up in UIP-5116
     if (e.persist) {
       e.persist();
@@ -146,7 +137,7 @@ var useField = function useField() {
       isReadOnly: isReadOnly
     }, "is-".concat(status), true), statusClasses), labelProps === null || labelProps === void 0 ? void 0 : labelProps.statusClasses)),
     labelClasses = _useStatusClasses3.classNames;
-  var _getAriaAttributeProp = getAriaAttributeProps(others),
+  var _getAriaAttributeProp = getAriaAttributeProps(omit(others, ['children', 'defaultText', 'direction', 'disabledKeys', 'helperText', 'isSelected', 'onClear', 'onFocusChange', 'onLoadMore', 'onOpenChange', 'onRemove', 'onSelectionChange', 'selectedKey'])),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
 

package/lib/hooks/useField/useField.test.js

@@ -60,11 +60,11 @@ var defaultProps = {
 };
 test('default useField', function () {
   renderHook(function () {
-    return useField();
+    return useField({});
   });
 });
 test('should return props objects for field components', function () {
-  var _context, _context2;
+  var _defaultProps$contain, _context, _context2;
   var _renderHook = renderHook(function () {
       return useField(defaultProps);
     }),
@@ -76,7 +76,7 @@ test('should return props objects for field components', function () {
     fieldLabelProps = _result$current.fieldLabelProps;
   expect(fieldContainerProps).toEqual({
     className: 'field-container has-value is-tested is-container',
-    id: defaultProps.containerProps.id,
+    id: (_defaultProps$contain = defaultProps.containerProps) === null || _defaultProps$contain === void 0 ? void 0 : _defaultProps$contain.id,
     onBlur: expect.any(Function),
     onFocus: expect.any(Function),
     sx: expect.objectContaining({
@@ -151,7 +151,7 @@ test('should support autocomplete additionally', function () {
 test('should return isFloatLabelActive class for container', function () {
   var _renderHook3 = renderHook(function (initialProps) {
       return useField(_objectSpread(_objectSpread({}, initialProps), {}, {
-        placeholder: null
+        placeholder: undefined
       }));
     }, {
       initialProps: defaultProps
@@ -224,8 +224,8 @@ test('should return hasValue class for container when onChange updates internal
   var numCalls = 0;
   var _renderHook5 = renderHook(function () {
       return useField(_objectSpread(_objectSpread({}, defaultProps), {}, {
-        defaultValue: null,
-        placeholder: null,
+        defaultValue: undefined,
+        placeholder: undefined,
         onChange: onChange,
         value: ''
       }));

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/lib/hooks/useMountTransition/useMountTransition.js

@@ -1,16 +1,6 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import { useEffect, useState } from 'react';
-
-/**
- * Allows for css transitions to be applied to components, while mounting or unmounting.
- * @param {Object} [props] Properties provided to the state
- * @param {Boolean} [props.isMounted] Whether the component has been mounted.
- * @param {Number} [props.unmountDelay] Number value of the length of the transition in ms.
- * `(isOpen: boolean) => void`
- * @returns {Boolean} `isTransitioning`
- */
-
 var useMountTransition = function useMountTransition(isMounted, unmountDelay) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/hooks/useMountTransition/useMountTransition.test.js

@@ -23,7 +23,7 @@ var ControlledWithTransition = function ControlledWithTransition() {
   var _useOverlayPanelState = useOverlayPanelState(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef();
+  var triggerRef = useRef(null);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
@@ -42,7 +42,7 @@ var ControlledWithTransition = function ControlledWithTransition() {
       },
       "aria-expanded": state.isOpen
     }, defaultCloseButtonProps), "Close Panel"), ___EmotionJSX("p", {
-      pt: "md"
+      "padding-top": "md"
     }, _JSON$stringify(state.isOpen)))))
   );
 };

package/lib/hooks/useStatusClasses/useStatusClasses.js

@@ -1,16 +1,6 @@
 import classnames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import mapKeys from 'lodash/mapKeys';
-
-/**
- * Converts status information into classes which can be supplied to the rendered component's
- * `className` prop.
- * @param {string} [defaultClass] An optional default class that will be added
- * @param {{}} [statuses] A mapping of conditional statuses and the current value of each one
- * @returns {{classNames: string}} A string of classes based on the input. Status keys will be
- * converted to kebab-case.
- * e.g. useStatusClasses('thing', { isDisabled: true }) => "thing is-disabled"
- */
 var useStatusClasses = function useStatusClasses(defaultClass) {
   var statuses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var kebabStatuses = mapKeys(statuses, function (_v, k) {

package/package.json

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