@react-spectrum/list 3.0.0-alpha.1 → 3.0.0-alpha.5
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/main.css +1 -1
- package/dist/main.css.map +1 -1
- package/dist/main.js +244 -82
- package/dist/main.js.map +1 -1
- package/dist/module.js +225 -78
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +10 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +30 -29
- package/src/ListView.tsx +74 -18
- package/src/ListViewItem.tsx +81 -15
- package/src/listview.css +166 -9
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-spectrum/list/src/listview.css","./packages/@react-spectrum/list/intl/ar-AE.json","./packages/@react-spectrum/list/intl/bg-BG.json","./packages/@react-spectrum/list/intl/cs-CZ.json","./packages/@react-spectrum/list/intl/da-DK.json","./packages/@react-spectrum/list/intl/de-DE.json","./packages/@react-spectrum/list/intl/el-GR.json","./packages/@react-spectrum/list/intl/en-US.json","./packages/@react-spectrum/list/intl/es-ES.json","./packages/@react-spectrum/list/intl/et-EE.json","./packages/@react-spectrum/list/intl/fi-FI.json","./packages/@react-spectrum/list/intl/fr-FR.json","./packages/@react-spectrum/list/intl/he-IL.json","./packages/@react-spectrum/list/intl/hr-HR.json","./packages/@react-spectrum/list/intl/hu-HU.json","./packages/@react-spectrum/list/intl/it-IT.json","./packages/@react-spectrum/list/intl/ja-JP.json","./packages/@react-spectrum/list/intl/ko-KR.json","./packages/@react-spectrum/list/intl/lt-LT.json","./packages/@react-spectrum/list/intl/lv-LV.json","./packages/@react-spectrum/list/intl/nb-NO.json","./packages/@react-spectrum/list/intl/nl-NL.json","./packages/@react-spectrum/list/intl/pl-PL.json","./packages/@react-spectrum/list/intl/pt-BR.json","./packages/@react-spectrum/list/intl/pt-PT.json","./packages/@react-spectrum/list/intl/ro-RO.json","./packages/@react-spectrum/list/intl/ru-RU.json","./packages/@react-spectrum/list/intl/sk-SK.json","./packages/@react-spectrum/list/intl/sl-SI.json","./packages/@react-spectrum/list/intl/sr-SP.json","./packages/@react-spectrum/list/intl/sv-SE.json","./packages/@react-spectrum/list/intl/tr-TR.json","./packages/@react-spectrum/list/intl/uk-UA.json","./packages/@react-spectrum/list/intl/zh-CN.json","./packages/@react-spectrum/list/intl/zh-TW.json","./packages/@react-spectrum/list/src/ListViewItem.tsx","./packages/@react-spectrum/list/src/ListView.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n",".react-spectrum-ListView {\n border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n border-style: solid;\n position: relative;\n border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n overflow: auto;\n vertical-align: var(--spectrum-table-cell-vertical-alignment);\n border-collapse: separate;\n border-spacing: 0;\n transform: translate3d(0, 0, 0);\n padding: 0;\n background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n outline: 0;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\n border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));\n box-sizing: border-box;\n font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n padding: var(--spectrum-global-dimension-size-125) var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));\n transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;\n position: relative;\n background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n outline: 0;\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-table-row-background-color-hover);\n }\n\n &:focus-ring {\n background-color: var(--spectrum-table-row-background-color-hover);\n box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);\n border-radius: var(--spectrum-table-cell-border-radius-key-focus);\n }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n","{\n \"loading\": \"جار التحميل...\",\n \"loadingMore\": \"جار تحميل المزيد...\"\n}\n","{\n \"loading\": \"Зареждане...\",\n \"loadingMore\": \"Зареждане на още...\"\n}\n","{\n \"loading\": \"Načítání...\",\n \"loadingMore\": \"Načítání dalších...\"\n}\n","{\n \"loading\": \"Indlæser ...\",\n \"loadingMore\": \"Indlæser flere ...\"\n}\n","{\n \"loading\": \"Laden...\",\n \"loadingMore\": \"Mehr laden ...\"\n}\n","{\n \"loading\": \"Φόρτωση...\",\n \"loadingMore\": \"Φόρτωση περισσότερων...\"\n}\n","{\n \"loading\": \"Loading…\",\n \"loadingMore\": \"Loading more…\"\n}\n","{\n \"loading\": \"Cargando…\",\n \"loadingMore\": \"Cargando más…\"\n}\n","{\n \"loading\": \"Laadimine...\",\n \"loadingMore\": \"Laadi rohkem...\"\n}\n","{\n \"loading\": \"Ladataan…\",\n \"loadingMore\": \"Ladataan lisää…\"\n}\n","{\n \"loading\": \"Chargement...\",\n \"loadingMore\": \"Chargement supplémentaire...\"\n}\n","{\n \"loading\": \"טוען...\",\n \"loadingMore\": \"טוען עוד...\"\n}\n","{\n \"loading\": \"Učitavam...\",\n \"loadingMore\": \"Učitavam još...\"\n}\n","{\n \"loading\": \"Betöltés folyamatban…\",\n \"loadingMore\": \"Továbbiak betöltése folyamatban…\"\n}\n","{\n \"loading\": \"Caricamento...\",\n \"loadingMore\": \"Caricamento altri...\"\n}\n","{\n \"loading\": \"読み込み中...\",\n \"loadingMore\": \"さらに読み込み中...\"\n}\n","{\n \"loading\": \"로드 중\",\n \"loadingMore\": \"추가 로드 중\"\n}\n","{\n \"loading\": \"Įkeliama...\",\n \"loadingMore\": \"Įkeliama daugiau...\"\n}\n","{\n \"loading\": \"Notiek ielāde...\",\n \"loadingMore\": \"Tiek ielādēts vēl...\"\n}\n","{\n \"loading\": \"Laster inn ...\",\n \"loadingMore\": \"Laster inn flere ...\"\n}\n","{\n \"loading\": \"Laden...\",\n \"loadingMore\": \"Meer laden...\"\n}\n","{\n \"loading\": \"Ładowanie...\",\n \"loadingMore\": \"Wczytywanie większej liczby...\"\n}\n","{\n \"loading\": \"Carregando...\",\n \"loadingMore\": \"Carregando mais...\"\n}\n","{\n \"loading\": \"A carregar...\",\n \"loadingMore\": \"A carregar mais...\"\n}\n","{\n \"loading\": \"Se încarcă...\",\n \"loadingMore\": \"Se încarcă mai multe...\"\n}\n","{\n \"loading\": \"Загрузка...\",\n \"loadingMore\": \"Дополнительная загрузка...\"\n}\n","{\n \"loading\": \"Načítava sa...\",\n \"loadingMore\": \"Načítava sa viac...\"\n}\n","{\n \"loading\": \"Nalaganje...\",\n \"loadingMore\": \"Nalaganje več vsebine...\"\n}\n","{\n \"loading\": \"Učitavam...\",\n \"loadingMore\": \"Učitavam još...\"\n}\n","{\n \"loading\": \"Läser in...\",\n \"loadingMore\": \"Läser in mer...\"\n}\n","{\n \"loading\": \"Yükleniyor...\",\n \"loadingMore\": \"Daha fazla yükleniyor...\"\n}\n","{\n \"loading\": \"Завантаження…\",\n \"loadingMore\": \"Завантаження інших об’єктів...\"\n}\n","{\n \"loading\": \"正在加载...\",\n \"loadingMore\": \"正在加载更多...\"\n}\n","{\n \"loading\": \"正在載入\",\n \"loadingMore\": \"正在載入更多…\"\n}\n","/*\n * Copyright 2021 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 */\nimport {classNames} from '@react-spectrum/utils';\nimport listStyles from './listview.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useRef} from 'react';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useGridCell, useGridRow} from '@react-aria/grid';\nimport {useHover} from '@react-aria/interactions';\n\n\nexport function ListViewItem(props) {\n let {\n item\n } = props;\n let {state} = useContext(ListViewContext);\n let ref = useRef<HTMLDivElement>();\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let {isFocusVisible, focusProps} = useFocusRing();\n let {hoverProps, isHovered} = useHover({});\n let {rowProps} = useGridRow({\n node: item,\n isVirtualized: true\n }, state, ref);\n let {gridCellProps} = useGridCell({\n node: item,\n focusMode: 'cell'\n }, state, ref);\n const mergedProps = mergeProps(\n gridCellProps,\n hoverProps,\n focusWithinProps,\n focusProps\n );\n\n return (\n <div {...rowProps}>\n <div\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n {\n 'is-focused': isFocusVisibleWithin,\n 'focus-ring': isFocusVisible,\n 'is-hovered': isHovered\n }\n )\n }\n ref={ref}\n {...mergedProps}>\n {item.rendered}\n </div>\n </div>\n );\n}\n","/*\n * Copyright 2021 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 */\nimport {AriaLabelingProps, CollectionBase, DOMProps, DOMRef, StyleProps} from '@react-types/shared';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {GridCollection, useGridState} from '@react-stately/grid';\nimport {GridKeyboardDelegate, useGrid} from '@react-aria/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListLayout} from '@react-stately/layout';\nimport {ListState, useListState} from '@react-stately/list';\nimport listStyles from './listview.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, useContext, useMemo} from 'react';\nimport {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer} from '@react-aria/virtualizer';\n\n\nexport const ListViewContext = React.createContext(null);\n\nexport function useListLayout<T>(state: ListState<T>) {\n let {scale} = useProvider();\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let layout = useMemo(() =>\n new ListLayout<T>({\n estimatedRowHeight: scale === 'large' ? 48 : 32,\n padding: 0,\n collator\n })\n , [collator, scale]);\n\n layout.collection = state.collection;\n layout.disabledKeys = state.disabledKeys;\n return layout;\n}\n\ninterface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps {\n isLoading?: boolean,\n renderEmptyState?: () => JSX.Element,\n transitionDuration?: number\n}\n\nfunction ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {\n transitionDuration = 0\n } = props;\n let domRef = useDOMRef(ref);\n let {collection} = useListState(props);\n let formatMessage = useMessageFormatter(intlMessages);\n\n let {styleProps} = useStyleProps(props);\n let {direction} = useLocale();\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let gridCollection = useMemo(() => new GridCollection({\n columnCount: 1,\n items: [...collection].map(item => ({\n type: 'item',\n childNodes: [{\n ...item,\n index: 0,\n type: 'cell'\n }]\n }))\n }), [collection]);\n let state = useGridState({\n ...props,\n collection: gridCollection\n });\n let layout = useListLayout(state);\n let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n ref: domRef,\n direction,\n collator,\n focusMode: 'cell'\n }), [state, domRef, direction, collator]);\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate\n }, state, domRef);\n\n // Sync loading state into the layout.\n layout.isLoading = props.isLoading;\n\n return (\n <ListViewContext.Provider value={{state, keyboardDelegate}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n ref={domRef}\n focusedKey={state.selectionManager.focusedKey}\n sizeToFit=\"height\"\n scrollDirection=\"vertical\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListView',\n styleProps.className\n )\n }\n layout={layout}\n collection={collection}\n transitionDuration={transitionDuration}>\n {(type, item) => {\n if (type === 'item') {\n return (\n <ListViewItem item={item} />\n );\n } else if (type === 'loader') {\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />\n </CenteredWrapper>\n );\n } else if (type === 'placeholder') {\n let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n }\n\n }}\n </Virtualizer>\n </ListViewContext.Provider>\n );\n}\n\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext);\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nconst _ListView = React.forwardRef(ListView) as <T>(props: ListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListView as ListView};\n"],"names":["$parcel$interopDefault","a","__esModule","default","JSON","parse","ListViewItem","props","item","state","useContext","ref","useRef","isFocusVisible","isFocusVisibleWithin","focusProps","focusWithinProps","useFocusRing","within","hoverProps","isHovered","useHover","rowProps","useGridRow","node","isVirtualized","gridCellProps","useGridCell","focusMode","mergedProps","mergeProps","classNames","rendered","ListViewContext","React","createContext","useListLayout","scale","useProvider","collator","useCollator","usage","sensitivity","layout","useMemo","ListLayout","estimatedRowHeight","padding","collection","disabledKeys","ListView","transitionDuration","domRef","useDOMRef","useListState","formatMessage","useMessageFormatter","intlMessages","styleProps","useStyleProps","direction","useLocale","gridCollection","GridCollection","columnCount","items","map","type","childNodes","index","useGridState","keyboardDelegate","GridKeyboardDelegate","gridProps","useGrid","isLoading","selectionManager","focusedKey","className","size","emptyState","renderEmptyState","CenteredWrapper","children","_ListView","forwardRef"],"version":3,"file":"module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-spectrum/list/src/listview.css","./packages/@react-spectrum/list/intl/ar-AE.json","./packages/@react-spectrum/list/intl/bg-BG.json","./packages/@react-spectrum/list/intl/cs-CZ.json","./packages/@react-spectrum/list/intl/da-DK.json","./packages/@react-spectrum/list/intl/de-DE.json","./packages/@react-spectrum/list/intl/el-GR.json","./packages/@react-spectrum/list/intl/en-US.json","./packages/@react-spectrum/list/intl/es-ES.json","./packages/@react-spectrum/list/intl/et-EE.json","./packages/@react-spectrum/list/intl/fi-FI.json","./packages/@react-spectrum/list/intl/fr-FR.json","./packages/@react-spectrum/list/intl/he-IL.json","./packages/@react-spectrum/list/intl/hr-HR.json","./packages/@react-spectrum/list/intl/hu-HU.json","./packages/@react-spectrum/list/intl/it-IT.json","./packages/@react-spectrum/list/intl/ja-JP.json","./packages/@react-spectrum/list/intl/ko-KR.json","./packages/@react-spectrum/list/intl/lt-LT.json","./packages/@react-spectrum/list/intl/lv-LV.json","./packages/@react-spectrum/list/intl/nb-NO.json","./packages/@react-spectrum/list/intl/nl-NL.json","./packages/@react-spectrum/list/intl/pl-PL.json","./packages/@react-spectrum/list/intl/pt-BR.json","./packages/@react-spectrum/list/intl/pt-PT.json","./packages/@react-spectrum/list/intl/ro-RO.json","./packages/@react-spectrum/list/intl/ru-RU.json","./packages/@react-spectrum/list/intl/sk-SK.json","./packages/@react-spectrum/list/intl/sl-SI.json","./packages/@react-spectrum/list/intl/sr-SP.json","./packages/@react-spectrum/list/intl/sv-SE.json","./packages/@react-spectrum/list/intl/tr-TR.json","./packages/@react-spectrum/list/intl/uk-UA.json","./packages/@react-spectrum/list/intl/zh-CN.json","./packages/@react-spectrum/list/intl/zh-TW.json","./packages/@react-spectrum/list/src/ListViewItem.tsx","./packages/@react-spectrum/list/src/ListView.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","\n:root {\n --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-75);\n --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n --spectrum-listview-item-start-end-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n}\n\n.react-spectrum-ListView {\n box-sizing: border-box;\n border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n border-style: solid;\n position: relative;\n border-width: var(--spectrum-listview-border-width);\n border-radius: var(--spectrum-listview-border-radius);\n overflow: auto;\n vertical-align: var(--spectrum-table-cell-vertical-alignment);\n border-collapse: separate;\n border-spacing: 0;\n transform: translate3d(0, 0, 0);\n padding: 0;\n background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n outline: 0;\n\n [role=\"row\"] {\n outline: none;\n }\n}\n\n.react-spectrum-ListView--quiet {\n background-color: var(--spectrum-alias-background-color-transparent);\n border-width: 0;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\n border: 1px solid transparent;\n border-bottom-color: var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));\n box-sizing: border-box;\n font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-150);\n transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;\n position: relative;\n /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n outline: 0;\n min-height: var(--spectrum-global-dimension-size-500);\n\n .react-spectrum-ListView--emphasized & {\n &.is-selected {\n background-color: var(--spectrum-table-row-background-color-selected);\n border-color: var(--spectrum-global-color-blue-500);\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-table-row-background-color-selected);\n }\n\n /* avoid double border for adjacent selected items */\n &.is-previous-selected { \n &:not(.is-focused) {\n border-top-color: transparent;\n }\n }\n }\n }\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-table-row-background-color-hover);\n }\n\n &:focus-ring {\n background-color: var(--spectrum-table-row-background-color-hover);\n box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);\n border-color: var(--spectrum-global-color-blue-500);\n }\n\n &.is-active {\n background-color: var(--spectrum-table-row-background-color-down);\n }\n\n &.is-selected {\n background-color: var(--spectrum-table-row-background-color-hover);\n\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-table-row-background-color-hover);\n }\n }\n\n &.has-checkbox {\n /* have to eliminate vertical padding to allow proper vertical alignment */\n padding-top: 0px;\n padding-bottom: 0px;\n }\n \n /* give first and last items border-radius to match listview container */\n div:first-child > div[role=\"row\"] > & {\n border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n div:last-child > div[role=\"row\"] > & {\n border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n min-height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n min-height: var(--spectrum-global-dimension-size-600);\n}\n\n.react-spectrum-ListViewItem-grid {\n display: grid;\n grid-template-columns: auto auto auto 1fr auto auto;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n \"checkbox icon image content actions actionmenu chevron\"\n \"checkbox icon image description actions actionmenu chevron\"\n ;\n align-items: center;\n}\n\n.react-spectrum-ListViewItem-checkbox {\n grid-area: checkbox;\n align-items: center;\n justify-items: center;\n min-height: 0;\n height: 100%;\n > span {\n margin: 0;\n }\n}\n\n.react-spectrum-ListViewItem-icon,\n.react-spectrum-ListViewItem-image {\n grid-area: image;\n align-items: center;\n justify-items: center;\n\n [dir=\"ltr\"] & {\n padding-right: var(--spectrum-global-dimension-size-100);\n }\n [dir=\"rtl\"] & {\n padding-left: var(--spectrum-global-dimension-size-100);\n }\n}\n\n.react-spectrum-ListViewItem-image {\n border-radius: var(--spectrum-global-dimension-size-25);\n width: var(--spectrum-global-dimension-size-400);\n height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListViewItem-content,\n.react-spectrum-ListViewItem-description {\n flex-grow: 1;\n}\n\n.react-spectrum-ListViewItem-content {\n grid-area: content;\n}\n\n.react-spectrum-ListViewItem-description {\n grid-area: description;\n}\n\n.react-spectrum-ListViewItem-actions {\n grid-area: actions;\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.react-spectrum-ListViewItem-actionmenu {\n grid-area: actionmenu;\n}\n\n.react-spectrum-ListView-centeredWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n.react-spectrum-ListViewItem-parentIndicator {\n grid-area: chevron;\n\n [dir=\"ltr\"] & {\n padding-left: var(--spectrum-global-dimension-size-75);\n }\n [dir=\"rtl\"] & {\n padding-right: var(--spectrum-global-dimension-size-75);\n }\n}\n","{\n \"loading\": \"جارٍ التحميل...\",\n \"loadingMore\": \"جارٍ تحميل المزيد...\"\n}\n","{\n \"loading\": \"Зареждане...\",\n \"loadingMore\": \"Зареждане на още...\"\n}\n","{\n \"loading\": \"Načítání...\",\n \"loadingMore\": \"Načítání dalších...\"\n}\n","{\n \"loading\": \"Indlæser...\",\n \"loadingMore\": \"Indlæser flere...\"\n}\n","{\n \"loading\": \"Laden...\",\n \"loadingMore\": \"Mehr laden ...\"\n}\n","{\n \"loading\": \"Φόρτωση...\",\n \"loadingMore\": \"Φόρτωση περισσότερων...\"\n}\n","{\n \"loading\": \"Loading…\",\n \"loadingMore\": \"Loading more…\"\n}\n","{\n \"loading\": \"Cargando…\",\n \"loadingMore\": \"Cargando más…\"\n}\n","{\n \"loading\": \"Laadimine...\",\n \"loadingMore\": \"Laadi rohkem...\"\n}\n","{\n \"loading\": \"Ladataan…\",\n \"loadingMore\": \"Ladataan lisää…\"\n}\n","{\n \"loading\": \"Chargement...\",\n \"loadingMore\": \"Chargement supplémentaire...\"\n}\n","{\n \"loading\": \"טוען...\",\n \"loadingMore\": \"טוען עוד...\"\n}\n","{\n \"loading\": \"Učitavam...\",\n \"loadingMore\": \"Učitavam još...\"\n}\n","{\n \"loading\": \"Betöltés folyamatban…\",\n \"loadingMore\": \"Továbbiak betöltése folyamatban…\"\n}\n","{\n \"loading\": \"Caricamento...\",\n \"loadingMore\": \"Caricamento altri...\"\n}\n","{\n \"loading\": \"読み込み中...\",\n \"loadingMore\": \"さらに読み込み中...\"\n}\n","{\n \"loading\": \"로드 중…\",\n \"loadingMore\": \"추가 로드 중…\"\n}\n","{\n \"loading\": \"Įkeliama...\",\n \"loadingMore\": \"Įkeliama daugiau...\"\n}\n","{\n \"loading\": \"Notiek ielāde...\",\n \"loadingMore\": \"Tiek ielādēts vēl...\"\n}\n","{\n \"loading\": \"Laster inn ...\",\n \"loadingMore\": \"Laster inn flere ...\"\n}\n","{\n \"loading\": \"Laden...\",\n \"loadingMore\": \"Meer laden...\"\n}\n","{\n \"loading\": \"Ładowanie...\",\n \"loadingMore\": \"Wczytywanie większej liczby...\"\n}\n","{\n \"loading\": \"Carregando...\",\n \"loadingMore\": \"Carregando mais...\"\n}\n","{\n \"loading\": \"A carregar...\",\n \"loadingMore\": \"A carregar mais...\"\n}\n","{\n \"loading\": \"Se încarcă...\",\n \"loadingMore\": \"Se încarcă mai multe...\"\n}\n","{\n \"loading\": \"Загрузка...\",\n \"loadingMore\": \"Дополнительная загрузка...\"\n}\n","{\n \"loading\": \"Načítava sa...\",\n \"loadingMore\": \"Načítava sa viac...\"\n}\n","{\n \"loading\": \"Nalaganje ...\",\n \"loadingMore\": \"Nalaganje več vsebine ...\"\n}\n","{\n \"loading\": \"Učitavam...\",\n \"loadingMore\": \"Učitavam još...\"\n}\n","{\n \"loading\": \"Läser in...\",\n \"loadingMore\": \"Läser in mer...\"\n}\n","{\n \"loading\": \"Yükleniyor...\",\n \"loadingMore\": \"Daha fazla yükleniyor...\"\n}\n","{\n \"loading\": \"Завантаження…\",\n \"loadingMore\": \"Завантаження інших об’єктів...\"\n}\n","{\n \"loading\": \"正在加载...\",\n \"loadingMore\": \"正在加载更多...\"\n}\n","{\n \"loading\": \"載入中…\",\n \"loadingMore\": \"正在載入更多…\"\n}\n","/*\n * Copyright 2021 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 */\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {Grid} from '@react-spectrum/layout';\nimport listStyles from './listview.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useRef} from 'react';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useGridCell, useGridRow, useGridSelectionCheckbox} from '@react-aria/grid';\nimport {useHover, usePress} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\n\nexport function ListViewItem(props) {\n let {\n item,\n onAction,\n isEmphasized\n } = props;\n let cellNode = [...item.childNodes][0];\n let {state} = useContext(ListViewContext);\n let {direction} = useLocale();\n let rowRef = useRef<HTMLDivElement>();\n let cellRef = useRef<HTMLDivElement>();\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let {isFocusVisible, focusProps} = useFocusRing();\n let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;\n let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {pressProps, isPressed} = usePress({isDisabled});\n let {rowProps} = useGridRow({\n node: item,\n isVirtualized: true,\n onAction: onAction ? () => onAction(item.key) : undefined\n }, state, rowRef);\n let {gridCellProps} = useGridCell({\n node: cellNode,\n focusMode: 'cell'\n }, state, cellRef);\n const mergedProps = mergeProps(\n gridCellProps,\n hoverProps,\n focusWithinProps,\n focusProps\n );\n let {checkboxProps} = useGridSelectionCheckbox({...props, key: item.key}, state);\n\n let chevron = null;\n if (item.props.hasChildItems) {\n chevron = direction === 'ltr'\n ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />\n )\n : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />\n );\n }\n\n let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';\n let isSelected = state.selectionManager.isSelected(item.key);\n return (\n <div\n {...mergeProps(rowProps, pressProps)}\n ref={rowRef}>\n <div\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem',\n {\n 'is-active': isPressed,\n 'is-focused': isFocusVisibleWithin,\n 'focus-ring': isFocusVisible,\n 'is-hovered': isHovered,\n 'is-selected': isSelected,\n 'is-previous-selected': state.selectionManager.isSelected(item.prevKey),\n 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))\n }\n )\n }\n ref={cellRef}\n {...mergedProps}>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n {showCheckbox && (\n <Checkbox\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}\n {...checkboxProps}\n isEmphasized={isEmphasized} />\n )}\n <SlotProvider\n slots={{\n content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},\n icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},\n link: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content'], isQuiet: true},\n actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},\n actionGroup: {\n UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],\n isQuiet: true,\n density: 'compact'\n },\n actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}\n }}>\n {typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}\n <ClearSlots>\n {chevron}\n </ClearSlots>\n </SlotProvider>\n </Grid>\n </div>\n </div>\n );\n}\n","/*\n * Copyright 2021 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 */\nimport {\n AriaLabelingProps,\n CollectionBase,\n DOMProps,\n DOMRef,\n LoadingState,\n MultipleSelection,\n SpectrumSelectionProps,\n StyleProps\n} from '@react-types/shared';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {GridCollection, useGridState} from '@react-stately/grid';\nimport {GridKeyboardDelegate, useGrid} from '@react-aria/grid';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListLayout} from '@react-stately/layout';\nimport {ListState, useListState} from '@react-stately/list';\nimport listStyles from './listview.css';\nimport {ListViewItem} from './ListViewItem';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ReactElement, useContext, useMemo} from 'react';\nimport {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';\nimport {useProvider} from '@react-spectrum/provider';\nimport {Virtualizer} from '@react-aria/virtualizer';\n\n\nexport const ListViewContext = React.createContext(null);\n\nconst ROW_HEIGHTS = {\n compact: {\n medium: 32,\n large: 40\n },\n regular: {\n medium: 40,\n large: 50\n },\n spacious: {\n medium: 48,\n large: 60\n }\n};\n\nexport function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>['density']) {\n let {scale} = useProvider();\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let layout = useMemo(() =>\n new ListLayout<T>({\n estimatedRowHeight: ROW_HEIGHTS[density][scale],\n padding: 0,\n collator\n })\n , [collator, scale, density]);\n\n layout.collection = state.collection;\n layout.disabledKeys = state.disabledKeys;\n return layout;\n}\n\ninterface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps {\n /**\n * Sets the amount of vertical padding within each cell.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n isQuiet?: boolean,\n loadingState?: LoadingState,\n renderEmptyState?: () => JSX.Element,\n transitionDuration?: number,\n onAction?: (key: string) => void\n}\n\nfunction ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {\n density = 'regular',\n loadingState,\n isQuiet,\n transitionDuration = 0,\n onAction\n } = props;\n let domRef = useDOMRef(ref);\n let {collection} = useListState(props);\n let formatMessage = useMessageFormatter(intlMessages);\n\n let {styleProps} = useStyleProps(props);\n let {direction} = useLocale();\n let collator = useCollator({usage: 'search', sensitivity: 'base'});\n let gridCollection = useMemo(() => new GridCollection({\n columnCount: 1,\n items: [...collection].map(item => ({\n ...item,\n hasChildNodes: true,\n childNodes: [{\n key: `cell-${item.key}`,\n type: 'cell',\n index: 0,\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue,\n hasChildNodes: false,\n childNodes: []\n }]\n }))\n }), [collection]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell',\n selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'\n });\n let layout = useListLayout(state, props.density || 'regular');\n let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\n ref: domRef,\n direction,\n collator,\n // Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any\n // focusable children in the cell.\n focusMode: 'cell'\n }), [state, domRef, direction, collator]);\n let {gridProps} = useGrid({\n ...props,\n isVirtualized: true,\n keyboardDelegate\n }, state, domRef);\n\n // Sync loading state into the layout.\n layout.isLoading = loadingState === 'loading';\n\n let focusedKey = state.selectionManager.focusedKey;\n let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);\n if (focusedItem?.parentKey != null) {\n focusedKey = focusedItem.parentKey;\n }\n\n return (\n <ListViewContext.Provider value={{state, keyboardDelegate}}>\n <Virtualizer\n {...gridProps}\n {...styleProps}\n ref={domRef}\n focusedKey={focusedKey}\n scrollDirection=\"vertical\"\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListView',\n `react-spectrum-ListView--${density}`,\n 'react-spectrum-ListView--emphasized',\n {\n 'react-spectrum-ListView--quiet': isQuiet\n },\n styleProps.className\n )\n }\n layout={layout}\n collection={gridCollection}\n transitionDuration={transitionDuration}>\n {(type, item) => {\n if (type === 'item') {\n return (\n <ListViewItem item={item} onAction={onAction} isEmphasized />\n );\n } else if (type === 'loader') {\n return (\n <CenteredWrapper>\n <ProgressCircle\n isIndeterminate\n aria-label={state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />\n </CenteredWrapper>\n );\n } else if (type === 'placeholder') {\n let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;\n if (emptyState == null) {\n return null;\n }\n\n return (\n <CenteredWrapper>\n {emptyState}\n </CenteredWrapper>\n );\n }\n\n }}\n </Virtualizer>\n </ListViewContext.Provider>\n );\n}\n\n\nfunction CenteredWrapper({children}) {\n let {state} = useContext(ListViewContext);\n return (\n <div\n role=\"row\"\n aria-rowindex={state.collection.size + 1}\n className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper')}>\n <div role=\"gridcell\">\n {children}\n </div>\n </div>\n );\n}\n\nconst _ListView = React.forwardRef(ListView) as <T>(props: ListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_ListView as ListView};\n"],"names":["$parcel$interopDefault","a","__esModule","default","JSON","parse","ListViewItem","props","item","onAction","isEmphasized","cellNode","childNodes","state","useContext","direction","useLocale","rowRef","useRef","cellRef","isFocusVisible","isFocusVisibleWithin","focusProps","focusWithinProps","useFocusRing","within","allowsInteraction","selectionManager","selectionMode","isDisabled","disabledKeys","has","key","hoverProps","isHovered","useHover","pressProps","isPressed","usePress","rowProps","useGridRow","node","isVirtualized","undefined","gridCellProps","useGridCell","focusMode","mergedProps","mergeProps","checkboxProps","useGridSelectionCheckbox","chevron","hasChildItems","showCheckbox","selectionBehavior","isSelected","classNames","prevKey","nextKey","content","UNSAFE_className","text","description","icon","size","image","link","isQuiet","actionButton","actionGroup","density","actionMenu","rendered","ListViewContext","React","createContext","ROW_HEIGHTS","compact","medium","large","regular","spacious","useListLayout","scale","useProvider","collator","useCollator","usage","sensitivity","layout","useMemo","ListLayout","estimatedRowHeight","padding","collection","ListView","ref","loadingState","transitionDuration","domRef","useDOMRef","useListState","formatMessage","useMessageFormatter","intlMessages","styleProps","useStyleProps","gridCollection","GridCollection","columnCount","items","map","hasChildNodes","type","index","value","level","textValue","useGridState","selectionStyle","keyboardDelegate","GridKeyboardDelegate","gridProps","useGrid","isLoading","focusedKey","focusedItem","getItem","parentKey","className","emptyState","renderEmptyState","CenteredWrapper","children","_ListView","forwardRef"],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
import { AriaLabelingProps, CollectionBase, DOMProps, StyleProps } from "@react-types/shared";
|
|
1
|
+
import { AriaLabelingProps, CollectionBase, DOMProps, LoadingState, MultipleSelection, SpectrumSelectionProps, StyleProps } from "@react-types/shared";
|
|
2
2
|
import React from "react";
|
|
3
|
-
interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps {
|
|
4
|
-
|
|
3
|
+
interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps {
|
|
4
|
+
/**
|
|
5
|
+
* Sets the amount of vertical padding within each cell.
|
|
6
|
+
* @default 'regular'
|
|
7
|
+
*/
|
|
8
|
+
density?: 'compact' | 'regular' | 'spacious';
|
|
9
|
+
isQuiet?: boolean;
|
|
10
|
+
loadingState?: LoadingState;
|
|
5
11
|
renderEmptyState?: () => JSX.Element;
|
|
6
12
|
transitionDuration?: number;
|
|
13
|
+
onAction?: (key: string) => void;
|
|
7
14
|
}
|
|
8
15
|
export const ListView: <T>(props: ListViewProps<T> & {
|
|
9
16
|
ref?: React.Ref<import("@react-types/shared").DOMRefValue<HTMLDivElement>>;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"A;A;
|
|
1
|
+
{"mappings":"A;A;ACsEA,wBAAwB,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB;IACtI;A;A;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAyID,OAAA,MAAM;A;6MAAuH,CAAC;ACzN9H,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC","sources":["./packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/ListViewItem.tsx","./packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/ListView.tsx","./packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/index.ts"],"sourcesContent":[null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/list",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -32,41 +32,42 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.6.2",
|
|
35
|
-
"@react-aria/focus": "^3.4.
|
|
36
|
-
"@react-aria/grid": "3.
|
|
37
|
-
"@react-aria/i18n": "^3.
|
|
38
|
-
"@react-aria/interactions": "^3.
|
|
39
|
-
"@react-aria/listbox": "^3.
|
|
40
|
-
"@react-aria/separator": "^3.1.
|
|
41
|
-
"@react-aria/utils": "^3.
|
|
42
|
-
"@react-aria/virtualizer": "^3.3.
|
|
43
|
-
"@react-spectrum/button": "^3.5.
|
|
44
|
-
"@react-spectrum/
|
|
45
|
-
"@react-spectrum/
|
|
46
|
-
"@react-spectrum/
|
|
47
|
-
"@react-spectrum/
|
|
48
|
-
"@react-spectrum/text": "^3.1.
|
|
49
|
-
"@react-spectrum/textfield": "^3.
|
|
50
|
-
"@react-spectrum/utils": "^3.6.
|
|
51
|
-
"@react-spectrum/view": "^3.1.
|
|
52
|
-
"@react-stately/collections": "^3.3.
|
|
53
|
-
"@react-stately/grid": "3.
|
|
54
|
-
"@react-stately/layout": "^3.
|
|
55
|
-
"@react-stately/list": "^3.
|
|
56
|
-
"@react-stately/virtualizer": "^3.1.
|
|
57
|
-
"@react-types/listbox": "^3.
|
|
58
|
-
"@react-types/shared": "^3.
|
|
59
|
-
"@spectrum-icons/ui": "^3.2.
|
|
35
|
+
"@react-aria/focus": "^3.4.1",
|
|
36
|
+
"@react-aria/grid": "^3.2.0",
|
|
37
|
+
"@react-aria/i18n": "^3.3.3",
|
|
38
|
+
"@react-aria/interactions": "^3.7.0",
|
|
39
|
+
"@react-aria/listbox": "^3.4.0",
|
|
40
|
+
"@react-aria/separator": "^3.1.3",
|
|
41
|
+
"@react-aria/utils": "^3.11.0",
|
|
42
|
+
"@react-aria/virtualizer": "^3.3.5",
|
|
43
|
+
"@react-spectrum/button": "^3.5.1",
|
|
44
|
+
"@react-spectrum/checkbox": "^3.2.3",
|
|
45
|
+
"@react-spectrum/layout": "^3.2.1",
|
|
46
|
+
"@react-spectrum/listbox": "^3.5.3",
|
|
47
|
+
"@react-spectrum/progress": "^3.1.3",
|
|
48
|
+
"@react-spectrum/text": "^3.1.3",
|
|
49
|
+
"@react-spectrum/textfield": "^3.3.0",
|
|
50
|
+
"@react-spectrum/utils": "^3.6.3",
|
|
51
|
+
"@react-spectrum/view": "^3.1.3",
|
|
52
|
+
"@react-stately/collections": "^3.3.4",
|
|
53
|
+
"@react-stately/grid": "^3.1.0",
|
|
54
|
+
"@react-stately/layout": "^3.4.0",
|
|
55
|
+
"@react-stately/list": "^3.4.1",
|
|
56
|
+
"@react-stately/virtualizer": "^3.1.6",
|
|
57
|
+
"@react-types/listbox": "^3.2.1",
|
|
58
|
+
"@react-types/shared": "^3.10.1",
|
|
59
|
+
"@spectrum-icons/ui": "^3.2.1"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"@react-spectrum/provider": "^3.
|
|
66
|
-
"react": "^16.8.0 || ^17.0.0-rc.1"
|
|
65
|
+
"@react-spectrum/provider": "^3.2.0",
|
|
66
|
+
"react": "^16.8.0 || ^17.0.0-rc.1",
|
|
67
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1"
|
|
67
68
|
},
|
|
68
69
|
"publishConfig": {
|
|
69
70
|
"access": "public"
|
|
70
71
|
},
|
|
71
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "45e63a00c00486cf57b457371da6f8749cd9bca4"
|
|
72
73
|
}
|
package/src/ListView.tsx
CHANGED
|
@@ -9,7 +9,16 @@
|
|
|
9
9
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
AriaLabelingProps,
|
|
14
|
+
CollectionBase,
|
|
15
|
+
DOMProps,
|
|
16
|
+
DOMRef,
|
|
17
|
+
LoadingState,
|
|
18
|
+
MultipleSelection,
|
|
19
|
+
SpectrumSelectionProps,
|
|
20
|
+
StyleProps
|
|
21
|
+
} from '@react-types/shared';
|
|
13
22
|
import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
|
|
14
23
|
import {GridCollection, useGridState} from '@react-stately/grid';
|
|
15
24
|
import {GridKeyboardDelegate, useGrid} from '@react-aria/grid';
|
|
@@ -28,31 +37,57 @@ import {Virtualizer} from '@react-aria/virtualizer';
|
|
|
28
37
|
|
|
29
38
|
export const ListViewContext = React.createContext(null);
|
|
30
39
|
|
|
31
|
-
|
|
40
|
+
const ROW_HEIGHTS = {
|
|
41
|
+
compact: {
|
|
42
|
+
medium: 32,
|
|
43
|
+
large: 40
|
|
44
|
+
},
|
|
45
|
+
regular: {
|
|
46
|
+
medium: 40,
|
|
47
|
+
large: 50
|
|
48
|
+
},
|
|
49
|
+
spacious: {
|
|
50
|
+
medium: 48,
|
|
51
|
+
large: 60
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>['density']) {
|
|
32
56
|
let {scale} = useProvider();
|
|
33
57
|
let collator = useCollator({usage: 'search', sensitivity: 'base'});
|
|
34
58
|
let layout = useMemo(() =>
|
|
35
59
|
new ListLayout<T>({
|
|
36
|
-
estimatedRowHeight: scale
|
|
60
|
+
estimatedRowHeight: ROW_HEIGHTS[density][scale],
|
|
37
61
|
padding: 0,
|
|
38
62
|
collator
|
|
39
63
|
})
|
|
40
|
-
, [collator, scale]);
|
|
64
|
+
, [collator, scale, density]);
|
|
41
65
|
|
|
42
66
|
layout.collection = state.collection;
|
|
43
67
|
layout.disabledKeys = state.disabledKeys;
|
|
44
68
|
return layout;
|
|
45
69
|
}
|
|
46
70
|
|
|
47
|
-
interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps {
|
|
48
|
-
|
|
71
|
+
interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps {
|
|
72
|
+
/**
|
|
73
|
+
* Sets the amount of vertical padding within each cell.
|
|
74
|
+
* @default 'regular'
|
|
75
|
+
*/
|
|
76
|
+
density?: 'compact' | 'regular' | 'spacious',
|
|
77
|
+
isQuiet?: boolean,
|
|
78
|
+
loadingState?: LoadingState,
|
|
49
79
|
renderEmptyState?: () => JSX.Element,
|
|
50
|
-
transitionDuration?: number
|
|
80
|
+
transitionDuration?: number,
|
|
81
|
+
onAction?: (key: string) => void
|
|
51
82
|
}
|
|
52
83
|
|
|
53
84
|
function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
|
|
54
85
|
let {
|
|
55
|
-
|
|
86
|
+
density = 'regular',
|
|
87
|
+
loadingState,
|
|
88
|
+
isQuiet,
|
|
89
|
+
transitionDuration = 0,
|
|
90
|
+
onAction
|
|
56
91
|
} = props;
|
|
57
92
|
let domRef = useDOMRef(ref);
|
|
58
93
|
let {collection} = useListState(props);
|
|
@@ -64,25 +99,36 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
|
|
|
64
99
|
let gridCollection = useMemo(() => new GridCollection({
|
|
65
100
|
columnCount: 1,
|
|
66
101
|
items: [...collection].map(item => ({
|
|
67
|
-
|
|
102
|
+
...item,
|
|
103
|
+
hasChildNodes: true,
|
|
68
104
|
childNodes: [{
|
|
69
|
-
|
|
105
|
+
key: `cell-${item.key}`,
|
|
106
|
+
type: 'cell',
|
|
70
107
|
index: 0,
|
|
71
|
-
|
|
108
|
+
value: null,
|
|
109
|
+
level: 0,
|
|
110
|
+
rendered: null,
|
|
111
|
+
textValue: item.textValue,
|
|
112
|
+
hasChildNodes: false,
|
|
113
|
+
childNodes: []
|
|
72
114
|
}]
|
|
73
115
|
}))
|
|
74
116
|
}), [collection]);
|
|
75
117
|
let state = useGridState({
|
|
76
118
|
...props,
|
|
77
|
-
collection: gridCollection
|
|
119
|
+
collection: gridCollection,
|
|
120
|
+
focusMode: 'cell',
|
|
121
|
+
selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
|
|
78
122
|
});
|
|
79
|
-
let layout = useListLayout(state);
|
|
123
|
+
let layout = useListLayout(state, props.density || 'regular');
|
|
80
124
|
let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({
|
|
81
125
|
collection: state.collection,
|
|
82
126
|
disabledKeys: state.disabledKeys,
|
|
83
127
|
ref: domRef,
|
|
84
128
|
direction,
|
|
85
129
|
collator,
|
|
130
|
+
// Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any
|
|
131
|
+
// focusable children in the cell.
|
|
86
132
|
focusMode: 'cell'
|
|
87
133
|
}), [state, domRef, direction, collator]);
|
|
88
134
|
let {gridProps} = useGrid({
|
|
@@ -92,7 +138,13 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
|
|
|
92
138
|
}, state, domRef);
|
|
93
139
|
|
|
94
140
|
// Sync loading state into the layout.
|
|
95
|
-
layout.isLoading =
|
|
141
|
+
layout.isLoading = loadingState === 'loading';
|
|
142
|
+
|
|
143
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
144
|
+
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
145
|
+
if (focusedItem?.parentKey != null) {
|
|
146
|
+
focusedKey = focusedItem.parentKey;
|
|
147
|
+
}
|
|
96
148
|
|
|
97
149
|
return (
|
|
98
150
|
<ListViewContext.Provider value={{state, keyboardDelegate}}>
|
|
@@ -100,23 +152,27 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
|
|
|
100
152
|
{...gridProps}
|
|
101
153
|
{...styleProps}
|
|
102
154
|
ref={domRef}
|
|
103
|
-
focusedKey={
|
|
104
|
-
sizeToFit="height"
|
|
155
|
+
focusedKey={focusedKey}
|
|
105
156
|
scrollDirection="vertical"
|
|
106
157
|
className={
|
|
107
158
|
classNames(
|
|
108
159
|
listStyles,
|
|
109
160
|
'react-spectrum-ListView',
|
|
161
|
+
`react-spectrum-ListView--${density}`,
|
|
162
|
+
'react-spectrum-ListView--emphasized',
|
|
163
|
+
{
|
|
164
|
+
'react-spectrum-ListView--quiet': isQuiet
|
|
165
|
+
},
|
|
110
166
|
styleProps.className
|
|
111
167
|
)
|
|
112
168
|
}
|
|
113
169
|
layout={layout}
|
|
114
|
-
collection={
|
|
170
|
+
collection={gridCollection}
|
|
115
171
|
transitionDuration={transitionDuration}>
|
|
116
172
|
{(type, item) => {
|
|
117
173
|
if (type === 'item') {
|
|
118
174
|
return (
|
|
119
|
-
<ListViewItem item={item} />
|
|
175
|
+
<ListViewItem item={item} onAction={onAction} isEmphasized />
|
|
120
176
|
);
|
|
121
177
|
} else if (type === 'loader') {
|
|
122
178
|
return (
|
package/src/ListViewItem.tsx
CHANGED
|
@@ -9,60 +9,126 @@
|
|
|
9
9
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
|
-
import {
|
|
12
|
+
import {Checkbox} from '@react-spectrum/checkbox';
|
|
13
|
+
import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
|
|
14
|
+
import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
|
|
15
|
+
import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
|
|
16
|
+
import {Content} from '@react-spectrum/view';
|
|
17
|
+
import {Grid} from '@react-spectrum/layout';
|
|
13
18
|
import listStyles from './listview.css';
|
|
14
19
|
import {ListViewContext} from './ListView';
|
|
15
20
|
import {mergeProps} from '@react-aria/utils';
|
|
16
21
|
import React, {useContext, useRef} from 'react';
|
|
17
22
|
import {useFocusRing} from '@react-aria/focus';
|
|
18
|
-
import {useGridCell, useGridRow} from '@react-aria/grid';
|
|
19
|
-
import {useHover} from '@react-aria/interactions';
|
|
20
|
-
|
|
23
|
+
import {useGridCell, useGridRow, useGridSelectionCheckbox} from '@react-aria/grid';
|
|
24
|
+
import {useHover, usePress} from '@react-aria/interactions';
|
|
25
|
+
import {useLocale} from '@react-aria/i18n';
|
|
21
26
|
|
|
22
27
|
export function ListViewItem(props) {
|
|
23
28
|
let {
|
|
24
|
-
item
|
|
29
|
+
item,
|
|
30
|
+
onAction,
|
|
31
|
+
isEmphasized
|
|
25
32
|
} = props;
|
|
33
|
+
let cellNode = [...item.childNodes][0];
|
|
26
34
|
let {state} = useContext(ListViewContext);
|
|
27
|
-
let
|
|
35
|
+
let {direction} = useLocale();
|
|
36
|
+
let rowRef = useRef<HTMLDivElement>();
|
|
37
|
+
let cellRef = useRef<HTMLDivElement>();
|
|
28
38
|
let {
|
|
29
39
|
isFocusVisible: isFocusVisibleWithin,
|
|
30
40
|
focusProps: focusWithinProps
|
|
31
41
|
} = useFocusRing({within: true});
|
|
32
42
|
let {isFocusVisible, focusProps} = useFocusRing();
|
|
33
|
-
let
|
|
43
|
+
let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
|
|
44
|
+
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
45
|
+
let {hoverProps, isHovered} = useHover({isDisabled});
|
|
46
|
+
let {pressProps, isPressed} = usePress({isDisabled});
|
|
34
47
|
let {rowProps} = useGridRow({
|
|
35
48
|
node: item,
|
|
36
|
-
isVirtualized: true
|
|
37
|
-
|
|
49
|
+
isVirtualized: true,
|
|
50
|
+
onAction: onAction ? () => onAction(item.key) : undefined
|
|
51
|
+
}, state, rowRef);
|
|
38
52
|
let {gridCellProps} = useGridCell({
|
|
39
|
-
node:
|
|
53
|
+
node: cellNode,
|
|
40
54
|
focusMode: 'cell'
|
|
41
|
-
}, state,
|
|
55
|
+
}, state, cellRef);
|
|
42
56
|
const mergedProps = mergeProps(
|
|
43
57
|
gridCellProps,
|
|
44
58
|
hoverProps,
|
|
45
59
|
focusWithinProps,
|
|
46
60
|
focusProps
|
|
47
61
|
);
|
|
62
|
+
let {checkboxProps} = useGridSelectionCheckbox({...props, key: item.key}, state);
|
|
63
|
+
|
|
64
|
+
let chevron = null;
|
|
65
|
+
if (item.props.hasChildItems) {
|
|
66
|
+
chevron = direction === 'ltr'
|
|
67
|
+
? (
|
|
68
|
+
<ChevronRightMedium
|
|
69
|
+
aria-hidden="true"
|
|
70
|
+
UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />
|
|
71
|
+
)
|
|
72
|
+
: (
|
|
73
|
+
<ChevronLeftMedium
|
|
74
|
+
aria-hidden="true"
|
|
75
|
+
UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />
|
|
76
|
+
);
|
|
77
|
+
}
|
|
48
78
|
|
|
79
|
+
let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
|
|
80
|
+
let isSelected = state.selectionManager.isSelected(item.key);
|
|
49
81
|
return (
|
|
50
|
-
<div
|
|
82
|
+
<div
|
|
83
|
+
{...mergeProps(rowProps, pressProps)}
|
|
84
|
+
ref={rowRef}>
|
|
51
85
|
<div
|
|
52
86
|
className={
|
|
53
87
|
classNames(
|
|
54
88
|
listStyles,
|
|
55
89
|
'react-spectrum-ListViewItem',
|
|
56
90
|
{
|
|
91
|
+
'is-active': isPressed,
|
|
57
92
|
'is-focused': isFocusVisibleWithin,
|
|
58
93
|
'focus-ring': isFocusVisible,
|
|
59
|
-
'is-hovered': isHovered
|
|
94
|
+
'is-hovered': isHovered,
|
|
95
|
+
'is-selected': isSelected,
|
|
96
|
+
'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
|
|
97
|
+
'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
|
|
60
98
|
}
|
|
61
99
|
)
|
|
62
100
|
}
|
|
63
|
-
ref={
|
|
101
|
+
ref={cellRef}
|
|
64
102
|
{...mergedProps}>
|
|
65
|
-
{
|
|
103
|
+
<Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
|
|
104
|
+
{showCheckbox && (
|
|
105
|
+
<Checkbox
|
|
106
|
+
UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
|
|
107
|
+
{...checkboxProps}
|
|
108
|
+
isEmphasized={isEmphasized} />
|
|
109
|
+
)}
|
|
110
|
+
<SlotProvider
|
|
111
|
+
slots={{
|
|
112
|
+
content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
|
|
113
|
+
text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
|
|
114
|
+
description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},
|
|
115
|
+
icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
|
|
116
|
+
image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
|
|
117
|
+
link: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content'], isQuiet: true},
|
|
118
|
+
actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
|
|
119
|
+
actionGroup: {
|
|
120
|
+
UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],
|
|
121
|
+
isQuiet: true,
|
|
122
|
+
density: 'compact'
|
|
123
|
+
},
|
|
124
|
+
actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
|
|
125
|
+
}}>
|
|
126
|
+
{typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}
|
|
127
|
+
<ClearSlots>
|
|
128
|
+
{chevron}
|
|
129
|
+
</ClearSlots>
|
|
130
|
+
</SlotProvider>
|
|
131
|
+
</Grid>
|
|
66
132
|
</div>
|
|
67
133
|
</div>
|
|
68
134
|
);
|