@react-spectrum/listbox 3.12.10-nightly.4698 → 3.12.10-nightly.4701
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ListBoxBase.main.js +7 -1
- package/dist/ListBoxBase.main.js.map +1 -1
- package/dist/ListBoxBase.mjs +7 -1
- package/dist/ListBoxBase.module.js +7 -1
- package/dist/ListBoxBase.module.js.map +1 -1
- package/dist/ListBoxLayout.main.js +2 -2
- package/dist/ListBoxLayout.main.js.map +1 -1
- package/dist/ListBoxLayout.mjs +2 -2
- package/dist/ListBoxLayout.module.js +2 -2
- package/dist/ListBoxLayout.module.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +20 -20
- package/src/ListBoxBase.tsx +4 -1
- package/src/ListBoxLayout.ts +2 -2
package/dist/ListBoxBase.main.js
CHANGED
|
@@ -87,6 +87,12 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7() {
|
|
|
87
87
|
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
|
|
88
88
|
}, reusableView.rendered);
|
|
89
89
|
}, []);
|
|
90
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
91
|
+
let persistedKeys = (0, $7w19U$react.useMemo)(()=>focusedKey != null ? new Set([
|
|
92
|
+
focusedKey
|
|
93
|
+
]) : null, [
|
|
94
|
+
focusedKey
|
|
95
|
+
]);
|
|
90
96
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement((0, $611e93c7b7c0413c$exports.ListBoxContext).Provider, {
|
|
91
97
|
value: {
|
|
92
98
|
state: state,
|
|
@@ -98,7 +104,7 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7() {
|
|
|
98
104
|
...styleProps,
|
|
99
105
|
...(0, $7w19U$reactariautils.mergeProps)(listBoxProps, domProps),
|
|
100
106
|
ref: ref,
|
|
101
|
-
|
|
107
|
+
persistedKeys: persistedKeys,
|
|
102
108
|
autoFocus: !!props.autoFocus || undefined,
|
|
103
109
|
sizeToFit: "height",
|
|
104
110
|
scrollDirection: "vertical",
|
|
@@ -1 +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 {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"}
|
|
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 {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 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 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
CHANGED
|
@@ -80,6 +80,12 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
80
80
|
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
|
|
81
81
|
}, reusableView.rendered);
|
|
82
82
|
}, []);
|
|
83
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
84
|
+
let persistedKeys = (0, $gF3QK$useMemo)(()=>focusedKey != null ? new Set([
|
|
85
|
+
focusedKey
|
|
86
|
+
]) : null, [
|
|
87
|
+
focusedKey
|
|
88
|
+
]);
|
|
83
89
|
return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $0c6f792811e33483$export$7ff8f37d2d81a48d).Provider, {
|
|
84
90
|
value: {
|
|
85
91
|
state: state,
|
|
@@ -91,7 +97,7 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
91
97
|
...styleProps,
|
|
92
98
|
...(0, $gF3QK$mergeProps)(listBoxProps, domProps),
|
|
93
99
|
ref: ref,
|
|
94
|
-
|
|
100
|
+
persistedKeys: persistedKeys,
|
|
95
101
|
autoFocus: !!props.autoFocus || undefined,
|
|
96
102
|
sizeToFit: "height",
|
|
97
103
|
scrollDirection: "vertical",
|
|
@@ -80,6 +80,12 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
80
80
|
parent: parent === null || parent === void 0 ? void 0 : parent.layoutInfo
|
|
81
81
|
}, reusableView.rendered);
|
|
82
82
|
}, []);
|
|
83
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
84
|
+
let persistedKeys = (0, $gF3QK$useMemo)(()=>focusedKey != null ? new Set([
|
|
85
|
+
focusedKey
|
|
86
|
+
]) : null, [
|
|
87
|
+
focusedKey
|
|
88
|
+
]);
|
|
83
89
|
return /*#__PURE__*/ (0, $gF3QK$react).createElement((0, $0c6f792811e33483$export$7ff8f37d2d81a48d).Provider, {
|
|
84
90
|
value: {
|
|
85
91
|
state: state,
|
|
@@ -91,7 +97,7 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
91
97
|
...styleProps,
|
|
92
98
|
...(0, $gF3QK$mergeProps)(listBoxProps, domProps),
|
|
93
99
|
ref: ref,
|
|
94
|
-
|
|
100
|
+
persistedKeys: persistedKeys,
|
|
95
101
|
autoFocus: !!props.autoFocus || undefined,
|
|
96
102
|
sizeToFit: "height",
|
|
97
103
|
scrollDirection: "vertical",
|
|
@@ -1 +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 {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"}
|
|
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 {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 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 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"}
|
|
@@ -10,10 +10,10 @@ $parcel$export(module.exports, "ListBoxLayout", () => $570d5c216669f686$export$c
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
class $570d5c216669f686$export$c7e5f5ea00052bf extends (0, $7VTYQ$reactstatelylayout.ListLayout) {
|
|
13
|
-
|
|
13
|
+
update(invalidationContext) {
|
|
14
14
|
var _invalidationContext_layoutOptions;
|
|
15
15
|
this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
|
|
16
|
-
super.
|
|
16
|
+
super.update(invalidationContext);
|
|
17
17
|
}
|
|
18
18
|
buildCollection() {
|
|
19
19
|
let nodes = super.buildCollection(this.padding);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAaO,MAAM,iDAAyB,CAAA,GAAA,oCAAS;IAW7C,
|
|
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
CHANGED
|
@@ -4,10 +4,10 @@ import {ListLayout as $3YKfq$ListLayout} from "@react-stately/layout";
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
7
|
-
|
|
7
|
+
update(invalidationContext) {
|
|
8
8
|
var _invalidationContext_layoutOptions;
|
|
9
9
|
this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
|
|
10
|
-
super.
|
|
10
|
+
super.update(invalidationContext);
|
|
11
11
|
}
|
|
12
12
|
buildCollection() {
|
|
13
13
|
let nodes = super.buildCollection(this.padding);
|
|
@@ -4,10 +4,10 @@ import {ListLayout as $3YKfq$ListLayout} from "@react-stately/layout";
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
7
|
-
|
|
7
|
+
update(invalidationContext) {
|
|
8
8
|
var _invalidationContext_layoutOptions;
|
|
9
9
|
this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
|
|
10
|
-
super.
|
|
10
|
+
super.update(invalidationContext);
|
|
11
11
|
}
|
|
12
12
|
buildCollection() {
|
|
13
13
|
let nodes = super.buildCollection(this.padding);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AAaO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAW7C,
|
|
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/types.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ interface ListBoxLayoutOptions extends ListLayoutOptions {
|
|
|
14
14
|
}
|
|
15
15
|
declare class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
|
|
16
16
|
constructor(opts: ListBoxLayoutOptions);
|
|
17
|
-
|
|
17
|
+
update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void;
|
|
18
18
|
protected buildCollection(): LayoutNode[];
|
|
19
19
|
protected buildSection(node: Node<T>, x: number, y: number): LayoutNode;
|
|
20
20
|
}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,kBAAkB,CAAC,GAAG,IAAI;IAK1E,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;AAuFD,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/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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/listbox",
|
|
3
|
-
"version": "3.12.10-nightly.
|
|
3
|
+
"version": "3.12.10-nightly.4701+76365df43",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,27 +36,27 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
41
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/listbox": "3.12.2-nightly.
|
|
43
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
44
|
-
"@react-aria/virtualizer": "3.10.2-nightly.
|
|
45
|
-
"@react-spectrum/layout": "3.6.6-nightly.
|
|
46
|
-
"@react-spectrum/progress": "3.0.0-nightly.
|
|
47
|
-
"@react-spectrum/text": "3.5.6-nightly.
|
|
48
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
49
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
50
|
-
"@react-stately/layout": "3.13.10-nightly.
|
|
51
|
-
"@react-stately/list": "3.10.6-nightly.
|
|
52
|
-
"@react-stately/virtualizer": "3.7.2-nightly.
|
|
53
|
-
"@react-types/listbox": "3.4.10-nightly.
|
|
54
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
55
|
-
"@spectrum-icons/ui": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/focus": "3.0.0-nightly.2989+76365df43",
|
|
40
|
+
"@react-aria/i18n": "3.0.0-nightly.2989+76365df43",
|
|
41
|
+
"@react-aria/interactions": "3.0.0-nightly.2989+76365df43",
|
|
42
|
+
"@react-aria/listbox": "3.12.2-nightly.4701+76365df43",
|
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.2989+76365df43",
|
|
44
|
+
"@react-aria/virtualizer": "3.10.2-nightly.4701+76365df43",
|
|
45
|
+
"@react-spectrum/layout": "3.6.6-nightly.4701+76365df43",
|
|
46
|
+
"@react-spectrum/progress": "3.0.0-nightly.2989+76365df43",
|
|
47
|
+
"@react-spectrum/text": "3.5.6-nightly.4701+76365df43",
|
|
48
|
+
"@react-spectrum/utils": "3.0.0-nightly.2989+76365df43",
|
|
49
|
+
"@react-stately/collections": "3.0.0-nightly.2989+76365df43",
|
|
50
|
+
"@react-stately/layout": "3.13.10-nightly.4701+76365df43",
|
|
51
|
+
"@react-stately/list": "3.10.6-nightly.4701+76365df43",
|
|
52
|
+
"@react-stately/virtualizer": "3.7.2-nightly.4701+76365df43",
|
|
53
|
+
"@react-types/listbox": "3.4.10-nightly.4701+76365df43",
|
|
54
|
+
"@react-types/shared": "3.0.0-nightly.2989+76365df43",
|
|
55
|
+
"@spectrum-icons/ui": "3.0.0-nightly.2989+76365df43",
|
|
56
56
|
"@swc/helpers": "^0.5.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
59
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2989+76365df43"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@react-spectrum/provider": "^3.2.0",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"publishConfig": {
|
|
67
67
|
"access": "public"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "76365df434b6f65b137113557ba14a32ea466c8f"
|
|
70
70
|
}
|
package/src/ListBoxBase.tsx
CHANGED
|
@@ -100,6 +100,9 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
|
|
|
100
100
|
);
|
|
101
101
|
}, []);
|
|
102
102
|
|
|
103
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
104
|
+
let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
|
|
105
|
+
|
|
103
106
|
return (
|
|
104
107
|
<ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>
|
|
105
108
|
<FocusScope>
|
|
@@ -107,7 +110,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
|
|
|
107
110
|
{...styleProps}
|
|
108
111
|
{...mergeProps(listBoxProps, domProps)}
|
|
109
112
|
ref={ref}
|
|
110
|
-
|
|
113
|
+
persistedKeys={persistedKeys}
|
|
111
114
|
autoFocus={!!props.autoFocus || undefined}
|
|
112
115
|
sizeToFit="height"
|
|
113
116
|
scrollDirection="vertical"
|
package/src/ListBoxLayout.ts
CHANGED
|
@@ -22,9 +22,9 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
|
|
|
22
22
|
this.padding = opts.padding;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {
|
|
26
26
|
this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
|
|
27
|
-
super.
|
|
27
|
+
super.update(invalidationContext);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
protected buildCollection(): LayoutNode[] {
|