@react-spectrum/listbox 3.12.10-nightly.4723 → 3.12.10-nightly.4730
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
CHANGED
|
@@ -106,7 +106,6 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7() {
|
|
|
106
106
|
ref: ref,
|
|
107
107
|
persistedKeys: persistedKeys,
|
|
108
108
|
autoFocus: !!props.autoFocus || undefined,
|
|
109
|
-
sizeToFit: "height",
|
|
110
109
|
scrollDirection: "vertical",
|
|
111
110
|
className: (0, $7w19U$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3deee0fd2b46e64f$exports))), 'spectrum-Menu', styleProps.className),
|
|
112
111
|
layout: layout,
|
|
@@ -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, 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 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, RefObject, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, useListBox} from '@react-aria/listbox';\nimport {classNames, useStyleProps} from '@react-spectrum/utils';\nimport {FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from '@react-stately/list';\nimport {mergeProps} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from '@react-stately/virtualizer';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer, VirtualizerItem} from '@react-aria/virtualizer';\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n layout: ListBoxLayout<T>,\n state: ListState<T>,\n autoFocus?: boolean | FocusStrategy,\n shouldFocusWrap?: boolean,\n shouldSelectOnPressUp?: boolean,\n focusOnPointerEnter?: boolean,\n domProps?: HTMLAttributes<HTMLElement>,\n disallowEmptySelection?: boolean,\n shouldUseVirtualFocus?: boolean,\n isLoading?: boolean,\n showLoadingSpinner?: boolean,\n onLoadMore?: () => void,\n renderEmptyState?: () => ReactNode,\n onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n let {scale} = useProvider();\n let layout = useMemo(() =>\n new ListBoxLayout<T>({\n estimatedRowHeight: scale === 'large' ? 48 : 32,\n estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n padding: scale === 'large' ? 5 : 4, // TODO: get from DNA\n placeholderHeight: scale === 'large' ? 48 : 32\n })\n , [scale]);\n\n return layout;\n}\n\n/** @private */\nfunction ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement | null>) {\n let {layout, state, shouldFocusOnHover, shouldUseVirtualFocus, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n let {listBoxProps} = useListBox({\n ...props,\n layoutDelegate: layout,\n isVirtualized: true\n }, state, ref);\n let {styleProps} = useStyleProps(props);\n\n // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n // The header is extracted from the children so it can receive ARIA labeling properties.\n type View = ReusableView<Node<T>, ReactElement>;\n let renderWrapper = useCallback((parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n if (reusableView.viewType === 'section') {\n return (\n <ListBoxSection\n key={reusableView.key}\n item={reusableView.content}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>\n {renderChildren(children.filter(c => c.viewType === 'item'))}\n </ListBoxSection>\n );\n }\n\n return (\n <VirtualizerItem\n key={reusableView.key}\n layoutInfo={reusableView.layoutInfo}\n virtualizer={reusableView.virtualizer}\n parent={parent?.layoutInfo}>\n {reusableView.rendered}\n </VirtualizerItem>\n );\n }, []);\n\n let focusedKey = state.selectionManager.focusedKey;\n let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n return (\n <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n <FocusScope>\n <Virtualizer\n {...styleProps}\n {...mergeProps(listBoxProps, domProps)}\n ref={ref}\n persistedKeys={persistedKeys}\n autoFocus={!!props.autoFocus || undefined}\n scrollDirection=\"vertical\"\n className={\n classNames(\n styles,\n 'spectrum-Menu',\n styleProps.className\n )\n }\n layout={layout}\n layoutOptions={useMemo(() => ({\n isLoading: showLoadingSpinner\n }), [showLoadingSpinner])}\n collection={state.collection}\n renderWrapper={renderWrapper}\n isLoading={isLoading}\n onLoadMore={props.onLoadMore}\n onScroll={onScroll}>\n {useCallback((type, item: Node<T>) => {\n if (type === 'item') {\n return <ListBoxOption item={item} />;\n } else if (type === 'loader') {\n return <LoadingState />;\n } else if (type === 'placeholder') {\n return <EmptyState />;\n }\n }, [])}\n </Virtualizer>\n </FocusScope>\n </ListBoxContext.Provider>\n );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _ListBoxBase = React.forwardRef(ListBoxBase) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\nexport {_ListBoxBase as ListBoxBase};\n\nfunction LoadingState() {\n let {state} = useContext(ListBoxContext);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n return (\n // aria-selected isn't needed here since this option is not selectable.\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n <div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n <ProgressCircle\n isIndeterminate\n size=\"S\"\n aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n </div>\n );\n}\n\nfunction EmptyState() {\n let {renderEmptyState} = useContext(ListBoxContext);\n let emptyState = renderEmptyState ? renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <div\n // aria-selected isn't needed here since this option is not selectable.\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"option\">\n {emptyState}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.main.js.map"}
|
package/dist/ListBoxBase.mjs
CHANGED
|
@@ -99,7 +99,6 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
99
99
|
ref: ref,
|
|
100
100
|
persistedKeys: persistedKeys,
|
|
101
101
|
autoFocus: !!props.autoFocus || undefined,
|
|
102
|
-
sizeToFit: "height",
|
|
103
102
|
scrollDirection: "vertical",
|
|
104
103
|
className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Menu', styleProps.className),
|
|
105
104
|
layout: layout,
|
|
@@ -99,7 +99,6 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
99
99
|
ref: ref,
|
|
100
100
|
persistedKeys: persistedKeys,
|
|
101
101
|
autoFocus: !!props.autoFocus || undefined,
|
|
102
|
-
sizeToFit: "height",
|
|
103
102
|
scrollDirection: "vertical",
|
|
104
103
|
className: (0, $gF3QK$classNames)((0, ($parcel$interopDefault($gF3QK$menu_vars_cssmodulejs))), 'spectrum-Menu', styleProps.className),
|
|
105
104
|
layout: layout,
|
|
@@ -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, 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 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, 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/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,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;
|
|
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;AAsFD,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;AC/GjJ;;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.4730+927758756",
|
|
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.3018+927758756",
|
|
40
|
+
"@react-aria/i18n": "3.0.0-nightly.3018+927758756",
|
|
41
|
+
"@react-aria/interactions": "3.0.0-nightly.3018+927758756",
|
|
42
|
+
"@react-aria/listbox": "3.12.2-nightly.4730+927758756",
|
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.3018+927758756",
|
|
44
|
+
"@react-aria/virtualizer": "3.10.2-nightly.4730+927758756",
|
|
45
|
+
"@react-spectrum/layout": "3.6.6-nightly.4730+927758756",
|
|
46
|
+
"@react-spectrum/progress": "3.0.0-nightly.3018+927758756",
|
|
47
|
+
"@react-spectrum/text": "3.5.6-nightly.4730+927758756",
|
|
48
|
+
"@react-spectrum/utils": "3.0.0-nightly.3018+927758756",
|
|
49
|
+
"@react-stately/collections": "3.0.0-nightly.3018+927758756",
|
|
50
|
+
"@react-stately/layout": "3.13.10-nightly.4730+927758756",
|
|
51
|
+
"@react-stately/list": "3.10.6-nightly.4730+927758756",
|
|
52
|
+
"@react-stately/virtualizer": "3.7.2-nightly.4730+927758756",
|
|
53
|
+
"@react-types/listbox": "3.4.10-nightly.4730+927758756",
|
|
54
|
+
"@react-types/shared": "3.0.0-nightly.3018+927758756",
|
|
55
|
+
"@spectrum-icons/ui": "3.0.0-nightly.3018+927758756",
|
|
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.3018+927758756"
|
|
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": "92775875627ef8a038a4708b1a7addf11809bf35"
|
|
70
70
|
}
|
package/src/ListBoxBase.tsx
CHANGED
|
@@ -112,7 +112,6 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
|
|
|
112
112
|
ref={ref}
|
|
113
113
|
persistedKeys={persistedKeys}
|
|
114
114
|
autoFocus={!!props.autoFocus || undefined}
|
|
115
|
-
sizeToFit="height"
|
|
116
115
|
scrollDirection="vertical"
|
|
117
116
|
className={
|
|
118
117
|
classNames(
|