@react-spectrum/listbox 3.12.10-nightly.4685 → 3.12.10-nightly.4691

package/dist/ListBoxBase.main.js

@@ -1,5 +1,6 @@
 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");
@@ -7,7 +8,6 @@ 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$reactstatelylayout = require("@react-stately/layout");
 var $7w19U$reactariautils = require("@react-aria/utils");
 var $7w19U$reactspectrumprogress = require("@react-spectrum/progress");
 var $7w19U$react = require("react");
@@ -53,14 +53,11 @@ $parcel$export(module.exports, "ListBoxBase", () => $60eb4b34c53310cb$export$1af
 
 function $60eb4b34c53310cb$export$25768ea656ae32a7() {
     let { scale: scale } = (0, $7w19U$reactspectrumprovider.useProvider)();
-    let layout = (0, $7w19U$react.useMemo)(()=>new (0, $7w19U$reactstatelylayout.ListLayout)({
+    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,
-            loaderHeight: 40,
-            placeholderHeight: scale === 'large' ? 48 : 32,
-            forceSectionHeaders: true,
-            enableEmptyState: true
+            placeholderHeight: scale === 'large' ? 48 : 32
         }), [
         scale
     ]);

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} 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 {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>(): ListLayout<T> {\n  let {scale} = useProvider();\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      forceSectionHeaders: true,\n      enableEmptyState: true\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  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 || undefined}\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 | 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"}
+{"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 {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, RefObject, 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  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 || undefined}\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 | 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

@@ -1,5 +1,6 @@
 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";
@@ -7,7 +8,6 @@ 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 {ListLayout as $gF3QK$ListLayout} from "@react-stately/layout";
 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";
@@ -46,14 +46,11 @@ function $parcel$interopDefault(a) {
 
 function $3247d4a89e6094e9$export$25768ea656ae32a7() {
     let { scale: scale } = (0, $gF3QK$useProvider)();
-    let layout = (0, $gF3QK$useMemo)(()=>new (0, $gF3QK$ListLayout)({
+    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,
-            loaderHeight: 40,
-            placeholderHeight: scale === 'large' ? 48 : 32,
-            forceSectionHeaders: true,
-            enableEmptyState: true
+            placeholderHeight: scale === 'large' ? 48 : 32
         }), [
         scale
     ]);

package/dist/ListBoxBase.module.js

@@ -1,5 +1,6 @@
 import $gF3QK$intlStringsmodulejs from "./intlStrings.module.js";
 import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.module.js";
+import {ListBoxLayout as $d20755daac213984$export$c7e5f5ea00052bf} from "./ListBoxLayout.module.js";
 import {ListBoxOption as $86983ea1fa3f7312$export$feb3b6b552c14a12} from "./ListBoxOption.module.js";
 import {ListBoxSection as $92d678ed88836094$export$dca12b0bb56e4fc} from "./ListBoxSection.module.js";
 import "./vars.4c57e437.css";
@@ -7,7 +8,6 @@ import $gF3QK$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
 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 {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";
@@ -46,14 +46,11 @@ function $parcel$interopDefault(a) {
 
 function $3247d4a89e6094e9$export$25768ea656ae32a7() {
     let { scale: scale } = (0, $gF3QK$useProvider)();
-    let layout = (0, $gF3QK$useMemo)(()=>new (0, $gF3QK$ListLayout)({
+    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,
-            loaderHeight: 40,
-            placeholderHeight: scale === 'large' ? 48 : 32,
-            forceSectionHeaders: true,
-            enableEmptyState: true
+            placeholderHeight: scale === 'large' ? 48 : 32
         }), [
         scale
     ]);

package/dist/ListBoxBase.module.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} 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 {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>(): ListLayout<T> {\n  let {scale} = useProvider();\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      forceSectionHeaders: true,\n      enableEmptyState: true\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  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 || undefined}\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 | 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.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AAwCM,SAAS;IACd,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,SAAS,CAAA,GAAA,cAAM,EAAE,IACnB,IAAI,CAAA,GAAA,wCAAY,EAAK;YACnB,oBAAoB,UAAU,UAAU,KAAK;YAC7C,wBAAwB,UAAU,UAAU,KAAK;YACjD,SAAS,UAAU,UAAU,IAAI;YACjC,mBAAmB,UAAU,UAAU,KAAK;QAC9C,IACA;QAAC;KAAM;IAET,OAAO;AACT;AAEA,aAAa,GACb,SAAS,kCAAe,KAA0B,EAAE,GAAqC;IACvF,IAAI,UAAC,MAAM,SAAE,KAAK,sBAAE,kBAAkB,yBAAE,qBAAqB,YAAE,WAAW,CAAC,cAAG,SAAS,sBAAE,qBAAqB,qBAAW,QAAQ,oBAAE,gBAAgB,EAAC,GAAG;IACvJ,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;QAC9B,GAAG,KAAK;QACR,gBAAgB;QAChB,eAAe;IACjB,GAAG,OAAO;IACV,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAKjC,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE,CAAC,QAAc,cAAoB,UAAkB;YAQ3D;QAPxB,IAAI,aAAa,QAAQ,KAAK,WAC5B,qBACE,gCAAC,CAAA,GAAA,wCAAa;YACZ,KAAK,aAAa,GAAG;YACrB,MAAM,aAAa,OAAO;YAC1B,YAAY,aAAa,UAAU;YACnC,aAAa,aAAa,WAAW;YACrC,gBAAgB,GAAE,iBAAA,SAAS,IAAI,CAAC,CAAA,IAAK,EAAE,QAAQ,KAAK,uBAAlC,qCAAA,eAA6C,UAAU;WACxE,eAAe,SAAS,MAAM,CAAC,CAAA,IAAK,EAAE,QAAQ,KAAK;QAK1D,qBACE,gCAAC,CAAA,GAAA,sBAAc;YACb,KAAK,aAAa,GAAG;YACrB,YAAY,aAAa,UAAU;YACnC,aAAa,aAAa,WAAW;YACrC,MAAM,EAAE,mBAAA,6BAAA,OAAQ,UAAU;WACzB,aAAa,QAAQ;IAG5B,GAAG,EAAE;IAEL,qBACE,gCAAC,CAAA,GAAA,yCAAa,EAAE,QAAQ;QAAC,OAAO;mBAAC;8BAAO;gCAAkB;mCAAoB;QAAqB;qBACjG,gCAAC,CAAA,GAAA,iBAAS,uBACR,gCAAC,CAAA,GAAA,kBAAU;QACR,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,cAAc,SAAS;QACtC,KAAK;QACL,YAAY,MAAM,gBAAgB,CAAC,UAAU;QAC7C,WAAW,CAAC,CAAC,MAAM,SAAS,IAAI;QAChC,WAAU;QACV,iBAAgB;QAChB,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,sDAAK,GACL,iBACA,WAAW,SAAS;QAGxB,QAAQ;QACR,eAAe,CAAA,GAAA,cAAM,EAAE,IAAO,CAAA;gBAC5B,WAAW;YACb,CAAA,GAAI;YAAC;SAAmB;QACxB,YAAY,MAAM,UAAU;QAC5B,eAAe;QACf,WAAW;QACX,YAAY,MAAM,UAAU;QAC5B,UAAU;OACT,CAAA,GAAA,kBAAU,EAAE,CAAC,MAAM;QAClB,IAAI,SAAS,QACX,qBAAO,gCAAC,CAAA,GAAA,yCAAY;YAAE,MAAM;;aACvB,IAAI,SAAS,UAClB,qBAAO,gCAAC;aACH,IAAI,SAAS,eAClB,qBAAO,gCAAC;IAEZ,GAAG,EAAE;AAKf;AAEA,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC;AAGtC,SAAS;IACP,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAa;IACtC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,OACE,uEAAuE;IACvE,iEAAiE;kBACjE,gCAAC;QAAI,MAAK;QAAS,OAAO;YAAC,SAAS;YAAQ,YAAY;YAAU,gBAAgB;YAAU,QAAQ;QAAM;qBACxG,gCAAC,CAAA,GAAA,qBAAa;QACZ,iBAAA;QACA,MAAK;QACL,cAAY,MAAM,UAAU,CAAC,IAAI,GAAG,IAAI,gBAAgB,MAAM,CAAC,iBAAiB,gBAAgB,MAAM,CAAC;QACvG,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,sDAAK,GAAG;;AAG7C;AAEA,SAAS;IACP,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAa;IACjD,IAAI,aAAa,mBAAmB,qBAAqB;IACzD,IAAI,cAAc,MAChB,OAAO;IAGT,qBACE,gCAAC;QACC,uEAAuE;QACvE,iEAAiE;QACjE,MAAK;OACJ;AAGP","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 {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, RefObject, 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  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 || undefined}\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 | 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.module.js.map"}

package/dist/ListBoxLayout.main.js

@@ -0,0 +1,79 @@
+var $7VTYQ$reactstatelyvirtualizer = require("@react-stately/virtualizer");
+var $7VTYQ$reactstatelylayout = require("@react-stately/layout");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ListBoxLayout", () => $570d5c216669f686$export$c7e5f5ea00052bf);
+
+
+class $570d5c216669f686$export$c7e5f5ea00052bf extends (0, $7VTYQ$reactstatelylayout.ListLayout) {
+    validate(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.validate(invalidationContext);
+    }
+    buildCollection() {
+        let nodes = super.buildCollection(this.padding);
+        let y = this.contentSize.height;
+        if (this.isLoading) {
+            let rect = new (0, $7VTYQ$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, 40);
+            let loader = new (0, $7VTYQ$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
+            let node = {
+                layoutInfo: loader,
+                validRect: loader.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(loader.key, node);
+            y = loader.rect.maxY;
+        }
+        if (nodes.length === 0) {
+            var _this_placeholderHeight;
+            let rect = new (0, $7VTYQ$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, (_this_placeholderHeight = this.placeholderHeight) !== null && _this_placeholderHeight !== void 0 ? _this_placeholderHeight : this.virtualizer.visibleRect.height);
+            let placeholder = new (0, $7VTYQ$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
+            let node = {
+                layoutInfo: placeholder,
+                validRect: placeholder.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(placeholder.key, node);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize.height = y + this.padding;
+        return nodes;
+    }
+    buildSection(node, x, y) {
+        // Synthesize a collection node for the header.
+        let headerNode = {
+            type: 'header',
+            key: node.key + ':header',
+            parentKey: node.key,
+            value: null,
+            level: node.level,
+            hasChildNodes: false,
+            childNodes: [],
+            rendered: node.rendered,
+            textValue: node.textValue
+        };
+        // Build layout node for it and adjust y offset of section children.
+        let header = this.buildSectionHeader(headerNode, x, y);
+        header.node = headerNode;
+        header.layoutInfo.parentKey = node.key;
+        this.layoutNodes.set(headerNode.key, header);
+        y += header.layoutInfo.rect.height;
+        let section = super.buildSection(node, x, y);
+        section.children.unshift(header);
+        return section;
+    }
+    constructor(opts){
+        super(opts);
+        this.isLoading = false;
+        this.placeholderHeight = opts.placeholderHeight;
+        this.padding = opts.padding;
+    }
+}
+
+
+//# sourceMappingURL=ListBoxLayout.main.js.map

package/dist/ListBoxLayout.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAaO,MAAM,iDAAyB,CAAA,GAAA,oCAAS;IAW7C,SAAS,mBAA4D,EAAQ;YAC1D;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,SAAS;IACjB;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,OAAO;QAC9C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE;YAC9D,IAAI,SAAS,IAAI,CAAA,GAAA,yCAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;gBACwC;YAA9D,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM;YAC3H,IAAI,cAAc,IAAI,CAAA,GAAA,yCAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO;QAC1C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAC,OAAO,CAAC;QACzB,OAAO;IACT;IAnEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC;aALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,OAAO;IAC7B;AAgEF","sources":["packages/@react-spectrum/listbox/src/ListBoxLayout.ts"],"sourcesContent":["import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps {\n  isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number,\n  padding: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private padding: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.padding = opts.padding;\n  }\n\n  validate(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.validate(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.padding);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.padding;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.main.js.map"}

package/dist/ListBoxLayout.mjs

@@ -0,0 +1,74 @@
+import {Rect as $3YKfq$Rect, LayoutInfo as $3YKfq$LayoutInfo} from "@react-stately/virtualizer";
+import {ListLayout as $3YKfq$ListLayout} from "@react-stately/layout";
+
+
+
+class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
+    validate(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.validate(invalidationContext);
+    }
+    buildCollection() {
+        let nodes = super.buildCollection(this.padding);
+        let y = this.contentSize.height;
+        if (this.isLoading) {
+            let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, 40);
+            let loader = new (0, $3YKfq$LayoutInfo)('loader', 'loader', rect);
+            let node = {
+                layoutInfo: loader,
+                validRect: loader.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(loader.key, node);
+            y = loader.rect.maxY;
+        }
+        if (nodes.length === 0) {
+            var _this_placeholderHeight;
+            let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, (_this_placeholderHeight = this.placeholderHeight) !== null && _this_placeholderHeight !== void 0 ? _this_placeholderHeight : this.virtualizer.visibleRect.height);
+            let placeholder = new (0, $3YKfq$LayoutInfo)('placeholder', 'placeholder', rect);
+            let node = {
+                layoutInfo: placeholder,
+                validRect: placeholder.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(placeholder.key, node);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize.height = y + this.padding;
+        return nodes;
+    }
+    buildSection(node, x, y) {
+        // Synthesize a collection node for the header.
+        let headerNode = {
+            type: 'header',
+            key: node.key + ':header',
+            parentKey: node.key,
+            value: null,
+            level: node.level,
+            hasChildNodes: false,
+            childNodes: [],
+            rendered: node.rendered,
+            textValue: node.textValue
+        };
+        // Build layout node for it and adjust y offset of section children.
+        let header = this.buildSectionHeader(headerNode, x, y);
+        header.node = headerNode;
+        header.layoutInfo.parentKey = node.key;
+        this.layoutNodes.set(headerNode.key, header);
+        y += header.layoutInfo.rect.height;
+        let section = super.buildSection(node, x, y);
+        section.children.unshift(header);
+        return section;
+    }
+    constructor(opts){
+        super(opts);
+        this.isLoading = false;
+        this.placeholderHeight = opts.placeholderHeight;
+        this.padding = opts.padding;
+    }
+}
+
+
+export {$d20755daac213984$export$c7e5f5ea00052bf as ListBoxLayout};
+//# sourceMappingURL=ListBoxLayout.module.js.map

package/dist/ListBoxLayout.module.js

@@ -0,0 +1,74 @@
+import {Rect as $3YKfq$Rect, LayoutInfo as $3YKfq$LayoutInfo} from "@react-stately/virtualizer";
+import {ListLayout as $3YKfq$ListLayout} from "@react-stately/layout";
+
+
+
+class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
+    validate(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.validate(invalidationContext);
+    }
+    buildCollection() {
+        let nodes = super.buildCollection(this.padding);
+        let y = this.contentSize.height;
+        if (this.isLoading) {
+            let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, 40);
+            let loader = new (0, $3YKfq$LayoutInfo)('loader', 'loader', rect);
+            let node = {
+                layoutInfo: loader,
+                validRect: loader.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(loader.key, node);
+            y = loader.rect.maxY;
+        }
+        if (nodes.length === 0) {
+            var _this_placeholderHeight;
+            let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, (_this_placeholderHeight = this.placeholderHeight) !== null && _this_placeholderHeight !== void 0 ? _this_placeholderHeight : this.virtualizer.visibleRect.height);
+            let placeholder = new (0, $3YKfq$LayoutInfo)('placeholder', 'placeholder', rect);
+            let node = {
+                layoutInfo: placeholder,
+                validRect: placeholder.rect
+            };
+            nodes.push(node);
+            this.layoutNodes.set(placeholder.key, node);
+            y = placeholder.rect.maxY;
+        }
+        this.contentSize.height = y + this.padding;
+        return nodes;
+    }
+    buildSection(node, x, y) {
+        // Synthesize a collection node for the header.
+        let headerNode = {
+            type: 'header',
+            key: node.key + ':header',
+            parentKey: node.key,
+            value: null,
+            level: node.level,
+            hasChildNodes: false,
+            childNodes: [],
+            rendered: node.rendered,
+            textValue: node.textValue
+        };
+        // Build layout node for it and adjust y offset of section children.
+        let header = this.buildSectionHeader(headerNode, x, y);
+        header.node = headerNode;
+        header.layoutInfo.parentKey = node.key;
+        this.layoutNodes.set(headerNode.key, header);
+        y += header.layoutInfo.rect.height;
+        let section = super.buildSection(node, x, y);
+        section.children.unshift(header);
+        return section;
+    }
+    constructor(opts){
+        super(opts);
+        this.isLoading = false;
+        this.placeholderHeight = opts.placeholderHeight;
+        this.padding = opts.padding;
+    }
+}
+
+
+export {$d20755daac213984$export$c7e5f5ea00052bf as ListBoxLayout};
+//# sourceMappingURL=ListBoxLayout.module.js.map

package/dist/ListBoxLayout.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAaO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAW7C,SAAS,mBAA4D,EAAQ;YAC1D;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,SAAS;IACjB;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,OAAO;QAC9C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE;YAC9D,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;gBACwC;YAA9D,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,EAAE,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM;YAC3H,IAAI,cAAc,IAAI,CAAA,GAAA,iBAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO;QAC1C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAC,OAAO,CAAC;QACzB,OAAO;IACT;IAnEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC;aALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,OAAO;IAC7B;AAgEF","sources":["packages/@react-spectrum/listbox/src/ListBoxLayout.ts"],"sourcesContent":["import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps {\n  isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number,\n  padding: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private padding: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.padding = opts.padding;\n  }\n\n  validate(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.validate(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.padding);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.padding;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.module.js.map"}

package/dist/types.d.ts

@@ -1,11 +1,25 @@
-import { AriaLabelingProps, DOMProps, FocusStrategy, StyleProps, DOMRef } from "@react-types/shared";
+import { InvalidationContext } from "@react-stately/virtualizer";
+import { LayoutNode, ListLayout, ListLayoutOptions } from "@react-stately/layout";
+import { Node, AriaLabelingProps, DOMProps, FocusStrategy, StyleProps, DOMRef } from "@react-types/shared";
 import { AriaListBoxOptions } from "@react-aria/listbox";
-import { ListLayout } from "@react-stately/layout";
 import { ListState } from "@react-stately/list";
 import { HTMLAttributes, ReactElement, ReactNode, RefObject } from "react";
 import { SpectrumListBoxProps } from "@react-types/listbox";
+interface ListBoxLayoutProps {
+    isLoading?: boolean;
+}
+interface ListBoxLayoutOptions extends ListLayoutOptions {
+    placeholderHeight: number;
+    padding: number;
+}
+declare class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
+    constructor(opts: ListBoxLayoutOptions);
+    validate(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void;
+    protected buildCollection(): LayoutNode[];
+    protected buildSection(node: Node<T>, x: number, y: number): LayoutNode;
+}
 interface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {
-    layout: ListLayout<T>;
+    layout: ListBoxLayout<T>;
     state: ListState<T>;
     autoFocus?: boolean | FocusStrategy;
     shouldFocusWrap?: boolean;
@@ -21,7 +35,7 @@ interface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabel
     onScroll?: () => void;
 }
 /** @private */
-export function useListBoxLayout<T>(): ListLayout<T>;
+export function useListBoxLayout<T>(): ListBoxLayout<T>;
 export const ListBoxBase: <T>(props: ListBoxBaseProps<T> & {
     ref?: RefObject<HTMLDivElement | null>;
 }) => ReactElement;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;;AGgCA,2BAA2B,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAClG,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAe;AACf,iCAAiC,CAAC,KAAK,WAAW,CAAC,CAAC,CAenD;AAoFD,OAAA,MAAM,aAAgD,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,UAAU,cAAc,GAAG,IAAI,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AChHjJ;;GAEG;AACH,OAAA,MAAM,SAAwC,CAAC,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACxBnI,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC","sources":["packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxContext.ts","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxOption.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxSection.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxBase.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBox.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/index.ts","packages/@react-spectrum/listbox/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {ListBox} from './ListBox';\nexport {useListBoxLayout, ListBoxBase} from './ListBoxBase';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumListBoxProps} from '@react-types/listbox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;;;ACIA;IACE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,8BAA+B,SAAQ,iBAAiB;IACtD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,4BAA2B,CAAC,CAAE,SAAQ,WAAW,CAAC,EAAE,kBAAkB,CAAC;gBAKzD,IAAI,EAAE,oBAAoB;IAMtC,QAAQ,CAAC,mBAAmB,EAAE,oBAAoB,kBAAkB,CAAC,GAAG,IAAI;IAK5E,SAAS,CAAC,eAAe,IAAI,UAAU,EAAE;IAgCzC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;CAyBxE;AGtDD,2BAA2B,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU;IAClG,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAe;AACf,iCAAiC,CAAC,KAAK,cAAc,CAAC,CAAC,CAYtD;AAoFD,OAAA,MAAM,aAAgD,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,UAAU,cAAc,GAAG,IAAI,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC7GjJ;;GAEG;AACH,OAAA,MAAM,SAAwC,CAAC,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACxBnI,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC","sources":["packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxContext.ts","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxLayout.ts","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxOption.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxSection.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBoxBase.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/ListBox.tsx","packages/@react-spectrum/listbox/src/packages/@react-spectrum/listbox/src/index.ts","packages/@react-spectrum/listbox/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {ListBox} from './ListBox';\nexport {useListBoxLayout, ListBoxBase} from './ListBoxBase';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumListBoxProps} from '@react-types/listbox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/listbox",
-  "version": "3.12.10-nightly.4685+a48d1673f",
+  "version": "3.12.10-nightly.4691+fabca84b9",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,27 +36,27 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "3.0.0-nightly.2973+a48d1673f",
-    "@react-aria/i18n": "3.0.0-nightly.2973+a48d1673f",
-    "@react-aria/interactions": "3.0.0-nightly.2973+a48d1673f",
-    "@react-aria/listbox": "3.12.2-nightly.4685+a48d1673f",
-    "@react-aria/utils": "3.0.0-nightly.2973+a48d1673f",
-    "@react-aria/virtualizer": "3.10.2-nightly.4685+a48d1673f",
-    "@react-spectrum/layout": "3.6.6-nightly.4685+a48d1673f",
-    "@react-spectrum/progress": "3.0.0-nightly.2973+a48d1673f",
-    "@react-spectrum/text": "3.5.6-nightly.4685+a48d1673f",
-    "@react-spectrum/utils": "3.0.0-nightly.2973+a48d1673f",
-    "@react-stately/collections": "3.0.0-nightly.2973+a48d1673f",
-    "@react-stately/layout": "3.13.10-nightly.4685+a48d1673f",
-    "@react-stately/list": "3.10.6-nightly.4685+a48d1673f",
-    "@react-stately/virtualizer": "3.7.2-nightly.4685+a48d1673f",
-    "@react-types/listbox": "3.4.10-nightly.4685+a48d1673f",
-    "@react-types/shared": "3.0.0-nightly.2973+a48d1673f",
-    "@spectrum-icons/ui": "3.0.0-nightly.2973+a48d1673f",
+    "@react-aria/focus": "3.0.0-nightly.2979+fabca84b9",
+    "@react-aria/i18n": "3.0.0-nightly.2979+fabca84b9",
+    "@react-aria/interactions": "3.0.0-nightly.2979+fabca84b9",
+    "@react-aria/listbox": "3.12.2-nightly.4691+fabca84b9",
+    "@react-aria/utils": "3.0.0-nightly.2979+fabca84b9",
+    "@react-aria/virtualizer": "3.10.2-nightly.4691+fabca84b9",
+    "@react-spectrum/layout": "3.6.6-nightly.4691+fabca84b9",
+    "@react-spectrum/progress": "3.0.0-nightly.2979+fabca84b9",
+    "@react-spectrum/text": "3.5.6-nightly.4691+fabca84b9",
+    "@react-spectrum/utils": "3.0.0-nightly.2979+fabca84b9",
+    "@react-stately/collections": "3.0.0-nightly.2979+fabca84b9",
+    "@react-stately/layout": "3.13.10-nightly.4691+fabca84b9",
+    "@react-stately/list": "3.10.6-nightly.4691+fabca84b9",
+    "@react-stately/virtualizer": "3.7.2-nightly.4691+fabca84b9",
+    "@react-types/listbox": "3.4.10-nightly.4691+fabca84b9",
+    "@react-types/shared": "3.0.0-nightly.2979+fabca84b9",
+    "@spectrum-icons/ui": "3.0.0-nightly.2979+fabca84b9",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2973+a48d1673f"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2979+fabca84b9"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.2.0",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a48d1673f2144714e31712e38310a8801edab550"
+  "gitHead": "fabca84b95c9c61f9062d5f1e66ebe2c920a2a5d"
 }

package/src/ListBoxBase.tsx

@@ -17,9 +17,9 @@ import {FocusScope} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListBoxContext} from './ListBoxContext';
+import {ListBoxLayout} from './ListBoxLayout';
 import {ListBoxOption} from './ListBoxOption';
 import {ListBoxSection} from './ListBoxSection';
-import {ListLayout} from '@react-stately/layout';
 import {ListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
@@ -31,7 +31,7 @@ import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';
 
 interface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {
-  layout: ListLayout<T>,
+  layout: ListBoxLayout<T>,
   state: ListState<T>,
   autoFocus?: boolean | FocusStrategy,
   shouldFocusWrap?: boolean,
@@ -48,17 +48,14 @@ interface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabel
 }
 
 /** @private */
-export function useListBoxLayout<T>(): ListLayout<T> {
+export function useListBoxLayout<T>(): ListBoxLayout<T> {
   let {scale} = useProvider();
   let layout = useMemo(() =>
-    new ListLayout<T>({
+    new ListBoxLayout<T>({
       estimatedRowHeight: scale === 'large' ? 48 : 32,
       estimatedHeadingHeight: scale === 'large' ? 33 : 26,
       padding: scale === 'large' ? 5 : 4, // TODO: get from DNA
-      loaderHeight: 40,
-      placeholderHeight: scale === 'large' ? 48 : 32,
-      forceSectionHeaders: true,
-      enableEmptyState: true
+      placeholderHeight: scale === 'large' ? 48 : 32
     })
   , [scale]);
 

package/src/ListBoxLayout.ts

@@ -0,0 +1,87 @@
+import {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';
+import {LayoutNode, ListLayout, ListLayoutOptions} from '@react-stately/layout';
+import {Node} from '@react-types/shared';
+
+interface ListBoxLayoutProps {
+  isLoading?: boolean
+}
+
+interface ListBoxLayoutOptions extends ListLayoutOptions {
+  placeholderHeight: number,
+  padding: number
+}
+
+export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
+  private isLoading: boolean = false;
+  private placeholderHeight: number;
+  private padding: number;
+
+  constructor(opts: ListBoxLayoutOptions) {
+    super(opts);
+    this.placeholderHeight = opts.placeholderHeight;
+    this.padding = opts.padding;
+  }
+
+  validate(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {
+    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
+    super.validate(invalidationContext);
+  }
+
+  protected buildCollection(): LayoutNode[] {
+    let nodes = super.buildCollection(this.padding);
+    let y = this.contentSize.height;
+
+    if (this.isLoading) {
+      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40);
+      let loader = new LayoutInfo('loader', 'loader', rect);
+      let node = {
+        layoutInfo: loader,
+        validRect: loader.rect
+      };
+      nodes.push(node);
+      this.layoutNodes.set(loader.key, node);
+      y = loader.rect.maxY;
+    }
+
+    if (nodes.length === 0) {
+      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);
+      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
+      let node = {
+        layoutInfo: placeholder,
+        validRect: placeholder.rect
+      };
+      nodes.push(node);
+      this.layoutNodes.set(placeholder.key, node);
+      y = placeholder.rect.maxY;
+    }
+
+    this.contentSize.height = y + this.padding;
+    return nodes;
+  }
+
+  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
+    // Synthesize a collection node for the header.
+    let headerNode = {
+      type: 'header',
+      key: node.key + ':header',
+      parentKey: node.key,
+      value: null,
+      level: node.level,
+      hasChildNodes: false,
+      childNodes: [],
+      rendered: node.rendered,
+      textValue: node.textValue
+    };
+
+    // Build layout node for it and adjust y offset of section children.
+    let header = this.buildSectionHeader(headerNode, x, y);
+    header.node = headerNode;
+    header.layoutInfo.parentKey = node.key;
+    this.layoutNodes.set(headerNode.key, header);
+    y += header.layoutInfo.rect.height;
+
+    let section = super.buildSection(node, x, y);
+    section.children.unshift(header);
+    return section;
+  }
+}