@pingux/astro 2.50.0 → 2.51.0-alpha.1

package/lib/cjs/components/ListBox/ListBox.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ListLayout } from '@react-stately/layout';
+import { ListBoxProps } from '../../types';
+export declare const collectionTypes: {
+    ITEM: string;
+    LOADER: string;
+    PLACEHOLDER: string;
+};
+export declare function useListBoxLayout(state: any): ListLayout<unknown>;
+declare const ListBox: React.ForwardRefExoticComponent<ListBoxProps & React.RefAttributes<unknown>>;
+export default ListBox;

package/lib/cjs/components/ListBox/ListBox.js

@@ -27,10 +27,9 @@ var _i18n = require("@react-aria/i18n");
 var _listbox = require("@react-aria/listbox");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isIterable = require("../../utils/devUtils/props/isIterable");
+var _hooks = require("../../hooks");
 var _Loader = _interopRequireDefault(require("../Loader"));
-var _index = require("./index.js");
+var _index = require("./index");
 var _ListBoxContext = require("./ListBoxContext");
 var _ListBoxSection = _interopRequireDefault(require("./ListBoxSection"));
 var _react2 = require("@emotion/react");
@@ -92,10 +91,10 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ariaDescribedby = props['aria-describedby'],
     ariaDetails = props['aria-details'],
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var focusStrategy = state.focusStrategy;
+
   // Object matching React Aria API with all options
   var listBoxOptions = {
-    autoFocus: hasAutoFocus || focusStrategy,
+    autoFocus: hasAutoFocus,
     defaultSelectedKeys: defaultSelectedKeys,
     disabledKeys: disabledKeys,
     disallowEmptySelection: hasNoEmptySelection,
@@ -120,13 +119,13 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails
   };
-  var listBoxRef = (0, _react.useRef)();
+  var listBoxRef = (0, _hooks.useLocalOrForwardRef)(null);
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return listBoxRef.current;
   });
   var layout = useListBoxLayout(state);
-  layout.isLoading = props.isLoading;
+  layout.isLoading = props.isLoading ? props.isLoading : false;
 
   // Get props for the listbox
   var _useListBox = (0, _listbox.useListBox)(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
@@ -155,6 +154,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
+    autoFocus: hasAutoFocus,
     style: {
       outline: 'none'
     },
@@ -188,43 +188,5 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return null;
   }));
 });
-ListBox.propTypes = {
-  defaultSelectedKeys: _isIterable.isIterableProp,
-  disabledKeys: _isIterable.isIterableProp,
-  hasAutoFocus: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
-  hasFocusWrap: _propTypes["default"].bool,
-  hasNoEmptySelection: _propTypes["default"].bool,
-  hasVirtualFocus: _propTypes["default"].bool,
-  id: _propTypes["default"].string,
-  isFocusedOnHover: _propTypes["default"].bool,
-  isLoading: _propTypes["default"].bool,
-  isSelectedOnPressUp: _propTypes["default"].bool,
-  isVirtualized: _propTypes["default"].bool,
-  items: _isIterable.isIterableProp,
-  keyboardDelegate: _propTypes["default"].shape({}),
-  label: _propTypes["default"].node,
-  onLoadMore: _propTypes["default"].func,
-  onScroll: _propTypes["default"].func,
-  onSelectionChange: _propTypes["default"].func,
-  renderEmptyState: _propTypes["default"].node,
-  selectedKeys: _isIterable.isIterableProp,
-  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
-  'aria-label': _propTypes["default"].string,
-  'aria-labelledby': _propTypes["default"].string,
-  'aria-describedby': _propTypes["default"].string,
-  'aria-details': _propTypes["default"].string,
-  state: _propTypes["default"].shape({
-    close: _propTypes["default"].func,
-    collection: _propTypes["default"].shape({}),
-    focusStrategy: _propTypes["default"].string,
-    isOpen: _propTypes["default"].bool,
-    selectionManager: _propTypes["default"].shape({
-      focusedKey: _propTypes["default"].string
-    })
-  })
-};
-ListBox.defaultProps = {
-  state: {}
-};
 var _default = ListBox;
 exports["default"] = _default;

package/lib/cjs/components/ListBox/ListBox.styles.d.ts

@@ -0,0 +1,3 @@
+import { ThemeUICSSObject } from 'theme-ui';
+declare const listBox: ThemeUICSSObject;
+export default listBox;

package/lib/cjs/components/ListBox/ListBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/ListBox/ListBox.test.js

@@ -1,8 +1,12 @@
 "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");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _list = require("@react-stately/list");
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,8 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _ = _interopRequireDefault(require("."));
 var _react3 = require("@emotion/react");
+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 testId = 'test-label';
 var items = [{
   name: 'a'
@@ -40,19 +46,13 @@ var defaultWithSectionsProps = {
   'aria-labelledby': 'label',
   items: itemsWithSections
 };
-var ListBoxWithState = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var state = (0, _list.useListState)({
-    props: props
-  });
+var ListBoxWithState = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var theseProps = {};
+  var state = (0, _list.useListState)(theseProps);
   return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, props, {
     state: state,
     ref: ref
-  }), function (item) {
-    return (0, _react3.jsx)(_reactStately.Item, {
-      key: item.name,
-      childItems: item.options
-    }, item.name);
-  });
+  }));
 });
 var ListBoxWithSections = function ListBoxWithSections(props) {
   var state = (0, _list.useListState)(props);
@@ -62,24 +62,28 @@ var ListBoxWithSections = function ListBoxWithSections(props) {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(ListBoxWithState, (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _react2.render)((0, _react3.jsx)(ListBoxWithState, (0, _extends2["default"])({}, defaultProps, props, {
+    items: items
+  }), function (item) {
+    return (0, _react3.jsx)(_reactStately.Item, {
+      key: item.name,
+      childItems: item.options
+    }, item.name);
+  }));
 };
 var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(ListBoxWithSections, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
-    return (
-      // eslint-disable-next-line testing-library/no-node-access
-      (0, _react3.jsx)(_reactStately.Section, {
-        key: section.name,
-        title: section.name,
-        items: section.options
-      }, function (item) {
-        return (0, _react3.jsx)(_reactStately.Item, {
-          key: item.name,
-          childItems: item.options
-        }, item.name);
-      })
-    );
+    return (0, _react3.jsx)(_reactStately.Section, {
+      key: section.name,
+      title: section.name,
+      items: section.options
+    }, function (item) {
+      return (0, _react3.jsx)(_reactStately.Item, {
+        key: item.name,
+        childItems: item.options
+      }, item.name);
+    });
   }));
 };
 var offsetWidth;
@@ -96,9 +100,6 @@ beforeAll(function () {
   scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
     return 48;
   });
-  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
-    return cb();
-  });
   jest.useFakeTimers();
 });
 afterEach(function () {

package/lib/cjs/components/ListBox/ListBoxContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ListBoxContext: React.Context<{}>;

package/lib/cjs/components/ListBox/ListBoxContext.js

@@ -7,5 +7,5 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.ListBoxContext = void 0;
 var _react = _interopRequireDefault(require("react"));
-var ListBoxContext = /*#__PURE__*/_react["default"].createContext(null);
+var ListBoxContext = /*#__PURE__*/_react["default"].createContext({});
 exports.ListBoxContext = ListBoxContext;

package/lib/cjs/components/ListBox/ListBoxSection.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ListBoxSectionProps } from '../../types';
+declare const ListBoxSection: {
+    (props: ListBoxSectionProps): React.JSX.Element;
+    propTypes: {
+        header: any;
+        reusableView: any;
+    };
+};
+export default ListBoxSection;

package/lib/cjs/components/ListBox/ListBoxSection.js

@@ -26,13 +26,13 @@ var ListBoxSection = function ListBoxSection(props) {
     reusableView = props.reusableView,
     header = props.header;
   var item = reusableView.content;
-  var _useListBoxSection = (0, _listbox.useListBoxSection)({
+  var _ref = (0, _listbox.useListBoxSection)({
       heading: item.rendered,
       'aria-label': item['aria-label']
     }),
-    headingProps = _useListBoxSection.headingProps,
-    groupProps = _useListBoxSection.groupProps;
-  var headerRef = (0, _react.useRef)();
+    headingProps = _ref.headingProps,
+    groupProps = _ref.groupProps;
+  var headerRef = (0, _react.useRef)(null);
   (0, _virtualizer.useVirtualizerItem)({
     reusableView: header,
     ref: headerRef

package/lib/cjs/components/ListBox/Option.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { OptionType } from '../../types';
+declare const Option: React.ForwardRefExoticComponent<OptionType & React.RefAttributes<unknown>>;
+export default Option;

package/lib/cjs/components/ListBox/Option.js

@@ -21,15 +21,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _CircleSmallIcon = _interopRequireDefault(require("@pingux/mdi-react/CircleSmallIcon"));
 var _listbox = require("@react-aria/listbox");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ListBoxContext = require("./ListBoxContext");
 var _react2 = require("@emotion/react");
-var _excluded = ["item", "hasVirtualFocus"];
+var _excluded = ["item", "hasVirtualFocus"],
+  _excluded2 = ["onPressStart", "onPressUp"];
 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; }
 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; }
@@ -47,7 +46,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isSeparator = itemProps.isSeparator,
     dataId = itemProps['data-id'];
   // Get props for the option element
-  var optionRef = (0, _react.useRef)();
+  var optionRef = (0, _react.useRef)(null);
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return optionRef.current;
@@ -82,11 +81,13 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [isFocused, updateActiveDescendant]);
 
-  /* Related to UIP-4992
-   * Need to remove these properties to avoid errors in the console on the external app.
-   * By the way, these properties return "undefined", so it shouldn't create issues */
-  delete optionProps.onPressStart;
-  delete optionProps.onPressUp;
+  // /* Related to UIP-4992
+  //  * Need to remove these properties to avoid errors in the console on the external app.
+  //  * By the way, these properties return "undefined", so it shouldn't create issues */
+  var _ref = optionProps,
+    onPressStart = _ref.onPressStart,
+    onPressUp = _ref.onPressUp,
+    theseOptionProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "li",
     isRow: true,
@@ -95,7 +96,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "data-id": dataId,
     className: classNames,
     onPointerOver: setFocusOnHover
-  }, optionProps, others, {
+  }, theseOptionProps, others, {
     "aria-label": ariaLabel
   }), isSelected && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
@@ -104,28 +105,5 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }), rendered);
 });
-Option.propTypes = {
-  hasVirtualFocus: _propTypes["default"].bool,
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      'data-id': _propTypes["default"].string,
-      isSeparator: _propTypes["default"].bool
-    }),
-    rendered: _propTypes["default"].node,
-    'aria-label': _propTypes["default"].string
-  }),
-  state: _propTypes["default"].shape({
-    disabledKeys: _isIterable.isIterableProp,
-    selectionManager: _propTypes["default"].shape({
-      focusedKey: _propTypes["default"].string,
-      isSelected: _propTypes["default"].func
-    })
-  })
-};
-Option.defaultProps = {
-  item: {},
-  state: {}
-};
 var _default = Option;
 exports["default"] = _default;

package/lib/cjs/components/ListBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ListBox';
+export { default as Option } from './Option';

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

@@ -22,19 +22,20 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
-var _list = require("@react-aria/list");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
-var _list2 = require("@react-stately/list");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
+var _ListViewExpandableItem = _interopRequireDefault(require("./ListViewExpandableItem"));
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
+var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items"];
 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; }
 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; }
@@ -61,7 +62,7 @@ function useListLayout(state) {
       placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
-  }, [collator]);
+  }, [collator, state.collection]);
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
@@ -73,12 +74,14 @@ var ListView = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
@@ -97,8 +100,8 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return listViewRef.current;
   });
-  var state = (0, _list2.useListState)(_objectSpread(_objectSpread({}, props), {}, {
-    selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
+  var state = (0, _reactStately.useTreeState)(_objectSpread(_objectSpread({}, props), {}, {
+    selectionMode: selectionMode === 'expansion' ? 'single' : selectionMode
   }));
   state.hover = {
     hoveredItem: hoveredItem,
@@ -110,12 +113,12 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var collection = state.collection,
     selectionManager = state.selectionManager;
   var layout = useListLayout(state);
-  var _useList = (0, _list.useList)(_objectSpread(_objectSpread({}, props), {}, {
+  var _useGridList = (0, _reactAria.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;
@@ -158,6 +161,13 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldUseVirtualFocus: !isFocusable
   }), function (type, item) {
     if (type === 'item') {
+      if (props.selectionMode === 'expansion') {
+        return (0, _react2.jsx)(_ListViewExpandableItem["default"], {
+          isHoverable: isHoverable,
+          isFocusable: isFocusable,
+          item: item
+        });
+      }
       return (0, _react2.jsx)(_ListViewItem["default"], {
         isHoverable: isHoverable,
         isFocusable: isFocusable,
@@ -181,6 +191,12 @@ ListView.propTypes = {
    * interacted with.
    */
   disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+  /** The initial expanded keys in the collection (uncontrolled). */
+  defaultExpandedKeys: _isIterable.isIterableProp,
+  /** The expanded keys in the collection (controlled). */
+  expandedKeys: _isIterable.isIterableProp,
+  /** Handler that is called when items are expanded or collapsed. */
+  onExpandedChange: _propTypes["default"].func,
   /** The list of ListView items (controlled). */
   items: _isIterable.isIterableProp,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
@@ -205,7 +221,7 @@ ListView.propTypes = {
    */
   selectedKeys: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
   /** The type of selection that is allowed in the collection. */
-  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
+  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple', 'expansion']),
   /** */
   selectionStyle: _propTypes["default"].oneOf(['highlight', undefined]),
   /** Callback function that fires when the selected key changes. */