@react-aria/selection
Advanced tools
Comparing version 3.0.0-nightly-641446f65-240905 to 3.0.0-nightly-65e3a52a3-241120
@@ -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 @@ } |
@@ -27,30 +27,33 @@ var $2ac4508142683dcb$exports = require("./DOMLayoutDelegate.main.js"); | ||
} | ||
getNextKey(key) { | ||
key = this.collection.getKeyAfter(key); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyAfter(key); | ||
findNextNonDisabled(key, getNext) { | ||
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); | ||
} | ||
return null; | ||
} | ||
getNextKey(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); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
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; | ||
} | ||
@@ -75,2 +78,9 @@ isSameRow(prevRect, itemRect) { | ||
getKeyRightOf(key) { | ||
// This is a temporary solution for CardView until we refactor useSelectableCollection. | ||
// https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042 | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -83,2 +93,7 @@ if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'rtl'); | ||
getKeyLeftOf(key) { | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -92,17 +107,7 @@ if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'ltr'); | ||
let key = this.collection.getFirstKey(); | ||
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 = this.collection.getKeyAfter(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key)); | ||
} | ||
getLastKey() { | ||
let key = this.collection.getLastKey(); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key)); | ||
} | ||
@@ -113,17 +118,18 @@ getKeyPageAbove(key) { | ||
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(); | ||
} | ||
@@ -134,17 +140,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(); | ||
} | ||
@@ -157,5 +164,6 @@ getKeyForSearch(search, fromKey) { | ||
let item = collection.getItem(key); | ||
if (!item) return null; | ||
let substring = item.textValue.slice(0, search.length); | ||
if (item.textValue && this.collator.compare(substring, search) === 0) return key; | ||
key = this.getKeyBelow(key); | ||
key = this.getNextKey(key); | ||
} | ||
@@ -162,0 +170,0 @@ return null; |
@@ -21,30 +21,33 @@ import {DOMLayoutDelegate as $657e4dc4a6e88df0$export$8f5ed9ff9f511381} from "./DOMLayoutDelegate.module.js"; | ||
} | ||
getNextKey(key) { | ||
key = this.collection.getKeyAfter(key); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyAfter(key); | ||
findNextNonDisabled(key, getNext) { | ||
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); | ||
} | ||
return null; | ||
} | ||
getNextKey(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); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
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; | ||
} | ||
@@ -69,2 +72,9 @@ isSameRow(prevRect, itemRect) { | ||
getKeyRightOf(key) { | ||
// This is a temporary solution for CardView until we refactor useSelectableCollection. | ||
// https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042 | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -77,2 +87,7 @@ if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'rtl'); | ||
getKeyLeftOf(key) { | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, (key)=>this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -86,17 +101,7 @@ if (this.orientation === 'vertical') return this.getNextColumn(key, this.direction === 'ltr'); | ||
let key = this.collection.getFirstKey(); | ||
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 = this.collection.getKeyAfter(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key)); | ||
} | ||
getLastKey() { | ||
let key = this.collection.getLastKey(); | ||
while(key != null){ | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) return key; | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key)); | ||
} | ||
@@ -107,17 +112,18 @@ getKeyPageAbove(key) { | ||
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(); | ||
} | ||
@@ -128,17 +134,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(); | ||
} | ||
@@ -151,5 +158,6 @@ getKeyForSearch(search, fromKey) { | ||
let item = collection.getItem(key); | ||
if (!item) return null; | ||
let substring = item.textValue.slice(0, search.length); | ||
if (item.textValue && this.collator.compare(substring, search) === 0) return key; | ||
key = this.getKeyBelow(key); | ||
key = this.getNextKey(key); | ||
} | ||
@@ -156,0 +164,0 @@ return null; |
@@ -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); | ||
@@ -118,4 +120,6 @@ if (nextKey != null) { | ||
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); | ||
} | ||
} | ||
@@ -128,8 +132,10 @@ break; | ||
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 +149,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -178,3 +184,3 @@ if (nextKey != null) { | ||
}); | ||
let next; | ||
let next = undefined; | ||
let last; | ||
@@ -197,6 +203,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 +222,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
var _delegate_getLastKey, _delegate_getFirstKey; | ||
let navigateToFirstKey = (key)=>{ | ||
@@ -226,5 +235,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 +243,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 +264,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 +283,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 +291,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 +307,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 +336,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 +339,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); | ||
@@ -112,4 +114,6 @@ if (nextKey != null) { | ||
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); | ||
} | ||
} | ||
@@ -122,8 +126,10 @@ break; | ||
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 +143,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -172,3 +178,3 @@ if (nextKey != null) { | ||
}); | ||
let next; | ||
let next = undefined; | ||
let last; | ||
@@ -191,6 +197,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 +216,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
var _delegate_getLastKey, _delegate_getFirstKey; | ||
let navigateToFirstKey = (key)=>{ | ||
@@ -220,5 +229,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 +237,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 +258,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 +277,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 +285,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 +301,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 +330,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 +333,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); | ||
@@ -132,6 +132,6 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{ | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e); | ||
}; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : undefined; | ||
} | ||
@@ -138,0 +138,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); | ||
@@ -126,6 +126,6 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{ | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{ | ||
if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e); | ||
}; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : undefined; | ||
} | ||
@@ -132,0 +132,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-641446f65-240905", | ||
"version": "3.0.0-nightly-65e3a52a3-241120", | ||
"description": "Spectrum UI components in React", | ||
@@ -25,13 +25,13 @@ "license": "Apache-2.0", | ||
"dependencies": { | ||
"@react-aria/focus": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/i18n": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/interactions": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/utils": "^3.0.0-nightly-641446f65-240905", | ||
"@react-stately/selection": "^3.0.0-nightly-641446f65-240905", | ||
"@react-types/shared": "^3.0.0-nightly-641446f65-240905", | ||
"@react-aria/focus": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@react-aria/i18n": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@react-aria/interactions": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@react-aria/utils": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@react-stately/selection": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@react-types/shared": "^3.0.0-nightly-65e3a52a3-241120", | ||
"@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.19.3" | ||
"stableVersion": "3.20.1" | ||
} |
@@ -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,11 +77,11 @@ /* | ||
getNextKey(key: Key) { | ||
key = this.collection.getKeyAfter(key); | ||
while (key != null) { | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) { | ||
return 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 nextKey; | ||
} | ||
key = this.collection.getKeyAfter(key); | ||
nextKey = getNext(nextKey); | ||
} | ||
@@ -92,14 +92,12 @@ | ||
getNextKey(key: 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); | ||
while (key != null) { | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) { | ||
return key; | ||
} | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
let nextKey: Key | null = key; | ||
nextKey = this.collection.getKeyBefore(nextKey); | ||
return this.findNextNonDisabled(nextKey, key => this.collection.getKeyBefore(key)); | ||
} | ||
@@ -109,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; | ||
@@ -121,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; | ||
} | ||
@@ -157,3 +159,11 @@ | ||
getKeyRightOf(key: Key) { | ||
getKeyRightOf?(key: Key) { | ||
// This is a temporary solution for CardView until we refactor useSelectableCollection. | ||
// https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042 | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, key => this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -172,3 +182,9 @@ if (this.orientation === 'vertical') { | ||
getKeyLeftOf(key: Key) { | ||
getKeyLeftOf?(key: Key) { | ||
let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf'; | ||
if (this.layoutDelegate[layoutDelegateMethod]) { | ||
key = this.layoutDelegate[layoutDelegateMethod](key); | ||
return this.findNextNonDisabled(key, key => this.layoutDelegate[layoutDelegateMethod](key)); | ||
} | ||
if (this.layout === 'grid') { | ||
@@ -189,12 +205,3 @@ if (this.orientation === 'vertical') { | ||
let key = this.collection.getFirstKey(); | ||
while (key != null) { | ||
let item = this.collection.getItem(key); | ||
if (item?.type === 'item' && !this.isDisabled(item)) { | ||
return key; | ||
} | ||
key = this.collection.getKeyAfter(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key)); | ||
} | ||
@@ -204,12 +211,3 @@ | ||
let key = this.collection.getLastKey(); | ||
while (key != null) { | ||
let item = this.collection.getItem(key); | ||
if (item.type === 'item' && !this.isDisabled(item)) { | ||
return key; | ||
} | ||
key = this.collection.getKeyBefore(key); | ||
} | ||
return null; | ||
return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key)); | ||
} | ||
@@ -224,12 +222,13 @@ | ||
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); | ||
} | ||
@@ -239,9 +238,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(); | ||
} | ||
@@ -256,12 +255,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); | ||
} | ||
@@ -271,9 +271,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(); | ||
} | ||
@@ -290,2 +290,5 @@ | ||
let item = collection.getItem(key); | ||
if (!item) { | ||
return null; | ||
} | ||
let substring = item.textValue.slice(0, search.length); | ||
@@ -296,3 +299,3 @@ if (item.textValue && this.collator.compare(substring, search) === 0) { | ||
key = this.getKeyBelow(key); | ||
key = this.getNextKey(key); | ||
} | ||
@@ -299,0 +302,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) { | ||
@@ -228,8 +230,10 @@ nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey); | ||
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); | ||
} | ||
} | ||
@@ -243,6 +247,8 @@ } | ||
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 +258,3 @@ } | ||
case 'PageDown': | ||
if (delegate.getKeyPageBelow) { | ||
if (delegate.getKeyPageBelow && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageBelow(manager.focusedKey); | ||
@@ -262,3 +268,3 @@ if (nextKey != null) { | ||
case 'PageUp': | ||
if (delegate.getKeyPageAbove) { | ||
if (delegate.getKeyPageAbove && manager.focusedKey != null) { | ||
let nextKey = delegate.getKeyPageAbove(manager.focusedKey); | ||
@@ -296,3 +302,3 @@ if (nextKey != null) { | ||
let walker = getFocusableTreeWalker(ref.current, {tabbable: true}); | ||
let next: FocusableElement; | ||
let next: FocusableElement | undefined = undefined; | ||
let last: FocusableElement; | ||
@@ -319,6 +325,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 +351,3 @@ }); | ||
if (manager.focusedKey == null) { | ||
let navigateToFirstKey = (key: Key | undefined) => { | ||
let navigateToFirstKey = (key: Key | undefined | null) => { | ||
if (key != null) { | ||
@@ -359,7 +365,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 +376,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 +404,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 +429,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 +440,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 +461,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 +502,3 @@ } | ||
// to move real DOM focus to the element anyway. | ||
let tabIndex: number; | ||
let tabIndex: number | undefined = undefined; | ||
if (!shouldUseVirtualFocus) { | ||
@@ -499,0 +505,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); | ||
@@ -264,3 +264,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions); | ||
} else { | ||
itemPressProps.onPressUp = hasPrimaryAction ? null : (e) => { | ||
itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => { | ||
if (e.pointerType !== 'keyboard' && allowsSelection) { | ||
@@ -271,3 +271,3 @@ onSelect(e); | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : null; | ||
itemPressProps.onPress = hasPrimaryAction ? performAction : undefined; | ||
} | ||
@@ -274,0 +274,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
392125
4387
+ Addedreact@19.0.0-rc-fb9a90fa48-20240614(transitive)
+ Addedreact-dom@19.0.0-rc-fb9a90fa48-20240614(transitive)
+ Addedscheduler@0.25.0-rc-fb9a90fa48-20240614(transitive)
- Removedjs-tokens@4.0.0(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removedreact@18.3.1(transitive)
- Removedreact-dom@18.3.1(transitive)
- Removedscheduler@0.23.2(transitive)
Updated@react-aria/interactions@^3.0.0-nightly-65e3a52a3-241120
Updated@react-stately/selection@^3.0.0-nightly-65e3a52a3-241120