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

package/dist/ListBoxBase.module.js

@@ -0,0 +1,159 @@
+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";
+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 {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

package/dist/ListBoxBase.module.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.module.js.map"}

package/dist/ListBoxContext.main.js

@@ -0,0 +1,27 @@
+var $497sr$react = require("react");
+
+
+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, "ListBoxContext", () => $611e93c7b7c0413c$export$7ff8f37d2d81a48d);
+/*
+ * 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.
+ */ 
+const $611e93c7b7c0413c$export$7ff8f37d2d81a48d = (0, ($parcel$interopDefault($497sr$react))).createContext(null);
+
+
+//# sourceMappingURL=ListBoxContext.main.js.map

package/dist/ListBoxContext.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAAsB","sources":["packages/@react-spectrum/listbox/src/ListBoxContext.ts"],"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 {ListState} from '@react-stately/list';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>,\n  renderEmptyState?: () => ReactNode,\n  shouldFocusOnHover: boolean,\n  shouldUseVirtualFocus: boolean\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.main.js.map"}

package/dist/ListBoxContext.mjs

@@ -0,0 +1,18 @@
+import $8XLda$react from "react";
+
+/*
+ * 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.
+ */ 
+const $0c6f792811e33483$export$7ff8f37d2d81a48d = (0, $8XLda$react).createContext(null);
+
+
+export {$0c6f792811e33483$export$7ff8f37d2d81a48d as ListBoxContext};
+//# sourceMappingURL=ListBoxContext.module.js.map

package/dist/ListBoxContext.module.js

@@ -0,0 +1,18 @@
+import $8XLda$react from "react";
+
+/*
+ * 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.
+ */ 
+const $0c6f792811e33483$export$7ff8f37d2d81a48d = (0, $8XLda$react).createContext(null);
+
+
+export {$0c6f792811e33483$export$7ff8f37d2d81a48d as ListBoxContext};
+//# sourceMappingURL=ListBoxContext.module.js.map

package/dist/ListBoxContext.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,YAAI,EAAE,aAAa,CAAsB","sources":["packages/@react-spectrum/listbox/src/ListBoxContext.ts"],"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 {ListState} from '@react-stately/list';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>,\n  renderEmptyState?: () => ReactNode,\n  shouldFocusOnHover: boolean,\n  shouldUseVirtualFocus: boolean\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.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) {
+    update(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.update(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,OAAO,mBAA4D,EAAQ;YACxD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;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  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(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) {
+    update(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.update(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) {
+    update(invalidationContext) {
+        var _invalidationContext_layoutOptions;
+        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
+        super.update(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,OAAO,mBAA4D,EAAQ;YACxD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;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  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(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/ListBoxOption.main.js

@@ -0,0 +1,105 @@
+var $611e93c7b7c0413c$exports = require("./ListBoxContext.main.js");
+require("./vars.4c57e437.css");
+var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
+var $8xmxv$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
+var $8xmxv$reactspectrumutils = require("@react-spectrum/utils");
+var $8xmxv$reactariafocus = require("@react-aria/focus");
+var $8xmxv$reactspectrumlayout = require("@react-spectrum/layout");
+var $8xmxv$reactariainteractions = require("@react-aria/interactions");
+var $8xmxv$reactariautils = require("@react-aria/utils");
+var $8xmxv$react = require("react");
+var $8xmxv$reactspectrumtext = require("@react-spectrum/text");
+var $8xmxv$reactarialistbox = require("@react-aria/listbox");
+
+
+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, "ListBoxOption", () => $2205d250ee1cb1ac$export$feb3b6b552c14a12);
+/*
+ * 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 $2205d250ee1cb1ac$export$feb3b6b552c14a12(props) {
+    let { item: item } = props;
+    let { rendered: rendered, key: key } = item;
+    let ElementType = item.props.href ? 'a' : 'div';
+    let { state: state, shouldFocusOnHover: shouldFocusOnHover, shouldUseVirtualFocus: shouldUseVirtualFocus } = (0, $8xmxv$react.useContext)((0, $611e93c7b7c0413c$exports.ListBoxContext));
+    let ref = (0, $8xmxv$react.useRef)(undefined);
+    let { optionProps: optionProps, labelProps: labelProps, descriptionProps: descriptionProps, isSelected: isSelected, isDisabled: isDisabled, isFocused: isFocused } = (0, $8xmxv$reactarialistbox.useOption)({
+        'aria-label': item['aria-label'],
+        key: key,
+        isVirtualized: true
+    }, state, ref);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8xmxv$reactariainteractions.useHover)({
+        ...props,
+        isDisabled: isDisabled
+    });
+    let contents = typeof rendered === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, $8xmxv$reactspectrumtext.Text), null, rendered) : rendered;
+    let isKeyboardModality = (0, $8xmxv$reactariainteractions.isFocusVisible)();
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, $8xmxv$reactariafocus.FocusRing), {
+        focusRingClass: (0, $8xmxv$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'focus-ring')
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement(ElementType, {
+        ...(0, $8xmxv$reactariautils.mergeProps)(optionProps, shouldFocusOnHover ? {} : hoverProps),
+        ref: ref,
+        className: (0, $8xmxv$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-item', {
+            // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality
+            'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality,
+            'is-disabled': isDisabled,
+            'is-selected': isSelected,
+            'is-selectable': state.selectionManager.selectionMode !== 'none',
+            // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse.
+            // Otherwise, apply hover styles when focused using non-keyboard modality.
+            'is-hovered': isHovered && !shouldFocusOnHover || isFocused && !isKeyboardModality
+        })
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, $8xmxv$reactspectrumlayout.Grid), {
+        UNSAFE_className: (0, $8xmxv$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-itemGrid')
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, $8xmxv$reactspectrumutils.ClearSlots), null, /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, $8xmxv$reactspectrumutils.SlotProvider), {
+        slots: {
+            text: {
+                UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-itemLabel'],
+                ...labelProps
+            },
+            icon: {
+                size: 'S',
+                UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-icon']
+            },
+            avatar: {
+                size: 'avatar-size-100',
+                UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-avatar']
+            },
+            description: {
+                UNSAFE_className: (0, ($parcel$interopDefault($3deee0fd2b46e64f$exports)))['spectrum-Menu-description'],
+                ...descriptionProps
+            }
+        }
+    }, contents, isSelected && /*#__PURE__*/ (0, ($parcel$interopDefault($8xmxv$react))).createElement((0, ($parcel$interopDefault($8xmxv$spectrumiconsuiCheckmarkMedium))), {
+        slot: "checkmark",
+        UNSAFE_className: (0, $8xmxv$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu-checkmark')
+    }))))));
+}
+
+
+//# sourceMappingURL=ListBoxOption.main.js.map

package/dist/ListBoxOption.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAoBM,SAAS,0CAAiB,KAAqB;IACpD,IAAI,QAAC,IAAI,EAAC,GAAG;IAEb,IAAI,YACF,QAAQ,OACR,GAAG,EACJ,GAAG;IACJ,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAC7D,IAAI,SAAC,KAAK,sBAAE,kBAAkB,yBAAE,qBAAqB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,wCAAa;IAEjF,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAO;IACtB,IAAI,eAAC,WAAW,cAAE,UAAU,oBAAE,gBAAgB,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,iCAAQ,EAC3F;QACE,cAAc,IAAI,CAAC,aAAa;aAChC;QACA,eAAe;IACjB,GACA,OACA;IAEF,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QACrC,GAAG,KAAK;oBACR;IACF;IAEA,IAAI,WAAW,OAAO,aAAa,yBAC/B,0DAAC,CAAA,GAAA,6BAAG,SAAG,YACP;IAEJ,IAAI,qBAAqB,CAAA,GAAA,2CAAa;IAEtC,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,qBAAqB,CAAC,IAAI,WAAW;QACjE,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,+GAA+G;YAC/G,cAAc,yBAAyB,aAAa;YACpD,eAAe;YACf,eAAe;YACf,iBAAiB,MAAM,gBAAgB,CAAC,aAAa,KAAK;YAC1D,yFAAyF;YACzF,0EAA0E;YAC1E,cAAc,AAAC,aAAa,CAAC,sBAAwB,aAAa,CAAC;QACrE;qBAEF,0DAAC,CAAA,GAAA,+BAAG;QACF,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;qBAGJ,0DAAC,CAAA,GAAA,oCAAS,uBACR,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,0BAA0B;gBAAE,GAAG,UAAU;YAAA;YACzE,MAAM;gBAAC,MAAM;gBAAK,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,qBAAqB;YAAA;YAChE,QAAQ;gBAAC,MAAM;gBAAmB,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,uBAAuB;YAAA;YAClF,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,4BAA4B;gBAAE,GAAG,gBAAgB;YAAA;QAC1F;OACC,UACA,4BACC,0DAAC,CAAA,GAAA,+DAAc;QACb,MAAK;QACL,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;;AAUtB","sources":["packages/@react-spectrum/listbox/src/ListBoxOption.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 CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport {isFocusVisible, useHover} from '@react-aria/interactions';\nimport {ListBoxContext} from './ListBoxContext';\nimport {mergeProps} from '@react-aria/utils';\nimport {Node} from '@react-types/shared';\nimport React, {useContext, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useOption} from '@react-aria/listbox';\n\ninterface OptionProps<T> {\n  item: Node<T>\n}\n\n/** @private */\nexport function ListBoxOption<T>(props: OptionProps<T>) {\n  let {item} = props;\n\n  let {\n    rendered,\n    key\n  } = item;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext);\n\n  let ref = useRef<any>(undefined);\n  let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(\n    {\n      'aria-label': item['aria-label'],\n      key,\n      isVirtualized: true\n    },\n    state,\n    ref\n  );\n  let {hoverProps, isHovered} = useHover({\n    ...props,\n    isDisabled\n  });\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  let isKeyboardModality = isFocusVisible();\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps)}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality\n            'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality,\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': state.selectionManager.selectionMode !== 'none',\n            // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse.\n            // Otherwise, apply hover styles when focused using non-keyboard modality.\n            'is-hovered': (isHovered && !shouldFocusOnHover) || (isFocused && !isKeyboardModality)\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                icon: {size: 'S', UNSAFE_className: styles['spectrum-Menu-icon']},\n                avatar: {size: 'avatar-size-100', UNSAFE_className: styles['spectrum-Menu-avatar']},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxOption.main.js.map"}