@react-aria/dnd 3.7.3 → 3.8.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/DragManager.main.js +25 -13
- package/dist/DragManager.main.js.map +1 -1
- package/dist/DragManager.mjs +25 -13
- package/dist/DragManager.module.js +25 -13
- package/dist/DragManager.module.js.map +1 -1
- package/dist/DragPreview.main.js +7 -1
- package/dist/DragPreview.main.js.map +1 -1
- package/dist/DragPreview.mjs +8 -2
- package/dist/DragPreview.module.js +8 -2
- package/dist/DragPreview.module.js.map +1 -1
- package/dist/ListDropTargetDelegate.main.js +5 -4
- package/dist/ListDropTargetDelegate.main.js.map +1 -1
- package/dist/ListDropTargetDelegate.mjs +5 -4
- package/dist/ListDropTargetDelegate.module.js +5 -4
- package/dist/ListDropTargetDelegate.module.js.map +1 -1
- package/dist/ar-AE.main.js.map +1 -1
- package/dist/ar-AE.module.js.map +1 -1
- package/dist/bg-BG.main.js.map +1 -1
- package/dist/bg-BG.module.js.map +1 -1
- package/dist/constants.main.js +3 -3
- package/dist/constants.main.js.map +1 -1
- package/dist/constants.mjs +3 -3
- package/dist/constants.module.js +3 -3
- package/dist/constants.module.js.map +1 -1
- package/dist/cs-CZ.main.js.map +1 -1
- package/dist/cs-CZ.module.js.map +1 -1
- package/dist/da-DK.main.js.map +1 -1
- package/dist/da-DK.module.js.map +1 -1
- package/dist/de-DE.main.js.map +1 -1
- package/dist/de-DE.module.js.map +1 -1
- package/dist/el-GR.main.js.map +1 -1
- package/dist/el-GR.module.js.map +1 -1
- package/dist/en-US.main.js.map +1 -1
- package/dist/en-US.module.js.map +1 -1
- package/dist/es-ES.main.js.map +1 -1
- package/dist/es-ES.module.js.map +1 -1
- package/dist/et-EE.main.js.map +1 -1
- package/dist/et-EE.module.js.map +1 -1
- package/dist/fi-FI.main.js.map +1 -1
- package/dist/fi-FI.module.js.map +1 -1
- package/dist/fr-FR.main.js.map +1 -1
- package/dist/fr-FR.module.js.map +1 -1
- package/dist/he-IL.main.js.map +1 -1
- package/dist/he-IL.module.js.map +1 -1
- package/dist/hr-HR.main.js.map +1 -1
- package/dist/hr-HR.module.js.map +1 -1
- package/dist/hu-HU.main.js.map +1 -1
- package/dist/hu-HU.module.js.map +1 -1
- package/dist/it-IT.main.js.map +1 -1
- package/dist/it-IT.module.js.map +1 -1
- package/dist/ja-JP.main.js.map +1 -1
- package/dist/ja-JP.module.js.map +1 -1
- package/dist/ko-KR.main.js.map +1 -1
- package/dist/ko-KR.module.js.map +1 -1
- package/dist/lt-LT.main.js.map +1 -1
- package/dist/lt-LT.module.js.map +1 -1
- package/dist/lv-LV.main.js.map +1 -1
- package/dist/lv-LV.module.js.map +1 -1
- package/dist/nb-NO.main.js.map +1 -1
- package/dist/nb-NO.module.js.map +1 -1
- package/dist/nl-NL.main.js.map +1 -1
- package/dist/nl-NL.module.js.map +1 -1
- package/dist/pl-PL.main.js.map +1 -1
- package/dist/pl-PL.module.js.map +1 -1
- package/dist/pt-BR.main.js.map +1 -1
- package/dist/pt-BR.module.js.map +1 -1
- package/dist/pt-PT.main.js.map +1 -1
- package/dist/pt-PT.module.js.map +1 -1
- package/dist/ro-RO.main.js.map +1 -1
- package/dist/ro-RO.module.js.map +1 -1
- package/dist/ru-RU.main.js.map +1 -1
- package/dist/ru-RU.module.js.map +1 -1
- package/dist/sk-SK.main.js.map +1 -1
- package/dist/sk-SK.module.js.map +1 -1
- package/dist/sl-SI.main.js.map +1 -1
- package/dist/sl-SI.module.js.map +1 -1
- package/dist/sr-SP.main.js.map +1 -1
- package/dist/sr-SP.module.js.map +1 -1
- package/dist/sv-SE.main.js.map +1 -1
- package/dist/sv-SE.module.js.map +1 -1
- package/dist/tr-TR.main.js.map +1 -1
- package/dist/tr-TR.module.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.main.js.map +1 -1
- package/dist/uk-UA.module.js.map +1 -1
- package/dist/useAutoScroll.main.js +5 -5
- package/dist/useAutoScroll.main.js.map +1 -1
- package/dist/useAutoScroll.mjs +5 -5
- package/dist/useAutoScroll.module.js +5 -5
- package/dist/useAutoScroll.module.js.map +1 -1
- package/dist/useClipboard.main.js +13 -7
- package/dist/useClipboard.main.js.map +1 -1
- package/dist/useClipboard.mjs +13 -7
- package/dist/useClipboard.module.js +13 -7
- package/dist/useClipboard.module.js.map +1 -1
- package/dist/useDrag.main.js +2 -2
- package/dist/useDrag.main.js.map +1 -1
- package/dist/useDrag.mjs +2 -2
- package/dist/useDrag.module.js +2 -2
- package/dist/useDrag.module.js.map +1 -1
- package/dist/useDrop.main.js +5 -4
- package/dist/useDrop.main.js.map +1 -1
- package/dist/useDrop.mjs +5 -4
- package/dist/useDrop.module.js +5 -4
- package/dist/useDrop.module.js.map +1 -1
- package/dist/useDropIndicator.main.js +3 -2
- package/dist/useDropIndicator.main.js.map +1 -1
- package/dist/useDropIndicator.mjs +3 -2
- package/dist/useDropIndicator.module.js +3 -2
- package/dist/useDropIndicator.module.js.map +1 -1
- package/dist/useDroppableCollection.main.js +33 -19
- package/dist/useDroppableCollection.main.js.map +1 -1
- package/dist/useDroppableCollection.mjs +33 -19
- package/dist/useDroppableCollection.module.js +33 -19
- package/dist/useDroppableCollection.module.js.map +1 -1
- package/dist/useVirtualDrop.main.js.map +1 -1
- package/dist/useVirtualDrop.module.js.map +1 -1
- package/dist/utils.main.js +5 -3
- package/dist/utils.main.js.map +1 -1
- package/dist/utils.mjs +5 -3
- package/dist/utils.module.js +5 -3
- package/dist/utils.module.js.map +1 -1
- package/dist/zh-CN.main.js.map +1 -1
- package/dist/zh-CN.module.js.map +1 -1
- package/dist/zh-TW.main.js.map +1 -1
- package/dist/zh-TW.module.js.map +1 -1
- package/package.json +15 -14
- package/src/DragManager.ts +26 -24
- package/src/DragPreview.tsx +17 -8
- package/src/ListDropTargetDelegate.ts +8 -5
- package/src/useAutoScroll.ts +6 -6
- package/src/useClipboard.ts +12 -6
- package/src/useDrag.ts +5 -2
- package/src/useDrop.ts +17 -9
- package/src/useDropIndicator.ts +10 -4
- package/src/useDroppableCollection.ts +62 -39
- package/src/useVirtualDrop.ts +3 -2
- package/src/utils.ts +16 -10
package/dist/zh-CN.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,2BAA2B,CAAC,uDAAa,CAAC;IAC5D,8BAA8B,CAAC,6DAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,wDAAO,CAAC;IACjC,0BAA0B,CAAC,wDAAO,CAAC;IACnC,YAAY,CAAC,OAAS,CAAC,iBAAG,EAAE,KAAK,QAAQ,
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,2BAA2B,CAAC,uDAAa,CAAC;IAC5D,8BAA8B,CAAC,6DAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,wDAAO,CAAC;IACjC,0BAA0B,CAAC,wDAAO,CAAC;IACnC,YAAY,CAAC,OAAS,CAAC,iBAAG,EAAE,KAAK,QAAQ,EAAE;IAC3C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;QAAA,IAAI;IACxL,wBAAwB,CAAC,MAAM,YAAc,CAAC,wCAAY,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;QAAA,GAAG,QAAC,CAAC;IACrM,2BAA2B,CAAC,MAAM,YAAc,CAAC,8CAAkB,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;QAAA,GAAG,QAAC,CAAC;IAC9M,yBAAyB,CAAC,MAAM,YAAc,CAAC,yCAAM,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,iCAAK,CAAC;QAAA,GAAG,QAAC,CAAC;IAChM,uBAAuB,CAAC,4NAA6C,CAAC;IACtE,oBAAoB,CAAC,wKAAqB,CAAC;IAC3C,sBAAsB,CAAC,+LAA8B,CAAC;IACtD,gBAAgB,CAAC,gDAAM,CAAC;IACxB,gBAAgB,CAAC,gDAAM,CAAC;IACxB,2BAA2B,CAAC,+FAAyB,CAAC;IACtD,wBAAwB,CAAC,wCAAK,CAAC;IAC/B,0BAA0B,CAAC,wCAAK,CAAC;IACjC,iBAAiB,CAAC,gCAAI,CAAC;IACvB,cAAc,CAAC,OAAS,CAAC,yBAAI,EAAE,KAAK,QAAQ,EAAE;IAC9C,cAAc,CAAC,wBAAG,CAAC;IACnB,mBAAmB,CAAC,+FAAkB,CAAC;IACvC,gBAAgB,CAAC,gGAAY,CAAC;IAC9B,kBAAkB,CAAC,gGAAY,CAAC;IAChC,eAAe,CAAC,OAAS,CAAC,yBAAI,EAAE,KAAK,QAAQ,CAAC,iBAAG,CAAC;IAClD,gBAAgB,CAAC,OAAS,CAAC,yBAAI,EAAE,KAAK,QAAQ,CAAC,iBAAG,CAAC;IACnD,iBAAiB,CAAC,OAAS,CAAC,yBAAI,EAAE,KAAK,cAAc,CAAC,UAAG,EAAE,KAAK,aAAa,CAAC,iBAAG,CAAC;AACpF","sources":["packages/@react-aria/dnd/intl/zh-CN.json"],"sourcesContent":["{\n \"dragDescriptionKeyboard\": \"按 Enter 开始拖动。\",\n \"dragDescriptionKeyboardAlt\": \"按 Alt + Enter 开始拖动。\",\n \"dragDescriptionLongPress\": \"长按以开始拖动。\",\n \"dragDescriptionTouch\": \"双击开始拖动。\",\n \"dragDescriptionVirtual\": \"单击开始拖动。\",\n \"dragItem\": \"拖动 {itemText}\",\n \"dragSelectedItems\": \"拖动 {count, plural, one {# 选中项目} other {# 选中项目}}\",\n \"dragSelectedKeyboard\": \"按 Enter 以拖动 {count, plural, one {# 个选定项} other {# 个选定项}}。\",\n \"dragSelectedKeyboardAlt\": \"按 Alt + Enter 以拖动 {count, plural, one {# 个选定项} other {# 个选定项}}。\",\n \"dragSelectedLongPress\": \"长按以拖动 {count, plural, one {# 个选定项} other {# 个选定项}}。\",\n \"dragStartedKeyboard\": \"已开始拖动。按 Tab 导航到放置目标,然后按 Enter 放置或按 Escape 取消。\",\n \"dragStartedTouch\": \"已开始拖动。导航到放置目标,然后双击放置。\",\n \"dragStartedVirtual\": \"已开始拖动。导航到放置目标,然后单击或按 Enter 放置。\",\n \"dropCanceled\": \"放置已取消。\",\n \"dropComplete\": \"放置已完成。\",\n \"dropDescriptionKeyboard\": \"按 Enter 放置。按 Escape 取消拖动。\",\n \"dropDescriptionTouch\": \"双击放置。\",\n \"dropDescriptionVirtual\": \"单击放置。\",\n \"dropIndicator\": \"放置标记\",\n \"dropOnItem\": \"放置于 {itemText}\",\n \"dropOnRoot\": \"放置于\",\n \"endDragKeyboard\": \"正在拖动。按 Enter 取消拖动。\",\n \"endDragTouch\": \"正在拖动。双击取消拖动。\",\n \"endDragVirtual\": \"正在拖动。单击取消拖动。\",\n \"insertAfter\": \"插入到 {itemText} 之后\",\n \"insertBefore\": \"插入到 {itemText} 之前\",\n \"insertBetween\": \"插入到 {beforeItemText} 和 {afterItemText} 之间\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}
|
package/dist/zh-TW.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,2BAA2B,CAAC,uEAAe,CAAC;IAC9D,8BAA8B,CAAC,2EAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,gFAAU,CAAC;IACpC,0BAA0B,CAAC,wFAAW,CAAC;IACvC,YAAY,CAAC,OAAS,CAAC,wBAAG,EAAE,KAAK,QAAQ,CAAC,QAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,2BAA2B,CAAC,uEAAe,CAAC;IAC9D,8BAA8B,CAAC,2EAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,gFAAU,CAAC;IACpC,0BAA0B,CAAC,wFAAW,CAAC;IACvC,YAAY,CAAC,OAAS,CAAC,wBAAG,EAAE,KAAK,QAAQ,CAAC,QAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,IAAI;IAC1L,wBAAwB,CAAC,MAAM,YAAc,CAAC,gDAAa,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IACxM,2BAA2B,CAAC,MAAM,YAAc,CAAC,oDAAiB,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAC/M,yBAAyB,CAAC,MAAM,YAAc,CAAC,yCAAM,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAClM,uBAAuB,CAAC,oRAAoD,CAAC;IAC7E,oBAAoB,CAAC,gMAAwB,CAAC;IAC9C,sBAAsB,CAAC,uOAAmC,CAAC;IAC3D,gBAAgB,CAAC,gDAAM,CAAC;IACxB,gBAAgB,CAAC,gDAAM,CAAC;IACxB,2BAA2B,CAAC,+HAA6B,CAAC;IAC1D,wBAAwB,CAAC,gEAAQ,CAAC;IAClC,0BAA0B,CAAC,wEAAS,CAAC;IACrC,iBAAiB,CAAC,wCAAK,CAAC;IACxB,cAAc,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,gBAAE,CAAC;IAChD,cAAc,CAAC,wBAAG,CAAC;IACnB,mBAAmB,CAAC,uGAAmB,CAAC;IACxC,gBAAgB,CAAC,gHAAc,CAAC;IAChC,kBAAkB,CAAC,wHAAe,CAAC;IACnC,eAAe,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IAClD,gBAAgB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IACnD,iBAAiB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,cAAc,CAAC,wBAAG,EAAE,KAAK,aAAa,CAAC,wBAAG,CAAC;AACpF","sources":["packages/@react-aria/dnd/intl/zh-TW.json"],"sourcesContent":["{\n \"dragDescriptionKeyboard\": \"按 Enter 鍵以開始拖曳。\",\n \"dragDescriptionKeyboardAlt\": \"按 Alt+Enter 鍵以開始拖曳。\",\n \"dragDescriptionLongPress\": \"長按以開始拖曳。\",\n \"dragDescriptionTouch\": \"輕點兩下以開始拖曳。\",\n \"dragDescriptionVirtual\": \"按一下滑鼠以開始拖曳。\",\n \"dragItem\": \"拖曳「{itemText}」\",\n \"dragSelectedItems\": \"拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}\",\n \"dragSelectedKeyboard\": \"按 Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragSelectedKeyboardAlt\": \"按 Alt+Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragSelectedLongPress\": \"長按以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragStartedKeyboard\": \"已開始拖曳。按 Tab 鍵以瀏覽至放置目標,然後按 Enter 鍵以放置,或按 Escape 鍵以取消。\",\n \"dragStartedTouch\": \"已開始拖曳。瀏覽至放置目標,然後輕點兩下以放置。\",\n \"dragStartedVirtual\": \"已開始拖曳。瀏覽至放置目標,然後按一下滑鼠或按 Enter 鍵以放置。\",\n \"dropCanceled\": \"放置已取消。\",\n \"dropComplete\": \"放置已完成。\",\n \"dropDescriptionKeyboard\": \"按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。\",\n \"dropDescriptionTouch\": \"輕點兩下以放置。\",\n \"dropDescriptionVirtual\": \"按一下滑鼠以放置。\",\n \"dropIndicator\": \"放置指示器\",\n \"dropOnItem\": \"放置在「{itemText}」上\",\n \"dropOnRoot\": \"放置在\",\n \"endDragKeyboard\": \"拖曳中。按 Enter 鍵以取消拖曳。\",\n \"endDragTouch\": \"拖曳中。輕點兩下以取消拖曳。\",\n \"endDragVirtual\": \"拖曳中。按一下滑鼠以取消拖曳。\",\n \"insertAfter\": \"插入至「{itemText}」之後\",\n \"insertBefore\": \"插入至「{itemText}」之前\",\n \"insertBetween\": \"插入至「{beforeItemText}」和「{afterItemText}」之間\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}
|
package/dist/zh-TW.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,2BAA2B,CAAC,uEAAe,CAAC;IAC9D,8BAA8B,CAAC,2EAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,gFAAU,CAAC;IACpC,0BAA0B,CAAC,wFAAW,CAAC;IACvC,YAAY,CAAC,OAAS,CAAC,wBAAG,EAAE,KAAK,QAAQ,CAAC,QAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,2BAA2B,CAAC,uEAAe,CAAC;IAC9D,8BAA8B,CAAC,2EAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,gFAAU,CAAC;IACpC,0BAA0B,CAAC,wFAAW,CAAC;IACvC,YAAY,CAAC,OAAS,CAAC,wBAAG,EAAE,KAAK,QAAQ,CAAC,QAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,IAAI;IAC1L,wBAAwB,CAAC,MAAM,YAAc,CAAC,gDAAa,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IACxM,2BAA2B,CAAC,MAAM,YAAc,CAAC,oDAAiB,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAC/M,yBAAyB,CAAC,MAAM,YAAc,CAAC,yCAAM,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAClM,uBAAuB,CAAC,oRAAoD,CAAC;IAC7E,oBAAoB,CAAC,gMAAwB,CAAC;IAC9C,sBAAsB,CAAC,uOAAmC,CAAC;IAC3D,gBAAgB,CAAC,gDAAM,CAAC;IACxB,gBAAgB,CAAC,gDAAM,CAAC;IACxB,2BAA2B,CAAC,+HAA6B,CAAC;IAC1D,wBAAwB,CAAC,gEAAQ,CAAC;IAClC,0BAA0B,CAAC,wEAAS,CAAC;IACrC,iBAAiB,CAAC,wCAAK,CAAC;IACxB,cAAc,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,gBAAE,CAAC;IAChD,cAAc,CAAC,wBAAG,CAAC;IACnB,mBAAmB,CAAC,uGAAmB,CAAC;IACxC,gBAAgB,CAAC,gHAAc,CAAC;IAChC,kBAAkB,CAAC,wHAAe,CAAC;IACnC,eAAe,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IAClD,gBAAgB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IACnD,iBAAiB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,cAAc,CAAC,wBAAG,EAAE,KAAK,aAAa,CAAC,wBAAG,CAAC;AACpF","sources":["packages/@react-aria/dnd/intl/zh-TW.json"],"sourcesContent":["{\n \"dragDescriptionKeyboard\": \"按 Enter 鍵以開始拖曳。\",\n \"dragDescriptionKeyboardAlt\": \"按 Alt+Enter 鍵以開始拖曳。\",\n \"dragDescriptionLongPress\": \"長按以開始拖曳。\",\n \"dragDescriptionTouch\": \"輕點兩下以開始拖曳。\",\n \"dragDescriptionVirtual\": \"按一下滑鼠以開始拖曳。\",\n \"dragItem\": \"拖曳「{itemText}」\",\n \"dragSelectedItems\": \"拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}\",\n \"dragSelectedKeyboard\": \"按 Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragSelectedKeyboardAlt\": \"按 Alt+Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragSelectedLongPress\": \"長按以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n \"dragStartedKeyboard\": \"已開始拖曳。按 Tab 鍵以瀏覽至放置目標,然後按 Enter 鍵以放置,或按 Escape 鍵以取消。\",\n \"dragStartedTouch\": \"已開始拖曳。瀏覽至放置目標,然後輕點兩下以放置。\",\n \"dragStartedVirtual\": \"已開始拖曳。瀏覽至放置目標,然後按一下滑鼠或按 Enter 鍵以放置。\",\n \"dropCanceled\": \"放置已取消。\",\n \"dropComplete\": \"放置已完成。\",\n \"dropDescriptionKeyboard\": \"按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。\",\n \"dropDescriptionTouch\": \"輕點兩下以放置。\",\n \"dropDescriptionVirtual\": \"按一下滑鼠以放置。\",\n \"dropIndicator\": \"放置指示器\",\n \"dropOnItem\": \"放置在「{itemText}」上\",\n \"dropOnRoot\": \"放置在\",\n \"endDragKeyboard\": \"拖曳中。按 Enter 鍵以取消拖曳。\",\n \"endDragTouch\": \"拖曳中。輕點兩下以取消拖曳。\",\n \"endDragVirtual\": \"拖曳中。按一下滑鼠以取消拖曳。\",\n \"insertAfter\": \"插入至「{itemText}」之後\",\n \"insertBefore\": \"插入至「{itemText}」之前\",\n \"insertBetween\": \"插入至「{beforeItemText}」和「{afterItemText}」之間\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/dnd",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,22 +22,23 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@internationalized/string": "^3.2.
|
|
26
|
-
"@react-aria/i18n": "^3.12.
|
|
27
|
-
"@react-aria/interactions": "^3.22.
|
|
28
|
-
"@react-aria/live-announcer": "^3.4.
|
|
29
|
-
"@react-aria/overlays": "^3.
|
|
30
|
-
"@react-aria/utils": "^3.
|
|
31
|
-
"@react-stately/dnd": "^3.
|
|
32
|
-
"@react-types/button": "^3.10.
|
|
33
|
-
"@react-types/shared": "^3.
|
|
25
|
+
"@internationalized/string": "^3.2.5",
|
|
26
|
+
"@react-aria/i18n": "^3.12.4",
|
|
27
|
+
"@react-aria/interactions": "^3.22.5",
|
|
28
|
+
"@react-aria/live-announcer": "^3.4.1",
|
|
29
|
+
"@react-aria/overlays": "^3.24.0",
|
|
30
|
+
"@react-aria/utils": "^3.26.0",
|
|
31
|
+
"@react-stately/dnd": "^3.5.0",
|
|
32
|
+
"@react-types/button": "^3.10.1",
|
|
33
|
+
"@react-types/shared": "^3.26.0",
|
|
34
34
|
"@swc/helpers": "^0.5.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
|
|
38
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
|
37
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
|
38
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
|
39
39
|
},
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
|
-
}
|
|
43
|
-
|
|
42
|
+
},
|
|
43
|
+
"gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
|
|
44
|
+
}
|
package/src/DragManager.ts
CHANGED
|
@@ -20,7 +20,7 @@ import {useEffect, useState} from 'react';
|
|
|
20
20
|
|
|
21
21
|
let dropTargets = new Map<Element, DropTarget>();
|
|
22
22
|
let dropItems = new Map<Element, DroppableItem>();
|
|
23
|
-
let dragSession: DragSession = null;
|
|
23
|
+
let dragSession: DragSession | null = null;
|
|
24
24
|
let subscriptions = new Set<() => void>();
|
|
25
25
|
|
|
26
26
|
interface DropTarget {
|
|
@@ -29,9 +29,9 @@ interface DropTarget {
|
|
|
29
29
|
getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
|
|
30
30
|
onDropEnter?: (e: DropEnterEvent, dragTarget: DragTarget) => void,
|
|
31
31
|
onDropExit?: (e: DropExitEvent) => void,
|
|
32
|
-
onDropTargetEnter?: (target
|
|
33
|
-
onDropActivate?: (e: DropActivateEvent, target
|
|
34
|
-
onDrop?: (e: DropEvent, target
|
|
32
|
+
onDropTargetEnter?: (target: DroppableCollectionTarget | null) => void,
|
|
33
|
+
onDropActivate?: (e: DropActivateEvent, target: DroppableCollectionTarget | null) => void,
|
|
34
|
+
onDrop?: (e: DropEvent, target: DroppableCollectionTarget | null) => void,
|
|
35
35
|
onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -71,9 +71,11 @@ export function beginDragging(target: DragTarget, stringFormatter: LocalizedStri
|
|
|
71
71
|
|
|
72
72
|
dragSession = new DragSession(target, stringFormatter);
|
|
73
73
|
requestAnimationFrame(() => {
|
|
74
|
-
dragSession
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
if (dragSession) {
|
|
75
|
+
dragSession.setup();
|
|
76
|
+
if (getDragModality() === 'keyboard') {
|
|
77
|
+
dragSession.next();
|
|
78
|
+
}
|
|
77
79
|
}
|
|
78
80
|
});
|
|
79
81
|
|
|
@@ -154,14 +156,14 @@ const MESSAGES = {
|
|
|
154
156
|
|
|
155
157
|
class DragSession {
|
|
156
158
|
dragTarget: DragTarget;
|
|
157
|
-
validDropTargets: DropTarget[];
|
|
158
|
-
currentDropTarget: DropTarget;
|
|
159
|
-
currentDropItem: DroppableItem;
|
|
160
|
-
dropOperation: DropOperation;
|
|
161
|
-
private mutationObserver: MutationObserver;
|
|
162
|
-
private restoreAriaHidden: () => void;
|
|
159
|
+
validDropTargets: DropTarget[] = [];
|
|
160
|
+
currentDropTarget: DropTarget | null = null;
|
|
161
|
+
currentDropItem: DroppableItem | null = null;
|
|
162
|
+
dropOperation: DropOperation | null = null;
|
|
163
|
+
private mutationObserver: MutationObserver | null = null;
|
|
164
|
+
private restoreAriaHidden: (() => void) | null = null;
|
|
163
165
|
private stringFormatter: LocalizedStringFormatter;
|
|
164
|
-
private isVirtualClick: boolean;
|
|
166
|
+
private isVirtualClick: boolean = false;
|
|
165
167
|
private initialFocused: boolean;
|
|
166
168
|
|
|
167
169
|
constructor(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
|
|
@@ -210,8 +212,8 @@ class DragSession {
|
|
|
210
212
|
document.removeEventListener(event, this.cancelEvent, true);
|
|
211
213
|
}
|
|
212
214
|
|
|
213
|
-
this.mutationObserver
|
|
214
|
-
this.restoreAriaHidden();
|
|
215
|
+
this.mutationObserver?.disconnect();
|
|
216
|
+
this.restoreAriaHidden?.();
|
|
215
217
|
}
|
|
216
218
|
|
|
217
219
|
onKeyDown(e: KeyboardEvent) {
|
|
@@ -452,7 +454,7 @@ class DragSession {
|
|
|
452
454
|
return nearest;
|
|
453
455
|
}
|
|
454
456
|
|
|
455
|
-
setCurrentDropTarget(dropTarget: DropTarget, item?: DroppableItem) {
|
|
457
|
+
setCurrentDropTarget(dropTarget: DropTarget | null, item?: DroppableItem) {
|
|
456
458
|
if (dropTarget !== this.currentDropTarget) {
|
|
457
459
|
if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
|
|
458
460
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
@@ -481,12 +483,12 @@ class DragSession {
|
|
|
481
483
|
}
|
|
482
484
|
}
|
|
483
485
|
|
|
484
|
-
if (item !== this.currentDropItem) {
|
|
485
|
-
if (
|
|
486
|
-
this.currentDropTarget.onDropTargetEnter(item
|
|
486
|
+
if (item != null && item !== this.currentDropItem) {
|
|
487
|
+
if (this.currentDropTarget && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
|
|
488
|
+
this.currentDropTarget.onDropTargetEnter(item.target);
|
|
487
489
|
}
|
|
488
490
|
|
|
489
|
-
item
|
|
491
|
+
item.element.focus();
|
|
490
492
|
this.currentDropItem = item;
|
|
491
493
|
|
|
492
494
|
// Announce first drop target after drag start announcement finishes.
|
|
@@ -520,7 +522,7 @@ class DragSession {
|
|
|
520
522
|
// Re-trigger focus event on active element, since it will not have received it during dragging (see cancelEvent).
|
|
521
523
|
// This corrects state such as whether focus ring should appear.
|
|
522
524
|
// useDroppableCollection handles this itself, so this is only for standalone drop zones.
|
|
523
|
-
document.activeElement
|
|
525
|
+
document.activeElement?.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
|
|
524
526
|
}
|
|
525
527
|
|
|
526
528
|
this.setCurrentDropTarget(null);
|
|
@@ -567,7 +569,7 @@ class DragSession {
|
|
|
567
569
|
y: rect.top + (rect.height / 2),
|
|
568
570
|
items,
|
|
569
571
|
dropOperation: this.dropOperation
|
|
570
|
-
}, item?.target);
|
|
572
|
+
}, item?.target ?? null);
|
|
571
573
|
}
|
|
572
574
|
|
|
573
575
|
this.end();
|
|
@@ -581,7 +583,7 @@ class DragSession {
|
|
|
581
583
|
type: 'dropactivate',
|
|
582
584
|
x: rect.left + (rect.width / 2),
|
|
583
585
|
y: rect.top + (rect.height / 2)
|
|
584
|
-
});
|
|
586
|
+
}, null);
|
|
585
587
|
}
|
|
586
588
|
}
|
|
587
589
|
}
|
package/src/DragPreview.tsx
CHANGED
|
@@ -10,20 +10,21 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {DragItem, DragPreviewRenderer
|
|
13
|
+
import {DragItem, DragPreviewRenderer} from '@react-types/shared';
|
|
14
14
|
import {flushSync} from 'react-dom';
|
|
15
|
-
import React, {JSX, useImperativeHandle, useRef, useState} from 'react';
|
|
15
|
+
import React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';
|
|
16
16
|
|
|
17
17
|
export interface DragPreviewProps {
|
|
18
|
-
children: (items: DragItem[]) => JSX.Element
|
|
18
|
+
children: (items: DragItem[]) => JSX.Element | null
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
function DragPreview(props: DragPreviewProps, ref:
|
|
21
|
+
function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
|
|
22
22
|
let render = props.children;
|
|
23
|
-
let [children, setChildren] = useState<JSX.Element>(null);
|
|
24
|
-
let domRef = useRef(null);
|
|
23
|
+
let [children, setChildren] = useState<JSX.Element | null>(null);
|
|
24
|
+
let domRef = useRef<HTMLDivElement | null>(null);
|
|
25
|
+
let raf = useRef<ReturnType<typeof requestAnimationFrame> | undefined>(undefined);
|
|
25
26
|
|
|
26
|
-
useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {
|
|
27
|
+
useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement | null) => void) => {
|
|
27
28
|
// This will be called during the onDragStart event by useDrag. We need to render the
|
|
28
29
|
// preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
|
|
29
30
|
flushSync(() => {
|
|
@@ -34,11 +35,19 @@ function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer
|
|
|
34
35
|
callback(domRef.current);
|
|
35
36
|
|
|
36
37
|
// Remove the preview from the DOM after a frame so the browser has time to paint.
|
|
37
|
-
requestAnimationFrame(() => {
|
|
38
|
+
raf.current = requestAnimationFrame(() => {
|
|
38
39
|
setChildren(null);
|
|
39
40
|
});
|
|
40
41
|
}, [render]);
|
|
41
42
|
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
return () => {
|
|
45
|
+
if (raf.current) {
|
|
46
|
+
cancelAnimationFrame(raf.current);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}, []);
|
|
50
|
+
|
|
42
51
|
if (!children) {
|
|
43
52
|
return null;
|
|
44
53
|
}
|
|
@@ -72,11 +72,11 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
|
|
75
|
-
if (this.collection[Symbol.iterator]().next().done) {
|
|
75
|
+
if (this.collection[Symbol.iterator]().next().done || !this.ref.current) {
|
|
76
76
|
return {type: 'root'};
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
let rect = this.ref.current.getBoundingClientRect();
|
|
79
|
+
let rect: DOMRect | undefined = this.ref.current.getBoundingClientRect();
|
|
80
80
|
let primary = this.orientation === 'horizontal' ? x : y;
|
|
81
81
|
let secondary = this.orientation === 'horizontal' ? y : x;
|
|
82
82
|
primary += this.getPrimaryStart(rect);
|
|
@@ -90,7 +90,7 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
|
|
|
90
90
|
let elements = this.ref.current.querySelectorAll('[data-key]');
|
|
91
91
|
let elementMap = new Map<string, HTMLElement>();
|
|
92
92
|
for (let item of elements) {
|
|
93
|
-
if (item instanceof HTMLElement) {
|
|
93
|
+
if (item instanceof HTMLElement && item.dataset.key != null) {
|
|
94
94
|
elementMap.set(item.dataset.key, item);
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -106,6 +106,9 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
|
|
|
106
106
|
let mid = Math.floor((low + high) / 2);
|
|
107
107
|
let item = items[mid];
|
|
108
108
|
let element = elementMap.get(String(item.key));
|
|
109
|
+
if (!element) {
|
|
110
|
+
break;
|
|
111
|
+
}
|
|
109
112
|
let rect = element.getBoundingClientRect();
|
|
110
113
|
let update = (isGreater: boolean) => {
|
|
111
114
|
if (isGreater) {
|
|
@@ -154,9 +157,9 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
|
|
|
154
157
|
|
|
155
158
|
let item = items[Math.min(low, items.length - 1)];
|
|
156
159
|
let element = elementMap.get(String(item.key));
|
|
157
|
-
rect = element
|
|
160
|
+
rect = element?.getBoundingClientRect();
|
|
158
161
|
|
|
159
|
-
if (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect))) {
|
|
162
|
+
if (rect && (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))) {
|
|
160
163
|
return {
|
|
161
164
|
type: 'item',
|
|
162
165
|
key: item.key,
|
package/src/useAutoScroll.ts
CHANGED
|
@@ -29,8 +29,8 @@ export function useAutoScroll(ref: RefObject<Element | null>) {
|
|
|
29
29
|
}
|
|
30
30
|
}, [ref]);
|
|
31
31
|
|
|
32
|
-
let state = useRef({
|
|
33
|
-
timer:
|
|
32
|
+
let state = useRef<{timer: ReturnType<typeof requestAnimationFrame> | undefined, dx: number, dy: number}>({
|
|
33
|
+
timer: undefined,
|
|
34
34
|
dx: 0,
|
|
35
35
|
dy: 0
|
|
36
36
|
}).current;
|
|
@@ -39,17 +39,17 @@ export function useAutoScroll(ref: RefObject<Element | null>) {
|
|
|
39
39
|
return () => {
|
|
40
40
|
if (state.timer) {
|
|
41
41
|
cancelAnimationFrame(state.timer);
|
|
42
|
-
state.timer =
|
|
42
|
+
state.timer = undefined;
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
// state will become a new object, so it's ok to use in the dependency array for unmount
|
|
46
46
|
}, [state]);
|
|
47
47
|
|
|
48
48
|
let scroll = useCallback(() => {
|
|
49
|
-
if (scrollableX.current) {
|
|
49
|
+
if (scrollableX.current && scrollableRef.current) {
|
|
50
50
|
scrollableRef.current.scrollLeft += state.dx;
|
|
51
51
|
}
|
|
52
|
-
if (scrollableY.current) {
|
|
52
|
+
if (scrollableY.current && scrollableRef.current) {
|
|
53
53
|
scrollableRef.current.scrollTop += state.dy;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -93,7 +93,7 @@ export function useAutoScroll(ref: RefObject<Element | null>) {
|
|
|
93
93
|
stop() {
|
|
94
94
|
if (state.timer) {
|
|
95
95
|
cancelAnimationFrame(state.timer);
|
|
96
|
-
state.timer =
|
|
96
|
+
state.timer = undefined;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
};
|
package/src/useClipboard.ts
CHANGED
|
@@ -87,8 +87,10 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
e.preventDefault();
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
if (e.clipboardData) {
|
|
91
|
+
writeToDataTransfer(e.clipboardData, options.getItems());
|
|
92
|
+
options.onCopy?.();
|
|
93
|
+
}
|
|
92
94
|
});
|
|
93
95
|
|
|
94
96
|
let onBeforeCut = useEffectEvent((e: ClipboardEvent) => {
|
|
@@ -103,8 +105,10 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
|
|
|
103
105
|
}
|
|
104
106
|
|
|
105
107
|
e.preventDefault();
|
|
106
|
-
|
|
107
|
-
|
|
108
|
+
if (e.clipboardData) {
|
|
109
|
+
writeToDataTransfer(e.clipboardData, options.getItems());
|
|
110
|
+
options.onCut();
|
|
111
|
+
}
|
|
108
112
|
});
|
|
109
113
|
|
|
110
114
|
let onBeforePaste = useEffectEvent((e: ClipboardEvent) => {
|
|
@@ -121,8 +125,10 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
|
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
e.preventDefault();
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
if (e.clipboardData) {
|
|
129
|
+
let items = readFromDataTransfer(e.clipboardData);
|
|
130
|
+
options.onPaste(items);
|
|
131
|
+
}
|
|
126
132
|
});
|
|
127
133
|
|
|
128
134
|
useEffect(() => {
|
package/src/useDrag.ts
CHANGED
|
@@ -134,6 +134,9 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
134
134
|
// appear under the pointer while dragging. If not, the element itself is dragged by the browser.
|
|
135
135
|
if (typeof options.preview?.current === 'function') {
|
|
136
136
|
options.preview.current(items, node => {
|
|
137
|
+
if (!node) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
137
140
|
// Compute the offset that the preview will appear under the mouse.
|
|
138
141
|
// If possible, this is based on the point the user clicked on the target.
|
|
139
142
|
// If the preview is much smaller, then just use the center point of the preview.
|
|
@@ -218,7 +221,7 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
218
221
|
|
|
219
222
|
// If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801
|
|
220
223
|
// In this case, we need to manually call onDragEnd on cleanup
|
|
221
|
-
|
|
224
|
+
|
|
222
225
|
useLayoutEffect(() => {
|
|
223
226
|
return () => {
|
|
224
227
|
if (isDraggingRef.current) {
|
|
@@ -279,7 +282,7 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
279
282
|
|
|
280
283
|
let descriptionProps = useDescription(stringFormatter.format(message));
|
|
281
284
|
|
|
282
|
-
let interactions: HTMLAttributes<HTMLElement
|
|
285
|
+
let interactions: HTMLAttributes<HTMLElement> = {};
|
|
283
286
|
if (!hasDragButton) {
|
|
284
287
|
// If there's no separate button to trigger accessible drag and drop mode,
|
|
285
288
|
// then add event handlers to the draggable element itself to start dragging.
|
package/src/useDrop.ts
CHANGED
|
@@ -15,13 +15,13 @@ import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
|
|
|
15
15
|
import * as DragManager from './DragManager';
|
|
16
16
|
import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
|
|
17
17
|
import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
|
|
18
|
-
import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes, RefObject} from '@react-types/shared';
|
|
18
|
+
import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, FocusableElement, DragTypes as IDragTypes, RefObject} from '@react-types/shared';
|
|
19
19
|
import {isIPad, isMac, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
|
|
20
20
|
import {useVirtualDrop} from './useVirtualDrop';
|
|
21
21
|
|
|
22
22
|
export interface DropOptions {
|
|
23
23
|
/** A ref for the droppable element. */
|
|
24
|
-
ref: RefObject<
|
|
24
|
+
ref: RefObject<FocusableElement | null>,
|
|
25
25
|
/**
|
|
26
26
|
* A function returning the drop operation to be performed when items matching the given types are dropped
|
|
27
27
|
* on the drop target.
|
|
@@ -72,13 +72,20 @@ const DROP_ACTIVATE_TIMEOUT = 800;
|
|
|
72
72
|
export function useDrop(options: DropOptions): DropResult {
|
|
73
73
|
let {hasDropButton, isDisabled} = options;
|
|
74
74
|
let [isDropTarget, setDropTarget] = useState(false);
|
|
75
|
-
let state = useRef
|
|
75
|
+
let state = useRef<{
|
|
76
|
+
x: number,
|
|
77
|
+
y: number,
|
|
78
|
+
dragOverElements: Set<Element>,
|
|
79
|
+
dropEffect: DataTransfer['dropEffect'],
|
|
80
|
+
allowedOperations: DROP_OPERATION,
|
|
81
|
+
dropActivateTimer: ReturnType<typeof setTimeout> | undefined
|
|
82
|
+
}>({
|
|
76
83
|
x: 0,
|
|
77
84
|
y: 0,
|
|
78
85
|
dragOverElements: new Set<Element>(),
|
|
79
|
-
dropEffect: 'none'
|
|
86
|
+
dropEffect: 'none',
|
|
80
87
|
allowedOperations: DROP_OPERATION.all,
|
|
81
|
-
dropActivateTimer:
|
|
88
|
+
dropActivateTimer: undefined
|
|
82
89
|
}).current;
|
|
83
90
|
|
|
84
91
|
let fireDropEnter = (e: DragEvent) => {
|
|
@@ -164,10 +171,11 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
164
171
|
|
|
165
172
|
clearTimeout(state.dropActivateTimer);
|
|
166
173
|
|
|
167
|
-
if (typeof options.onDropActivate === 'function' && state.dropEffect !== 'none') {
|
|
174
|
+
if (options.onDropActivate && typeof options.onDropActivate === 'function' && state.dropEffect !== 'none') {
|
|
175
|
+
let onDropActivateOptions = options.onDropActivate;
|
|
168
176
|
let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
169
177
|
state.dropActivateTimer = setTimeout(() => {
|
|
170
|
-
|
|
178
|
+
onDropActivateOptions({
|
|
171
179
|
type: 'dropactivate',
|
|
172
180
|
x: state.x - rect.x,
|
|
173
181
|
y: state.y - rect.y
|
|
@@ -315,7 +323,7 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
315
323
|
|
|
316
324
|
let {ref} = options;
|
|
317
325
|
useLayoutEffect(() => {
|
|
318
|
-
if (isDisabled) {
|
|
326
|
+
if (isDisabled || !ref.current) {
|
|
319
327
|
return;
|
|
320
328
|
}
|
|
321
329
|
return DragManager.registerDropTarget({
|
|
@@ -415,7 +423,7 @@ function getAllowedOperations(e: DragEvent) {
|
|
|
415
423
|
}
|
|
416
424
|
|
|
417
425
|
function allowedOperationsToArray(allowedOperationsBits: DROP_OPERATION) {
|
|
418
|
-
let allowedOperations = [];
|
|
426
|
+
let allowedOperations: Array<DropOperation> = [];
|
|
419
427
|
if (allowedOperationsBits & DROP_OPERATION.move) {
|
|
420
428
|
allowedOperations.push('move');
|
|
421
429
|
}
|
package/src/useDropIndicator.ts
CHANGED
|
@@ -49,10 +49,16 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
|
|
|
49
49
|
let dragSession = DragManager.useDragSession();
|
|
50
50
|
let {dropProps} = useDroppableItem(props, state, ref);
|
|
51
51
|
let id = useId();
|
|
52
|
-
let getText = (key: Key
|
|
52
|
+
let getText = (key: Key | null) => {
|
|
53
|
+
if (key == null) {
|
|
54
|
+
return '';
|
|
55
|
+
} else {
|
|
56
|
+
return collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue ?? '';
|
|
57
|
+
}
|
|
58
|
+
};
|
|
53
59
|
|
|
54
60
|
let label = '';
|
|
55
|
-
let labelledBy: string;
|
|
61
|
+
let labelledBy: string | undefined;
|
|
56
62
|
if (target.type === 'root') {
|
|
57
63
|
label = stringFormatter.format('dropOnRoot');
|
|
58
64
|
labelledBy = `${id} ${getDroppableCollectionId(state)}`;
|
|
@@ -61,8 +67,8 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
|
|
|
61
67
|
itemText: getText(target.key)
|
|
62
68
|
});
|
|
63
69
|
} else {
|
|
64
|
-
let before: Key | null;
|
|
65
|
-
let after: Key | null;
|
|
70
|
+
let before: Key | null | undefined;
|
|
71
|
+
let after: Key | null | undefined;
|
|
66
72
|
if (collection.getFirstKey() === target.key && target.dropPosition === 'before') {
|
|
67
73
|
before = null;
|
|
68
74
|
} else {
|