@react-aria/selection
Advanced tools
Comparing version 3.0.0-nightly-7aa6265a2-241113 to 3.0.0-nightly-7eae25e12-241205
@@ -20,2 +20,3 @@ | ||
let container = this.ref.current; | ||
if (!container) return null; | ||
let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null; | ||
@@ -34,5 +35,6 @@ if (!item) return null; | ||
let container = this.ref.current; | ||
var _container_scrollWidth, _container_scrollHeight; | ||
return { | ||
width: container.scrollWidth, | ||
height: container.scrollHeight | ||
width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0, | ||
height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0 | ||
}; | ||
@@ -42,7 +44,8 @@ } | ||
let container = this.ref.current; | ||
var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight; | ||
return { | ||
x: container.scrollLeft, | ||
y: container.scrollTop, | ||
width: container.offsetWidth, | ||
height: container.offsetHeight | ||
x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0, | ||
y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0, | ||
width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0, | ||
height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0 | ||
}; | ||
@@ -49,0 +52,0 @@ } |
@@ -14,2 +14,3 @@ /* | ||
let container = this.ref.current; | ||
if (!container) return null; | ||
let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null; | ||
@@ -28,5 +29,6 @@ if (!item) return null; | ||
let container = this.ref.current; | ||
var _container_scrollWidth, _container_scrollHeight; | ||
return { | ||
width: container.scrollWidth, | ||
height: container.scrollHeight | ||
width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0, | ||
height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0 | ||
}; | ||
@@ -36,7 +38,8 @@ } | ||
let container = this.ref.current; | ||
var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight; | ||
return { | ||
x: container.scrollLeft, | ||
y: container.scrollTop, | ||
width: container.offsetWidth, | ||
height: container.offsetHeight | ||
x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0, | ||
y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0, | ||
width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0, | ||
height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0 | ||
}; | ||
@@ -43,0 +46,0 @@ } |
@@ -28,6 +28,7 @@ var $2ac4508142683dcb$exports = require("./DOMLayoutDelegate.main.js"); | ||
findNextNonDisabled(key, getNext) { | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return key; | ||
key = getNext(key); | ||
let nextKey = key; | ||
while(nextKey != null){ | ||
let item = this.collection.getItem(nextKey); | ||
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return nextKey; | ||
nextKey = getNext(nextKey); | ||
} | ||
@@ -37,19 +38,23 @@ return null; | ||
getNextKey(key) { | ||
key = this.collection.getKeyAfter(key); | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key)); | ||
let nextKey = key; | ||
nextKey = this.collection.getKeyAfter(nextKey); | ||
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyAfter(key)); | ||
} | ||
getPreviousKey(key) { | ||
key = this.collection.getKeyBefore(key); | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key)); | ||
let nextKey = key; | ||
nextKey = this.collection.getKeyBefore(nextKey); | ||
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyBefore(key)); | ||
} | ||
findKey(key, nextKey, shouldSkip) { | ||
let itemRect = this.layoutDelegate.getItemRect(key); | ||
if (!itemRect) return null; | ||
let tempKey = key; | ||
let itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
if (!itemRect || tempKey == null) return null; | ||
// Find the item above or below in the same column. | ||
let prevRect = itemRect; | ||
do { | ||
key = nextKey(key); | ||
itemRect = this.layoutDelegate.getItemRect(key); | ||
}while (itemRect && shouldSkip(prevRect, itemRect)); | ||
return key; | ||
tempKey = nextKey(tempKey); | ||
if (tempKey == null) break; | ||
itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
}while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null); | ||
return tempKey; | ||
} | ||
@@ -111,17 +116,18 @@ isSameRow(prevRect, itemRect) { | ||
if (!itemRect) return null; | ||
if (!(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getFirstKey(); | ||
if (menu && !(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getFirstKey(); | ||
let nextKey = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width); | ||
while(itemRect && itemRect.x > pageX){ | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.x > pageX && nextKey != null){ | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} else { | ||
let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height); | ||
while(itemRect && itemRect.y > pageY){ | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.y > pageY && nextKey != null){ | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key !== null && key !== void 0 ? key : this.getFirstKey(); | ||
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey(); | ||
} | ||
@@ -132,17 +138,18 @@ getKeyPageBelow(key) { | ||
if (!itemRect) return null; | ||
if (!(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getLastKey(); | ||
if (menu && !(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getLastKey(); | ||
let nextKey = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width); | ||
while(itemRect && itemRect.x < pageX){ | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.x < pageX && nextKey != null){ | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} else { | ||
let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height); | ||
while(itemRect && itemRect.y < pageY){ | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.y < pageY && nextKey != null){ | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key !== null && key !== void 0 ? key : this.getLastKey(); | ||
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey(); | ||
} | ||
@@ -155,2 +162,3 @@ getKeyForSearch(search, fromKey) { | ||
let item = collection.getItem(key); | ||
if (!item) return null; | ||
let substring = item.textValue.slice(0, search.length); | ||
@@ -157,0 +165,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) return key; |
@@ -22,6 +22,7 @@ import {DOMLayoutDelegate as $657e4dc4a6e88df0$export$8f5ed9ff9f511381} from "./DOMLayoutDelegate.module.js"; | ||
findNextNonDisabled(key, getNext) { | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return key; | ||
key = getNext(key); | ||
let nextKey = key; | ||
while(nextKey != null){ | ||
let item = this.collection.getItem(nextKey); | ||
if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return nextKey; | ||
nextKey = getNext(nextKey); | ||
} | ||
@@ -31,19 +32,23 @@ return null; | ||
getNextKey(key) { | ||
key = this.collection.getKeyAfter(key); | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key)); | ||
let nextKey = key; | ||
nextKey = this.collection.getKeyAfter(nextKey); | ||
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyAfter(key)); | ||
} | ||
getPreviousKey(key) { | ||
key = this.collection.getKeyBefore(key); | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key)); | ||
let nextKey = key; | ||
nextKey = this.collection.getKeyBefore(nextKey); | ||
return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyBefore(key)); | ||
} | ||
findKey(key, nextKey, shouldSkip) { | ||
let itemRect = this.layoutDelegate.getItemRect(key); | ||
if (!itemRect) return null; | ||
let tempKey = key; | ||
let itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
if (!itemRect || tempKey == null) return null; | ||
// Find the item above or below in the same column. | ||
let prevRect = itemRect; | ||
do { | ||
key = nextKey(key); | ||
itemRect = this.layoutDelegate.getItemRect(key); | ||
}while (itemRect && shouldSkip(prevRect, itemRect)); | ||
return key; | ||
tempKey = nextKey(tempKey); | ||
if (tempKey == null) break; | ||
itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
}while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null); | ||
return tempKey; | ||
} | ||
@@ -105,17 +110,18 @@ isSameRow(prevRect, itemRect) { | ||
if (!itemRect) return null; | ||
if (!(0, $eak97$isScrollable)(menu)) return this.getFirstKey(); | ||
if (menu && !(0, $eak97$isScrollable)(menu)) return this.getFirstKey(); | ||
let nextKey = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width); | ||
while(itemRect && itemRect.x > pageX){ | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.x > pageX && nextKey != null){ | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} else { | ||
let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height); | ||
while(itemRect && itemRect.y > pageY){ | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.y > pageY && nextKey != null){ | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key !== null && key !== void 0 ? key : this.getFirstKey(); | ||
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey(); | ||
} | ||
@@ -126,17 +132,18 @@ getKeyPageBelow(key) { | ||
if (!itemRect) return null; | ||
if (!(0, $eak97$isScrollable)(menu)) return this.getLastKey(); | ||
if (menu && !(0, $eak97$isScrollable)(menu)) return this.getLastKey(); | ||
let nextKey = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width); | ||
while(itemRect && itemRect.x < pageX){ | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.x < pageX && nextKey != null){ | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} else { | ||
let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height); | ||
while(itemRect && itemRect.y < pageY){ | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while(itemRect && itemRect.y < pageY && nextKey != null){ | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key !== null && key !== void 0 ? key : this.getLastKey(); | ||
return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey(); | ||
} | ||
@@ -149,2 +156,3 @@ getKeyForSearch(search, fromKey) { | ||
let item = collection.getItem(key); | ||
if (!item) return null; | ||
let substring = item.textValue.slice(0, search.length); | ||
@@ -151,0 +159,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) return key; |
@@ -191,3 +191,3 @@ import { DOMAttributes, Key, KeyboardDelegate, FocusStrategy, RefObject, FocusableElement, LayoutDelegate, Rect, Size, Collection, Direction, DisabledBehavior, Node, Orientation } from "@react-types/shared"; | ||
export class DOMLayoutDelegate implements LayoutDelegate { | ||
constructor(ref: RefObject<HTMLElement>); | ||
constructor(ref: RefObject<HTMLElement | null>); | ||
getItemRect(key: Key): Rect | null; | ||
@@ -211,13 +211,13 @@ getContentSize(): Size; | ||
constructor(options: ListKeyboardDelegateOptions<T>); | ||
getNextKey(key: Key): Key; | ||
getPreviousKey(key: Key): Key; | ||
getKeyBelow(key: Key): Key; | ||
getKeyAbove(key: Key): Key; | ||
getKeyRightOf(key: Key): Key; | ||
getKeyLeftOf(key: Key): Key; | ||
getFirstKey(): Key; | ||
getLastKey(): Key; | ||
getKeyPageAbove(key: Key): Key; | ||
getKeyPageBelow(key: Key): Key; | ||
getKeyForSearch(search: string, fromKey?: Key): Key; | ||
getNextKey(key: Key): Key | null; | ||
getPreviousKey(key: Key): Key | null; | ||
getKeyBelow(key: Key): Key | null; | ||
getKeyAbove(key: Key): Key | null; | ||
getKeyRightOf?(key: Key): Key | null; | ||
getKeyLeftOf?(key: Key): Key | null; | ||
getFirstKey(): Key | null; | ||
getLastKey(): Key | null; | ||
getKeyPageAbove(key: Key): Key | null; | ||
getKeyPageBelow(key: Key): Key | null; | ||
getKeyForSearch(search: string, fromKey?: Key): Key | null; | ||
} | ||
@@ -224,0 +224,0 @@ export interface AriaSelectableListOptions extends Omit<AriaSelectableCollectionOptions, 'keyboardDelegate'> { |
@@ -40,2 +40,3 @@ var $ee0bdf4faa47f2a8$exports = require("./utils.main.js"); | ||
let onKeyDown = (e)=>{ | ||
var _ref_current; | ||
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes | ||
@@ -45,6 +46,7 @@ if (e.altKey && e.key === 'Tab') e.preventDefault(); | ||
// for elements outside the collection (e.g. menus). | ||
if (!ref.current.contains(e.target)) return; | ||
if (!((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) return; | ||
const navigateToKey = (key, childFocus)=>{ | ||
if (key != null) { | ||
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $ee0bdf4faa47f2a8$exports.isNonContiguousSelectionModifier)(e)) { | ||
var _scrollRef_current; | ||
// Set focused key and re-render synchronously to bring item into view if needed. | ||
@@ -54,5 +56,5 @@ (0, $bT8Bh$reactdom.flushSync)(()=>{ | ||
}); | ||
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let item = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let itemProps = manager.getItemProps(key); | ||
router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
if (item) router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
return; | ||
@@ -92,3 +94,3 @@ } | ||
var _delegate_getKeyLeftOf, _delegate_getFirstKey2, _delegate_getLastKey2; | ||
let nextKey = (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey); | ||
let nextKey = manager.focusedKey != null ? (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey); | ||
@@ -104,3 +106,3 @@ if (nextKey != null) { | ||
var _delegate_getKeyRightOf, _delegate_getLastKey3, _delegate_getFirstKey3; | ||
let nextKey = (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey); | ||
let nextKey = manager.focusedKey != null ? (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey); | ||
@@ -115,7 +117,10 @@ if (nextKey != null) { | ||
if (delegate.getFirstKey) { | ||
if (manager.focusedKey === null && e.shiftKey) return; | ||
e.preventDefault(); | ||
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e)); | ||
manager.setFocusedKey(firstKey); | ||
if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey); | ||
else if (selectOnFocus) manager.replaceSelection(firstKey); | ||
if (firstKey != null) { | ||
if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey); | ||
else if (selectOnFocus) manager.replaceSelection(firstKey); | ||
} | ||
} | ||
@@ -125,11 +130,14 @@ break; | ||
if (delegate.getLastKey) { | ||
if (manager.focusedKey === null && e.shiftKey) return; | ||
e.preventDefault(); | ||
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e)); | ||
manager.setFocusedKey(lastKey); | ||
if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey); | ||
else if (selectOnFocus) manager.replaceSelection(lastKey); | ||
if (lastKey != null) { | ||
if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey); | ||
else if (selectOnFocus) manager.replaceSelection(lastKey); | ||
} | ||
} | ||
break; | ||
case 'PageDown': | ||
if (delegate.getKeyPageBelow) { | ||
if (delegate.getKeyPageBelow && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageBelow(manager.focusedKey); | ||
@@ -143,3 +151,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -178,3 +186,3 @@ if (nextKey != null) { | ||
}); | ||
let next; | ||
let next = undefined; | ||
let last; | ||
@@ -197,6 +205,8 @@ do { | ||
}); | ||
(0, $bT8Bh$reactariautils.useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{ | ||
(0, $bT8Bh$reactariautils.useEvent)(scrollRef, 'scroll', isVirtualized ? undefined : ()=>{ | ||
var _scrollRef_current, _scrollRef_current1; | ||
var _scrollRef_current_scrollTop, _scrollRef_current_scrollLeft; | ||
scrollPos.current = { | ||
top: scrollRef.current.scrollTop, | ||
left: scrollRef.current.scrollLeft | ||
top: (_scrollRef_current_scrollTop = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTop) !== null && _scrollRef_current_scrollTop !== void 0 ? _scrollRef_current_scrollTop : 0, | ||
left: (_scrollRef_current_scrollLeft = (_scrollRef_current1 = scrollRef.current) === null || _scrollRef_current1 === void 0 ? void 0 : _scrollRef_current1.scrollLeft) !== null && _scrollRef_current_scrollLeft !== void 0 ? _scrollRef_current_scrollLeft : 0 | ||
}; | ||
@@ -214,2 +224,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
var _delegate_getLastKey, _delegate_getFirstKey; | ||
let navigateToFirstKey = (key)=>{ | ||
@@ -226,5 +237,5 @@ if (key != null) { | ||
var _manager_lastSelectedKey, _manager_firstSelectedKey; | ||
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey()); | ||
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey()); | ||
} else if (!isVirtualized) { | ||
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)); | ||
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)); | ||
} else if (!isVirtualized && scrollRef.current) { | ||
// Restore the scroll position to what it was before. | ||
@@ -234,3 +245,3 @@ scrollRef.current.scrollTop = scrollPos.current.top; | ||
} | ||
if (manager.focusedKey != null) { | ||
if (manager.focusedKey != null && scrollRef.current) { | ||
// Refocus and scroll the focused item into view if it exists within the scrollable region. | ||
@@ -255,6 +266,9 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`); | ||
if (autoFocusRef.current) { | ||
var _delegate_getFirstKey, _delegate_getLastKey; | ||
let focusedKey = null; | ||
var _delegate_getFirstKey1; | ||
// Check focus strategy to determine which item to focus | ||
if (autoFocus === 'first') focusedKey = delegate.getFirstKey(); | ||
if (autoFocus === 'last') focusedKey = delegate.getLastKey(); | ||
if (autoFocus === 'first') focusedKey = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null; | ||
var _delegate_getLastKey1; | ||
if (autoFocus === 'last') focusedKey = (_delegate_getLastKey1 = (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)) !== null && _delegate_getLastKey1 !== void 0 ? _delegate_getLastKey1 : null; | ||
// If there are any selected keys, make the first one the new focus target | ||
@@ -271,3 +285,3 @@ let selectedKeys = manager.selectedKeys; | ||
// If no default focus key is selected, focus the collection itself. | ||
if (focusedKey == null && !shouldUseVirtualFocus) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current); | ||
if (focusedKey == null && !shouldUseVirtualFocus && ref.current) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current); | ||
} | ||
@@ -279,3 +293,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps | ||
(0, $bT8Bh$react.useEffect)(()=>{ | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) { | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) { | ||
let modality = (0, $bT8Bh$reactariainteractions.getInteractionModality)(); | ||
@@ -295,3 +309,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`); | ||
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection. | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current); | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current); | ||
lastFocusedKey.current = manager.focusedKey; | ||
@@ -324,3 +338,3 @@ autoFocusRef.current = false; | ||
// to move real DOM focus to the element anyway. | ||
let tabIndex; | ||
let tabIndex = undefined; | ||
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1; | ||
@@ -327,0 +341,0 @@ return { |
@@ -34,2 +34,3 @@ import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js"; | ||
let onKeyDown = (e)=>{ | ||
var _ref_current; | ||
// Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes | ||
@@ -39,6 +40,7 @@ if (e.altKey && e.key === 'Tab') e.preventDefault(); | ||
// for elements outside the collection (e.g. menus). | ||
if (!ref.current.contains(e.target)) return; | ||
if (!((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) return; | ||
const navigateToKey = (key, childFocus)=>{ | ||
if (key != null) { | ||
if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) { | ||
var _scrollRef_current; | ||
// Set focused key and re-render synchronously to bring item into view if needed. | ||
@@ -48,5 +50,5 @@ (0, $3H3GQ$flushSync)(()=>{ | ||
}); | ||
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let item = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let itemProps = manager.getItemProps(key); | ||
router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
if (item) router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
return; | ||
@@ -86,3 +88,3 @@ } | ||
var _delegate_getKeyLeftOf, _delegate_getFirstKey2, _delegate_getLastKey2; | ||
let nextKey = (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey); | ||
let nextKey = manager.focusedKey != null ? (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey); | ||
@@ -98,3 +100,3 @@ if (nextKey != null) { | ||
var _delegate_getKeyRightOf, _delegate_getLastKey3, _delegate_getFirstKey3; | ||
let nextKey = (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey); | ||
let nextKey = manager.focusedKey != null ? (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey); | ||
@@ -109,7 +111,10 @@ if (nextKey != null) { | ||
if (delegate.getFirstKey) { | ||
if (manager.focusedKey === null && e.shiftKey) return; | ||
e.preventDefault(); | ||
let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e)); | ||
manager.setFocusedKey(firstKey); | ||
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey); | ||
else if (selectOnFocus) manager.replaceSelection(firstKey); | ||
if (firstKey != null) { | ||
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey); | ||
else if (selectOnFocus) manager.replaceSelection(firstKey); | ||
} | ||
} | ||
@@ -119,11 +124,14 @@ break; | ||
if (delegate.getLastKey) { | ||
if (manager.focusedKey === null && e.shiftKey) return; | ||
e.preventDefault(); | ||
let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e)); | ||
manager.setFocusedKey(lastKey); | ||
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey); | ||
else if (selectOnFocus) manager.replaceSelection(lastKey); | ||
if (lastKey != null) { | ||
if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey); | ||
else if (selectOnFocus) manager.replaceSelection(lastKey); | ||
} | ||
} | ||
break; | ||
case 'PageDown': | ||
if (delegate.getKeyPageBelow) { | ||
if (delegate.getKeyPageBelow && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageBelow(manager.focusedKey); | ||
@@ -137,3 +145,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -172,3 +180,3 @@ if (nextKey != null) { | ||
}); | ||
let next; | ||
let next = undefined; | ||
let last; | ||
@@ -191,6 +199,8 @@ do { | ||
}); | ||
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{ | ||
(0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? undefined : ()=>{ | ||
var _scrollRef_current, _scrollRef_current1; | ||
var _scrollRef_current_scrollTop, _scrollRef_current_scrollLeft; | ||
scrollPos.current = { | ||
top: scrollRef.current.scrollTop, | ||
left: scrollRef.current.scrollLeft | ||
top: (_scrollRef_current_scrollTop = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTop) !== null && _scrollRef_current_scrollTop !== void 0 ? _scrollRef_current_scrollTop : 0, | ||
left: (_scrollRef_current_scrollLeft = (_scrollRef_current1 = scrollRef.current) === null || _scrollRef_current1 === void 0 ? void 0 : _scrollRef_current1.scrollLeft) !== null && _scrollRef_current_scrollLeft !== void 0 ? _scrollRef_current_scrollLeft : 0 | ||
}; | ||
@@ -208,2 +218,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
var _delegate_getLastKey, _delegate_getFirstKey; | ||
let navigateToFirstKey = (key)=>{ | ||
@@ -220,5 +231,5 @@ if (key != null) { | ||
var _manager_lastSelectedKey, _manager_firstSelectedKey; | ||
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey()); | ||
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey()); | ||
} else if (!isVirtualized) { | ||
if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)); | ||
else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)); | ||
} else if (!isVirtualized && scrollRef.current) { | ||
// Restore the scroll position to what it was before. | ||
@@ -228,3 +239,3 @@ scrollRef.current.scrollTop = scrollPos.current.top; | ||
} | ||
if (manager.focusedKey != null) { | ||
if (manager.focusedKey != null && scrollRef.current) { | ||
// Refocus and scroll the focused item into view if it exists within the scrollable region. | ||
@@ -249,6 +260,9 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`); | ||
if (autoFocusRef.current) { | ||
var _delegate_getFirstKey, _delegate_getLastKey; | ||
let focusedKey = null; | ||
var _delegate_getFirstKey1; | ||
// Check focus strategy to determine which item to focus | ||
if (autoFocus === 'first') focusedKey = delegate.getFirstKey(); | ||
if (autoFocus === 'last') focusedKey = delegate.getLastKey(); | ||
if (autoFocus === 'first') focusedKey = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null; | ||
var _delegate_getLastKey1; | ||
if (autoFocus === 'last') focusedKey = (_delegate_getLastKey1 = (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)) !== null && _delegate_getLastKey1 !== void 0 ? _delegate_getLastKey1 : null; | ||
// If there are any selected keys, make the first one the new focus target | ||
@@ -265,3 +279,3 @@ let selectedKeys = manager.selectedKeys; | ||
// If no default focus key is selected, focus the collection itself. | ||
if (focusedKey == null && !shouldUseVirtualFocus) (0, $3H3GQ$focusSafely)(ref.current); | ||
if (focusedKey == null && !shouldUseVirtualFocus && ref.current) (0, $3H3GQ$focusSafely)(ref.current); | ||
} | ||
@@ -273,3 +287,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps | ||
(0, $3H3GQ$useEffect)(()=>{ | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) { | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) { | ||
let modality = (0, $3H3GQ$getInteractionModality)(); | ||
@@ -289,3 +303,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`); | ||
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection. | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $3H3GQ$focusSafely)(ref.current); | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) (0, $3H3GQ$focusSafely)(ref.current); | ||
lastFocusedKey.current = manager.focusedKey; | ||
@@ -318,3 +332,3 @@ autoFocusRef.current = false; | ||
// to move real DOM focus to the element anyway. | ||
let tabIndex; | ||
let tabIndex = undefined; | ||
if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1; | ||
@@ -321,0 +335,0 @@ return { |
@@ -36,3 +36,3 @@ var $ee0bdf4faa47f2a8$exports = require("./utils.main.js"); | ||
if (manager.isLink(key)) { | ||
if (linkBehavior === 'selection') { | ||
if (linkBehavior === 'selection' && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -59,3 +59,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
if (focus) focus(); | ||
else if (document.activeElement !== ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current); | ||
else if (document.activeElement !== ref.current && ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current); | ||
} | ||
@@ -103,3 +103,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps | ||
if (onAction) onAction(); | ||
if (hasLinkAction) { | ||
if (hasLinkAction && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -123,3 +123,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
}; | ||
// If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row) | ||
@@ -133,6 +133,8 @@ if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{ | ||
else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e); | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{ | ||
if (e.pointerType === 'mouse' && allowsSelection) onSelect(e); | ||
}; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) onSelect(e); | ||
}; | ||
} | ||
@@ -139,0 +141,0 @@ } else { |
@@ -30,3 +30,3 @@ import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js"; | ||
if (manager.isLink(key)) { | ||
if (linkBehavior === 'selection') { | ||
if (linkBehavior === 'selection' && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -53,3 +53,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
if (focus) focus(); | ||
else if (document.activeElement !== ref.current) (0, $581M0$focusSafely)(ref.current); | ||
else if (document.activeElement !== ref.current && ref.current) (0, $581M0$focusSafely)(ref.current); | ||
} | ||
@@ -97,3 +97,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps | ||
if (onAction) onAction(); | ||
if (hasLinkAction) { | ||
if (hasLinkAction && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -117,3 +117,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
}; | ||
// If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row) | ||
@@ -127,6 +127,8 @@ if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{ | ||
else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e); | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{ | ||
if (e.pointerType === 'mouse' && allowsSelection) onSelect(e); | ||
}; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) onSelect(e); | ||
}; | ||
} | ||
@@ -133,0 +135,0 @@ } else { |
@@ -27,3 +27,3 @@ var $3XJlT$react = require("react"); | ||
search: '', | ||
timeout: null | ||
timeout: undefined | ||
}).current; | ||
@@ -42,10 +42,12 @@ let onKeyDown = (e)=>{ | ||
state.search += character; | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
// If no key found, search from the top. | ||
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search); | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) onTypeSelect(key); | ||
if (keyboardDelegate.getKeyForSearch != null) { | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
// If no key found, search from the top. | ||
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search); | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) onTypeSelect(key); | ||
} | ||
} | ||
@@ -61,3 +63,3 @@ clearTimeout(state.timeout); | ||
// other hooks in order to handle the Spacebar event. | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined | ||
} | ||
@@ -64,0 +66,0 @@ }; |
@@ -21,3 +21,3 @@ import {useRef as $dAE4Y$useRef} from "react"; | ||
search: '', | ||
timeout: null | ||
timeout: undefined | ||
}).current; | ||
@@ -36,10 +36,12 @@ let onKeyDown = (e)=>{ | ||
state.search += character; | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
// If no key found, search from the top. | ||
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search); | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) onTypeSelect(key); | ||
if (keyboardDelegate.getKeyForSearch != null) { | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
// If no key found, search from the top. | ||
if (key == null) key = keyboardDelegate.getKeyForSearch(state.search); | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) onTypeSelect(key); | ||
} | ||
} | ||
@@ -55,3 +57,3 @@ clearTimeout(state.timeout); | ||
// other hooks in order to handle the Spacebar event. | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined | ||
} | ||
@@ -58,0 +60,0 @@ }; |
{ | ||
"name": "@react-aria/selection", | ||
"version": "3.0.0-nightly-7aa6265a2-241113", | ||
"version": "3.0.0-nightly-7eae25e12-241205", | ||
"description": "Spectrum UI components in React", | ||
@@ -25,13 +25,13 @@ "license": "Apache-2.0", | ||
"dependencies": { | ||
"@react-aria/focus": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-aria/i18n": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-aria/interactions": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-aria/utils": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-stately/selection": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-types/shared": "^3.0.0-nightly-7aa6265a2-241113", | ||
"@react-aria/focus": "^3.0.0-nightly-7eae25e12-241205", | ||
"@react-aria/i18n": "^3.0.0-nightly-7eae25e12-241205", | ||
"@react-aria/interactions": "^3.0.0-nightly-7eae25e12-241205", | ||
"@react-aria/utils": "^3.0.0-nightly-7eae25e12-241205", | ||
"@react-stately/selection": "^3.0.0-nightly-7eae25e12-241205", | ||
"@react-types/shared": "^3.0.0-nightly-7eae25e12-241205", | ||
"@swc/helpers": "^0.5.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", | ||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", | ||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" | ||
}, | ||
@@ -41,3 +41,3 @@ "publishConfig": { | ||
}, | ||
"stableVersion": "3.20.1" | ||
"stableVersion": "3.21.0" | ||
} |
@@ -16,5 +16,5 @@ /* | ||
export class DOMLayoutDelegate implements LayoutDelegate { | ||
private ref: RefObject<HTMLElement>; | ||
private ref: RefObject<HTMLElement | null>; | ||
constructor(ref: RefObject<HTMLElement>) { | ||
constructor(ref: RefObject<HTMLElement | null>) { | ||
this.ref = ref; | ||
@@ -25,2 +25,5 @@ } | ||
let container = this.ref.current; | ||
if (!container) { | ||
return null; | ||
} | ||
let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null; | ||
@@ -45,4 +48,4 @@ if (!item) { | ||
return { | ||
width: container.scrollWidth, | ||
height: container.scrollHeight | ||
width: container?.scrollWidth ?? 0, | ||
height: container?.scrollHeight ?? 0 | ||
}; | ||
@@ -54,8 +57,8 @@ } | ||
return { | ||
x: container.scrollLeft, | ||
y: container.scrollTop, | ||
width: container.offsetWidth, | ||
height: container.offsetHeight | ||
x: container?.scrollLeft ?? 0, | ||
y: container?.scrollTop ?? 0, | ||
width: container?.offsetWidth ?? 0, | ||
height: container?.offsetHeight ?? 0 | ||
}; | ||
} | ||
} |
@@ -77,10 +77,11 @@ /* | ||
private findNextNonDisabled(key: Key, getNext: (key: Key) => Key | null): Key | null { | ||
while (key != null) { | ||
let item = this.collection.getItem(key); | ||
private findNextNonDisabled(key: Key | null, getNext: (key: Key) => Key | null): Key | null { | ||
let nextKey = key; | ||
while (nextKey != null) { | ||
let item = this.collection.getItem(nextKey); | ||
if (item?.type === 'item' && !this.isDisabled(item)) { | ||
return key; | ||
return nextKey; | ||
} | ||
key = getNext(key); | ||
nextKey = getNext(nextKey); | ||
} | ||
@@ -92,9 +93,11 @@ | ||
getNextKey(key: Key) { | ||
key = this.collection.getKeyAfter(key); | ||
return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key)); | ||
let nextKey: Key | null = key; | ||
nextKey = this.collection.getKeyAfter(nextKey); | ||
return this.findNextNonDisabled(nextKey, key => this.collection.getKeyAfter(key)); | ||
} | ||
getPreviousKey(key: Key) { | ||
key = this.collection.getKeyBefore(key); | ||
return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key)); | ||
let nextKey: Key | null = key; | ||
nextKey = this.collection.getKeyBefore(nextKey); | ||
return this.findNextNonDisabled(nextKey, key => this.collection.getKeyBefore(key)); | ||
} | ||
@@ -104,7 +107,8 @@ | ||
key: Key, | ||
nextKey: (key: Key) => Key, | ||
nextKey: (key: Key) => Key | null, | ||
shouldSkip: (prevRect: Rect, itemRect: Rect) => boolean | ||
) { | ||
let itemRect = this.layoutDelegate.getItemRect(key); | ||
if (!itemRect) { | ||
let tempKey: Key | null = key; | ||
let itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
if (!itemRect || tempKey == null) { | ||
return null; | ||
@@ -116,7 +120,10 @@ } | ||
do { | ||
key = nextKey(key); | ||
itemRect = this.layoutDelegate.getItemRect(key); | ||
} while (itemRect && shouldSkip(prevRect, itemRect)); | ||
tempKey = nextKey(tempKey); | ||
if (tempKey == null) { | ||
break; | ||
} | ||
itemRect = this.layoutDelegate.getItemRect(tempKey); | ||
} while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null); | ||
return key; | ||
return tempKey; | ||
} | ||
@@ -152,3 +159,3 @@ | ||
getKeyRightOf(key: Key) { | ||
getKeyRightOf?(key: Key) { | ||
// This is a temporary solution for CardView until we refactor useSelectableCollection. | ||
@@ -175,3 +182,3 @@ // https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042 | ||
getKeyLeftOf(key: Key) { | ||
getKeyLeftOf?(key: Key) { | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf'; | ||
@@ -213,12 +220,13 @@ if (this.layoutDelegate[layoutDelegateMethod]) { | ||
if (!isScrollable(menu)) { | ||
if (menu && !isScrollable(menu)) { | ||
return this.getFirstKey(); | ||
} | ||
let nextKey: Key | null = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width); | ||
while (itemRect && itemRect.x > pageX) { | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while (itemRect && itemRect.x > pageX && nextKey != null) { | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
@@ -228,9 +236,9 @@ } else { | ||
while (itemRect && itemRect.y > pageY) { | ||
key = this.getKeyAbove(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while (itemRect && itemRect.y > pageY && nextKey != null) { | ||
nextKey = this.getKeyAbove(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key ?? this.getFirstKey(); | ||
return nextKey ?? this.getFirstKey(); | ||
} | ||
@@ -245,12 +253,13 @@ | ||
if (!isScrollable(menu)) { | ||
if (menu && !isScrollable(menu)) { | ||
return this.getLastKey(); | ||
} | ||
let nextKey: Key | null = key; | ||
if (this.orientation === 'horizontal') { | ||
let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width); | ||
while (itemRect && itemRect.x < pageX) { | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while (itemRect && itemRect.x < pageX && nextKey != null) { | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
@@ -260,9 +269,9 @@ } else { | ||
while (itemRect && itemRect.y < pageY) { | ||
key = this.getKeyBelow(key); | ||
itemRect = key == null ? null : this.layoutDelegate.getItemRect(key); | ||
while (itemRect && itemRect.y < pageY && nextKey != null) { | ||
nextKey = this.getKeyBelow(nextKey); | ||
itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey); | ||
} | ||
} | ||
return key ?? this.getLastKey(); | ||
return nextKey ?? this.getLastKey(); | ||
} | ||
@@ -279,2 +288,5 @@ | ||
let item = collection.getItem(key); | ||
if (!item) { | ||
return null; | ||
} | ||
let substring = item.textValue.slice(0, search.length); | ||
@@ -281,0 +293,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) { |
@@ -131,3 +131,3 @@ /* | ||
// for elements outside the collection (e.g. menus). | ||
if (!ref.current.contains(e.target as Element)) { | ||
if (!ref.current?.contains(e.target as Element)) { | ||
return; | ||
@@ -144,5 +144,7 @@ } | ||
let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let item = scrollRef.current?.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); | ||
let itemProps = manager.getItemProps(key); | ||
router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
if (item) { | ||
router.open(item, e, itemProps.href, itemProps.routerOptions); | ||
} | ||
@@ -199,3 +201,3 @@ return; | ||
if (delegate.getKeyLeftOf) { | ||
let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey); | ||
let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyLeftOf?.(manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) { | ||
@@ -213,3 +215,3 @@ nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey); | ||
if (delegate.getKeyRightOf) { | ||
let nextKey = delegate.getKeyRightOf?.(manager.focusedKey); | ||
let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyRightOf?.(manager.focusedKey) : null; | ||
if (nextKey == null && shouldFocusWrap) { | ||
@@ -227,9 +229,14 @@ nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey); | ||
if (delegate.getFirstKey) { | ||
if (manager.focusedKey === null && e.shiftKey) { | ||
return; | ||
} | ||
e.preventDefault(); | ||
let firstKey = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e)); | ||
let firstKey: Key | null = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e)); | ||
manager.setFocusedKey(firstKey); | ||
if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') { | ||
manager.extendSelection(firstKey); | ||
} else if (selectOnFocus) { | ||
manager.replaceSelection(firstKey); | ||
if (firstKey != null) { | ||
if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') { | ||
manager.extendSelection(firstKey); | ||
} else if (selectOnFocus) { | ||
manager.replaceSelection(firstKey); | ||
} | ||
} | ||
@@ -240,9 +247,14 @@ } | ||
if (delegate.getLastKey) { | ||
if (manager.focusedKey === null && e.shiftKey) { | ||
return; | ||
} | ||
e.preventDefault(); | ||
let lastKey = delegate.getLastKey(manager.focusedKey, isCtrlKeyPressed(e)); | ||
manager.setFocusedKey(lastKey); | ||
if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') { | ||
manager.extendSelection(lastKey); | ||
} else if (selectOnFocus) { | ||
manager.replaceSelection(lastKey); | ||
if (lastKey != null) { | ||
if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') { | ||
manager.extendSelection(lastKey); | ||
} else if (selectOnFocus) { | ||
manager.replaceSelection(lastKey); | ||
} | ||
} | ||
@@ -252,3 +264,3 @@ } | ||
case 'PageDown': | ||
if (delegate.getKeyPageBelow) { | ||
if (delegate.getKeyPageBelow && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageBelow(manager.focusedKey); | ||
@@ -262,3 +274,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -296,3 +308,3 @@ if (nextKey != null) { | ||
let walker = getFocusableTreeWalker(ref.current, {tabbable: true}); | ||
let next: FocusableElement; | ||
let next: FocusableElement | undefined = undefined; | ||
let last: FocusableElement; | ||
@@ -319,6 +331,6 @@ do { | ||
let scrollPos = useRef({top: 0, left: 0}); | ||
useEvent(scrollRef, 'scroll', isVirtualized ? null : () => { | ||
useEvent(scrollRef, 'scroll', isVirtualized ? undefined : () => { | ||
scrollPos.current = { | ||
top: scrollRef.current.scrollTop, | ||
left: scrollRef.current.scrollLeft | ||
top: scrollRef.current?.scrollTop ?? 0, | ||
left: scrollRef.current?.scrollLeft ?? 0 | ||
}; | ||
@@ -345,3 +357,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
let navigateToFirstKey = (key: Key | undefined) => { | ||
let navigateToFirstKey = (key: Key | undefined | null) => { | ||
if (key != null) { | ||
@@ -359,7 +371,7 @@ manager.setFocusedKey(key); | ||
if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) { | ||
navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey()); | ||
navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.()); | ||
} else { | ||
navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey()); | ||
navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.()); | ||
} | ||
} else if (!isVirtualized) { | ||
} else if (!isVirtualized && scrollRef.current) { | ||
// Restore the scroll position to what it was before. | ||
@@ -370,3 +382,3 @@ scrollRef.current.scrollTop = scrollPos.current.top; | ||
if (manager.focusedKey != null) { | ||
if (manager.focusedKey != null && scrollRef.current) { | ||
// Refocus and scroll the focused item into view if it exists within the scrollable region. | ||
@@ -398,9 +410,9 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement; | ||
if (autoFocusRef.current) { | ||
let focusedKey = null; | ||
let focusedKey: Key | null = null; | ||
// Check focus strategy to determine which item to focus | ||
if (autoFocus === 'first') { | ||
focusedKey = delegate.getFirstKey(); | ||
focusedKey = delegate.getFirstKey?.() ?? null; | ||
} if (autoFocus === 'last') { | ||
focusedKey = delegate.getLastKey(); | ||
focusedKey = delegate.getLastKey?.() ?? null; | ||
} | ||
@@ -423,3 +435,3 @@ | ||
// If no default focus key is selected, focus the collection itself. | ||
if (focusedKey == null && !shouldUseVirtualFocus) { | ||
if (focusedKey == null && !shouldUseVirtualFocus && ref.current) { | ||
focusSafely(ref.current); | ||
@@ -434,3 +446,3 @@ } | ||
useEffect(() => { | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef?.current) { | ||
if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) { | ||
let modality = getInteractionModality(); | ||
@@ -455,3 +467,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement; | ||
// If the focused key becomes null (e.g. the last item is deleted), focus the whole collection. | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) { | ||
if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) { | ||
focusSafely(ref.current); | ||
@@ -496,3 +508,3 @@ } | ||
// to move real DOM focus to the element anyway. | ||
let tabIndex: number; | ||
let tabIndex: number | undefined = undefined; | ||
if (!shouldUseVirtualFocus) { | ||
@@ -499,0 +511,0 @@ tabIndex = manager.focusedKey == null ? 0 : -1; |
@@ -13,3 +13,3 @@ /* | ||
import {DOMAttributes, FocusableElement, Key, LongPressEvent, PressEvent, RefObject} from '@react-types/shared'; | ||
import {DOMAttributes, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared'; | ||
import {focusSafely} from '@react-aria/focus'; | ||
@@ -134,3 +134,3 @@ import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils'; | ||
if (manager.isLink(key)) { | ||
if (linkBehavior === 'selection') { | ||
if (linkBehavior === 'selection' && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -169,3 +169,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
focus(); | ||
} else if (document.activeElement !== ref.current) { | ||
} else if (document.activeElement !== ref.current && ref.current) { | ||
focusSafely(ref.current); | ||
@@ -213,3 +213,3 @@ } | ||
let hasAction = hasPrimaryAction || hasSecondaryAction; | ||
let modality = useRef(null); | ||
let modality = useRef<PointerType | null>(null); | ||
@@ -225,3 +225,3 @@ let longPressEnabled = hasAction && allowsSelection; | ||
if (hasLinkAction) { | ||
if (hasLinkAction && ref.current) { | ||
let itemProps = manager.getItemProps(key); | ||
@@ -249,3 +249,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
// If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.) | ||
// Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row) | ||
@@ -265,4 +265,4 @@ if (!allowsDifferentPressOrigin) { | ||
} else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e) => { | ||
if (e.pointerType !== 'keyboard' && allowsSelection) { | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => { | ||
if (e.pointerType === 'mouse' && allowsSelection) { | ||
onSelect(e); | ||
@@ -272,3 +272,7 @@ } | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : (e) => { | ||
if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) { | ||
onSelect(e); | ||
} | ||
}; | ||
} | ||
@@ -275,0 +279,0 @@ } else { |
@@ -49,5 +49,5 @@ /* | ||
let {keyboardDelegate, selectionManager, onTypeSelect} = options; | ||
let state = useRef({ | ||
let state = useRef<{search: string, timeout: ReturnType<typeof setTimeout> | undefined}>({ | ||
search: '', | ||
timeout: null | ||
timeout: undefined | ||
}).current; | ||
@@ -74,15 +74,17 @@ | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
if (keyboardDelegate.getKeyForSearch != null) { | ||
// Use the delegate to find a key to focus. | ||
// Prioritize items after the currently focused item, falling back to searching the whole list. | ||
let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey); | ||
// If no key found, search from the top. | ||
if (key == null) { | ||
key = keyboardDelegate.getKeyForSearch(state.search); | ||
} | ||
// If no key found, search from the top. | ||
if (key == null) { | ||
key = keyboardDelegate.getKeyForSearch(state.search); | ||
} | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) { | ||
onTypeSelect(key); | ||
if (key != null) { | ||
selectionManager.setFocusedKey(key); | ||
if (onTypeSelect) { | ||
onTypeSelect(key); | ||
} | ||
} | ||
@@ -101,3 +103,3 @@ } | ||
// other hooks in order to handle the Spacebar event. | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null | ||
onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined | ||
} | ||
@@ -104,0 +106,0 @@ }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
394381
4409