@pingux/astro 2.50.0 → 2.51.0-alpha.0

package/lib/cjs/components/ListView/ListViewFocusWrapper.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.escapeFocusDelegate = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _focus = require("@react-aria/focus");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "gridCellProps", "focusManager", "isFocusEscaped", "setIsFocusEscaped", "focusProps", "focusWithinProps", "isFocused", "isFocusWithin"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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;
+    }
+  }
+};
+exports.escapeFocusDelegate = escapeFocusDelegate;
+var ExpandableItemChildrenContainer = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var mergedProps = (0, _reactAria.mergeProps)(others, gridCellProps, focusProps, focusWithinProps);
+
+  // this handles instances where a user clicks into the container.
+  (0, _react.useEffect)(function () {
+    if (isFocusWithin && !isFocusEscaped && !isFocused) {
+      setIsFocusEscaped(true);
+    }
+  }, [isFocusWithin]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref
+  }, mergedProps, {
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      escapeFocusDelegate(e, setIsFocusEscaped, focusManager, isFocusEscaped);
+    }
+  }), children);
+});
+ExpandableItemChildrenContainer.propTypes = {
+  gridCellProps: _propTypes["default"].shape({}),
+  focusManager: _propTypes["default"].shape({}),
+  focusProps: _propTypes["default"].shape({}),
+  focusWithinProps: _propTypes["default"].shape({}),
+  isFocusEscaped: _propTypes["default"].bool,
+  isFocused: _propTypes["default"].bool,
+  isFocusWithin: _propTypes["default"].bool,
+  expandableContainerOnBlur: _propTypes["default"].func,
+  expandableContainerOnFocus: _propTypes["default"].func,
+  setIsFocusEscaped: _propTypes["default"].func
+};
+var ListViewFocusWrapper = function ListViewFocusWrapper(props) {
+  var children = props.children,
+    containerProps = props.containerProps,
+    isFocusEscaped = props.isFocusEscaped;
+  var focusManager = (0, _focus.useFocusManager)();
+  return (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: false,
+    contain: isFocusEscaped
+  }, (0, _react2.jsx)(FocusableItem, null, (0, _react2.jsx)(ExpandableItemChildrenContainer, (0, _extends2["default"])({}, containerProps, {
+    focusManager: focusManager
+  }), children)));
+};
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = (0, _focus.useFocusManager)();
+  var childWithFocusHandle = /*#__PURE__*/_react["default"].cloneElement(props.children, {
+    focusManager: focusManager
+  });
+  return childWithFocusHandle;
+};
+ListViewFocusWrapper.propTypes = {
+  containerProps: _propTypes["default"].shape({}),
+  isFocusEscaped: _propTypes["default"].bool
+};
+var _default = ListViewFocusWrapper;
+exports["default"] = _default;

package/lib/cjs/components/ListView/ListViewItem.js

@@ -22,7 +22,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _list = require("@react-aria/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -33,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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) { (0, _defineProperty2["default"])(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; }
 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,
@@ -58,24 +57,31 @@ var ListViewItem = function ListViewItem(props) {
   var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing2.focusProps,
     isFocusVisible = _useFocusRing2.isFocusVisible;
+  var onPointerLeaveFunction = /* istanbul ignore next */function onPointerLeaveFunction() {
+    state.hover.setHoveredItem('');
+  };
   var _useHover = (0, _interactions.useHover)({
       onHoverStart: function onHoverStart() {
         state.hover.setHoveredItem(item.key);
+      },
+      onHoverEnd: /* istanbul ignore next */
+      function onHoverEnd() {
+        onPointerLeaveFunction();
       }
     }),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
-  var _useListItem = (0, _list.useListItem)({
+    hoverProps = _useHover.hoverProps;
+  var _useGridListItem = (0, _reactAria.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 = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {});
+  var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
+    onPointerLeave: onPointerLeaveFunction
+  });
   var _useStatusClasses = (0, _hooks.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,
@@ -85,7 +91,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 = (0, _includes["default"])(_context = (0, _keys["default"])(item.rendered.props)).call(_context, 'data');
+  var shouldOverRideLegacyStyles = (0, _includes["default"])(_context = (0, _keys["default"])(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 (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isDisabled: isDisabled,
     isRow: true,
@@ -95,10 +105,8 @@ var ListViewItem = function ListViewItem(props) {
       outline: 'none'
     }
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    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/cjs/components/ListViewItem/ListViewItem.styles.js

@@ -117,6 +117,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'
+  }
+};
 var _default = {
   container: container,
   controls: controls,
@@ -127,6 +157,9 @@ var _default = {
   rightOfData: rightOfData,
   styledContainer: styledContainer,
   styledListItem: styledListItem,
-  loaderContainer: loaderContainer
+  loaderContainer: loaderContainer,
+  expandableFocusContainer: expandableFocusContainer,
+  expandableStyledListItem: expandableStyledListItem,
+  expandableRow: expandableRow
 };
 exports["default"] = _default;

package/lib/cjs/hooks/useExpandableListViewItem/index.d.ts

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

package/lib/cjs/hooks/useExpandableListViewItem/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useExpandableListViewItem["default"];
+  }
+});
+var _useExpandableListViewItem = _interopRequireDefault(require("./useExpandableListViewItem"));

package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import type { TreeState } from 'react-stately';
+import type { SelectionManager } from '@react-stately/selection';
+import type { GridNode } from '@react-types/grid';
+interface UseExpandableListViewItemResult {
+    expandableRowProps: object;
+    cellProps: object;
+    expandableContainerProps: object;
+    expandableItemState: object;
+}
+interface UseExpandableListViewItem<T> {
+    /**
+     * This hook wraps the useListItem hook, and modifies it,
+     * providing expansion capabilities and the option for
+     * escaping the focus of the ListView grid.
+     *
+     * Returns four objects, three of which are spread into subcomponents,
+     * the fourth provides state handing props.
+     * @param {Object} [props] Properties provided to the underlying hooks
+     * @param {Boolean} [props.isHoverable] whether or not the option is hoverable
+     * @param {ReactRef} [props.expandableChildrenRef] the container of all of the expandable content
+     * @param {ReactRef} [props.expandableItemRowRef] the container of for the entire item
+     * @param {String} [props.className] custom css classname applied to the row
+     * @param {Object} [props.state] state prop passed from useTreeState. handles expansion
+     * @param {Object} [props.item] item object.
+     *
+     * @returns {Object} {expandableRowProps}: props spread into the entire row container
+     * @returns {Object} {cellProps}: props spread into the non-expanded content cell
+     * @returns {Object} {expandableContainerProps}: spread into the expanded content cell
+     * @returns {Object} {state}: expansion, focus, and additonal cell props
+     */
+    (props: ExpandableListViewItemProps<T>): UseExpandableListViewItemResult;
+}
+interface ListViewState<T> extends TreeState<T> {
+    hover: {
+        hoveredItem?: string;
+        setHoveredItem: (hoveredItem: string | number) => unknown;
+    };
+    isLink: boolean;
+    selectionManager: SelectionManager;
+}
+interface ExpandableListViewItemProps<T> {
+    expandableItemRowRef: React.MutableRefObject<HTMLDivElement | null>;
+    expandableChildrenRef: React.MutableRefObject<HTMLDivElement | null>;
+    className: string;
+    item: GridNode<T>;
+    state: ListViewState<T>;
+    key: string | number;
+}
+declare const useExpandableListViewItem: UseExpandableListViewItem<object>;
+export default useExpandableListViewItem;

package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.js

@@ -0,0 +1,237 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = require("react");
+var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
+var _ = require("..");
+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) { (0, _defineProperty2["default"])(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; }
+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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isFocusEscaped = _useState2[0],
+    setIsFocusEscaped = _useState2[1];
+
+  // call spectrum hooks
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
+      within: true
+    }),
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+    focusWithinProps = _useFocusRing.focusProps;
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+    isFocusVisibleContainer = _useFocusRing2.isFocusVisible,
+    containerFocusProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = (0, _reactAria.useFocusRing)({
+      within: true
+    }),
+    isFocusWithinVisibleContainer = _useFocusRing3.isFocusVisible,
+    containerWithinFocusProps = _useFocusRing3.focusProps;
+  var _useFocusRing4 = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing4.focusProps,
+    isFocusVisible = _useFocusRing4.isFocusVisible;
+  var _useHover = (0, _interactions.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 = (0, _reactAria.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["default"]((0, _concat["default"])(_context = []).call(_context, (0, _from["default"])(state.expandedKeys), [key]));
+    state.setExpandedKeys(newSet);
+  };
+  var toggleExpanded = function toggleExpanded() {
+    if (isExpanded) {
+      var _context2;
+      var set = new _set["default"]((0, _concat["default"])(_context2 = []).call(_context2, (0, _from["default"])(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 = (0, _reactAria.mergeProps)(raRowProps, focusProps, focusWithinProps);
+  var _useStatusClasses = (0, _.useStatusClasses)(className, {
+      isHovered: isSelectable && item.key === state.hover.hoveredItem,
+      isSelected: isSelected,
+      isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin && !isFocusEscaped && !isFocusVisibleContainer
+    }),
+    classNames = _useStatusClasses.classNames;
+  var _useStatusClasses2 = (0, _.useStatusClasses)('', {
+      isFocused: isFocusVisibleContainer
+    }),
+    focusContainerClassName = _useStatusClasses2.classNames;
+  var _useStatusClasses3 = (0, _.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
+  };
+};
+var _default = useExpandableListViewItem;
+exports["default"] = _default;

package/lib/components/ListView/ListView.js

@@ -10,21 +10,22 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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 = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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, useMemo, useRef, useState } from 'react';
+import { useGridList } from 'react-aria';
+import { useTreeState } from 'react-stately';
 import { useCollator } from '@react-aria/i18n';
-import { useList } from '@react-aria/list';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListLayout } from '@react-stately/layout';
-import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Loader from '../Loader';
 import { ListViewContext } from './ListViewContext';
+import ListViewExpandableItem from './ListViewExpandableItem';
 import ListViewItem from './ListViewItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var collectionTypes = {
@@ -48,7 +49,7 @@ export function useListLayout(state) {
       placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
-  }, [collator]);
+  }, [collator, state.collection]);
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
@@ -60,12 +61,14 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     loadingState = props.loadingState,
     onLoadMore = props.onLoadMore,
     onSelectionChange = props.onSelectionChange,
+    onExpandedChange = props.onExpandedChange,
+    expandedKeys = props.expandedKeys,
     selectedKeys = props.selectedKeys,
     selectionMode = props.selectionMode,
     selectionStyle = props.selectionStyle,
     items = props.items,
     others = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(null),
+  var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
@@ -84,8 +87,8 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return listViewRef.current;
   });
-  var state = useListState(_objectSpread(_objectSpread({}, props), {}, {
-    selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
+  var state = useTreeState(_objectSpread(_objectSpread({}, props), {}, {
+    selectionMode: selectionMode === 'expansion' ? 'single' : selectionMode
   }));
   state.hover = {
     hoveredItem: hoveredItem,
@@ -97,12 +100,12 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
-  var _useList = useList(_objectSpread(_objectSpread({}, props), {}, {
+  var _useGridList = useGridList(_objectSpread(_objectSpread({}, props), {}, {
       isVirtualized: true,
       keyboardDelegate: layout,
       loadingState: loadingState
     }), state, listViewRef),
-    gridProps = _useList.gridProps;
+    gridProps = _useGridList.gridProps;
   // Sync loading state into the layout.
   layout.isLoading = isLoading;
   var focusedKey = selectionManager.focusedKey;
@@ -145,6 +148,13 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldUseVirtualFocus: !isFocusable
   }), function (type, item) {
     if (type === 'item') {
+      if (props.selectionMode === 'expansion') {
+        return ___EmotionJSX(ListViewExpandableItem, {
+          isHoverable: isHoverable,
+          isFocusable: isFocusable,
+          item: item
+        });
+      }
       return ___EmotionJSX(ListViewItem, {
         isHoverable: isHoverable,
         isFocusable: isFocusable,
@@ -168,6 +178,12 @@ ListView.propTypes = {
    * interacted with.
    */
   disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+  /** The initial expanded keys in the collection (uncontrolled). */
+  defaultExpandedKeys: isIterableProp,
+  /** The expanded keys in the collection (controlled). */
+  expandedKeys: isIterableProp,
+  /** Handler that is called when items are expanded or collapsed. */
+  onExpandedChange: PropTypes.func,
   /** The list of ListView items (controlled). */
   items: isIterableProp,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
@@ -192,7 +208,7 @@ ListView.propTypes = {
    */
   selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   /** The type of selection that is allowed in the collection. */
-  selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
+  selectionMode: PropTypes.oneOf(['none', 'single', 'multiple', 'expansion']),
   /** */
   selectionStyle: PropTypes.oneOf(['highlight', undefined]),
   /** Callback function that fires when the selected key changes. */