@react-spectrum/listbox 3.12.10-nightly.4649 → 3.12.10-nightly.4656

package/dist/ListBox.main.js

@@ -29,7 +29,7 @@ $parcel$export(module.exports, "ListBox", () => $582d86e45be55635$export$41f1335
 
 function $582d86e45be55635$var$ListBox(props, ref) {
     let state = (0, $kvNjb$reactstatelylist.useListState)(props);
-    let layout = (0, $60eb4b34c53310cb$exports.useListBoxLayout)(state, props.isLoading);
+    let layout = (0, $60eb4b34c53310cb$exports.useListBoxLayout)(state);
     let domRef = (0, $kvNjb$reactspectrumutils.useDOMRef)(ref);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($kvNjb$react))).createElement((0, $60eb4b34c53310cb$exports.ListBoxBase), {
         ...props,

package/dist/ListBox.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe,EAAE,OAAO,MAAM,SAAS;IACpD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd;AAEA,wFAAwF;AACxF,2GAA2G;AAG3G;;CAEC,GACD,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\nfunction ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout(state, props.isLoading);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nconst _ListBox = React.forwardRef(ListBox) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListBox as ListBox};\n"],"names":[],"version":3,"file":"ListBox.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe,EAAE;IAC9B,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd;AAEA,wFAAwF;AACxF,2GAA2G;AAG3G;;CAEC,GACD,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\nfunction ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout(state);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nconst _ListBox = React.forwardRef(ListBox) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListBox as ListBox};\n"],"names":[],"version":3,"file":"ListBox.main.js.map"}

package/dist/ListBox.mjs

@@ -19,7 +19,7 @@ import {useListState as $7rJGh$useListState} from "@react-stately/list";
 
 function $3136257018b1a220$var$ListBox(props, ref) {
     let state = (0, $7rJGh$useListState)(props);
-    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)(state, props.isLoading);
+    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)(state);
     let domRef = (0, $7rJGh$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $7rJGh$react).createElement((0, $3247d4a89e6094e9$export$1afdcf349979fb7e), {
         ...props,

package/dist/ListBox.module.js

@@ -19,7 +19,7 @@ import {useListState as $7rJGh$useListState} from "@react-stately/list";
 
 function $3136257018b1a220$var$ListBox(props, ref) {
     let state = (0, $7rJGh$useListState)(props);
-    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)(state, props.isLoading);
+    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)(state);
     let domRef = (0, $7rJGh$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $7rJGh$react).createElement((0, $3247d4a89e6094e9$export$1afdcf349979fb7e), {
         ...props,

package/dist/ListBox.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe,EAAE,OAAO,MAAM,SAAS;IACpD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd;AAEA,wFAAwF;AACxF,2GAA2G;AAG3G;;CAEC,GACD,MAAM,0DAAW,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\nfunction ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout(state, props.isLoading);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nconst _ListBox = React.forwardRef(ListBox) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListBox as ListBox};\n"],"names":[],"version":3,"file":"ListBox.module.js.map"}
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe,EAAE;IAC9B,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd;AAEA,wFAAwF;AACxF,2GAA2G;AAG3G;;CAEC,GACD,MAAM,0DAAW,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\nfunction ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout(state);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nconst _ListBox = React.forwardRef(ListBox) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListBox as ListBox};\n"],"names":[],"version":3,"file":"ListBox.module.js.map"}

package/dist/ListBoxBase.main.js

@@ -51,7 +51,7 @@ $parcel$export(module.exports, "ListBoxBase", () => $60eb4b34c53310cb$export$1af
 
 
 
-function $60eb4b34c53310cb$export$25768ea656ae32a7(state, isLoading) {
+function $60eb4b34c53310cb$export$25768ea656ae32a7(state) {
     let { scale: scale } = (0, $7w19U$reactspectrumprovider.useProvider)();
     let collator = (0, $7w19U$reactariai18n.useCollator)({
         usage: 'search',
@@ -70,29 +70,17 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7(state, isLoading) {
     ]);
     layout.collection = state.collection;
     layout.disabledKeys = state.disabledKeys;
-    (0, $7w19U$reactariautils.useLayoutEffect)(()=>{
-        // Sync loading state into the layout.
-        if (layout.isLoading !== isLoading) {
-            var _layout_virtualizer;
-            layout.isLoading = isLoading;
-            (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.relayoutNow();
-        }
-    }, [
-        layout,
-        isLoading
-    ]);
     return layout;
 }
 /** @private */ function $60eb4b34c53310cb$var$ListBoxBase(props, ref) {
-    let { layout: layout, state: state, shouldSelectOnPressUp: shouldSelectOnPressUp, focusOnPointerEnter: focusOnPointerEnter, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, transitionDuration: transitionDuration = 0, onScroll: onScroll } = props;
+    let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
     let { listBoxProps: listBoxProps } = (0, $7w19U$reactarialistbox.useListBox)({
         ...props,
         keyboardDelegate: layout,
         isVirtualized: true
     }, state, ref);
     let { styleProps: styleProps } = (0, $7w19U$reactspectrumutils.useStyleProps)(props);
-    let stringFormatter = (0, $7w19U$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($3d9fe9b46e2d649a$exports))), '@react-spectrum/listbox');
-    let renderWrapper = (parent, reusableView, children, renderChildren)=>{
+    let renderWrapper = (0, $7w19U$react.useCallback)((parent, reusableView, children, renderChildren)=>{
         var _children_find;
         if (reusableView.viewType === 'section') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $0f5fd8483f48ef09$exports.ListBoxSection), {
             key: reusableView.key,
@@ -107,9 +95,14 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7(state, isLoading) {
             virtualizer: reusableView.virtualizer,
             parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
         }, reusableView.rendered);
-    };
+    }, []);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $611e93c7b7c0413c$exports.ListBoxContext).Provider, {
-        value: state
+        value: {
+            state: state,
+            renderEmptyState: renderEmptyState,
+            shouldFocusOnHover: shouldFocusOnHover,
+            shouldUseVirtualFocus: shouldUseVirtualFocus
+        }
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $7w19U$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $7w19U$reactariavirtualizer.Virtualizer), {
         ...styleProps,
         ...(0, $7w19U$reactariautils.mergeProps)(listBoxProps, domProps),
@@ -120,50 +113,57 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7(state, isLoading) {
         scrollDirection: "vertical",
         className: (0, $7w19U$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu', styleProps.className),
         layout: layout,
+        layoutOptions: (0, $7w19U$react.useMemo)(()=>({
+                isLoading: showLoadingSpinner
+            }), [
+            showLoadingSpinner
+        ]),
         collection: state.collection,
         renderWrapper: renderWrapper,
-        transitionDuration: transitionDuration,
-        isLoading: props.isLoading,
+        isLoading: isLoading,
         onLoadMore: props.onLoadMore,
-        shouldUseVirtualFocus: shouldUseVirtualFocus,
         onScroll: onScroll
-    }, (type, item)=>{
+    }, (0, $7w19U$react.useCallback)((type, item)=>{
         if (type === 'item') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $2205d250ee1cb1ac$exports.ListBoxOption), {
-            item: item,
-            shouldSelectOnPressUp: shouldSelectOnPressUp,
-            shouldFocusOnHover: focusOnPointerEnter,
-            shouldUseVirtualFocus: shouldUseVirtualFocus
+            item: item
         });
-        else if (type === 'loader') return(// aria-selected isn't needed here since this option is not selectable.
-        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-        /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement("div", {
-            role: "option",
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%'
-            }
-        }, /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $7w19U$reactspectrumprogress.ProgressCircle), {
-            isIndeterminate: true,
-            size: "S",
-            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
-            UNSAFE_className: (0, $7w19U$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Dropdown-progressCircle')
-        })));
-        else if (type === 'placeholder') {
-            let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-            if (emptyState == null) return null;
-            return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement("div", {
-                // aria-selected isn't needed here since this option is not selectable.
-                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-                role: "option"
-            }, emptyState);
-        }
-    })));
+        else if (type === 'loader') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement($60eb4b34c53310cb$var$LoadingState, null);
+        else if (type === 'placeholder') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement($60eb4b34c53310cb$var$EmptyState, null);
+    }, []))));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
 const $60eb4b34c53310cb$export$1afdcf349979fb7e = /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).forwardRef($60eb4b34c53310cb$var$ListBoxBase);
+function $60eb4b34c53310cb$var$LoadingState() {
+    let { state: state } = (0, $7w19U$react.useContext)((0, $611e93c7b7c0413c$exports.ListBoxContext));
+    let stringFormatter = (0, $7w19U$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($3d9fe9b46e2d649a$exports))), '@react-spectrum/listbox');
+    return(// aria-selected isn't needed here since this option is not selectable.
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement("div", {
+        role: "option",
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $7w19U$reactspectrumprogress.ProgressCircle), {
+        isIndeterminate: true,
+        size: "S",
+        "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
+        UNSAFE_className: (0, $7w19U$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Dropdown-progressCircle')
+    })));
+}
+function $60eb4b34c53310cb$var$EmptyState() {
+    let { renderEmptyState: renderEmptyState } = (0, $7w19U$react.useContext)((0, $611e93c7b7c0413c$exports.ListBoxContext));
+    let emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) return null;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement("div", {
+        // aria-selected isn't needed here since this option is not selectable.
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: "option"
+    }, emptyState);
+}
 
 
 //# sourceMappingURL=ListBoxBase.main.js.map

package/dist/ListBoxBase.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/listbox/src/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, FocusStrategy, Node, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, useListBox} from '@react-aria/listbox';\nimport {classNames, useStyleProps} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListLayout} from '@react-stately/layout';\nimport {ListState} from '@react-stately/list';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {HTMLAttributes, ReactElement, ReactNode, RefObject, useMemo} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useCollator, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListLayout<T>,\n  state: ListState<T>,\n  autoFocus?: boolean | FocusStrategy,\n  shouldFocusWrap?: boolean,\n  shouldSelectOnPressUp?: boolean,\n  focusOnPointerEnter?: boolean,\n  domProps?: HTMLAttributes<HTMLElement>,\n  disallowEmptySelection?: boolean,\n  shouldUseVirtualFocus?: boolean,\n  transitionDuration?: number,\n  isLoading?: boolean,\n  onLoadMore?: () => void,\n  renderEmptyState?: () => ReactNode,\n  onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(state: ListState<T>, isLoading: boolean): ListLayout<T> {\n  let {scale} = useProvider();\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let layout = useMemo(() =>\n    new ListLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      padding: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      loaderHeight: 40,\n      placeholderHeight: scale === 'large' ? 48 : 32,\n      collator\n    })\n  , [collator, scale]);\n\n  layout.collection = state.collection;\n  layout.disabledKeys = state.disabledKeys;\n\n  useLayoutEffect(() => {\n    // Sync loading state into the layout.\n    if (layout.isLoading !== isLoading) {\n      layout.isLoading = isLoading;\n      layout.virtualizer?.relayoutNow();\n    }\n  }, [layout, isLoading]);\n  return layout;\n}\n\n/** @private */\nfunction ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement>) {\n  let {layout, state, shouldSelectOnPressUp, focusOnPointerEnter, shouldUseVirtualFocus, domProps = {}, transitionDuration = 0, onScroll} = props;\n  let {listBoxProps} = useListBox({\n    ...props,\n    keyboardDelegate: layout,\n    isVirtualized: true\n  }, state, ref);\n  let {styleProps} = useStyleProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = (parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n    if (reusableView.viewType === 'section') {\n      return (\n        <ListBoxSection\n          key={reusableView.key}\n          item={reusableView.content}\n          layoutInfo={reusableView.layoutInfo}\n          virtualizer={reusableView.virtualizer}\n          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>\n          {renderChildren(children.filter(c => c.viewType === 'item'))}\n        </ListBoxSection>\n      );\n    }\n\n    return (\n      <VirtualizerItem\n        key={reusableView.key}\n        layoutInfo={reusableView.layoutInfo}\n        virtualizer={reusableView.virtualizer}\n        parent={parent?.layoutInfo}>\n        {reusableView.rendered}\n      </VirtualizerItem>\n    );\n  };\n\n  return (\n    <ListBoxContext.Provider value={state}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={ref}\n          focusedKey={state.selectionManager.focusedKey}\n          autoFocus={!!props.autoFocus}\n          sizeToFit=\"height\"\n          scrollDirection=\"vertical\"\n          className={\n            classNames(\n              styles,\n              'spectrum-Menu',\n              styleProps.className\n            )\n          }\n          layout={layout}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          transitionDuration={transitionDuration}\n          isLoading={props.isLoading}\n          onLoadMore={props.onLoadMore}\n          shouldUseVirtualFocus={shouldUseVirtualFocus}\n          onScroll={onScroll}>\n          {(type, item: Node<T>) => {\n            if (type === 'item') {\n              return (\n                <ListBoxOption\n                  item={item}\n                  shouldSelectOnPressUp={shouldSelectOnPressUp}\n                  shouldFocusOnHover={focusOnPointerEnter}\n                  shouldUseVirtualFocus={shouldUseVirtualFocus} />\n              );\n            } else if (type === 'loader') {\n              return (\n                // aria-selected isn't needed here since this option is not selectable.\n                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n                <div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n                  <ProgressCircle\n                    isIndeterminate\n                    size=\"S\"\n                    aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n                    UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n                </div>\n              );\n            } else if (type === 'placeholder') {\n              let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;\n              if (emptyState == null) {\n                return null;\n              }\n\n              return (\n                <div\n                  // aria-selected isn't needed here since this option is not selectable.\n                  // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n                  role=\"option\">\n                  {emptyState}\n                </div>\n              );\n            }\n          }}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _ListBoxBase = React.forwardRef(ListBoxBase) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;\nexport {_ListBoxBase as ListBoxBase};\n"],"names":[],"version":3,"file":"ListBoxBase.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/listbox/src/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, FocusStrategy, Node, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, useListBox} from '@react-aria/listbox';\nimport {classNames, useStyleProps} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListLayout} from '@react-stately/layout';\nimport {ListState} from '@react-stately/list';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {HTMLAttributes, ReactElement, ReactNode, RefObject, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useCollator, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListLayout<T>,\n  state: ListState<T>,\n  autoFocus?: boolean | FocusStrategy,\n  shouldFocusWrap?: boolean,\n  shouldSelectOnPressUp?: boolean,\n  focusOnPointerEnter?: boolean,\n  domProps?: HTMLAttributes<HTMLElement>,\n  disallowEmptySelection?: boolean,\n  shouldUseVirtualFocus?: boolean,\n  isLoading?: boolean,\n  showLoadingSpinner?: boolean,\n  onLoadMore?: () => void,\n  renderEmptyState?: () => ReactNode,\n  onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(state: ListState<T>): ListLayout<T> {\n  let {scale} = useProvider();\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let layout = useMemo(() =>\n    new ListLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      padding: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      loaderHeight: 40,\n      placeholderHeight: scale === 'large' ? 48 : 32,\n      collator\n    })\n  , [collator, scale]);\n\n  layout.collection = state.collection;\n  layout.disabledKeys = state.disabledKeys;\n  return layout;\n}\n\n/** @private */\nfunction ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement>) {\n  let {layout, state, shouldFocusOnHover, shouldUseVirtualFocus, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n  let {listBoxProps} = useListBox({\n    ...props,\n    keyboardDelegate: layout,\n    isVirtualized: true\n  }, state, ref);\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactElement>;\n  let renderWrapper = useCallback((parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n    if (reusableView.viewType === 'section') {\n      return (\n        <ListBoxSection\n          key={reusableView.key}\n          item={reusableView.content}\n          layoutInfo={reusableView.layoutInfo}\n          virtualizer={reusableView.virtualizer}\n          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>\n          {renderChildren(children.filter(c => c.viewType === 'item'))}\n        </ListBoxSection>\n      );\n    }\n\n    return (\n      <VirtualizerItem\n        key={reusableView.key}\n        layoutInfo={reusableView.layoutInfo}\n        virtualizer={reusableView.virtualizer}\n        parent={parent?.layoutInfo}>\n        {reusableView.rendered}\n      </VirtualizerItem>\n    );\n  }, []);\n\n  return (\n    <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={ref}\n          focusedKey={state.selectionManager.focusedKey}\n          autoFocus={!!props.autoFocus}\n          sizeToFit=\"height\"\n          scrollDirection=\"vertical\"\n          className={\n            classNames(\n              styles,\n              'spectrum-Menu',\n              styleProps.className\n            )\n          }\n          layout={layout}\n          layoutOptions={useMemo(() => ({\n            isLoading: showLoadingSpinner\n          }), [showLoadingSpinner])}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>) => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _ListBoxBase = React.forwardRef(ListBoxBase) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;\nexport {_ListBoxBase as ListBoxBase};\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n    <div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n    </div>\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext);\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.main.js.map"}

package/dist/ListBoxBase.mjs

@@ -8,9 +8,9 @@ import {useListBox as $gF3QK$useListBox} from "@react-aria/listbox";
 import {useStyleProps as $gF3QK$useStyleProps, classNames as $gF3QK$classNames} from "@react-spectrum/utils";
 import {FocusScope as $gF3QK$FocusScope} from "@react-aria/focus";
 import {ListLayout as $gF3QK$ListLayout} from "@react-stately/layout";
-import {useLayoutEffect as $gF3QK$useLayoutEffect, mergeProps as $gF3QK$mergeProps} from "@react-aria/utils";
+import {mergeProps as $gF3QK$mergeProps} from "@react-aria/utils";
 import {ProgressCircle as $gF3QK$ProgressCircle} from "@react-spectrum/progress";
-import $gF3QK$react, {useMemo as $gF3QK$useMemo} from "react";
+import $gF3QK$react, {useMemo as $gF3QK$useMemo, useCallback as $gF3QK$useCallback, useContext as $gF3QK$useContext} from "react";
 import {useCollator as $gF3QK$useCollator, useLocalizedStringFormatter as $gF3QK$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useProvider as $gF3QK$useProvider} from "@react-spectrum/provider";
 import {VirtualizerItem as $gF3QK$VirtualizerItem, Virtualizer as $gF3QK$Virtualizer} from "@react-aria/virtualizer";
@@ -44,7 +44,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
+function $3247d4a89e6094e9$export$25768ea656ae32a7(state) {
     let { scale: scale } = (0, $gF3QK$useProvider)();
     let collator = (0, $gF3QK$useCollator)({
         usage: 'search',
@@ -63,29 +63,17 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
     ]);
     layout.collection = state.collection;
     layout.disabledKeys = state.disabledKeys;
-    (0, $gF3QK$useLayoutEffect)(()=>{
-        // Sync loading state into the layout.
-        if (layout.isLoading !== isLoading) {
-            var _layout_virtualizer;
-            layout.isLoading = isLoading;
-            (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.relayoutNow();
-        }
-    }, [
-        layout,
-        isLoading
-    ]);
     return layout;
 }
 /** @private */ function $3247d4a89e6094e9$var$ListBoxBase(props, ref) {
-    let { layout: layout, state: state, shouldSelectOnPressUp: shouldSelectOnPressUp, focusOnPointerEnter: focusOnPointerEnter, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, transitionDuration: transitionDuration = 0, onScroll: onScroll } = props;
+    let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
     let { listBoxProps: listBoxProps } = (0, $gF3QK$useListBox)({
         ...props,
         keyboardDelegate: layout,
         isVirtualized: true
     }, state, ref);
     let { styleProps: styleProps } = (0, $gF3QK$useStyleProps)(props);
-    let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
-    let renderWrapper = (parent, reusableView, children, renderChildren)=>{
+    let renderWrapper = (0, $gF3QK$useCallback)((parent, reusableView, children, renderChildren)=>{
         var _children_find;
         if (reusableView.viewType === 'section') return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $92d678ed88836094$export$dca12b0bb56e4fc), {
             key: reusableView.key,
@@ -100,9 +88,14 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
             virtualizer: reusableView.virtualizer,
             parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
         }, reusableView.rendered);
-    };
+    }, []);
     return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $0c6f792811e33483$export$7ff8f37d2d81a48d).Provider, {
-        value: state
+        value: {
+            state: state,
+            renderEmptyState: renderEmptyState,
+            shouldFocusOnHover: shouldFocusOnHover,
+            shouldUseVirtualFocus: shouldUseVirtualFocus
+        }
     }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$FocusScope), null, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$Virtualizer), {
         ...styleProps,
         ...(0, $gF3QK$mergeProps)(listBoxProps, domProps),
@@ -113,50 +106,57 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
         scrollDirection: "vertical",
         className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Menu', styleProps.className),
         layout: layout,
+        layoutOptions: (0, $gF3QK$useMemo)(()=>({
+                isLoading: showLoadingSpinner
+            }), [
+            showLoadingSpinner
+        ]),
         collection: state.collection,
         renderWrapper: renderWrapper,
-        transitionDuration: transitionDuration,
-        isLoading: props.isLoading,
+        isLoading: isLoading,
         onLoadMore: props.onLoadMore,
-        shouldUseVirtualFocus: shouldUseVirtualFocus,
         onScroll: onScroll
-    }, (type, item)=>{
+    }, (0, $gF3QK$useCallback)((type, item)=>{
         if (type === 'item') return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $86983ea1fa3f7312$export$feb3b6b552c14a12), {
-            item: item,
-            shouldSelectOnPressUp: shouldSelectOnPressUp,
-            shouldFocusOnHover: focusOnPointerEnter,
-            shouldUseVirtualFocus: shouldUseVirtualFocus
+            item: item
         });
-        else if (type === 'loader') return(// aria-selected isn't needed here since this option is not selectable.
-        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-        /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
-            role: "option",
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%'
-            }
-        }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$ProgressCircle), {
-            isIndeterminate: true,
-            size: "S",
-            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
-            UNSAFE_className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Dropdown-progressCircle')
-        })));
-        else if (type === 'placeholder') {
-            let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-            if (emptyState == null) return null;
-            return /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
-                // aria-selected isn't needed here since this option is not selectable.
-                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-                role: "option"
-            }, emptyState);
-        }
-    })));
+        else if (type === 'loader') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$LoadingState, null);
+        else if (type === 'placeholder') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$EmptyState, null);
+    }, []))));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
 const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef($3247d4a89e6094e9$var$ListBoxBase);
+function $3247d4a89e6094e9$var$LoadingState() {
+    let { state: state } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
+    let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
+    return(// aria-selected isn't needed here since this option is not selectable.
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
+        role: "option",
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$ProgressCircle), {
+        isIndeterminate: true,
+        size: "S",
+        "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
+        UNSAFE_className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Dropdown-progressCircle')
+    })));
+}
+function $3247d4a89e6094e9$var$EmptyState() {
+    let { renderEmptyState: renderEmptyState } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
+    let emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) return null;
+    return /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
+        // aria-selected isn't needed here since this option is not selectable.
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: "option"
+    }, emptyState);
+}
 
 
 export {$3247d4a89e6094e9$export$25768ea656ae32a7 as useListBoxLayout, $3247d4a89e6094e9$export$1afdcf349979fb7e as ListBoxBase};

package/dist/ListBoxBase.module.js

@@ -8,9 +8,9 @@ import {useListBox as $gF3QK$useListBox} from "@react-aria/listbox";
 import {useStyleProps as $gF3QK$useStyleProps, classNames as $gF3QK$classNames} from "@react-spectrum/utils";
 import {FocusScope as $gF3QK$FocusScope} from "@react-aria/focus";
 import {ListLayout as $gF3QK$ListLayout} from "@react-stately/layout";
-import {useLayoutEffect as $gF3QK$useLayoutEffect, mergeProps as $gF3QK$mergeProps} from "@react-aria/utils";
+import {mergeProps as $gF3QK$mergeProps} from "@react-aria/utils";
 import {ProgressCircle as $gF3QK$ProgressCircle} from "@react-spectrum/progress";
-import $gF3QK$react, {useMemo as $gF3QK$useMemo} from "react";
+import $gF3QK$react, {useMemo as $gF3QK$useMemo, useCallback as $gF3QK$useCallback, useContext as $gF3QK$useContext} from "react";
 import {useCollator as $gF3QK$useCollator, useLocalizedStringFormatter as $gF3QK$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useProvider as $gF3QK$useProvider} from "@react-spectrum/provider";
 import {VirtualizerItem as $gF3QK$VirtualizerItem, Virtualizer as $gF3QK$Virtualizer} from "@react-aria/virtualizer";
@@ -44,7 +44,7 @@ function $parcel$interopDefault(a) {
 
 
 
-function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
+function $3247d4a89e6094e9$export$25768ea656ae32a7(state) {
     let { scale: scale } = (0, $gF3QK$useProvider)();
     let collator = (0, $gF3QK$useCollator)({
         usage: 'search',
@@ -63,29 +63,17 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
     ]);
     layout.collection = state.collection;
     layout.disabledKeys = state.disabledKeys;
-    (0, $gF3QK$useLayoutEffect)(()=>{
-        // Sync loading state into the layout.
-        if (layout.isLoading !== isLoading) {
-            var _layout_virtualizer;
-            layout.isLoading = isLoading;
-            (_layout_virtualizer = layout.virtualizer) === null || _layout_virtualizer === void 0 ? void 0 : _layout_virtualizer.relayoutNow();
-        }
-    }, [
-        layout,
-        isLoading
-    ]);
     return layout;
 }
 /** @private */ function $3247d4a89e6094e9$var$ListBoxBase(props, ref) {
-    let { layout: layout, state: state, shouldSelectOnPressUp: shouldSelectOnPressUp, focusOnPointerEnter: focusOnPointerEnter, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, transitionDuration: transitionDuration = 0, onScroll: onScroll } = props;
+    let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover, shouldUseVirtualFocus: shouldUseVirtualFocus, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
     let { listBoxProps: listBoxProps } = (0, $gF3QK$useListBox)({
         ...props,
         keyboardDelegate: layout,
         isVirtualized: true
     }, state, ref);
     let { styleProps: styleProps } = (0, $gF3QK$useStyleProps)(props);
-    let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
-    let renderWrapper = (parent, reusableView, children, renderChildren)=>{
+    let renderWrapper = (0, $gF3QK$useCallback)((parent, reusableView, children, renderChildren)=>{
         var _children_find;
         if (reusableView.viewType === 'section') return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $92d678ed88836094$export$dca12b0bb56e4fc), {
             key: reusableView.key,
@@ -100,9 +88,14 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
             virtualizer: reusableView.virtualizer,
             parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
         }, reusableView.rendered);
-    };
+    }, []);
     return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $0c6f792811e33483$export$7ff8f37d2d81a48d).Provider, {
-        value: state
+        value: {
+            state: state,
+            renderEmptyState: renderEmptyState,
+            shouldFocusOnHover: shouldFocusOnHover,
+            shouldUseVirtualFocus: shouldUseVirtualFocus
+        }
     }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$FocusScope), null, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$Virtualizer), {
         ...styleProps,
         ...(0, $gF3QK$mergeProps)(listBoxProps, domProps),
@@ -113,50 +106,57 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7(state, isLoading) {
         scrollDirection: "vertical",
         className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Menu', styleProps.className),
         layout: layout,
+        layoutOptions: (0, $gF3QK$useMemo)(()=>({
+                isLoading: showLoadingSpinner
+            }), [
+            showLoadingSpinner
+        ]),
         collection: state.collection,
         renderWrapper: renderWrapper,
-        transitionDuration: transitionDuration,
-        isLoading: props.isLoading,
+        isLoading: isLoading,
         onLoadMore: props.onLoadMore,
-        shouldUseVirtualFocus: shouldUseVirtualFocus,
         onScroll: onScroll
-    }, (type, item)=>{
+    }, (0, $gF3QK$useCallback)((type, item)=>{
         if (type === 'item') return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $86983ea1fa3f7312$export$feb3b6b552c14a12), {
-            item: item,
-            shouldSelectOnPressUp: shouldSelectOnPressUp,
-            shouldFocusOnHover: focusOnPointerEnter,
-            shouldUseVirtualFocus: shouldUseVirtualFocus
+            item: item
         });
-        else if (type === 'loader') return(// aria-selected isn't needed here since this option is not selectable.
-        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-        /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
-            role: "option",
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%'
-            }
-        }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$ProgressCircle), {
-            isIndeterminate: true,
-            size: "S",
-            "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
-            UNSAFE_className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Dropdown-progressCircle')
-        })));
-        else if (type === 'placeholder') {
-            let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-            if (emptyState == null) return null;
-            return /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
-                // aria-selected isn't needed here since this option is not selectable.
-                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-                role: "option"
-            }, emptyState);
-        }
-    })));
+        else if (type === 'loader') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$LoadingState, null);
+        else if (type === 'placeholder') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$EmptyState, null);
+    }, []))));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
 const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef($3247d4a89e6094e9$var$ListBoxBase);
+function $3247d4a89e6094e9$var$LoadingState() {
+    let { state: state } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
+    let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
+    return(// aria-selected isn't needed here since this option is not selectable.
+    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+    /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
+        role: "option",
+        style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$ProgressCircle), {
+        isIndeterminate: true,
+        size: "S",
+        "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
+        UNSAFE_className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Dropdown-progressCircle')
+    })));
+}
+function $3247d4a89e6094e9$var$EmptyState() {
+    let { renderEmptyState: renderEmptyState } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
+    let emptyState = renderEmptyState ? renderEmptyState() : null;
+    if (emptyState == null) return null;
+    return /*#__PURE__*/ (0, $gF3QK$react).createElement("div", {
+        // aria-selected isn't needed here since this option is not selectable.
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: "option"
+    }, emptyState);
+}
 
 
 export {$3247d4a89e6094e9$export$25768ea656ae32a7 as useListBoxLayout, $3247d4a89e6094e9$export$1afdcf349979fb7e as ListBoxBase};