@pingux/astro 2.50.0 → 2.51.0-alpha.1

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/cjs/hooks/useSelectField/useSelectField.d.ts

@@ -3,7 +3,7 @@ import { AriaButtonProps } from 'react-aria';
 import { SelectState } from 'react-stately';
 import { CollectionChildren } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
-import { Axis, BoxProps, FocusableElement, PlacementAxis, ReactRef, StyleProps } from '../../types';
+import { Axis, BoxProps, FocusableElement, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
 import { LabelMode } from '../useColumnStyles/useColumnStyles';
 import { FieldControlInputProps } from '../useField/useField';
 interface UseSelectFieldProps<T> {
@@ -32,7 +32,7 @@ interface UseSelectFieldProps<T> {
     onSelectionChange?: (key: Key) => unknown;
     controlProps?: React.HTMLAttributes<Element>;
     scrollBoxProps?: BoxProps;
-    listBoxProps?: BoxProps;
+    listBoxProps?: ListBoxProps;
     labelProps?: ThemeUILabelProps;
     containerProps?: BoxProps;
     labelMode: LabelMode;

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -190,7 +190,7 @@ var useSelectField = function useSelectField(props, ref) {
   }), (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
     ref: listBoxRef,
     hasNoEmptySelection: true,
-    hasAutoFocus: state.focusStrategy || true,
+    hasAutoFocus: true,
     state: state,
     variant: "listBox.selectField",
     isLoading: isLoadingMore,

package/lib/cjs/types/index.d.ts

@@ -13,6 +13,7 @@ export * from './iconButton';
 export * from './input';
 export * from './item';
 export * from './link';
+export * from './listBox';
 export * from './listItem';
 export * from './loader';
 export * from './menu';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -172,8 +172,19 @@ _forEachInstanceProperty(_context15 = _Object$keys(_link)).call(_context15, func
     }
   });
 });
+var _listBox = require("./listBox");
+_forEachInstanceProperty(_context16 = _Object$keys(_listBox)).call(_context16, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _listBox[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _listBox[key];
+    }
+  });
+});
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context16 = _Object$keys(_listItem)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_listItem)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_listItem)).call(_context16,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context17 = _Object$keys(_loader)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_loader)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_loader)).call(_context17, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context18 = _Object$keys(_menu)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_menu)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_menu)).call(_context18, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context19 = _Object$keys(_menuItem)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_menuItem)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_menuItem)).call(_context19,
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context20 = _Object$keys(_overlayPanel)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_overlayPanel)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context21 = _Object$keys(_popoverContainer)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_popoverContainer)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context22 = _Object$keys(_popoverMenu)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_popoverMenu)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_popoverMenu)).call(_context2
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context23 = _Object$keys(_requirementsList)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_requirementsList)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context24 = _Object$keys(_rockerButtonGroup)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_rockerButtonGroup)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context25 = _Object$keys(_scrollBox)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_scrollBox)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_scrollBox)).call(_context25,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context26 = _Object$keys(_separator)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_separator)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_separator)).call(_context26,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context27 = _Object$keys(_shared)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_shared)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_shared)).call(_context27, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context28 = _Object$keys(_table)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_table)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_table)).call(_context28, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context29 = _Object$keys(_text)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_text)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_text)).call(_context29, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context30 = _Object$keys(_tooltipTrigger)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_tooltipTrigger)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/listBox.d.ts

@@ -0,0 +1,49 @@
+import { Key, ReactNode } from 'react';
+import { ComboBoxState, ListState, Node } from 'react-stately';
+import { AriaListBoxOptions, AriaOptionProps } from '@react-aria/listbox';
+import { VirtualizerItemOptions } from '@react-aria/virtualizer';
+import { ReusableView } from '@react-stately/virtualizer';
+import type { CollectionChildren, FocusStrategy } from '@react-types/shared';
+import { BoxProps } from './box';
+export interface ComboBoxStateType extends ComboBoxState<object> {
+    focusStrategy: FocusStrategy;
+}
+export interface ListStateType extends ListState<object> {
+    focusStrategy: FocusStrategy;
+}
+export type ListBoxStateType = ListStateType | ComboBoxStateType;
+interface ListBoxItemType extends Node<unknown> {
+    key: Key;
+}
+export interface ListBoxProps extends AriaListBoxOptions<object> {
+    hasAutoFocus?: boolean;
+    hasFocusWrap?: boolean;
+    hasNoEmptySelection?: boolean;
+    hasVirtualFocus?: boolean;
+    isLoading?: boolean;
+    isFocusedOnHover?: boolean;
+    isSelectedOnPressUp?: boolean;
+    onLoadMore?: () => void;
+    onScroll?: () => void;
+    state: ListBoxStateType;
+    renderEmptyState?: React.ReactNode;
+    variant?: string;
+    children?: CollectionChildren<object>;
+}
+export interface OptionType {
+    item: ListBoxItemType;
+    hasVirtualFocus?: boolean;
+}
+export interface AriaListBoxOptionsType extends AriaOptionProps {
+    onPressStart: () => void;
+    onPressUp: () => void;
+}
+export interface ListBoxSectionProps extends Omit<VirtualizerItemOptions<object, object>, 'ref'> {
+    children?: ReactNode;
+    header: ReusableView<object, ReactNode>;
+}
+export interface UseListBoxSectionProps {
+    headingProps: BoxProps;
+    groupProps: BoxProps;
+}
+export {};

package/lib/cjs/types/listBox.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/ListBox/ListBox.js

@@ -13,16 +13,15 @@ import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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 } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { mergeProps } from 'react-aria';
 import { useCollator } from '@react-aria/i18n';
 import { useListBox } from '@react-aria/listbox';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListLayout } from '@react-stately/layout';
-import PropTypes from 'prop-types';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { useLocalOrForwardRef } from '../../hooks';
 import Loader from '../Loader';
-import { Option } from './index.js';
+import { Option } from './index';
 import { ListBoxContext } from './ListBoxContext';
 import ListBoxSection from './ListBoxSection';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -78,10 +77,10 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     ariaDescribedby = props['aria-describedby'],
     ariaDetails = props['aria-details'],
     others = _objectWithoutProperties(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,
@@ -106,13 +105,13 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails
   };
-  var listBoxRef = useRef();
+  var listBoxRef = useLocalOrForwardRef(null);
   /* istanbul ignore next */
   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 = useListBox(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
@@ -141,6 +140,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ListBoxContext.Provider, {
     value: state
   }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(listBoxProps, others), {
+    autoFocus: hasAutoFocus,
     style: {
       outline: 'none'
     },
@@ -174,42 +174,4 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 });
-ListBox.propTypes = {
-  defaultSelectedKeys: isIterableProp,
-  disabledKeys: isIterableProp,
-  hasAutoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  hasFocusWrap: PropTypes.bool,
-  hasNoEmptySelection: PropTypes.bool,
-  hasVirtualFocus: PropTypes.bool,
-  id: PropTypes.string,
-  isFocusedOnHover: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isSelectedOnPressUp: PropTypes.bool,
-  isVirtualized: PropTypes.bool,
-  items: isIterableProp,
-  keyboardDelegate: PropTypes.shape({}),
-  label: PropTypes.node,
-  onLoadMore: PropTypes.func,
-  onScroll: PropTypes.func,
-  onSelectionChange: PropTypes.func,
-  renderEmptyState: PropTypes.node,
-  selectedKeys: isIterableProp,
-  selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  'aria-describedby': PropTypes.string,
-  'aria-details': PropTypes.string,
-  state: PropTypes.shape({
-    close: PropTypes.func,
-    collection: PropTypes.shape({}),
-    focusStrategy: PropTypes.string,
-    isOpen: PropTypes.bool,
-    selectionManager: PropTypes.shape({
-      focusedKey: PropTypes.string
-    })
-  })
-};
-ListBox.defaultProps = {
-  state: {}
-};
 export default ListBox;