@react-spectrum/listbox 3.14.0 → 3.14.2
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/ListBox.main.js +2 -7
- package/dist/ListBox.main.js.map +1 -1
- package/dist/ListBox.mjs +2 -7
- package/dist/ListBox.module.js +2 -7
- package/dist/ListBox.module.js.map +1 -1
- package/dist/ListBoxBase.main.js +4 -7
- package/dist/ListBoxBase.main.js.map +1 -1
- package/dist/ListBoxBase.mjs +4 -7
- package/dist/ListBoxBase.module.js +4 -7
- package/dist/ListBoxBase.module.js.map +1 -1
- package/dist/ListBoxLayout.main.js +3 -3
- package/dist/ListBoxLayout.main.js.map +1 -1
- package/dist/ListBoxLayout.mjs +3 -3
- package/dist/ListBoxLayout.module.js +3 -3
- package/dist/ListBoxLayout.module.js.map +1 -1
- package/dist/ListBoxOption.main.js +1 -1
- package/dist/ListBoxOption.mjs +1 -1
- package/dist/ListBoxOption.module.js +1 -1
- package/dist/ListBoxSection.main.js +1 -1
- package/dist/ListBoxSection.mjs +1 -1
- package/dist/ListBoxSection.module.js +1 -1
- package/dist/menu_vars_css.main.js +55 -55
- package/dist/menu_vars_css.mjs +55 -55
- package/dist/menu_vars_css.module.js +55 -55
- package/dist/types.d.ts +3 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.487ba452.css → vars.e5f333b9.css} +117 -116
- package/dist/vars.e5f333b9.css.map +1 -0
- package/package.json +19 -19
- package/src/ListBox.tsx +9 -12
- package/src/ListBoxBase.tsx +5 -8
- package/src/ListBoxLayout.ts +6 -6
- package/dist/vars.487ba452.css.map +0 -1
package/dist/ListBox.main.js
CHANGED
|
@@ -27,7 +27,7 @@ $parcel$export(module.exports, "ListBox", () => $582d86e45be55635$export$41f1335
|
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
const $582d86e45be55635$export$41f133550aa26f48 = /*#__PURE__*/ (0, ($parcel$interopDefault($kvNjb$react))).forwardRef(function ListBox(props, ref) {
|
|
31
31
|
let state = (0, $kvNjb$reactstatelylist.useListState)(props);
|
|
32
32
|
let layout = (0, $60eb4b34c53310cb$exports.useListBoxLayout)();
|
|
33
33
|
let domRef = (0, $kvNjb$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -37,12 +37,7 @@ function $582d86e45be55635$var$ListBox(props, ref) {
|
|
|
37
37
|
state: state,
|
|
38
38
|
layout: layout
|
|
39
39
|
});
|
|
40
|
-
}
|
|
41
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
42
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
43
|
-
/**
|
|
44
|
-
* A list of options that can allow selection of one or more.
|
|
45
|
-
*/ const $582d86e45be55635$export$41f133550aa26f48 = /*#__PURE__*/ (0, ($parcel$interopDefault($kvNjb$react))).forwardRef($582d86e45be55635$var$ListBox);
|
|
40
|
+
});
|
|
46
41
|
|
|
47
42
|
|
|
48
43
|
//# sourceMappingURL=ListBox.main.js.map
|
package/dist/ListBox.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAgBM,MAAM,0DAAU,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,QAA0B,KAA8B,EAAE,GAA2B;IACpI,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n let state = useListState(props);\n let layout = useListBoxLayout();\n let domRef = useDOMRef(ref);\n\n return (\n <ListBoxBase\n {...props}\n ref={domRef}\n state={state}\n layout={layout} />\n );\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.main.js.map"}
|
package/dist/ListBox.mjs
CHANGED
|
@@ -17,7 +17,7 @@ import {useListState as $7rJGh$useListState} from "@react-stately/list";
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef(function ListBox(props, ref) {
|
|
21
21
|
let state = (0, $7rJGh$useListState)(props);
|
|
22
22
|
let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)();
|
|
23
23
|
let domRef = (0, $7rJGh$useDOMRef)(ref);
|
|
@@ -27,12 +27,7 @@ function $3136257018b1a220$var$ListBox(props, ref) {
|
|
|
27
27
|
state: state,
|
|
28
28
|
layout: layout
|
|
29
29
|
});
|
|
30
|
-
}
|
|
31
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
32
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
33
|
-
/**
|
|
34
|
-
* A list of options that can allow selection of one or more.
|
|
35
|
-
*/ const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef($3136257018b1a220$var$ListBox);
|
|
30
|
+
});
|
|
36
31
|
|
|
37
32
|
|
|
38
33
|
export {$3136257018b1a220$export$41f133550aa26f48 as ListBox};
|
package/dist/ListBox.module.js
CHANGED
|
@@ -17,7 +17,7 @@ import {useListState as $7rJGh$useListState} from "@react-stately/list";
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef(function ListBox(props, ref) {
|
|
21
21
|
let state = (0, $7rJGh$useListState)(props);
|
|
22
22
|
let layout = (0, $3247d4a89e6094e9$export$25768ea656ae32a7)();
|
|
23
23
|
let domRef = (0, $7rJGh$useDOMRef)(ref);
|
|
@@ -27,12 +27,7 @@ function $3136257018b1a220$var$ListBox(props, ref) {
|
|
|
27
27
|
state: state,
|
|
28
28
|
layout: layout
|
|
29
29
|
});
|
|
30
|
-
}
|
|
31
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
32
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
33
|
-
/**
|
|
34
|
-
* A list of options that can allow selection of one or more.
|
|
35
|
-
*/ const $3136257018b1a220$export$41f133550aa26f48 = /*#__PURE__*/ (0, $7rJGh$react).forwardRef($3136257018b1a220$var$ListBox);
|
|
30
|
+
});
|
|
36
31
|
|
|
37
32
|
|
|
38
33
|
export {$3136257018b1a220$export$41f133550aa26f48 as ListBox};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
1
|
+
{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAgBM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAA0B,KAA8B,EAAE,GAA2B;IACpI,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd","sources":["packages/@react-spectrum/listbox/src/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {SpectrumListBoxProps} from '@react-types/listbox';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useListState} from '@react-stately/list';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n let state = useListState(props);\n let layout = useListBoxLayout();\n let domRef = useDOMRef(ref);\n\n return (\n <ListBoxBase\n {...props}\n ref={domRef}\n state={state}\n layout={layout} />\n );\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.module.js.map"}
|
package/dist/ListBoxBase.main.js
CHANGED
|
@@ -3,7 +3,7 @@ var $611e93c7b7c0413c$exports = require("./ListBoxContext.main.js");
|
|
|
3
3
|
var $570d5c216669f686$exports = require("./ListBoxLayout.main.js");
|
|
4
4
|
var $2205d250ee1cb1ac$exports = require("./ListBoxOption.main.js");
|
|
5
5
|
var $0f5fd8483f48ef09$exports = require("./ListBoxSection.main.js");
|
|
6
|
-
require("./vars.
|
|
6
|
+
require("./vars.e5f333b9.css");
|
|
7
7
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
8
8
|
var $7w19U$reactarialistbox = require("@react-aria/listbox");
|
|
9
9
|
var $7w19U$reactspectrumutils = require("@react-spectrum/utils");
|
|
@@ -56,14 +56,14 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7() {
|
|
|
56
56
|
let layout = (0, $7w19U$react.useMemo)(()=>new (0, $570d5c216669f686$exports.ListBoxLayout)({
|
|
57
57
|
estimatedRowHeight: scale === 'large' ? 48 : 32,
|
|
58
58
|
estimatedHeadingHeight: scale === 'large' ? 33 : 26,
|
|
59
|
-
|
|
59
|
+
paddingY: scale === 'large' ? 5 : 4,
|
|
60
60
|
placeholderHeight: scale === 'large' ? 48 : 32
|
|
61
61
|
}), [
|
|
62
62
|
scale
|
|
63
63
|
]);
|
|
64
64
|
return layout;
|
|
65
65
|
}
|
|
66
|
-
|
|
66
|
+
const $60eb4b34c53310cb$export$1afdcf349979fb7e = /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).forwardRef(function ListBoxBase(props, ref) {
|
|
67
67
|
let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover = false, shouldUseVirtualFocus: shouldUseVirtualFocus = false, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
|
|
68
68
|
let objectRef = (0, $7w19U$reactariautils.useObjectRef)(ref);
|
|
69
69
|
let { listBoxProps: listBoxProps } = (0, $7w19U$reactarialistbox.useListBox)({
|
|
@@ -129,10 +129,7 @@ function $60eb4b34c53310cb$export$25768ea656ae32a7() {
|
|
|
129
129
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).createElement($60eb4b34c53310cb$var$EmptyState, null);
|
|
130
130
|
else return null;
|
|
131
131
|
}, []))));
|
|
132
|
-
}
|
|
133
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
134
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
135
|
-
const $60eb4b34c53310cb$export$1afdcf349979fb7e = /*#__PURE__*/ (0, ($parcel$interopDefault($7w19U$react))).forwardRef($60eb4b34c53310cb$var$ListBoxBase);
|
|
132
|
+
});
|
|
136
133
|
function $60eb4b34c53310cb$var$LoadingState() {
|
|
137
134
|
let { state: state } = (0, $7w19U$react.useContext)((0, $611e93c7b7c0413c$exports.ListBoxContext));
|
|
138
135
|
let stringFormatter = (0, $7w19U$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($3d9fe9b46e2d649a$exports))), '@react-spectrum/listbox');
|
|
@@ -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, useObjectRef} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ForwardedRef, 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 extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n let objectRef = useObjectRef(ref);\n let {listBoxProps} = useListBox({\n ...props,\n layoutDelegate: layout,\n isVirtualized: true\n }, state, objectRef);\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>, ReactNode>;\n let renderWrapper = useCallback((parent: View | null, 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 ?? null}>\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={objectRef}\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>): ReactNode => {\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 } else {\n return null;\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, useObjectRef} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ForwardedRef, 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 paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n placeholderHeight: scale === 'large' ? 48 : 32\n })\n , [scale]);\n\n return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n let objectRef = useObjectRef(ref);\n let {listBoxProps} = useListBox({\n ...props,\n layoutDelegate: layout,\n isVirtualized: true\n }, state, objectRef);\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>, ReactNode>;\n let renderWrapper = useCallback((parent: View | null, 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 ?? null}>\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={objectRef}\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>): ReactNode => {\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 } else {\n return null;\n }\n }, [])}\n </Virtualizer>\n </FocusScope>\n </ListBoxContext.Provider>\n );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\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
|
@@ -3,7 +3,7 @@ import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./Lis
|
|
|
3
3
|
import {ListBoxLayout as $d20755daac213984$export$c7e5f5ea00052bf} from "./ListBoxLayout.mjs";
|
|
4
4
|
import {ListBoxOption as $86983ea1fa3f7312$export$feb3b6b552c14a12} from "./ListBoxOption.mjs";
|
|
5
5
|
import {ListBoxSection as $92d678ed88836094$export$dca12b0bb56e4fc} from "./ListBoxSection.mjs";
|
|
6
|
-
import "./vars.
|
|
6
|
+
import "./vars.e5f333b9.css";
|
|
7
7
|
import $gF3QK$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
8
8
|
import {useListBox as $gF3QK$useListBox} from "@react-aria/listbox";
|
|
9
9
|
import {useStyleProps as $gF3QK$useStyleProps, classNames as $gF3QK$classNames} from "@react-spectrum/utils";
|
|
@@ -49,14 +49,14 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
49
49
|
let layout = (0, $gF3QK$useMemo)(()=>new (0, $d20755daac213984$export$c7e5f5ea00052bf)({
|
|
50
50
|
estimatedRowHeight: scale === 'large' ? 48 : 32,
|
|
51
51
|
estimatedHeadingHeight: scale === 'large' ? 33 : 26,
|
|
52
|
-
|
|
52
|
+
paddingY: scale === 'large' ? 5 : 4,
|
|
53
53
|
placeholderHeight: scale === 'large' ? 48 : 32
|
|
54
54
|
}), [
|
|
55
55
|
scale
|
|
56
56
|
]);
|
|
57
57
|
return layout;
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef(function ListBoxBase(props, ref) {
|
|
60
60
|
let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover = false, shouldUseVirtualFocus: shouldUseVirtualFocus = false, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
|
|
61
61
|
let objectRef = (0, $gF3QK$useObjectRef)(ref);
|
|
62
62
|
let { listBoxProps: listBoxProps } = (0, $gF3QK$useListBox)({
|
|
@@ -122,10 +122,7 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
122
122
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$EmptyState, null);
|
|
123
123
|
else return null;
|
|
124
124
|
}, []))));
|
|
125
|
-
}
|
|
126
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
127
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
128
|
-
const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef($3247d4a89e6094e9$var$ListBoxBase);
|
|
125
|
+
});
|
|
129
126
|
function $3247d4a89e6094e9$var$LoadingState() {
|
|
130
127
|
let { state: state } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
|
|
131
128
|
let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
|
|
@@ -3,7 +3,7 @@ import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./Lis
|
|
|
3
3
|
import {ListBoxLayout as $d20755daac213984$export$c7e5f5ea00052bf} from "./ListBoxLayout.module.js";
|
|
4
4
|
import {ListBoxOption as $86983ea1fa3f7312$export$feb3b6b552c14a12} from "./ListBoxOption.module.js";
|
|
5
5
|
import {ListBoxSection as $92d678ed88836094$export$dca12b0bb56e4fc} from "./ListBoxSection.module.js";
|
|
6
|
-
import "./vars.
|
|
6
|
+
import "./vars.e5f333b9.css";
|
|
7
7
|
import $gF3QK$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
8
8
|
import {useListBox as $gF3QK$useListBox} from "@react-aria/listbox";
|
|
9
9
|
import {useStyleProps as $gF3QK$useStyleProps, classNames as $gF3QK$classNames} from "@react-spectrum/utils";
|
|
@@ -49,14 +49,14 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
49
49
|
let layout = (0, $gF3QK$useMemo)(()=>new (0, $d20755daac213984$export$c7e5f5ea00052bf)({
|
|
50
50
|
estimatedRowHeight: scale === 'large' ? 48 : 32,
|
|
51
51
|
estimatedHeadingHeight: scale === 'large' ? 33 : 26,
|
|
52
|
-
|
|
52
|
+
paddingY: scale === 'large' ? 5 : 4,
|
|
53
53
|
placeholderHeight: scale === 'large' ? 48 : 32
|
|
54
54
|
}), [
|
|
55
55
|
scale
|
|
56
56
|
]);
|
|
57
57
|
return layout;
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef(function ListBoxBase(props, ref) {
|
|
60
60
|
let { layout: layout, state: state, shouldFocusOnHover: shouldFocusOnHover = false, shouldUseVirtualFocus: shouldUseVirtualFocus = false, domProps: domProps = {}, isLoading: isLoading, showLoadingSpinner: showLoadingSpinner = isLoading, onScroll: onScroll, renderEmptyState: renderEmptyState } = props;
|
|
61
61
|
let objectRef = (0, $gF3QK$useObjectRef)(ref);
|
|
62
62
|
let { listBoxProps: listBoxProps } = (0, $gF3QK$useListBox)({
|
|
@@ -122,10 +122,7 @@ function $3247d4a89e6094e9$export$25768ea656ae32a7() {
|
|
|
122
122
|
else if (type === 'placeholder') return /*#__PURE__*/ (0, $gF3QK$react).createElement($3247d4a89e6094e9$var$EmptyState, null);
|
|
123
123
|
else return null;
|
|
124
124
|
}, []))));
|
|
125
|
-
}
|
|
126
|
-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
127
|
-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
128
|
-
const $3247d4a89e6094e9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $gF3QK$react).forwardRef($3247d4a89e6094e9$var$ListBoxBase);
|
|
125
|
+
});
|
|
129
126
|
function $3247d4a89e6094e9$var$LoadingState() {
|
|
130
127
|
let { state: state } = (0, $gF3QK$useContext)((0, $0c6f792811e33483$export$7ff8f37d2d81a48d));
|
|
131
128
|
let stringFormatter = (0, $gF3QK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($gF3QK$intlStringsmodulejs))), '@react-spectrum/listbox');
|
|
@@ -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, useObjectRef} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ForwardedRef, 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 extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n let objectRef = useObjectRef(ref);\n let {listBoxProps} = useListBox({\n ...props,\n layoutDelegate: layout,\n isVirtualized: true\n }, state, objectRef);\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>, ReactNode>;\n let renderWrapper = useCallback((parent: View | null, 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 ?? null}>\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={objectRef}\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>): ReactNode => {\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 } else {\n return null;\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, useObjectRef} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ForwardedRef, 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 paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n placeholderHeight: scale === 'large' ? 48 : 32\n })\n , [scale]);\n\n return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n let objectRef = useObjectRef(ref);\n let {listBoxProps} = useListBox({\n ...props,\n layoutDelegate: layout,\n isVirtualized: true\n }, state, objectRef);\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>, ReactNode>;\n let renderWrapper = useCallback((parent: View | null, 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 ?? null}>\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={objectRef}\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>): ReactNode => {\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 } else {\n return null;\n }\n }, [])}\n </Virtualizer>\n </FocusScope>\n </ListBoxContext.Provider>\n );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\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"}
|
|
@@ -16,7 +16,7 @@ class $570d5c216669f686$export$c7e5f5ea00052bf extends (0, $7VTYQ$reactstatelyla
|
|
|
16
16
|
super.update(invalidationContext);
|
|
17
17
|
}
|
|
18
18
|
buildCollection() {
|
|
19
|
-
let nodes = super.buildCollection(this.
|
|
19
|
+
let nodes = super.buildCollection(this.paddingY);
|
|
20
20
|
let y = this.contentSize.height;
|
|
21
21
|
if (this.isLoading) {
|
|
22
22
|
let rect = new (0, $7VTYQ$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, 40);
|
|
@@ -41,7 +41,7 @@ class $570d5c216669f686$export$c7e5f5ea00052bf extends (0, $7VTYQ$reactstatelyla
|
|
|
41
41
|
this.layoutNodes.set(placeholder.key, node);
|
|
42
42
|
y = placeholder.rect.maxY;
|
|
43
43
|
}
|
|
44
|
-
this.contentSize.height = y + this.
|
|
44
|
+
this.contentSize.height = y + this.paddingY;
|
|
45
45
|
return nodes;
|
|
46
46
|
}
|
|
47
47
|
buildSection(node, x, y) {
|
|
@@ -71,7 +71,7 @@ class $570d5c216669f686$export$c7e5f5ea00052bf extends (0, $7VTYQ$reactstatelyla
|
|
|
71
71
|
constructor(opts){
|
|
72
72
|
super(opts), this.isLoading = false;
|
|
73
73
|
this.placeholderHeight = opts.placeholderHeight;
|
|
74
|
-
this.
|
|
74
|
+
this.paddingY = opts.paddingY;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,QAAQ;QAC/C,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,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,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;gBACyC;YAA/D,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAC7H,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,QAAQ;QAC3C,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,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,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;IApEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;AAiEF","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 extends ListLayoutOptions {\n isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n placeholderHeight: number,\n paddingY: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n private isLoading: boolean = false;\n private placeholderHeight: number;\n private paddingY: number;\n\n constructor(opts: ListBoxLayoutOptions) {\n super(opts);\n this.placeholderHeight = opts.placeholderHeight;\n this.paddingY = opts.paddingY;\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.paddingY);\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.paddingY;\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 index: node.index,\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
|
@@ -10,7 +10,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
10
10
|
super.update(invalidationContext);
|
|
11
11
|
}
|
|
12
12
|
buildCollection() {
|
|
13
|
-
let nodes = super.buildCollection(this.
|
|
13
|
+
let nodes = super.buildCollection(this.paddingY);
|
|
14
14
|
let y = this.contentSize.height;
|
|
15
15
|
if (this.isLoading) {
|
|
16
16
|
let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, 40);
|
|
@@ -35,7 +35,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
35
35
|
this.layoutNodes.set(placeholder.key, node);
|
|
36
36
|
y = placeholder.rect.maxY;
|
|
37
37
|
}
|
|
38
|
-
this.contentSize.height = y + this.
|
|
38
|
+
this.contentSize.height = y + this.paddingY;
|
|
39
39
|
return nodes;
|
|
40
40
|
}
|
|
41
41
|
buildSection(node, x, y) {
|
|
@@ -65,7 +65,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
65
65
|
constructor(opts){
|
|
66
66
|
super(opts), this.isLoading = false;
|
|
67
67
|
this.placeholderHeight = opts.placeholderHeight;
|
|
68
|
-
this.
|
|
68
|
+
this.paddingY = opts.paddingY;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -10,7 +10,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
10
10
|
super.update(invalidationContext);
|
|
11
11
|
}
|
|
12
12
|
buildCollection() {
|
|
13
|
-
let nodes = super.buildCollection(this.
|
|
13
|
+
let nodes = super.buildCollection(this.paddingY);
|
|
14
14
|
let y = this.contentSize.height;
|
|
15
15
|
if (this.isLoading) {
|
|
16
16
|
let rect = new (0, $3YKfq$Rect)(0, y, this.virtualizer.visibleRect.width, 40);
|
|
@@ -35,7 +35,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
35
35
|
this.layoutNodes.set(placeholder.key, node);
|
|
36
36
|
y = placeholder.rect.maxY;
|
|
37
37
|
}
|
|
38
|
-
this.contentSize.height = y + this.
|
|
38
|
+
this.contentSize.height = y + this.paddingY;
|
|
39
39
|
return nodes;
|
|
40
40
|
}
|
|
41
41
|
buildSection(node, x, y) {
|
|
@@ -65,7 +65,7 @@ class $d20755daac213984$export$c7e5f5ea00052bf extends (0, $3YKfq$ListLayout) {
|
|
|
65
65
|
constructor(opts){
|
|
66
66
|
super(opts), this.isLoading = false;
|
|
67
67
|
this.placeholderHeight = opts.placeholderHeight;
|
|
68
|
-
this.
|
|
68
|
+
this.paddingY = opts.paddingY;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,QAAQ;QAC/C,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,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,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;gBACyC;YAA/D,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAC7H,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,QAAQ;QAC3C,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,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,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;IApEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;AAiEF","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 extends ListLayoutOptions {\n isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n placeholderHeight: number,\n paddingY: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n private isLoading: boolean = false;\n private placeholderHeight: number;\n private paddingY: number;\n\n constructor(opts: ListBoxLayoutOptions) {\n super(opts);\n this.placeholderHeight = opts.placeholderHeight;\n this.paddingY = opts.paddingY;\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.paddingY);\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.paddingY;\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 index: node.index,\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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $611e93c7b7c0413c$exports = require("./ListBoxContext.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.e5f333b9.css");
|
|
3
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
4
|
var $8xmxv$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
|
|
5
5
|
var $8xmxv$reactspectrumutils = require("@react-spectrum/utils");
|
package/dist/ListBoxOption.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.mjs";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.e5f333b9.css";
|
|
3
3
|
import $6TrMC$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
4
|
import $6TrMC$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
|
5
5
|
import {classNames as $6TrMC$classNames, ClearSlots as $6TrMC$ClearSlots, SlotProvider as $6TrMC$SlotProvider} from "@react-spectrum/utils";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.module.js";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.e5f333b9.css";
|
|
3
3
|
import $6TrMC$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
4
4
|
import $6TrMC$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
|
5
5
|
import {classNames as $6TrMC$classNames, ClearSlots as $6TrMC$ClearSlots, SlotProvider as $6TrMC$SlotProvider} from "@react-spectrum/utils";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var $611e93c7b7c0413c$exports = require("./ListBoxContext.main.js");
|
|
2
|
-
require("./vars.
|
|
2
|
+
require("./vars.e5f333b9.css");
|
|
3
3
|
var $3deee0fd2b46e64f$exports = require("./menu_vars_css.main.js");
|
|
4
4
|
var $cCu2p$reactspectrumutils = require("@react-spectrum/utils");
|
|
5
5
|
var $cCu2p$reactariavirtualizer = require("@react-aria/virtualizer");
|
package/dist/ListBoxSection.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.mjs";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.e5f333b9.css";
|
|
3
3
|
import $dzUX8$menu_vars_cssmodulejs from "./menu_vars_css.mjs";
|
|
4
4
|
import {classNames as $dzUX8$classNames} from "@react-spectrum/utils";
|
|
5
5
|
import {useVirtualizerItem as $dzUX8$useVirtualizerItem, layoutInfoToStyle as $dzUX8$layoutInfoToStyle} from "@react-aria/virtualizer";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ListBoxContext as $0c6f792811e33483$export$7ff8f37d2d81a48d} from "./ListBoxContext.module.js";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.e5f333b9.css";
|
|
3
3
|
import $dzUX8$menu_vars_cssmodulejs from "./menu_vars_css.module.js";
|
|
4
4
|
import {classNames as $dzUX8$classNames} from "@react-spectrum/utils";
|
|
5
5
|
import {useVirtualizerItem as $dzUX8$useVirtualizerItem, layoutInfoToStyle as $dzUX8$layoutInfoToStyle} from "@react-aria/virtualizer";
|