@react-spectrum/list 3.8.2 → 3.9.0
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/LICENSE +201 -0
- package/dist/DragPreview.main.js.map +1 -1
- package/dist/DragPreview.module.js.map +1 -1
- package/dist/InsertionIndicator.main.js +1 -1
- package/dist/InsertionIndicator.main.js.map +1 -1
- package/dist/InsertionIndicator.mjs +1 -1
- package/dist/InsertionIndicator.module.js +1 -1
- package/dist/InsertionIndicator.module.js.map +1 -1
- package/dist/ListView.main.js +15 -11
- package/dist/ListView.main.js.map +1 -1
- package/dist/ListView.mjs +15 -11
- package/dist/ListView.module.js +15 -11
- package/dist/ListView.module.js.map +1 -1
- package/dist/ListViewItem.main.js +20 -27
- package/dist/ListViewItem.main.js.map +1 -1
- package/dist/ListViewItem.mjs +20 -27
- package/dist/ListViewItem.module.js +20 -27
- package/dist/ListViewItem.module.js.map +1 -1
- package/dist/ListViewLayout.main.js +3 -3
- package/dist/ListViewLayout.main.js.map +1 -1
- package/dist/ListViewLayout.mjs +3 -3
- package/dist/ListViewLayout.module.js +3 -3
- package/dist/ListViewLayout.module.js.map +1 -1
- package/dist/RootDropIndicator.main.js +1 -1
- package/dist/RootDropIndicator.main.js.map +1 -1
- package/dist/RootDropIndicator.mjs +1 -1
- package/dist/RootDropIndicator.module.js +1 -1
- package/dist/RootDropIndicator.module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +28 -27
- package/src/InsertionIndicator.tsx +4 -4
- package/src/ListView.tsx +32 -26
- package/src/ListViewItem.tsx +28 -29
- package/src/ListViewLayout.ts +2 -2
- package/src/RootDropIndicator.tsx +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;AA6BM,SAAS,0CAAgB,KAA2B;QAyHnD,wBAAmC;IAxHzC,IAAI,QACF,IAAI,gBACJ,YAAY,EACb,GAAG;IACJ,IAAI,SACF,KAAK,aACL,SAAS,aACT,SAAS,mBACT,eAAe,mBACf,eAAe,UACf,MAAM,oBACN,gBAAgB,gBAChB,YAAY,EACb,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7B,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,qBAAqB,CAAA,GAAA,aAAK,EAAkB;IAChD,IAAI,EACF,gBAAgB,oBAAoB,EACpC,YAAY,gBAAgB,EAC7B,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,QAAQ;IAAI;IAC9B,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW;IAC9C,IAAI,YACF,QAAQ,iBACR,aAAa,aACb,SAAS,oBACT,gBAAgB,cAChB,UAAU,cACV,UAAU,mBACV,eAAe,aACf,SAAS,EACV,GAAG,CAAA,GAAA,sBAAc,EAAE;QAClB,MAAM;QACN,eAAe;QACf,uBAAuB;IACzB,GAAG,OAAO;IACV,IAAI,cAAc,mBAAmB,CAAC;IACtC,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAAC,YAAY,CAAC,mBAAmB,CAAC;IAAS;IAElF,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,mCAA2B,EAAE;QAAC,KAAK,KAAK,GAAG;IAAA,GAAG;IACpE,IAAI,iBAAiB,CAAA,GAAA,kBAAU,EAAE,CAAC,CAAC,EAAE,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C,CAAC,CAAC,EAAE;IAE9F,IAAI;IACJ,IAAI,iBAAiB;QACnB,sDAAsD;QACtD,gBAAgB,iBAAiB,gBAAgB,CAAC;YAAC,KAAK,KAAK,GAAG;YAAE,eAAe;QAAI,GAAG;QACxF,IAAI,YACF,gBAAgB;IAEpB;IACA,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI,mBAAmB,CAAA,GAAA,aAAK,EAAE;IAC9B,IAAI,iBAAiB;QACnB,IAAI,SAAS;YAAC,MAAM;YAAQ,KAAK,KAAK,GAAG;YAAE,cAAc;QAAI;QAC7D,eAAe,UAAU,YAAY,CAAC;QACtC,sDAAsD;QACtD,gBAAgB,iBAAiB,gBAAgB,CAAC;oBAAC;QAAM,GAAG,WAAW;IACzE;IAEA,IAAI,gBAAgB,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC;IACjC,IAAI,eAAC,WAAW,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE;WACzB,0BAAA,oCAAA,cAAe,eAAe,AAAjC;QACA,aAAa;IACf,GAAG;IAEH,IAAI,UAAU,cAAc,sBAExB,gCAAC,CAAA,GAAA,wCAAiB;QAChB,eAAY;QACZ,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+CACA;YACE,8DAA8D,KAAK,KAAK,CAAC,aAAa;YACtF,eAAe,CAAC;QAClB;uBAKN,gCAAC,CAAA,GAAA,uCAAgB;QACf,eAAY;QACZ,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+CACA;YACE,8DAA8D,KAAK,KAAK,CAAC,aAAa;YACtF,eAAe,CAAC;QAClB;;IAKV,IAAI,eAAe,MAAM,gBAAgB,CAAC,aAAa,KAAK,UAAU,MAAM,gBAAgB,CAAC,iBAAiB,KAAK;IACnH,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,IAAI,YAAY,cAAc,0BAAA,oCAAA,cAAe,SAAS,GAAG;QAAC,aAAa,EAAE,0BAAA,oCAAA,cAAe,SAAS,CAAC,cAAc;IAAA;IAChH,MAAM,cAAc,CAAA,GAAA,iBAAS,EAC3B,UACA,0BAAA,oCAAA,cAAe,SAAS,EACxB,WACA,YACA,kBACA,YACA,kHAAkH;IAClH,kEAAkE;IAClE,CAAA,6BAAA,uCAAA,iBAAkB,iBAAiB,OAAM;QAAC,UAAU;IAAI;IAG1D,IAAI,aAAa,KAAK,OAAO,IAAI;IACjC,IAAI,YAAY,KAAK,OAAO,IAAI;IAChC,2HAA2H;IAC3H,oIAAoI;IACpI,qBAAqB;IACrB,IAAI,6BAA6B;IACjC,IAAI,aAAa,iBAAiB,eAChC;QAAA,IAAI,EAAA,yBAAA,OAAO,cAAc,gBAArB,6CAAA,uBAAyB,MAAM,OAAI,sBAAA,OAAO,WAAW,cAAlB,0CAAA,oBAAoB,WAAW,CAAC,MAAM,GAC3E,6BAA6B;IAC/B;IAEF,+BAA+B;IAC/B,qIAAqI;IACrI,IAAI,YAAa,CAAC,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,OAAO,KAC1D,CAAA,MAAM,gBAAgB,CAAC,UAAU,KAAK,KAAK,OAAO,IAAI,CAAE,CAAA,CAAA,GAAA,qBAAmB,OAAO,MAAM,gBAAgB,CAAC,SAAS,AAAD,CAAC;IACxH,IAAI,eAAgB,CAAC,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,OAAO,KAC7D,CAAA,MAAM,gBAAgB,CAAC,UAAU,KAAK,KAAK,OAAO,IAAI,CAAE,CAAA,CAAA,GAAA,qBAAmB,OAAO,MAAM,gBAAgB,CAAC,SAAS,AAAD,CAAC;IAExH,IAAI,UAAU,OAAO,KAAK,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,WAAG,SAAG,KAAK,QAAQ,IAAW,KAAK,QAAQ;IAC9F,IAAI,YACF,wBAAU,gCAAC,CAAA,GAAA,eAAO;QAAE,YAAA;OAAY;IAGlC,qBACE,gCAAC;QACE,GAAG,WAAW;QACf,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA;YACE,cAAc;YACd,cACE,aAAc,aAAa,CAAC,cAAc,MAAM,gBAAgB,CAAC,UAAU,KAAK,KAAK,GAAG;YAC1F,iBACE,gBAAiB,aAAa,CAAC,cAAc,MAAM,gBAAgB,CAAC,UAAU,KAAK,KAAK,GAAG;QAC/F;QAGJ,KAAK;qBACL,gCAAC;QACC,gEAAgE;QAChE,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT,+BACA;YACE,aAAa;YACb,cAAc;YACd,cAAc;YACd,cAAc;YACd,eAAe;YACf,eAAe;YACf,oBAAoB,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,OAAO;YAClE,oBAAoB,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,OAAO;YAClE,mDAAmD,MAAM,gBAAgB,CAAC,iBAAiB,KAAK,aAAc,CAAA,cAAc,MAAM,gBAAgB,CAAC,UAAU,CAAC,KAAK,OAAO,CAAA;YAC1K,2CAA2C,CAAC,CAAC;YAC7C,yCAAyC;YACzC,wCAAwC;YACxC,8CAA8C;YAC9C,+CAA+C;QACjD;QAGH,GAAG,aAAa;qBACjB,gCAAC,CAAA,GAAA,WAAG;QAAE,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,mCAAmC;OACnE,iCACC,gCAAC;QAAI,WAAW,CAAA,GAAA,mDAAS,CAAC,CAAC,mDAAmD;OAC3E,CAAC,4BACA,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAS,GAAG;qBAChD,gCAAC;QACE,GAAG,WAAW;QACf,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,mDAAS,GACT;QAGJ,OAAO,CAAC,uBAAuB;YAAC,GAAG,oBAAoB,KAAK;QAAA,IAAI,CAAC;QACjE,KAAK;QACL,WAAU;qBACV,gCAAC,CAAA,GAAA,iCAAU,aAMpB,mBAAmB,EAAC,0BAAA,oCAAA,cAAe,QAAQ,mBAC1C,gCAAC;QAAI,MAAK;QAAU,GAAG,mBAAmB;WAAM,0BAAA,oCAAA,cAAe,kBAAkB,AAApC;QAAsC,KAAK;sBAE1F,gCAAC,CAAA,GAAA,oBAAY;QACX,IAAI;QACJ,eAAA;QACA,YAAY;YACV,OAAO,CAAA,GAAA,mDAAS,CAAC,CAAC,8CAA8C;YAChE,aAAa,CAAA,GAAA,mDAAS,CAAC,CAAC,oDAAoD;YAC5E,MAAM,CAAA,GAAA,mDAAS,CAAC,CAAC,6CAA6C;YAC9D,YAAY,CAAA,GAAA,mDAAS,CAAC,CAAC,mDAAmD;QAC5E;QACA,SAAS;QACT,SAAS;qBACT,gCAAC;QAAI,KAAK;QAAoB,WAAW,CAAA,GAAA,mDAAS,CAAC,CAAC,8CAA8C;qBAChG,gCAAC,CAAA,GAAA,eAAO;QACL,GAAG,aAAa;QACjB,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,uCAAuC;QACpE,cAAc;wBAGpB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;YAAA;YAC1E,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,0CAA0C;gBAAE,GAAG,gBAAgB;YAAA;YAC1G,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YACpF,OAAO;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,wCAAwC;YAAA;YAC7E,cAAc;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBAAE,SAAS;YAAI;YACjG,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,sCAAsC;gBACnE,SAAS;gBACT,SAAS;YACX;YACA,YAAY;gBAAC,kBAAkB,CAAA,GAAA,mDAAS,CAAC,CAAC,yCAAyC;gBAAE,SAAS;YAAI;QACpG;OACC,uBACD,gCAAC,CAAA,GAAA,iBAAS,SACP;AAOf","sources":["packages/@react-spectrum/list/src/ListViewItem.tsx"],"sourcesContent":["/*\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, useHasChild} from '@react-spectrum/utils';\nimport {CSSTransition} from 'react-transition-group';\nimport type {DraggableItemResult, DropIndicatorAria, DroppableItemResult} from '@react-aria/dnd';\nimport {DropTarget, Node} from '@react-types/shared';\nimport {FocusRing, useFocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport {isFocusVisible as isGlobalFocusVisible, useHover} from '@react-aria/interactions';\nimport ListGripper from '@spectrum-icons/ui/ListGripper';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useContext, useRef} from 'react';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface ListViewItemProps<T> {\n item: Node<T>,\n isEmphasized: boolean,\n hasActions: boolean\n}\n\nexport function ListViewItem<T>(props: ListViewItemProps<T>) {\n let {\n item,\n isEmphasized\n } = props;\n let {\n state,\n dragState,\n dropState,\n isListDraggable,\n isListDroppable,\n layout,\n dragAndDropHooks,\n loadingState\n } = useContext(ListViewContext);\n let {direction} = useLocale();\n let rowRef = useRef<HTMLDivElement>(undefined);\n let checkboxWrapperRef = useRef<HTMLDivElement>(undefined);\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let {isFocusVisible, focusProps} = useFocusRing();\n let {\n rowProps,\n gridCellProps,\n isPressed,\n descriptionProps,\n isSelected,\n isDisabled,\n allowsSelection,\n hasAction\n } = useGridListItem({\n node: item,\n isVirtualized: true,\n shouldSelectOnPressUp: isListDraggable\n }, state, rowRef);\n let isDroppable = isListDroppable && !isDisabled;\n let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});\n\n let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);\n let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);\n\n let draggableItem: DraggableItemResult;\n if (isListDraggable) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);\n if (isDisabled) {\n draggableItem = null;\n }\n }\n let droppableItem: DroppableItemResult;\n let isDropTarget: boolean;\n let dropIndicator: DropIndicatorAria;\n let dropIndicatorRef = useRef(undefined);\n if (isListDroppable) {\n let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;\n isDropTarget = dropState.isDropTarget(target);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);\n }\n\n let dragButtonRef = React.useRef(undefined);\n let {buttonProps} = useButton({\n ...draggableItem?.dragButtonProps,\n elementType: 'div'\n }, dragButtonRef);\n\n let chevron = direction === 'ltr'\n ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n )\n : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n );\n\n let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n let dropProps = isDroppable ? droppableItem?.dropProps : {'aria-hidden': droppableItem?.dropProps['aria-hidden']};\n const mergedProps = mergeProps(\n rowProps,\n draggableItem?.dragProps,\n dropProps,\n hoverProps,\n focusWithinProps,\n focusProps,\n // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,\n // allowing for single swipe navigation between row drop indicator\n dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}\n );\n\n let isFirstRow = item.prevKey == null;\n let isLastRow = item.nextKey == null;\n // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom\n // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap\n // with bottom border\n let isFlushWithContainerBottom = false;\n if (isLastRow && loadingState !== 'loadingMore') {\n if (layout.getContentSize()?.height >= layout.virtualizer?.visibleRect.height) {\n isFlushWithContainerBottom = true;\n }\n }\n // previous item isn't selected\n // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview\n let roundTops = (!state.selectionManager.isSelected(item.prevKey)\n && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n let roundBottoms = (!state.selectionManager.isSelected(item.nextKey)\n && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n\n let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;\n if (isDisabled) {\n content = <Provider isDisabled>{content}</Provider>;\n }\n\n return (\n <div\n {...mergedProps}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListView-row',\n {\n 'focus-ring': isFocusVisible,\n 'round-tops':\n roundTops || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key),\n 'round-bottoms':\n roundBottoms || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key)\n }\n )\n }\n ref={rowRef}>\n <div\n // TODO: refactor the css here now that we are focusing the row?\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-disabled': isDisabled,\n 'is-prev-selected': state.selectionManager.isSelected(item.prevKey),\n 'is-next-selected': state.selectionManager.isSelected(item.nextKey),\n 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),\n 'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,\n 'react-spectrum-ListViewItem--firstRow': isFirstRow,\n 'react-spectrum-ListViewItem--lastRow': isLastRow,\n 'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,\n 'react-spectrum-ListViewItem--hasDescription': hasDescription\n }\n )\n }\n {...gridCellProps}>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n {isListDraggable &&\n <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>\n {!isDisabled &&\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <div\n {...buttonProps as React.HTMLAttributes<HTMLElement>}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-draghandle-button'\n )\n }\n style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}\n ref={dragButtonRef}\n draggable=\"true\">\n <ListGripper />\n </div>\n </FocusRing>\n }\n </div>\n }\n {isListDroppable && !dropIndicator?.isHidden &&\n <div role=\"button\" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />\n }\n <CSSTransition\n in={showCheckbox}\n unmountOnExit\n classNames={{\n enter: listStyles['react-spectrum-ListViewItem-checkbox--enter'],\n enterActive: listStyles['react-spectrum-ListViewItem-checkbox--enterActive'],\n exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],\n exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']\n }}\n timeout={160}\n nodeRef={checkboxWrapperRef} >\n <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>\n <Checkbox\n {...checkboxProps}\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}\n isEmphasized={isEmphasized} />\n </div>\n </CSSTransition>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\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 {content}\n <ClearSlots>\n {chevron}\n </ClearSlots>\n </SlotProvider>\n </Grid>\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListViewItem.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/list/src/ListViewItem.tsx"],"sourcesContent":["/*\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, useHasChild} from '@react-spectrum/utils';\nimport {CSSTransition} from 'react-transition-group';\nimport type {DraggableItemResult, DropIndicatorAria} from '@react-aria/dnd';\nimport {DropTarget, Node} from '@react-types/shared';\nimport {FocusRing, useFocusRing} from '@react-aria/focus';\nimport {Grid} from '@react-spectrum/layout';\nimport {isFocusVisible as isGlobalFocusVisible, useHover} from '@react-aria/interactions';\nimport ListGripper from '@spectrum-icons/ui/ListGripper';\nimport listStyles from './styles.css';\nimport {ListViewContext} from './ListView';\nimport {mergeProps} from '@react-aria/utils';\nimport {Provider} from '@react-spectrum/provider';\nimport React, {useContext, useRef} from 'react';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';\nimport {useLocale} from '@react-aria/i18n';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface ListViewItemProps<T> {\n item: Node<T>,\n isEmphasized: boolean,\n hasActions: boolean\n}\n\nexport function ListViewItem<T>(props: ListViewItemProps<T>) {\n let {\n item,\n isEmphasized\n } = props;\n let {\n state,\n dragState,\n dropState,\n isListDraggable,\n isListDroppable,\n layout,\n dragAndDropHooks,\n loadingState\n } = useContext(ListViewContext)!;\n let {direction} = useLocale();\n let rowRef = useRef<HTMLDivElement | null>(null);\n let checkboxWrapperRef = useRef<HTMLDivElement | null>(null);\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let {isFocusVisible, focusProps} = useFocusRing();\n let {\n rowProps,\n gridCellProps,\n isPressed,\n descriptionProps,\n isSelected,\n isDisabled,\n allowsSelection,\n hasAction\n } = useGridListItem({\n node: item,\n isVirtualized: true,\n shouldSelectOnPressUp: isListDraggable\n }, state, rowRef);\n let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});\n\n let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);\n let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);\n\n let draggableItem: DraggableItemResult | null = null;\n if (isListDraggable && dragAndDropHooks && dragState) {\n \n draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);\n if (isDisabled) {\n draggableItem = null;\n }\n }\n let isDropTarget = false;\n let dropIndicator: DropIndicatorAria | null = null;\n let dropIndicatorRef = useRef<HTMLDivElement | null>(null);\n if (isListDroppable && dragAndDropHooks && dropState) {\n let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;\n isDropTarget = dropState.isDropTarget(target);\n \n dropIndicator = dragAndDropHooks.useDropIndicator!({target}, dropState, dropIndicatorRef);\n }\n\n let dragButtonRef = React.useRef<HTMLDivElement | null>(null);\n let {buttonProps} = useButton({\n ...draggableItem?.dragButtonProps,\n elementType: 'div'\n }, dragButtonRef);\n\n let chevron = direction === 'ltr'\n ? (\n <ChevronRightMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n )\n : (\n <ChevronLeftMedium\n aria-hidden=\"true\"\n UNSAFE_className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-parentIndicator',\n {\n 'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,\n 'is-disabled': !hasAction\n }\n )\n } />\n );\n\n let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n const mergedProps = mergeProps(\n rowProps,\n draggableItem?.dragProps,\n hoverProps,\n focusWithinProps,\n focusProps\n );\n \n // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,\n // allowing for single swipe navigation between row drop indicator\n if (dragAndDropHooks?.isVirtualDragging?.()) {\n mergedProps.tabIndex = undefined;\n }\n\n let isFirstRow = item.prevKey == null;\n let isLastRow = item.nextKey == null;\n // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom\n // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap\n // with bottom border\n let isFlushWithContainerBottom = false;\n if (isLastRow && loadingState !== 'loadingMore') {\n if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {\n isFlushWithContainerBottom = true;\n }\n }\n // previous item isn't selected\n // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview\n let roundTops = (!(item.prevKey != null && state.selectionManager.isSelected(item.prevKey))\n && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n let roundBottoms = (!(item.nextKey != null && state.selectionManager.isSelected(item.nextKey))\n && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));\n\n let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;\n if (isDisabled) {\n content = <Provider isDisabled>{content}</Provider>;\n }\n\n return (\n <div\n {...mergedProps}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListView-row',\n {\n 'focus-ring': isFocusVisible,\n 'round-tops':\n roundTops || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key),\n 'round-bottoms':\n roundBottoms || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key)\n }\n )\n }\n ref={rowRef}>\n <div\n // TODO: refactor the css here now that we are focusing the row?\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-disabled': isDisabled,\n 'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),\n 'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),\n 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || (item.nextKey != null && state.selectionManager.isSelected(item.nextKey))),\n 'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,\n 'react-spectrum-ListViewItem--firstRow': isFirstRow,\n 'react-spectrum-ListViewItem--lastRow': isLastRow,\n 'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,\n 'react-spectrum-ListViewItem--hasDescription': hasDescription\n }\n )\n }\n {...gridCellProps}>\n <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>\n {isListDraggable &&\n <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>\n {!isDisabled &&\n <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>\n <div\n {...buttonProps as React.HTMLAttributes<HTMLElement>}\n className={\n classNames(\n listStyles,\n 'react-spectrum-ListViewItem-draghandle-button'\n )\n }\n style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}\n ref={dragButtonRef}\n draggable=\"true\">\n <ListGripper />\n </div>\n </FocusRing>\n }\n </div>\n }\n {isListDroppable && !dropIndicator?.isHidden &&\n <div role=\"button\" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />\n }\n <CSSTransition\n in={showCheckbox}\n unmountOnExit\n classNames={{\n enter: listStyles['react-spectrum-ListViewItem-checkbox--enter'],\n enterActive: listStyles['react-spectrum-ListViewItem-checkbox--enterActive'],\n exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],\n exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']\n }}\n timeout={160}\n nodeRef={checkboxWrapperRef} >\n <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>\n <Checkbox\n {...checkboxProps}\n UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}\n isEmphasized={isEmphasized} />\n </div>\n </CSSTransition>\n <SlotProvider\n slots={{\n text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},\n description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},\n illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\n image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},\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 {content}\n <ClearSlots>\n {chevron}\n </ClearSlots>\n </SlotProvider>\n </Grid>\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"ListViewItem.module.js.map"}
|
|
@@ -29,7 +29,8 @@ class $a0cb8c9f009bf274$export$dab781655dfbb7d3 extends (0, $gyQtY$reactstatelyl
|
|
|
29
29
|
let nodes = super.buildCollection();
|
|
30
30
|
let y = this.contentSize.height;
|
|
31
31
|
if (this.isLoading) {
|
|
32
|
-
|
|
32
|
+
var _this_estimatedRowHeight;
|
|
33
|
+
let rect = new (0, $gyQtY$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : (_this_estimatedRowHeight = this.estimatedRowHeight) !== null && _this_estimatedRowHeight !== void 0 ? _this_estimatedRowHeight : 48);
|
|
33
34
|
let loader = new (0, $gyQtY$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
|
|
34
35
|
let node = {
|
|
35
36
|
layoutInfo: loader,
|
|
@@ -60,8 +61,7 @@ class $a0cb8c9f009bf274$export$dab781655dfbb7d3 extends (0, $gyQtY$reactstatelyl
|
|
|
60
61
|
return res;
|
|
61
62
|
}
|
|
62
63
|
constructor(...args){
|
|
63
|
-
super(...args);
|
|
64
|
-
this.isLoading = false;
|
|
64
|
+
super(...args), this.isLoading = false;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,oCAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;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;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,oCAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;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;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;gBACyG;YAA3H,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM,GAAG,CAAA,2BAAA,IAAI,CAAC,kBAAkB,cAAvB,sCAAA,2BAA2B;YACtJ,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;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,mCAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YACnG,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;QAC1B,OAAO;IACT;IAEU,UAAU,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACnE,IAAI,MAAM,KAAK,CAAC,UAAU,MAAM,GAAG;QACnC,gHAAgH;QAChH,IAAI,UAAU,CAAC,aAAa,GAAG;QAC/B,OAAO;IACT;;6BA5CQ,YAAqB;;AA6C/B","sources":["packages/@react-spectrum/list/src/ListViewLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListViewLayoutProps {\n isLoading?: boolean\n}\n\nexport class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {\n private isLoading: boolean = false;\n\n update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {\n this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n super.update(invalidationContext);\n }\n\n protected buildCollection(): LayoutNode[] {\n let nodes = super.buildCollection();\n let y = this.contentSize.height;\n\n if (this.isLoading) {\n let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, nodes.length === 0 ? this.virtualizer!.visibleRect.height : this.estimatedRowHeight ?? 48);\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.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;\n return nodes;\n }\n\n protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {\n let res = super.buildItem(node, x, y);\n // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders\n res.layoutInfo.allowOverflow = true;\n return res;\n }\n}\n"],"names":[],"version":3,"file":"ListViewLayout.main.js.map"}
|
package/dist/ListViewLayout.mjs
CHANGED
|
@@ -23,7 +23,8 @@ class $bc6cc67dd6240ebd$export$dab781655dfbb7d3 extends (0, $9jo3j$ListLayout) {
|
|
|
23
23
|
let nodes = super.buildCollection();
|
|
24
24
|
let y = this.contentSize.height;
|
|
25
25
|
if (this.isLoading) {
|
|
26
|
-
|
|
26
|
+
var _this_estimatedRowHeight;
|
|
27
|
+
let rect = new (0, $9jo3j$Rect)(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : (_this_estimatedRowHeight = this.estimatedRowHeight) !== null && _this_estimatedRowHeight !== void 0 ? _this_estimatedRowHeight : 48);
|
|
27
28
|
let loader = new (0, $9jo3j$LayoutInfo)('loader', 'loader', rect);
|
|
28
29
|
let node = {
|
|
29
30
|
layoutInfo: loader,
|
|
@@ -54,8 +55,7 @@ class $bc6cc67dd6240ebd$export$dab781655dfbb7d3 extends (0, $9jo3j$ListLayout) {
|
|
|
54
55
|
return res;
|
|
55
56
|
}
|
|
56
57
|
constructor(...args){
|
|
57
|
-
super(...args);
|
|
58
|
-
this.isLoading = false;
|
|
58
|
+
super(...args), this.isLoading = false;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -23,7 +23,8 @@ class $bc6cc67dd6240ebd$export$dab781655dfbb7d3 extends (0, $9jo3j$ListLayout) {
|
|
|
23
23
|
let nodes = super.buildCollection();
|
|
24
24
|
let y = this.contentSize.height;
|
|
25
25
|
if (this.isLoading) {
|
|
26
|
-
|
|
26
|
+
var _this_estimatedRowHeight;
|
|
27
|
+
let rect = new (0, $9jo3j$Rect)(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : (_this_estimatedRowHeight = this.estimatedRowHeight) !== null && _this_estimatedRowHeight !== void 0 ? _this_estimatedRowHeight : 48);
|
|
27
28
|
let loader = new (0, $9jo3j$LayoutInfo)('loader', 'loader', rect);
|
|
28
29
|
let node = {
|
|
29
30
|
layoutInfo: loader,
|
|
@@ -54,8 +55,7 @@ class $bc6cc67dd6240ebd$export$dab781655dfbb7d3 extends (0, $9jo3j$ListLayout) {
|
|
|
54
55
|
return res;
|
|
55
56
|
}
|
|
56
57
|
constructor(...args){
|
|
57
|
-
super(...args);
|
|
58
|
-
this.isLoading = false;
|
|
58
|
+
super(...args), this.isLoading = false;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,iBAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;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;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;
|
|
1
|
+
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM,kDAA0B,CAAA,GAAA,iBAAS;IAG9C,OAAO,mBAA6D,EAAQ;YACzD;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;QAClB,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;gBACyG;YAA3H,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM,GAAG,CAAA,2BAAA,IAAI,CAAC,kBAAkB,cAAvB,sCAAA,2BAA2B;YACtJ,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;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YACnG,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;QAC1B,OAAO;IACT;IAEU,UAAU,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACnE,IAAI,MAAM,KAAK,CAAC,UAAU,MAAM,GAAG;QACnC,gHAAgH;QAChH,IAAI,UAAU,CAAC,aAAa,GAAG;QAC/B,OAAO;IACT;;6BA5CQ,YAAqB;;AA6C/B","sources":["packages/@react-spectrum/list/src/ListViewLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';\nimport {LayoutNode, ListLayout} from '@react-stately/layout';\nimport {Node} from '@react-types/shared';\n\ninterface ListViewLayoutProps {\n isLoading?: boolean\n}\n\nexport class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {\n private isLoading: boolean = false;\n\n update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {\n this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n super.update(invalidationContext);\n }\n\n protected buildCollection(): LayoutNode[] {\n let nodes = super.buildCollection();\n let y = this.contentSize.height;\n\n if (this.isLoading) {\n let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, nodes.length === 0 ? this.virtualizer!.visibleRect.height : this.estimatedRowHeight ?? 48);\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.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;\n return nodes;\n }\n\n protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {\n let res = super.buildItem(node, x, y);\n // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders\n res.layoutInfo.allowOverflow = true;\n return res;\n }\n}\n"],"names":[],"version":3,"file":"ListViewLayout.module.js.map"}
|
|
@@ -17,7 +17,7 @@ $parcel$export(module.exports, "default", () => $c59d3898f402f50b$export$2e2bcd8
|
|
|
17
17
|
|
|
18
18
|
function $c59d3898f402f50b$export$2e2bcd8739ae039() {
|
|
19
19
|
let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $63sFO$react.useContext)((0, $60684b441be8e84c$exports.ListViewContext));
|
|
20
|
-
let ref = (0, $63sFO$react.useRef)(
|
|
20
|
+
let ref = (0, $63sFO$react.useRef)(null);
|
|
21
21
|
let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator({
|
|
22
22
|
target: {
|
|
23
23
|
type: 'root'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAIe;IACb,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,IAAI,MAAM,CAAA,GAAA,mBAAK,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAIe;IACb,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAyB;IACxC,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAkB,gBAAgB,CAAE;QAC7D,QAAQ;YAAC,MAAM;QAAM;IACvB,GAAG,WAAY;IACf,IAAI,eAAe,UAAW,YAAY,CAAC;QAAC,MAAM;IAAM;IACxD,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,gDAAgB;IAE5C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,0DAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,0DAAC;QACC,MAAK;QACL,iBAAc;qBACd,0DAAC;QAAI,MAAK;QAAU,GAAG,mBAAmB;QAAG,GAAG,kBAAkB;QAAE,KAAK;;AAIjF","sources":["packages/@react-spectrum/list/src/RootDropIndicator.tsx"],"sourcesContent":["import {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport default function RootDropIndicator() {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;\n let ref = useRef<HTMLDivElement | null>(null);\n let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({\n target: {type: 'root'}\n }, dropState!, ref);\n let isDropTarget = dropState!.isDropTarget({type: 'root'});\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\">\n <div role=\"button\" {...visuallyHiddenProps} {...dropIndicatorProps} ref={ref} />\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"RootDropIndicator.main.js.map"}
|
|
@@ -7,7 +7,7 @@ import {useVisuallyHidden as $jzbuT$useVisuallyHidden} from "@react-aria/visuall
|
|
|
7
7
|
|
|
8
8
|
function $41a60729487a82d7$export$2e2bcd8739ae039() {
|
|
9
9
|
let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $jzbuT$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
|
|
10
|
-
let ref = (0, $jzbuT$useRef)(
|
|
10
|
+
let ref = (0, $jzbuT$useRef)(null);
|
|
11
11
|
let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator({
|
|
12
12
|
target: {
|
|
13
13
|
type: 'root'
|
|
@@ -7,7 +7,7 @@ import {useVisuallyHidden as $jzbuT$useVisuallyHidden} from "@react-aria/visuall
|
|
|
7
7
|
|
|
8
8
|
function $41a60729487a82d7$export$2e2bcd8739ae039() {
|
|
9
9
|
let { dropState: dropState, dragAndDropHooks: dragAndDropHooks } = (0, $jzbuT$useContext)((0, $f85fb77f9d4cbc6c$export$870039b0abfe3de0));
|
|
10
|
-
let ref = (0, $jzbuT$useRef)(
|
|
10
|
+
let ref = (0, $jzbuT$useRef)(null);
|
|
11
11
|
let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator({
|
|
12
12
|
target: {
|
|
13
13
|
type: 'root'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAIe;IACb,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,IAAI,MAAM,CAAA,GAAA,aAAK,
|
|
1
|
+
{"mappings":";;;;;;;AAIe;IACb,IAAI,aAAC,SAAS,oBAAE,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAc;IAC7D,IAAI,MAAM,CAAA,GAAA,aAAK,EAAyB;IACxC,IAAI,sBAAC,kBAAkB,EAAC,GAAG,iBAAkB,gBAAgB,CAAE;QAC7D,QAAQ;YAAC,MAAM;QAAM;IACvB,GAAG,WAAY;IACf,IAAI,eAAe,UAAW,YAAY,CAAC;QAAC,MAAM;IAAM;IACxD,IAAI,uBAAC,mBAAmB,EAAC,GAAG,CAAA,GAAA,wBAAgB;IAE5C,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,cAAc,EACpD,OAAO;IAGT,qBACE,gCAAC;QAAI,MAAK;QAAM,eAAa,kBAAkB,CAAC,cAAc;qBAC5D,gCAAC;QACC,MAAK;QACL,iBAAc;qBACd,gCAAC;QAAI,MAAK;QAAU,GAAG,mBAAmB;QAAG,GAAG,kBAAkB;QAAE,KAAK;;AAIjF","sources":["packages/@react-spectrum/list/src/RootDropIndicator.tsx"],"sourcesContent":["import {ListViewContext} from './ListView';\nimport React, {useContext, useRef} from 'react';\nimport {useVisuallyHidden} from '@react-aria/visually-hidden';\n\nexport default function RootDropIndicator() {\n let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;\n let ref = useRef<HTMLDivElement | null>(null);\n let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({\n target: {type: 'root'}\n }, dropState!, ref);\n let isDropTarget = dropState!.isDropTarget({type: 'root'});\n let {visuallyHiddenProps} = useVisuallyHidden();\n\n if (!isDropTarget && dropIndicatorProps['aria-hidden']) {\n return null;\n }\n\n return (\n <div role=\"row\" aria-hidden={dropIndicatorProps['aria-hidden']}>\n <div\n role=\"gridcell\"\n aria-selected=\"false\">\n <div role=\"button\" {...visuallyHiddenProps} {...dropIndicatorProps} ref={ref} />\n </div>\n </div>\n );\n}\n"],"names":[],"version":3,"file":"RootDropIndicator.module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AKoCA,uCAAuC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,4BAA4B,CAAC,EAAE,UAAU,EAAE,sBAAsB,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IAC9K;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gHAAgH;IAChH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACnC,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;CACxD;
|
|
1
|
+
{"mappings":";;;;AKoCA,uCAAuC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,4BAA4B,CAAC,EAAE,UAAU,EAAE,sBAAsB,EAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IAC9K;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gHAAgH;IAChH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACnC,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,IAAI,OAAO,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAA;CACxD;AAoSD;;GAEG;AACH,OAAA,MAAM,UAA0C,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,OAAO,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACxVtI,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC","sources":["packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/InsertionIndicator.tsx","packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/ListViewItem.tsx","packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/ListViewLayout.ts","packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/RootDropIndicator.tsx","packages/@react-spectrum/list/src/packages/@react-spectrum/list/src/DragPreview.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","packages/@react-spectrum/list/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2022 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\nexport {ListView} from './ListView';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumListViewProps} from './ListView';\n"],"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.
|
|
3
|
+
"version": "3.9.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,28 +36,28 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "^3.
|
|
40
|
-
"@react-aria/focus": "^3.
|
|
41
|
-
"@react-aria/gridlist": "^3.
|
|
42
|
-
"@react-aria/i18n": "^3.12.
|
|
43
|
-
"@react-aria/interactions": "^3.22.
|
|
44
|
-
"@react-aria/selection": "^3.
|
|
45
|
-
"@react-aria/utils": "^3.
|
|
46
|
-
"@react-aria/virtualizer": "^4.0
|
|
47
|
-
"@react-aria/visually-hidden": "^3.8.
|
|
48
|
-
"@react-spectrum/checkbox": "^3.9.
|
|
49
|
-
"@react-spectrum/dnd": "^3.
|
|
50
|
-
"@react-spectrum/layout": "^3.6.
|
|
51
|
-
"@react-spectrum/progress": "^3.7.
|
|
52
|
-
"@react-spectrum/text": "^3.5.
|
|
53
|
-
"@react-spectrum/utils": "^3.
|
|
54
|
-
"@react-stately/collections": "^3.
|
|
55
|
-
"@react-stately/layout": "^4.0
|
|
56
|
-
"@react-stately/list": "^3.11.
|
|
57
|
-
"@react-stately/virtualizer": "^4.
|
|
58
|
-
"@react-types/grid": "^3.2.
|
|
59
|
-
"@react-types/shared": "^3.
|
|
60
|
-
"@spectrum-icons/ui": "^3.6.
|
|
39
|
+
"@react-aria/button": "^3.11.0",
|
|
40
|
+
"@react-aria/focus": "^3.19.0",
|
|
41
|
+
"@react-aria/gridlist": "^3.10.0",
|
|
42
|
+
"@react-aria/i18n": "^3.12.4",
|
|
43
|
+
"@react-aria/interactions": "^3.22.5",
|
|
44
|
+
"@react-aria/selection": "^3.21.0",
|
|
45
|
+
"@react-aria/utils": "^3.26.0",
|
|
46
|
+
"@react-aria/virtualizer": "^4.1.0",
|
|
47
|
+
"@react-aria/visually-hidden": "^3.8.18",
|
|
48
|
+
"@react-spectrum/checkbox": "^3.9.11",
|
|
49
|
+
"@react-spectrum/dnd": "^3.5.0",
|
|
50
|
+
"@react-spectrum/layout": "^3.6.10",
|
|
51
|
+
"@react-spectrum/progress": "^3.7.11",
|
|
52
|
+
"@react-spectrum/text": "^3.5.10",
|
|
53
|
+
"@react-spectrum/utils": "^3.12.0",
|
|
54
|
+
"@react-stately/collections": "^3.12.0",
|
|
55
|
+
"@react-stately/layout": "^4.1.0",
|
|
56
|
+
"@react-stately/list": "^3.11.1",
|
|
57
|
+
"@react-stately/virtualizer": "^4.2.0",
|
|
58
|
+
"@react-types/grid": "^3.2.10",
|
|
59
|
+
"@react-types/shared": "^3.26.0",
|
|
60
|
+
"@spectrum-icons/ui": "^3.6.11",
|
|
61
61
|
"@swc/helpers": "^0.5.0",
|
|
62
62
|
"react-transition-group": "^4.4.5"
|
|
63
63
|
},
|
|
@@ -69,10 +69,11 @@
|
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"@react-spectrum/provider": "^3.2.0",
|
|
72
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
73
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
72
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
|
73
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
|
74
74
|
},
|
|
75
75
|
"publishConfig": {
|
|
76
76
|
"access": "public"
|
|
77
|
-
}
|
|
78
|
-
|
|
77
|
+
},
|
|
78
|
+
"gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
|
|
79
|
+
}
|
|
@@ -11,14 +11,14 @@ interface InsertionIndicatorProps {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export default function InsertionIndicator(props: InsertionIndicatorProps) {
|
|
14
|
-
let {dropState, dragAndDropHooks} = useContext(ListViewContext)
|
|
14
|
+
let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
|
|
15
15
|
const {target, isPresentationOnly} = props;
|
|
16
16
|
|
|
17
|
-
let ref = useRef(
|
|
18
|
-
let {dropIndicatorProps} = dragAndDropHooks
|
|
17
|
+
let ref = useRef<HTMLDivElement | null>(null);
|
|
18
|
+
let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);
|
|
19
19
|
let {visuallyHiddenProps} = useVisuallyHidden();
|
|
20
20
|
|
|
21
|
-
let isDropTarget = dropState
|
|
21
|
+
let isDropTarget = dropState!.isDropTarget(target);
|
|
22
22
|
|
|
23
23
|
if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
|
|
24
24
|
return null;
|
package/src/ListView.tsx
CHANGED
|
@@ -64,18 +64,18 @@ export interface SpectrumListViewProps<T> extends Omit<AriaGridListProps<T>, 'ke
|
|
|
64
64
|
|
|
65
65
|
interface ListViewContextValue<T> {
|
|
66
66
|
state: ListState<T>,
|
|
67
|
-
dragState: DraggableCollectionState,
|
|
68
|
-
dropState: DroppableCollectionState,
|
|
69
|
-
dragAndDropHooks
|
|
70
|
-
onAction
|
|
67
|
+
dragState: DraggableCollectionState | null,
|
|
68
|
+
dropState: DroppableCollectionState | null,
|
|
69
|
+
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks'],
|
|
70
|
+
onAction?: (key: Key) => void,
|
|
71
71
|
isListDraggable: boolean,
|
|
72
72
|
isListDroppable: boolean,
|
|
73
73
|
layout: ListViewLayout<T>,
|
|
74
|
-
loadingState
|
|
74
|
+
loadingState?: LoadingState,
|
|
75
75
|
renderEmptyState?: () => JSX.Element
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
export const ListViewContext = React.createContext<ListViewContextValue<unknown
|
|
78
|
+
export const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);
|
|
79
79
|
|
|
80
80
|
const ROW_HEIGHTS = {
|
|
81
81
|
compact: {
|
|
@@ -96,7 +96,7 @@ function useListLayout<T>(state: ListState<T>, density: SpectrumListViewProps<T>
|
|
|
96
96
|
let {scale} = useProvider();
|
|
97
97
|
let layout = useMemo(() =>
|
|
98
98
|
new ListViewLayout<T>({
|
|
99
|
-
estimatedRowHeight: ROW_HEIGHTS[density][scale]
|
|
99
|
+
estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]
|
|
100
100
|
})
|
|
101
101
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
102
102
|
, [scale, density, overflowMode]);
|
|
@@ -138,15 +138,15 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
138
138
|
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
139
139
|
|
|
140
140
|
let {styleProps} = useStyleProps(props);
|
|
141
|
-
let dragState: DraggableCollectionState;
|
|
141
|
+
let dragState: DraggableCollectionState | null = null;
|
|
142
142
|
let preview = useRef(null);
|
|
143
|
-
if (isListDraggable) {
|
|
144
|
-
dragState = dragAndDropHooks.useDraggableCollectionState({
|
|
143
|
+
if (isListDraggable && dragAndDropHooks) {
|
|
144
|
+
dragState = dragAndDropHooks.useDraggableCollectionState!({
|
|
145
145
|
collection,
|
|
146
146
|
selectionManager,
|
|
147
147
|
preview
|
|
148
148
|
});
|
|
149
|
-
dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
|
|
149
|
+
dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);
|
|
150
150
|
}
|
|
151
151
|
let layout = useListLayout(
|
|
152
152
|
state,
|
|
@@ -155,18 +155,18 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
155
155
|
);
|
|
156
156
|
|
|
157
157
|
let DragPreview = dragAndDropHooks?.DragPreview;
|
|
158
|
-
let dropState: DroppableCollectionState;
|
|
159
|
-
let droppableCollection: DroppableCollectionResult;
|
|
160
|
-
let isRootDropTarget
|
|
161
|
-
if (isListDroppable) {
|
|
162
|
-
dropState = dragAndDropHooks.useDroppableCollectionState({
|
|
158
|
+
let dropState: DroppableCollectionState | null = null;
|
|
159
|
+
let droppableCollection: DroppableCollectionResult | null = null;
|
|
160
|
+
let isRootDropTarget = false;
|
|
161
|
+
if (isListDroppable && dragAndDropHooks) {
|
|
162
|
+
dropState = dragAndDropHooks.useDroppableCollectionState!({
|
|
163
163
|
collection,
|
|
164
164
|
selectionManager
|
|
165
165
|
});
|
|
166
|
-
droppableCollection = dragAndDropHooks.useDroppableCollection({
|
|
166
|
+
droppableCollection = dragAndDropHooks.useDroppableCollection!({
|
|
167
167
|
keyboardDelegate: new ListKeyboardDelegate({
|
|
168
168
|
collection,
|
|
169
|
-
disabledKeys: dragState?.draggingKeys.size ?
|
|
169
|
+
disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,
|
|
170
170
|
ref: domRef,
|
|
171
171
|
layoutDelegate: layout
|
|
172
172
|
}),
|
|
@@ -216,7 +216,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
216
216
|
<FocusScope>
|
|
217
217
|
<FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
|
|
218
218
|
<Virtualizer
|
|
219
|
-
{...mergeProps(isListDroppable
|
|
219
|
+
{...mergeProps(isListDroppable ? droppableCollection?.collectionProps : null, gridProps)}
|
|
220
220
|
{...filterDOMProps(otherProps)}
|
|
221
221
|
{...gridProps}
|
|
222
222
|
{...styleProps}
|
|
@@ -247,7 +247,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
247
247
|
layout={layout}
|
|
248
248
|
layoutOptions={useMemo(() => ({isLoading}), [isLoading])}
|
|
249
249
|
collection={collection}>
|
|
250
|
-
{useCallback((type, item) => {
|
|
250
|
+
{useCallback((type, item: Node<T>) => {
|
|
251
251
|
if (type === 'item') {
|
|
252
252
|
return <Item item={item} />;
|
|
253
253
|
} else if (type === 'loader') {
|
|
@@ -259,15 +259,21 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
259
259
|
</Virtualizer>
|
|
260
260
|
</FocusRing>
|
|
261
261
|
</FocusScope>
|
|
262
|
-
{DragPreview && isListDraggable &&
|
|
262
|
+
{DragPreview && isListDraggable && dragAndDropHooks && dragState &&
|
|
263
263
|
<DragPreview ref={preview}>
|
|
264
264
|
{() => {
|
|
265
|
+
if (dragState.draggedKey == null) {
|
|
266
|
+
return null;
|
|
267
|
+
}
|
|
265
268
|
if (dragAndDropHooks.renderPreview) {
|
|
266
269
|
return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
|
|
267
270
|
}
|
|
268
271
|
let item = state.collection.getItem(dragState.draggedKey);
|
|
272
|
+
if (!item) {
|
|
273
|
+
return null;
|
|
274
|
+
}
|
|
269
275
|
let itemCount = dragState.draggingKeys.size;
|
|
270
|
-
let itemHeight = layout.getLayoutInfo(dragState.draggedKey)
|
|
276
|
+
let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;
|
|
271
277
|
return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density} />;
|
|
272
278
|
}}
|
|
273
279
|
</DragPreview>
|
|
@@ -277,7 +283,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
|
|
|
277
283
|
}
|
|
278
284
|
|
|
279
285
|
function Item({item}: {item: Node<unknown>}) {
|
|
280
|
-
let {isListDroppable, state, onAction} = useContext(ListViewContext)
|
|
286
|
+
let {isListDroppable, state, onAction} = useContext(ListViewContext)!;
|
|
281
287
|
return (
|
|
282
288
|
<>
|
|
283
289
|
{isListDroppable && state.collection.getKeyBefore(item.key) == null &&
|
|
@@ -300,7 +306,7 @@ function Item({item}: {item: Node<unknown>}) {
|
|
|
300
306
|
}
|
|
301
307
|
|
|
302
308
|
function LoadingView() {
|
|
303
|
-
let {state} = useContext(ListViewContext)
|
|
309
|
+
let {state} = useContext(ListViewContext)!;
|
|
304
310
|
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');
|
|
305
311
|
return (
|
|
306
312
|
<CenteredWrapper>
|
|
@@ -312,7 +318,7 @@ function LoadingView() {
|
|
|
312
318
|
}
|
|
313
319
|
|
|
314
320
|
function EmptyState() {
|
|
315
|
-
let {renderEmptyState} = useContext(ListViewContext)
|
|
321
|
+
let {renderEmptyState} = useContext(ListViewContext)!;
|
|
316
322
|
let emptyState = renderEmptyState ? renderEmptyState() : null;
|
|
317
323
|
if (emptyState == null) {
|
|
318
324
|
return null;
|
|
@@ -326,7 +332,7 @@ function EmptyState() {
|
|
|
326
332
|
}
|
|
327
333
|
|
|
328
334
|
function CenteredWrapper({children}) {
|
|
329
|
-
let {state} = useContext(ListViewContext)
|
|
335
|
+
let {state} = useContext(ListViewContext)!;
|
|
330
336
|
return (
|
|
331
337
|
<div
|
|
332
338
|
role="row"
|