@pingux/astro 2.50.0 → 2.51.0-alpha.0

package/lib/components/ListView/ListViewFocusWrapper.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "gridCellProps", "focusManager", "isFocusEscaped", "setIsFocusEscaped", "focusProps", "focusWithinProps", "isFocused", "isFocusWithin"];
+import React, { forwardRef, useEffect } from 'react';
+import { mergeProps } from 'react-aria';
+import { FocusScope, useFocusManager } from '@react-aria/focus';
+import PropTypes from 'prop-types';
+import { Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var escapeFocusDelegate = function escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped) {
+  if (e.keyCode === 13) {
+    setIsFocusEscaped(true);
+    focusManager.focusNext();
+    e.stopPropagation();
+    e.preventDefault();
+  } else if (isFocusEscaped) {
+    switch (e.keyCode) {
+      case 37:
+        e.stopPropagation();
+        break;
+      case 39:
+        e.stopPropagation();
+        break;
+      case 38:
+        focusManager.focusPrevious();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+      case 40:
+        focusManager.focusNext();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }
+};
+var ExpandableItemChildrenContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    gridCellProps = props.gridCellProps,
+    focusManager = props.focusManager,
+    isFocusEscaped = props.isFocusEscaped,
+    setIsFocusEscaped = props.setIsFocusEscaped,
+    focusProps = props.focusProps,
+    focusWithinProps = props.focusWithinProps,
+    isFocused = props.isFocused,
+    isFocusWithin = props.isFocusWithin,
+    others = _objectWithoutProperties(props, _excluded);
+  var mergedProps = mergeProps(others, gridCellProps, focusProps, focusWithinProps);
+
+  // this handles instances where a user clicks into the container.
+  useEffect(function () {
+    if (isFocusWithin && !isFocusEscaped && !isFocused) {
+      setIsFocusEscaped(true);
+    }
+  }, [isFocusWithin]);
+  return ___EmotionJSX(Box, _extends({
+    ref: ref
+  }, mergedProps, {
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped);
+    }
+  }), children);
+});
+ExpandableItemChildrenContainer.propTypes = {
+  gridCellProps: PropTypes.shape({}),
+  focusManager: PropTypes.shape({}),
+  focusProps: PropTypes.shape({}),
+  focusWithinProps: PropTypes.shape({}),
+  isFocusEscaped: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  isFocusWithin: PropTypes.bool,
+  expandableContainerOnBlur: PropTypes.func,
+  expandableContainerOnFocus: PropTypes.func,
+  setIsFocusEscaped: PropTypes.func
+};
+var ListViewFocusWrapper = function ListViewFocusWrapper(props) {
+  var children = props.children,
+    containerProps = props.containerProps,
+    isFocusEscaped = props.isFocusEscaped;
+  var focusManager = useFocusManager();
+  return ___EmotionJSX(FocusScope, {
+    restoreFocus: false,
+    contain: isFocusEscaped
+  }, ___EmotionJSX(FocusableItem, null, ___EmotionJSX(ExpandableItemChildrenContainer, _extends({}, containerProps, {
+    focusManager: focusManager
+  }), children)));
+};
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = useFocusManager();
+  var childWithFocusHandle = /*#__PURE__*/React.cloneElement(props.children, {
+    focusManager: focusManager
+  });
+  return childWithFocusHandle;
+};
+ListViewFocusWrapper.propTypes = {
+  containerProps: PropTypes.shape({}),
+  isFocusEscaped: PropTypes.bool
+};
+export default ListViewFocusWrapper;

package/lib/components/ListView/ListViewItem.js

@@ -12,16 +12,15 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext, useRef } from 'react';
-import { mergeProps, useFocusRing } from 'react-aria';
+import { mergeProps, useFocusRing, useGridListItem } from 'react-aria';
 import { useHover } from '@react-aria/interactions';
-import { useListItem } from '@react-aria/list';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import { Box, Loader } from '../../index';
 import { ListViewContext } from './ListViewContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListViewItem = function ListViewItem(props) {
-  var _context;
+  var _context, _item$rendered;
   var item = props.item,
     _props$item$props = props.item.props,
     listItemProps = _props$item$props.listItemProps,
@@ -46,24 +45,31 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = useFocusRing(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
+  var onPointerLeaveFunction = /* istanbul ignore next */function onPointerLeaveFunction() {
+    state.hover.setHoveredItem('');
+  };
   var _useHover = useHover({
       onHoverStart: function onHoverStart() {
         state.hover.setHoveredItem(item.key);
+      },
+      onHoverEnd: /* istanbul ignore next */
+      function onHoverEnd() {
+        onPointerLeaveFunction();
       }
     }),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  var _useListItem = useListItem({
+    hoverProps = _useHover.hoverProps;
+  var _useGridListItem = useGridListItem({
       node: item,
-      isVirtualized: true,
-      isDisabled: isDisabled
+      isVirtualized: true
     }, state, rowRef),
-    raRowProps = _useListItem.rowProps,
-    gridCellProps = _useListItem.gridCellProps;
+    raRowProps = _useGridListItem.rowProps,
+    gridCellProps = _useGridListItem.gridCellProps;
   var isSelected = state.selectionManager.isSelected(item.key);
-  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
+  var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
+    onPointerLeave: onPointerLeaveFunction
+  });
   var _useStatusClasses = useStatusClasses(className, {
-      isHovered: isSelectable && isHovered && isHoverable && item.key === state.hover.hoveredItem,
+      isHovered: isSelectable && isHoverable && item.key === state.hover.hoveredItem,
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
@@ -73,7 +79,11 @@ var ListViewItem = function ListViewItem(props) {
 
   // Whether the current component should have legacy styles removed
   // TODO: [Astro 3.0.0] Remove the legacy styles and update the code here.
-  var shouldOverRideLegacyStyles = _includesInstanceProperty(_context = _Object$keys(item.rendered.props)).call(_context, 'data');
+  var shouldOverRideLegacyStyles = _includesInstanceProperty(_context = _Object$keys(item === null || item === void 0 || (_item$rendered = item.rendered) === null || _item$rendered === void 0 ? void 0 : _item$rendered.props)).call(_context, 'data');
+
+  // Apply appropriate variant dependant on whether a legacy list item is used
+  /* istanbul ignore next */
+  var listItemVariant = shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container';
   return ___EmotionJSX(Box, _extends({
     isDisabled: isDisabled,
     isRow: true,
@@ -83,10 +93,8 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), ___EmotionJSX(Box, _extends({
-    as: "div"
-    // Apply appropriate variant dependant on whether a legacy list item is used
-    ,
-    variant: shouldOverRideLegacyStyles ? 'listViewItem.styledListItem' : 'listViewItem.container'
+    as: "div",
+    variant: listItemVariant
   }, gridCellProps, {
     isFocused: isDisabled ? false : isFocusVisible,
     isDisabled: isDisabled,

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -110,6 +110,36 @@ var rightOfData = {
   alignSelf: 'center',
   flexShrink: 0
 };
+var expandableFocusContainer = {
+  px: 'sm',
+  outline: 'none',
+  border: 'none',
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  }
+};
+var expandableStyledListItem = {
+  display: 'flex',
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  minHeight: '80px',
+  flexGrow: 1,
+  justifyContent: 'center',
+  bg: 'white',
+  '&.is-hovered': {
+    bg: 'accent.99',
+    cursor: 'pointer'
+  },
+  '&.is-focused': {
+    boxShadow: '0 0 0 1px inset #D033FF'
+  }
+};
+var expandableRow = {
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.light'
+  }
+};
 export default {
   container: container,
   controls: controls,
@@ -120,5 +150,8 @@ export default {
   rightOfData: rightOfData,
   styledContainer: styledContainer,
   styledListItem: styledListItem,
-  loaderContainer: loaderContainer
+  loaderContainer: loaderContainer,
+  expandableFocusContainer: expandableFocusContainer,
+  expandableStyledListItem: expandableStyledListItem,
+  expandableRow: expandableRow
 };

package/lib/hooks/useExpandableListViewItem/index.js

@@ -0,0 +1 @@
+export { default } from './useExpandableListViewItem';

package/lib/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -0,0 +1,229 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { useState } from 'react';
+import { mergeProps, useFocusRing, useGridListItem } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
+import { useStatusClasses } from '..';
+var useExpandableListViewItem = function useExpandableListViewItem(props) {
+  var _expandableChildrenRe3;
+  var item = props.item,
+    _props$item$props = props.item.props,
+    listItemProps = _props$item$props.listItemProps,
+    rowProps = _props$item$props.rowProps,
+    state = props.state,
+    expandableItemRowRef = props.expandableItemRowRef,
+    expandableChildrenRef = props.expandableChildrenRef,
+    className = props.className;
+  var hasSeparator = true;
+
+  // convenience extractions from props
+  var key = item.key;
+  var dataId = item.props['data-id'];
+  var isDisabled = state.disabledKeys.has(key);
+  var isSelectable = state.selectionManager.selectionMode !== 'none';
+  var isExpanded = state.expandedKeys.has(key);
+  var isSelected = state.selectionManager.isSelected(key);
+
+  // initialize state
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocusEscaped = _useState2[0],
+    setIsFocusEscaped = _useState2[1];
+
+  // call spectrum hooks
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+    focusWithinProps = _useFocusRing.focusProps;
+  var _useFocusRing2 = useFocusRing(),
+    isFocusVisibleContainer = _useFocusRing2.isFocusVisible,
+    containerFocusProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = useFocusRing({
+      within: true
+    }),
+    isFocusWithinVisibleContainer = _useFocusRing3.isFocusVisible,
+    containerWithinFocusProps = _useFocusRing3.focusProps;
+  var _useFocusRing4 = useFocusRing(),
+    focusProps = _useFocusRing4.focusProps,
+    isFocusVisible = _useFocusRing4.isFocusVisible;
+  var _useHover = useHover({
+      onHoverStart: /* istanbul ignore next */
+      function onHoverStart() {
+        state.hover.setHoveredItem(item.key);
+      },
+      onHoverEnd: /* istanbul ignore next */
+      function onHoverEnd() {
+        state.hover.setHoveredItem('');
+      }
+    }),
+    hoverProps = _useHover.hoverProps;
+  var _useGridListItem = useGridListItem({
+      node: item,
+      isVirtualized: true
+    }, state, expandableItemRowRef),
+    raRowProps = _useGridListItem.rowProps,
+    gridCellProps = _useGridListItem.gridCellProps;
+
+  // remove row mouse event props
+  // delete raRowProps.onClick;
+  delete raRowProps.onMouseDown;
+  delete raRowProps.onPointerDown;
+
+  // declare custom functions
+  var expandItem = function expandItem() {
+    var _context;
+    var newSet = new _Set(_concatInstanceProperty(_context = []).call(_context, _Array$from(state.expandedKeys), [key]));
+    state.setExpandedKeys(newSet);
+  };
+  var toggleExpanded = function toggleExpanded() {
+    if (isExpanded) {
+      var _context2;
+      var set = new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _Array$from(state.expandedKeys)));
+      set["delete"](key);
+      state.setExpandedKeys(set);
+    } else {
+      expandItem();
+    }
+  };
+
+  // overrides the row navigation.
+  // if escape is pressed, focus is returned to the expanded content container
+
+  var onKeyDownEscapeFocusRowOverride = function onKeyDownEscapeFocusRowOverride(e) {
+    if (e.keyCode === 27) {
+      var _expandableChildrenRe;
+      /* istanbul ignore next */
+      setIsFocusEscaped(false);
+      /* istanbul ignore next */
+      expandableChildrenRef === null || expandableChildrenRef === void 0 || (_expandableChildrenRe = expandableChildrenRef.current) === null || _expandableChildrenRe === void 0 ? void 0 : _expandableChildrenRe.focus();
+    }
+  };
+
+  // if the row is expanded, and key left is pressed:
+  // return focus to the expanded content container
+  var listenOnRowForLeft = function listenOnRowForLeft(e) {
+    if (e.keyCode === 37 && e.target === expandableItemRowRef.current && isExpanded) {
+      var _expandableChildrenRe2;
+      expandableChildrenRef === null || expandableChildrenRef === void 0 || (_expandableChildrenRe2 = expandableChildrenRef.current) === null || _expandableChildrenRe2 === void 0 ? void 0 : _expandableChildrenRe2.focus();
+    } else if ((e.keyCode === 13 || e.keyCode === 32) && e.target === expandableItemRowRef.current) {
+      toggleExpanded();
+    } else if (raRowProps.onKeyDownCapture) {
+      raRowProps.onKeyDownCapture(e);
+    }
+  };
+
+  // if the expanded content container is focused, this function will call
+  // it returns focus to the row on right press, and calls the native left press
+  var expandedChildrenKeyCaptureOverride = function expandedChildrenKeyCaptureOverride(e) {
+    var _expandableItemRowRef;
+    // if left go back ie dont stifle
+    // if right, stifle, but then send back to row, using ref.
+    switch (e.keyCode) {
+      case 37:
+        if (!isFocusEscaped) {
+          if (raRowProps.onKeyDownCapture) {
+            raRowProps.onKeyDownCapture(e);
+          }
+          break;
+        }
+        break;
+      case 39:
+        expandableItemRowRef === null || expandableItemRowRef === void 0 || (_expandableItemRowRef = expandableItemRowRef.current) === null || _expandableItemRowRef === void 0 ? void 0 : _expandableItemRowRef.focus();
+        break;
+      default:
+        break;
+    }
+  };
+
+  // merge props and create status css classes
+  var mergedProps = mergeProps(raRowProps, focusProps, focusWithinProps);
+  var _useStatusClasses = useStatusClasses(className, {
+      isHovered: isSelectable && item.key === state.hover.hoveredItem,
+      isSelected: isSelected,
+      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin && !isFocusEscaped && !isFocusVisibleContainer
+    }),
+    classNames = _useStatusClasses.classNames;
+  var _useStatusClasses2 = useStatusClasses('', {
+      isFocused: isFocusVisibleContainer
+    }),
+    focusContainerClassName = _useStatusClasses2.classNames;
+  var _useStatusClasses3 = useStatusClasses('', {
+      hasSeparator: hasSeparator
+    }),
+    rowClassName = _useStatusClasses3.classNames;
+  var expandableRowProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    isDisabled: isDisabled,
+    ref: expandableItemRowRef
+  }, mergedProps), rowProps), {}, {
+    onKeyDownCapture: listenOnRowForLeft
+  }, isFocusEscaped && {
+    onKeyDown: onKeyDownEscapeFocusRowOverride
+  }), {}, {
+    sx: {
+      outline: 'none'
+    }
+  }, (isFocusVisibleContainer || isFocusEscaped) && {
+    onKeyDownCapture: function onKeyDownCapture(e) {
+      return expandedChildrenKeyCaptureOverride(e);
+    }
+  }), {}, {
+    className: rowClassName,
+    variant: 'listViewItem.expandableRow'
+  });
+  var cellProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hoverProps), {}, {
+    variant: 'listViewItem.expandableStyledListItem',
+    sx: {
+      minHeight: '75px',
+      py: 'lg',
+      px: 'md'
+    }
+  }, gridCellProps), {}, {
+    isFocused: isDisabled ? false : isFocusVisible,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    className: classNames,
+    'data-id': dataId
+  }, listItemProps), {}, {
+    'aria-expanded': isExpanded,
+    'aria-controls': (_expandableChildrenRe3 = expandableChildrenRef.current) === null || _expandableChildrenRe3 === void 0 ? void 0 : _expandableChildrenRe3.id
+  });
+  var expandableContainerProps = {
+    ref: expandableChildrenRef,
+    isFocusEscaped: isFocusEscaped,
+    setIsFocusEscaped: setIsFocusEscaped,
+    className: focusContainerClassName,
+    isFocused: isFocusVisibleContainer,
+    focusProps: containerFocusProps,
+    focusWithinProps: containerWithinFocusProps,
+    isFocusWithin: isFocusWithinVisibleContainer,
+    'data-testid': 'focuscontainer',
+    variant: 'listViewItem.expandableFocusContainer'
+  };
+  var expandableItemState = {
+    isExpanded: isExpanded,
+    isFocusEscaped: isFocusEscaped,
+    toggleExpanded: toggleExpanded,
+    gridCellProps: gridCellProps
+  };
+  return {
+    expandableRowProps: expandableRowProps,
+    cellProps: cellProps,
+    expandableContainerProps: expandableContainerProps,
+    expandableItemState: expandableItemState
+  };
+};
+export default useExpandableListViewItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.50.0",
+  "version": "2.51.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -56,11 +56,12 @@
     "@react-aria/dnd": "^3.5.0",
     "@react-aria/focus": "~3.8.0",
     "@react-aria/grid": "~3.4.1",
+    "@react-aria/gridlist": "^3.7.2",
     "@react-aria/i18n": "~3.6.0",
     "@react-aria/interactions": "~3.11.0",
     "@react-aria/label": "^3.1.0",
     "@react-aria/link": "^3.1.1",
-    "@react-aria/list": "3.0.0-nightly.3375",
+    "@react-aria/list": "^3.0.0-beta.0",
     "@react-aria/listbox": "~3.10.2",
     "@react-aria/live-announcer": "~3.1.1",
     "@react-aria/overlays": "^3.7.0",
@@ -79,11 +80,14 @@
     "@react-stately/layout": "^3.13.4",
     "@react-stately/list": "~3.4.1",
     "@react-stately/overlays": "^3.6.4",
+    "@react-stately/selection": "^3.14.2",
     "@react-stately/table": "^3.9.0",
     "@react-stately/tabs": "^3.6.3",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
     "@react-types/accordion": "^3.0.0-alpha.18",
+    "@react-types/grid": "^3.2.3",
+    "@react-types/select": "^3.9.1",
     "@react-types/shared": "^3.22.0",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",