@react-spectrum/listbox 3.0.0-alpha.1 → 3.0.0-nightly-4980928d3-240906

package/README.md

@@ -0,0 +1,3 @@
+# @react-spectrum/listbox
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

package/dist/ListBox.main.js

@@ -0,0 +1,48 @@
+var $60eb4b34c53310cb$exports = require("./ListBoxBase.main.js");
+var $kvNjb$react = require("react");
+var $kvNjb$reactspectrumutils = require("@react-spectrum/utils");
+var $kvNjb$reactstatelylist = require("@react-stately/list");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ListBox", () => $582d86e45be55635$export$41f133550aa26f48);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $582d86e45be55635$var$ListBox(props, ref) {
+    let state = (0, $kvNjb$reactstatelylist.useListState)(props);
+    let layout = (0, $60eb4b34c53310cb$exports.useListBoxLayout)();
+    let domRef = (0, $kvNjb$reactspectrumutils.useDOMRef)(ref);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($kvNjb$react))).createElement((0, $60eb4b34c53310cb$exports.ListBoxBase), {
+        ...props,
+        ref: domRef,
+        state: state,
+        layout: layout
+    });
+}
+// 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
+/**
+ * A list of options that can allow selection of one or more.
+ */ const $582d86e45be55635$export$41f133550aa26f48 = /*#__PURE__*/ (0, ($parcel$interopDefault($kvNjb$react))).forwardRef($582d86e45be55635$var$ListBox);
+
+
+//# sourceMappingURL=ListBox.main.js.map

package/dist/ListBox.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe;IAC5B,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();\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

@@ -0,0 +1,39 @@
+import {ListBoxBase as $3247d4a89e6094e9$export$1afdcf349979fb7e, useListBoxLayout as $3247d4a89e6094e9$export$25768ea656ae32a7} from "./ListBoxBase.mjs";
+import $7rJGh$react from "react";
+import {useDOMRef as $7rJGh$useDOMRef} from "@react-spectrum/utils";
+import {useListState as $7rJGh$useListState} from "@react-stately/list";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $3136257018b1a220$var$ListBox(props, ref) {
+    let state = (0, $7rJGh$useListState)(props);
+    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)();
+    let domRef = (0, $7rJGh$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $7rJGh$react).createElement((0, $3247d4a89e6094e9$export$1afdcf349979fb7e), {
+        ...props,
+        ref: domRef,
+        state: state,
+        layout: layout
+    });
+}
+// 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
+/**
+ * A list of options that can allow selection of one or more.
+ */ const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef($3136257018b1a220$var$ListBox);
+
+
+export {$3136257018b1a220$export$41f133550aa26f48 as ListBox};
+//# sourceMappingURL=ListBox.module.js.map

package/dist/ListBox.module.js

@@ -0,0 +1,39 @@
+import {ListBoxBase as $3247d4a89e6094e9$export$1afdcf349979fb7e, useListBoxLayout as $3247d4a89e6094e9$export$25768ea656ae32a7} from "./ListBoxBase.module.js";
+import $7rJGh$react from "react";
+import {useDOMRef as $7rJGh$useDOMRef} from "@react-spectrum/utils";
+import {useListState as $7rJGh$useListState} from "@react-stately/list";
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+function $3136257018b1a220$var$ListBox(props, ref) {
+    let state = (0, $7rJGh$useListState)(props);
+    let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)();
+    let domRef = (0, $7rJGh$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $7rJGh$react).createElement((0, $3247d4a89e6094e9$export$1afdcf349979fb7e), {
+        ...props,
+        ref: domRef,
+        state: state,
+        layout: layout
+    });
+}
+// 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
+/**
+ * A list of options that can allow selection of one or more.
+ */ const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef($3136257018b1a220$var$ListBox);
+
+
+export {$3136257018b1a220$export$41f133550aa26f48 as ListBox};
+//# sourceMappingURL=ListBox.module.js.map

package/dist/ListBox.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AASD,SAAS,8BAA0B,KAA8B,EAAE,GAA2B;IAC5F,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,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();\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

@@ -0,0 +1,165 @@
+var $3d9fe9b46e2d649a$exports = require("./intlStrings.main.js");
+var $611e93c7b7c0413c$exports = require("./ListBoxContext.main.js");
+var $570d5c216669f686$exports = require("./ListBoxLayout.main.js");
+var $2205d250ee1cb1ac$exports = require("./ListBoxOption.main.js");
+var $0f5fd8483f48ef09$exports = require("./ListBoxSection.main.js");
+require("./vars.4c57e437.css");
+var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
+var $7w19U$reactarialistbox = require("@react-aria/listbox");
+var $7w19U$reactspectrumutils = require("@react-spectrum/utils");
+var $7w19U$reactariafocus = require("@react-aria/focus");
+var $7w19U$reactariautils = require("@react-aria/utils");
+var $7w19U$reactspectrumprogress = require("@react-spectrum/progress");
+var $7w19U$react = require("react");
+var $7w19U$reactariai18n = require("@react-aria/i18n");
+var $7w19U$reactspectrumprovider = require("@react-spectrum/provider");
+var $7w19U$reactariavirtualizer = require("@react-aria/virtualizer");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useListBoxLayout", () => $60eb4b34c53310cb$export$25768ea656ae32a7);
+$parcel$export(module.exports, "ListBoxBase", () => $60eb4b34c53310cb$export$1afdcf349979fb7e);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $60eb4b34c53310cb$export$25768ea656ae32a7() {
+    let { scale: scale } = (0, $7w19U$reactspectrumprovider.useProvider)();
+    let layout = (0, $7w19U$react.useMemo)(()=>new (0, $570d5c216669f686$exports.ListBoxLayout)({
+            estimatedRowHeight: scale === 'large' ? 48 : 32,
+            estimatedHeadingHeight: scale === 'large' ? 33 : 26,
+            padding: scale === 'large' ? 5 : 4,
+            placeholderHeight: scale === 'large' ? 48 : 32
+        }), [
+        scale
+    ]);
+    return layout;
+}
+/** @private */ function $60eb4b34c53310cb$var$ListBoxBase(props, ref) {
+    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,
+        layoutDelegate: layout,
+        isVirtualized: true
+    }, state, ref);
+    let { styleProps: styleProps } = (0, $7w19U$reactspectrumutils.useStyleProps)(props);
+    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,
+            item: reusableView.content,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            headerLayoutInfo: (_children_find = children.find((c)=>c.viewType === 'header')) === null || _children_find === void 0 ? void 0 : _children_find.layoutInfo
+        }, renderChildren(children.filter((c)=>c.viewType === 'item')));
+        return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $7w19U$reactariavirtualizer.VirtualizerItem), {
+            key: reusableView.key,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+        }, reusableView.rendered);
+    }, []);
+    let focusedKey = state.selectionManager.focusedKey;
+    let persistedKeys = (0, $7w19U$react.useMemo)(()=>focusedKey != null ? new Set([
+            focusedKey
+        ]) : null, [
+        focusedKey
+    ]);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $611e93c7b7c0413c$exports.ListBoxContext).Provider, {
+        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),
+        ref: ref,
+        persistedKeys: persistedKeys,
+        autoFocus: !!props.autoFocus || undefined,
+        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,
+        isLoading: isLoading,
+        onLoadMore: props.onLoadMore,
+        onScroll: onScroll
+    }, (0, $7w19U$react.useCallback)((type, item)=>{
+        if (type === 'item') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $2205d250ee1cb1ac$exports.ListBoxOption), {
+            item: item
+        });
+        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

@@ -0,0 +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, RefObject, 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 {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from '@react-stately/list';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {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: ListBoxLayout<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>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(() =>\n    new ListBoxLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      padding: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      placeholderHeight: scale === 'large' ? 48 : 32\n    })\n  , [scale]);\n\n  return layout;\n}\n\n/** @private */\nfunction ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement | null>) {\n  let {layout, state, shouldFocusOnHover, shouldUseVirtualFocus, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n  let {listBoxProps} = useListBox({\n    ...props,\n    layoutDelegate: 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  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\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          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\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 | null>}) => 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

@@ -0,0 +1,159 @@
+import $gF3QK$intlStringsmodulejs from "./intlStrings.mjs";
+import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.mjs";
+import {ListBoxLayout as $d20755daac213984$export$c7e5f5ea00052bf} from "./ListBoxLayout.mjs";
+import {ListBoxOption as $86983ea1fa3f7312$export$feb3b6b552c14a12} from "./ListBoxOption.mjs";
+import {ListBoxSection as $92d678ed88836094$export$dca12b0bb56e4fc} from "./ListBoxSection.mjs";
+import "./vars.4c57e437.css";
+import $gF3QK$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
+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 {mergeProps as $gF3QK$mergeProps} from "@react-aria/utils";
+import {ProgressCircle as $gF3QK$ProgressCircle} from "@react-spectrum/progress";
+import $gF3QK$react, {useMemo as $gF3QK$useMemo, useCallback as $gF3QK$useCallback, useContext as $gF3QK$useContext} from "react";
+import {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";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $3247d4a89e6094e9$export$25768ea656ae32a7() {
+    let { scale: scale } = (0, $gF3QK$useProvider)();
+    let layout = (0, $gF3QK$useMemo)(()=>new (0, $d20755daac213984$export$c7e5f5ea00052bf)({
+            estimatedRowHeight: scale === 'large' ? 48 : 32,
+            estimatedHeadingHeight: scale === 'large' ? 33 : 26,
+            padding: scale === 'large' ? 5 : 4,
+            placeholderHeight: scale === 'large' ? 48 : 32
+        }), [
+        scale
+    ]);
+    return layout;
+}
+/** @private */ function $3247d4a89e6094e9$var$ListBoxBase(props, ref) {
+    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,
+        layoutDelegate: layout,
+        isVirtualized: true
+    }, state, ref);
+    let { styleProps: styleProps } = (0, $gF3QK$useStyleProps)(props);
+    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,
+            item: reusableView.content,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            headerLayoutInfo: (_children_find = children.find((c)=>c.viewType === 'header')) === null || _children_find === void 0 ? void 0 : _children_find.layoutInfo
+        }, renderChildren(children.filter((c)=>c.viewType === 'item')));
+        return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $gF3QK$VirtualizerItem), {
+            key: reusableView.key,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
+        }, reusableView.rendered);
+    }, []);
+    let focusedKey = state.selectionManager.focusedKey;
+    let persistedKeys = (0, $gF3QK$useMemo)(()=>focusedKey != null ? new Set([
+            focusedKey
+        ]) : null, [
+        focusedKey
+    ]);
+    return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $0c6f792811e33483$export$7ff8f37d2d81a48d).Provider, {
+        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),
+        ref: ref,
+        persistedKeys: persistedKeys,
+        autoFocus: !!props.autoFocus || undefined,
+        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,
+        isLoading: isLoading,
+        onLoadMore: props.onLoadMore,
+        onScroll: onScroll
+    }, (0, $gF3QK$useCallback)((type, item)=>{
+        if (type === 'item') return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $86983ea1fa3f7312$export$feb3b6b552c14a12), {
+            item: item
+        });
+        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};
+//# sourceMappingURL=ListBoxBase.module.js.map