react-aria-components
Version:
A library of styleable components built using React Aria
835 lines (814 loc) • 43.2 kB
JavaScript
var $b856e6788a7ea5bf$exports = require("./Button.main.js");
var $525402dfec7da5bc$exports = require("./RSPContexts.main.js");
var $c5ccf687772c0422$exports = require("./utils.main.js");
var $3114c2382242bdc0$exports = require("./Collection.main.js");
var $0c2289d253cb4544$exports = require("./DragAndDrop.main.js");
var $132cbde493282f82$exports = require("./GridList.main.js");
var $54e872c96e6d295b$exports = require("./SelectionIndicator.main.js");
var $2d10bc562fea46b3$exports = require("./SharedElementTransition.main.js");
var $8aaf67259e0fe9ed$exports = require("./TreeDropTargetDelegate.main.js");
var $5SMu3$reactaria = require("react-aria");
var $5SMu3$reactariacollections = require("@react-aria/collections");
var $5SMu3$reactstately = require("react-stately");
var $5SMu3$reactariautils = require("@react-aria/utils");
var $5SMu3$react = require("react");
var $5SMu3$reactstatelyutils = require("@react-stately/utils");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "TreeContext", () => $c6576bb58bfa084b$export$dfae7d399eea2568);
$parcel$export(module.exports, "TreeStateContext", () => $c6576bb58bfa084b$export$8953bccafd7bce87);
$parcel$export(module.exports, "Tree", () => $c6576bb58bfa084b$export$7fbedc92909ed28e);
$parcel$export(module.exports, "TreeItemContent", () => $c6576bb58bfa084b$export$4b687e3f663d618c);
$parcel$export(module.exports, "TreeItem", () => $c6576bb58bfa084b$export$53d36ab85dc89436);
$parcel$export(module.exports, "TreeLoadMoreItem", () => $c6576bb58bfa084b$export$533df5f8efd48cc9);
$parcel$export(module.exports, "TreeSection", () => $c6576bb58bfa084b$export$1cd40fa16d4f033a);
$parcel$export(module.exports, "TreeHeader", () => $c6576bb58bfa084b$export$2a73ea8963a8efd8);
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
class $c6576bb58bfa084b$var$TreeCollection extends (0, $5SMu3$reactariacollections.BaseCollection) {
withExpandedKeys(lastExpandedKeys, expandedKeys) {
let collection = this.clone();
collection.expandedKeys = expandedKeys;
// Clone ancestor section nodes so React knows to re-render since the same item won't cause a new render but a clone creating a new object with the same value will
// Without this change, the items won't expand and collapse when virtualized inside a section
$c6576bb58bfa084b$var$TreeCollection.cloneAncestorSections(expandedKeys, lastExpandedKeys, collection);
$c6576bb58bfa084b$var$TreeCollection.cloneAncestorSections(lastExpandedKeys, expandedKeys, collection);
collection.frozen = this.frozen;
return collection;
}
// diff lastExpandedKeys and expandedKeys so we only clone what has changed
static cloneAncestorSections(keys, excludeSet, collection) {
for (let key of keys)if (!excludeSet.has(key)) {
let currentKey = key;
while(currentKey != null){
let item = collection.getItem(currentKey);
var _item_parentKey;
if ((item === null || item === void 0 ? void 0 : item.type) === 'section') {
collection.keyMap.set(currentKey, item.clone());
break;
} else currentKey = (_item_parentKey = item === null || item === void 0 ? void 0 : item.parentKey) !== null && _item_parentKey !== void 0 ? _item_parentKey : null;
}
}
}
*[Symbol.iterator]() {
let firstKey = this.getFirstKey();
let node = firstKey != null ? this.getItem(firstKey) : null;
while(node){
yield node;
if (node.type === 'section') node = node.nextKey ? this.getItem(node.nextKey) : null;
else {
// This will include both item and content nodes
// We handle the content nodes in useCollectionRenderer and ListLayout
let key = this.getKeyAfter(node.key);
node = key ? this.getItem(key) : null;
}
}
}
getLastKey() {
// Find the deepest expanded child. We don't use collection.getLastKey() here
// because that will return the deepest child regardless of expandedKeys.
// Instead, start from the last top-level key and walk down.
let key = this.lastKey;
if (key == null) return null;
let node = this.getItem(key);
while((node === null || node === void 0 ? void 0 : node.lastChildKey) != null && (node.type !== 'item' || this.expandedKeys.has(node.key)))node = this.getItem(node.lastChildKey);
return node === null || node === void 0 ? void 0 : node.key;
}
getKeyAfter(key) {
let node = this.getItem(key);
if (!node) return null;
if ((this.expandedKeys.has(node.key) || node.type !== 'item') && node.firstChildKey != null) return node.firstChildKey;
while(node){
if (node.nextKey != null) return node.nextKey;
if (node.parentKey != null) node = this.getItem(node.parentKey);
else return null;
}
return null;
}
getKeyBefore(key) {
let node = this.getItem(key);
if (!node) return null;
if (node.prevKey != null) {
node = this.getItem(node.prevKey);
// If the lastChildKey is expanded, check its lastChildKey
while(node && (node.type !== 'item' || this.expandedKeys.has(node.key)) && node.lastChildKey != null)node = this.getItem(node.lastChildKey);
var _node_key;
return (_node_key = node === null || node === void 0 ? void 0 : node.key) !== null && _node_key !== void 0 ? _node_key : null;
}
return node.parentKey;
}
getChildren(key) {
let self = this;
return {
*[Symbol.iterator] () {
let parent = self.getItem(key);
let node = (parent === null || parent === void 0 ? void 0 : parent.firstChildKey) != null ? self.getItem(parent.firstChildKey) : null;
if (parent && parent.type === 'section' && node) // Stop once either the node is null or the node is the parent's sibling
while(node && node.key !== parent.nextKey){
yield self.getItem(node.key);
// This will include content nodes which we skip in ListLayout
let key = self.getKeyAfter(node.key);
node = key != null ? self.getItem(key) : null;
}
else while(node){
yield node;
node = node.nextKey != null ? self.getItem(node.nextKey) : null;
}
}
};
}
getTextValue(key) {
let item = this.getItem(key);
return item ? item.textValue : '';
}
constructor(...args){
super(...args), this.expandedKeys = new Set();
}
}
const $c6576bb58bfa084b$export$dfae7d399eea2568 = /*#__PURE__*/ (0, $5SMu3$react.createContext)(null);
const $c6576bb58bfa084b$export$8953bccafd7bce87 = /*#__PURE__*/ (0, $5SMu3$react.createContext)(null);
const $c6576bb58bfa084b$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $5SMu3$react.forwardRef)(function Tree(props, ref) {
// Render the portal first so that we have the collection by the time we render the DOM in SSR.
[props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $c6576bb58bfa084b$export$dfae7d399eea2568);
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $5SMu3$reactariacollections.CollectionBuilder), {
content: /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $5SMu3$reactariacollections.Collection), props),
createCollection: ()=>new $c6576bb58bfa084b$var$TreeCollection()
}, (collection)=>/*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement($c6576bb58bfa084b$var$TreeInner, {
props: props,
collection: collection,
treeRef: ref
}));
});
const $c6576bb58bfa084b$var$EXPANSION_KEYS = {
'expand': {
ltr: 'ArrowRight',
rtl: 'ArrowLeft'
},
'collapse': {
ltr: 'ArrowLeft',
rtl: 'ArrowRight'
}
};
function $c6576bb58bfa084b$var$TreeInner({ props: props, collection: collection, treeRef: ref }) {
const { dragAndDropHooks: dragAndDropHooks } = props;
let { direction: direction } = (0, $5SMu3$reactaria.useLocale)();
let collator = (0, $5SMu3$reactaria.useCollator)({
usage: 'search',
sensitivity: 'base'
});
let hasDragHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
let hasDropHooks = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDroppableCollectionState);
let dragHooksProvided = (0, $5SMu3$react.useRef)(hasDragHooks);
let dropHooksProvided = (0, $5SMu3$react.useRef)(hasDropHooks);
(0, $5SMu3$react.useEffect)(()=>{
if (dragHooksProvided.current !== hasDragHooks) console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
if (dropHooksProvided.current !== hasDropHooks) console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
}, [
hasDragHooks,
hasDropHooks
]);
let { selectionMode: selectionMode = 'none', expandedKeys: propExpandedKeys, defaultExpandedKeys: propDefaultExpandedKeys, onExpandedChange: onExpandedChange, disabledBehavior: disabledBehavior = 'all' } = props;
let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate } = (0, $5SMu3$react.useContext)((0, $3114c2382242bdc0$exports.CollectionRendererContext));
// Kinda annoying that we have to replicate this code here as well as in useTreeState, but don't want to add
// flattenCollection stuff to useTreeState. Think about this later
let [expandedKeys, setExpandedKeys] = (0, $5SMu3$reactstatelyutils.useControlledState)(propExpandedKeys ? new Set(propExpandedKeys) : undefined, propDefaultExpandedKeys ? new Set(propDefaultExpandedKeys) : new Set(), onExpandedChange);
let [lastCollection, setLastCollection] = (0, $5SMu3$react.useState)(collection);
let [lastExpandedKeys, setLastExpandedKeys] = (0, $5SMu3$react.useState)(expandedKeys);
let [flattenedCollection, setFlattenedCollection] = (0, $5SMu3$react.useState)(()=>collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
// if the lastExpandedKeys is not the same as the currentExpandedKeys or the collection has changed, then run this
if (!$c6576bb58bfa084b$var$areSetsEqual(lastExpandedKeys, expandedKeys) || collection !== lastCollection) {
setFlattenedCollection(collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
setLastCollection(collection);
setLastExpandedKeys(expandedKeys);
}
let state = (0, $5SMu3$reactstately.useTreeState)({
...props,
selectionMode: selectionMode,
expandedKeys: expandedKeys,
onExpandedChange: setExpandedKeys,
collection: flattenedCollection,
children: undefined,
disabledBehavior: disabledBehavior
});
let { gridProps: gridProps } = (0, $5SMu3$reactaria.useTree)({
...props,
isVirtualized: isVirtualized,
layoutDelegate: layoutDelegate
}, state, ref);
let dragState = undefined;
let dropState = undefined;
let droppableCollection = undefined;
let isRootDropTarget = false;
let dragPreview = null;
let preview = (0, $5SMu3$react.useRef)(null);
if (hasDragHooks && dragAndDropHooks) {
dragState = dragAndDropHooks.useDraggableCollectionState({
collection: state.collection,
selectionManager: state.selectionManager,
preview: dragAndDropHooks.renderDragPreview ? preview : undefined
});
dragAndDropHooks.useDraggableCollection({}, dragState, ref);
let DragPreview = dragAndDropHooks.DragPreview;
dragPreview = dragAndDropHooks.renderDragPreview ? /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement(DragPreview, {
ref: preview
}, dragAndDropHooks.renderDragPreview) : null;
}
let [treeDropTargetDelegate] = (0, $5SMu3$react.useState)(()=>new (0, $8aaf67259e0fe9ed$exports.TreeDropTargetDelegate)());
if (hasDropHooks && dragAndDropHooks) {
dropState = dragAndDropHooks.useDroppableCollectionState({
collection: state.collection,
selectionManager: state.selectionManager
});
let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(state.collection, ref, {
direction: direction
});
treeDropTargetDelegate.setup(dropTargetDelegate, state, direction);
let keyboardDelegate = new (0, $5SMu3$reactaria.ListKeyboardDelegate)({
collection: state.collection,
collator: collator,
ref: ref,
disabledKeys: state.selectionManager.disabledKeys,
disabledBehavior: state.selectionManager.disabledBehavior,
direction: direction,
layoutDelegate: layoutDelegate
});
droppableCollection = dragAndDropHooks.useDroppableCollection({
keyboardDelegate: keyboardDelegate,
dropTargetDelegate: treeDropTargetDelegate,
onDropActivate: (e)=>{
// Expand collapsed item when dragging over. For keyboard, allow collapsing.
if (e.target.type === 'item') {
var _dragAndDropHooks_isVirtualDragging;
let key = e.target.key;
let item = state.collection.getItem(key);
let isExpanded = expandedKeys.has(key);
if (item && item.hasChildNodes && (!isExpanded || (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)))) state.toggleKey(key);
}
},
onKeyDown: (e)=>{
let target = dropState === null || dropState === void 0 ? void 0 : dropState.target;
if (target && target.type === 'item' && target.dropPosition === 'on') {
let item = state.collection.getItem(target.key);
if (e.key === $c6576bb58bfa084b$var$EXPANSION_KEYS['expand'][direction] && (item === null || item === void 0 ? void 0 : item.hasChildNodes) && !state.expandedKeys.has(target.key)) state.toggleKey(target.key);
else if (e.key === $c6576bb58bfa084b$var$EXPANSION_KEYS['collapse'][direction] && (item === null || item === void 0 ? void 0 : item.hasChildNodes) && state.expandedKeys.has(target.key)) state.toggleKey(target.key);
}
}
}, dropState, ref);
// Prevent dropping items onto themselves or their descendants
let originalGetDropOperation = dropState.getDropOperation;
dropState.getDropOperation = (options)=>{
let { target: target, isInternal: isInternal } = options;
var _dragState_draggingKeys;
let currentDraggingKeys = (_dragState_draggingKeys = dragState === null || dragState === void 0 ? void 0 : dragState.draggingKeys) !== null && _dragState_draggingKeys !== void 0 ? _dragState_draggingKeys : new Set();
if (isInternal && target.type === 'item' && currentDraggingKeys.size > 0) {
if (currentDraggingKeys.has(target.key) && target.dropPosition === 'on') return 'cancel';
let currentKey = target.key;
while(currentKey != null){
let item = state.collection.getItem(currentKey);
let parentKey = item === null || item === void 0 ? void 0 : item.parentKey;
if (parentKey != null && currentDraggingKeys.has(parentKey)) return 'cancel';
currentKey = parentKey !== null && parentKey !== void 0 ? parentKey : null;
}
}
return originalGetDropOperation(options);
};
isRootDropTarget = dropState.isDropTarget({
type: 'root'
});
}
let isTreeDraggable = !!(hasDragHooks && !(dragState === null || dragState === void 0 ? void 0 : dragState.isDisabled));
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $5SMu3$reactaria.useFocusRing)();
let renderValues = {
isEmpty: state.collection.size === 0,
isFocused: isFocused,
isFocusVisible: isFocusVisible,
isDropTarget: isRootDropTarget,
selectionMode: state.selectionManager.selectionMode,
allowsDragging: !!isTreeDraggable,
state: state
};
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
...props,
children: undefined,
defaultClassName: 'react-aria-Tree',
values: renderValues
});
let emptyState = null;
if (state.collection.size === 0 && props.renderEmptyState) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { isEmpty: isEmpty, ...values } = renderValues;
let content = props.renderEmptyState({
...values
});
let treeGridRowProps = {
'aria-level': 1
};
emptyState = /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "row",
style: {
display: 'contents'
},
...treeGridRowProps
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "gridcell",
style: {
display: 'contents'
}
}, content));
}
let DOMProps = (0, $5SMu3$reactariautils.filterDOMProps)(props, {
global: true
});
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $5SMu3$reactaria.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
...(0, $5SMu3$reactaria.mergeProps)(DOMProps, renderProps, gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps),
ref: ref,
slot: props.slot || undefined,
"data-empty": state.collection.size === 0 || undefined,
"data-focused": isFocused || undefined,
"data-drop-target": isRootDropTarget || undefined,
"data-focus-visible": isFocusVisible || undefined,
"data-selection-mode": state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode,
"data-allows-dragging": !!isTreeDraggable || undefined
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
values: [
[
$c6576bb58bfa084b$export$8953bccafd7bce87,
state
],
[
(0, $0c2289d253cb4544$exports.DragAndDropContext),
{
dragAndDropHooks: dragAndDropHooks,
dragState: dragState,
dropState: dropState
}
],
[
(0, $0c2289d253cb4544$exports.DropIndicatorContext),
{
render: $c6576bb58bfa084b$var$TreeDropIndicatorWrapper
}
]
]
}, hasDropHooks && /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement($c6576bb58bfa084b$var$RootDropIndicator, null), /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $2d10bc562fea46b3$exports.SharedElementTransition), null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement(CollectionRoot, {
collection: state.collection,
persistedKeys: (0, $0c2289d253cb4544$exports.useDndPersistedKeys)(state.selectionManager, dragAndDropHooks, dropState),
scrollRef: ref,
renderDropIndicator: (0, $0c2289d253cb4544$exports.useRenderDropIndicator)(dragAndDropHooks, dropState)
}))), emptyState)), dragPreview);
}
class $c6576bb58bfa084b$var$TreeContentNode extends (0, $5SMu3$reactariacollections.CollectionNode) {
}
$c6576bb58bfa084b$var$TreeContentNode.type = 'content';
const $c6576bb58bfa084b$export$4b687e3f663d618c = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createLeafComponent)($c6576bb58bfa084b$var$TreeContentNode, function TreeItemContent(props) {
let values = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$36b5dda0d9bc8f78);
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
children: props.children,
values: values
});
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $3114c2382242bdc0$exports.CollectionRendererContext).Provider, {
value: (0, $3114c2382242bdc0$exports.DefaultCollectionRenderer)
}, renderProps.children);
});
const $c6576bb58bfa084b$export$36b5dda0d9bc8f78 = /*#__PURE__*/ (0, $5SMu3$react.createContext)(null);
class $c6576bb58bfa084b$var$TreeItemNode extends (0, $5SMu3$reactariacollections.CollectionNode) {
}
$c6576bb58bfa084b$var$TreeItemNode.type = 'item';
const $c6576bb58bfa084b$export$53d36ab85dc89436 = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createBranchComponent)($c6576bb58bfa084b$var$TreeItemNode, (props, ref, item)=>{
var _this;
let state = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$8953bccafd7bce87);
ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (0, $5SMu3$react.useContext)((0, $0c2289d253cb4544$exports.DragAndDropContext));
// TODO: remove this when we support description in tree row
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { rowProps: rowProps, gridCellProps: gridCellProps, expandButtonProps: expandButtonProps, descriptionProps: descriptionProps, ...states } = (0, $5SMu3$reactaria.useTreeItem)({
node: item,
shouldSelectOnPressUp: !!dragState
}, state, ref);
let isExpanded = rowProps['aria-expanded'] === true;
let hasChildItems = props.hasChildItems || ((_this = [
...state.collection.getChildren(item.key)
]) === null || _this === void 0 ? void 0 : _this.length) > 1;
let level = rowProps['aria-level'] || 1;
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $5SMu3$reactaria.useHover)({
isDisabled: !states.allowsSelection && !states.hasAction,
onHoverStart: props.onHoverStart,
onHoverChange: props.onHoverChange,
onHoverEnd: props.onHoverEnd
});
let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $5SMu3$reactaria.useFocusRing)();
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $5SMu3$reactaria.useFocusRing)({
within: true
});
let { checkboxProps: checkboxProps } = (0, $5SMu3$reactaria.useGridListSelectionCheckbox)({
key: item.key
}, state);
let draggableItem = null;
if (dragState && dragAndDropHooks) draggableItem = dragAndDropHooks.useDraggableItem({
key: item.key,
hasDragButton: true
}, dragState);
let dropIndicator = null;
let expandButtonRef = (0, $5SMu3$react.useRef)(null);
let dropIndicatorRef = (0, $5SMu3$react.useRef)(null);
let activateButtonRef = (0, $5SMu3$react.useRef)(null);
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $5SMu3$reactaria.useVisuallyHidden)();
if (dropState && dragAndDropHooks) dropIndicator = dragAndDropHooks.useDropIndicator({
target: {
type: 'item',
key: item.key,
dropPosition: 'on'
},
activateButtonRef: activateButtonRef
}, dropState, dropIndicatorRef);
let isDragging = dragState && dragState.isDragging(item.key);
let isDropTarget = dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.isDropTarget;
let selectionMode = state.selectionManager.selectionMode;
let selectionBehavior = state.selectionManager.selectionBehavior;
let renderPropValues = (0, ($parcel$interopDefault($5SMu3$react))).useMemo(()=>({
...states,
isHovered: isHovered,
isFocusVisible: isFocusVisible,
isExpanded: isExpanded,
hasChildItems: hasChildItems,
level: level,
selectionMode: selectionMode,
selectionBehavior: selectionBehavior,
isFocusVisibleWithin: isFocusVisibleWithin,
state: state,
id: item.key,
allowsDragging: !!dragState,
isDragging: isDragging,
isDropTarget: isDropTarget
}), [
states,
isHovered,
isFocusVisible,
isExpanded,
hasChildItems,
level,
isFocusVisibleWithin,
state,
item.key,
dragState,
isDragging,
isDropTarget,
selectionBehavior,
selectionMode
]);
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
...props,
id: undefined,
children: item.rendered,
defaultClassName: 'react-aria-TreeItem',
defaultStyle: {
// @ts-ignore
'--tree-item-level': level
},
values: renderPropValues
});
(0, $5SMu3$react.useEffect)(()=>{
if (!item.textValue && process.env.NODE_ENV !== 'production') console.warn('A `textValue` prop is required for <TreeItem> elements in order to support accessibility features such as type to select.');
}, [
item.textValue
]);
(0, $5SMu3$react.useEffect)(()=>{
if (hasChildItems && !expandButtonRef.current && process.env.NODE_ENV !== 'production') console.warn('Expandable tree items must contain a expand button so screen reader users can expand/collapse the item.');
// eslint-disable-next-line
}, []);
let dragButtonRef = (0, $5SMu3$react.useRef)(null);
(0, $5SMu3$react.useEffect)(()=>{
if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
// eslint-disable-next-line
}, []);
let children = (0, $5SMu3$reactariacollections.useCachedChildren)({
items: state.collection.getChildren(item.key),
children: (item)=>{
switch(item.type){
case 'content':
return item.render(item);
// Skip item since we don't render the nested rows as children of the parent row, the flattened collection
// will render them each as siblings instead
case 'loader':
case 'item':
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null);
default:
throw new Error('Unsupported element type in TreeRow: ' + item.type);
}
}
});
let activateButtonId = (0, $5SMu3$reactaria.useId)();
let DOMProps = (0, $5SMu3$reactariautils.filterDOMProps)(props, {
global: true
});
delete DOMProps.id;
delete DOMProps.onClick;
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "row",
"aria-level": rowProps['aria-level'],
"aria-expanded": rowProps['aria-expanded'],
"aria-label": dropIndicator.dropIndicatorProps['aria-label']
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "gridcell",
"aria-colindex": 1,
style: {
display: 'contents'
}
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "button",
...visuallyHiddenProps,
...dropIndicator.dropIndicatorProps,
ref: dropIndicatorRef
}), rowProps['aria-expanded'] != null ? // Button to allow touch screen reader users to expand the item while dragging.
/*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "button",
...visuallyHiddenProps,
id: activateButtonId,
"aria-label": expandButtonProps['aria-label'],
"aria-labelledby": `${activateButtonId} ${rowProps.id}`,
tabIndex: -1,
ref: activateButtonRef
}) : null)), /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
...(0, $5SMu3$reactaria.mergeProps)(DOMProps, rowProps, focusProps, hoverProps, focusWithinProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
...renderProps,
ref: ref,
// TODO: missing selectionBehavior, hasAction and allowsSelection data attribute equivalents (available in renderProps). Do we want those?
"data-expanded": hasChildItems && isExpanded || undefined,
"data-has-child-items": hasChildItems || undefined,
"data-level": level,
"data-selected": states.isSelected || undefined,
"data-disabled": states.isDisabled || undefined,
"data-hovered": isHovered || undefined,
"data-focused": states.isFocused || undefined,
"data-focus-visible": isFocusVisible || undefined,
"data-pressed": states.isPressed || undefined,
"data-selection-mode": state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode,
"data-allows-dragging": !!dragState || undefined,
"data-dragging": isDragging || undefined,
"data-drop-target": isDropTarget || undefined
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
...gridCellProps,
style: {
display: 'contents'
}
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
values: [
[
(0, $525402dfec7da5bc$exports.CheckboxContext),
{
slots: {
selection: checkboxProps
}
}
],
// TODO: support description in the tree row
// TODO: don't think I need to pass isExpanded to the button here since it can be sourced from the renderProps? Might be worthwhile passing it down?
[
(0, $b856e6788a7ea5bf$exports.ButtonContext),
{
slots: {
[(0, $c5ccf687772c0422$exports.DEFAULT_SLOT)]: {},
chevron: {
...expandButtonProps,
ref: expandButtonRef
},
drag: {
...draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragButtonProps,
ref: dragButtonRef,
style: {
pointerEvents: 'none'
}
}
}
}
],
[
$c6576bb58bfa084b$export$36b5dda0d9bc8f78,
{
...renderPropValues
}
],
[
(0, $54e872c96e6d295b$exports.SelectionIndicatorContext),
{
isSelected: states.isSelected
}
]
]
}, children))));
});
const $c6576bb58bfa084b$export$533df5f8efd48cc9 = (0, $5SMu3$reactariacollections.createLeafComponent)((0, $5SMu3$reactariacollections.LoaderNode), function TreeLoadingSentinel(props, ref, item) {
let { isVirtualized: isVirtualized } = (0, $5SMu3$react.useContext)((0, $3114c2382242bdc0$exports.CollectionRendererContext));
let state = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$8953bccafd7bce87);
let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
let sentinelRef = (0, $5SMu3$react.useRef)(null);
let memoedLoadMoreProps = (0, $5SMu3$react.useMemo)(()=>({
onLoadMore: onLoadMore,
// this collection will update anytime a row is expanded/collapsed becaused the flattenedRows will change.
// This means onLoadMore will trigger but that might be ok cause the user should have logic to handle multiple loadMore calls
collection: state === null || state === void 0 ? void 0 : state.collection,
sentinelRef: sentinelRef,
scrollOffset: scrollOffset
}), [
onLoadMore,
scrollOffset,
state === null || state === void 0 ? void 0 : state.collection
]);
(0, $5SMu3$reactariautils.useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
let { rowProps: rowProps, gridCellProps: gridCellProps } = (0, $5SMu3$reactaria.useTreeItem)({
node: item
}, state, ref);
let level = rowProps['aria-level'] || 1;
// For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
// Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
// item count
let ariaProps = {
role: 'row',
'aria-level': rowProps['aria-level']
};
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
...otherProps,
id: undefined,
children: item.rendered,
defaultClassName: 'react-aria-TreeLoader',
values: {
level: level
}
});
let style = {};
if (isVirtualized) style = {
display: 'contents'
};
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, ($parcel$interopDefault($5SMu3$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
style: {
position: 'relative',
width: 0,
height: 0
},
inert: (0, $5SMu3$reactariautils.inertValue)(true)
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
"data-testid": "loadMoreSentinel",
ref: sentinelRef,
style: {
position: 'absolute',
height: 1,
width: 1
}
})), isLoading && renderProps.children && /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
ref: ref,
...(0, $5SMu3$reactaria.mergeProps)((0, $5SMu3$reactariautils.filterDOMProps)(props), ariaProps),
...renderProps,
"data-level": level
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
...gridCellProps,
style: style
}, renderProps.children)));
});
function $c6576bb58bfa084b$var$TreeDropIndicatorWrapper(props, ref) {
var _dropState_collection_getItem;
ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
let { dragAndDropHooks: dragAndDropHooks, dropState: dropState } = (0, $5SMu3$react.useContext)((0, $0c2289d253cb4544$exports.DragAndDropContext));
let buttonRef = (0, $5SMu3$react.useRef)(null);
let { dropIndicatorProps: dropIndicatorProps, isHidden: isHidden, isDropTarget: isDropTarget } = dragAndDropHooks.useDropIndicator(props, dropState, buttonRef);
if (isHidden) return null;
let level = dropState && props.target.type === 'item' ? (((_dropState_collection_getItem = dropState.collection.getItem(props.target.key)) === null || _dropState_collection_getItem === void 0 ? void 0 : _dropState_collection_getItem.level) || 0) + 1 : 1;
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement($c6576bb58bfa084b$var$TreeDropIndicatorForwardRef, {
...props,
dropIndicatorProps: dropIndicatorProps,
isDropTarget: isDropTarget,
ref: ref,
buttonRef: buttonRef,
level: level
});
}
function $c6576bb58bfa084b$var$TreeDropIndicator(props, ref) {
let { dropIndicatorProps: dropIndicatorProps, isDropTarget: isDropTarget, buttonRef: buttonRef, level: level, ...otherProps } = props;
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $5SMu3$reactaria.useVisuallyHidden)();
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
...otherProps,
defaultClassName: 'react-aria-DropIndicator',
defaultStyle: {
position: 'relative',
// @ts-ignore
'--tree-item-level': level
},
values: {
isDropTarget: isDropTarget
}
});
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
...renderProps,
role: "row",
"aria-level": level,
ref: ref,
"data-drop-target": isDropTarget || undefined
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "gridcell"
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
...visuallyHiddenProps,
role: "button",
...dropIndicatorProps,
ref: buttonRef
}), renderProps.children));
}
const $c6576bb58bfa084b$var$TreeDropIndicatorForwardRef = /*#__PURE__*/ (0, $5SMu3$react.forwardRef)($c6576bb58bfa084b$var$TreeDropIndicator);
function $c6576bb58bfa084b$var$RootDropIndicator() {
let { dragAndDropHooks: dragAndDropHooks, dropState: dropState } = (0, $5SMu3$react.useContext)((0, $0c2289d253cb4544$exports.DragAndDropContext));
let ref = (0, $5SMu3$react.useRef)(null);
let { dropIndicatorProps: dropIndicatorProps } = dragAndDropHooks.useDropIndicator({
target: {
type: 'root'
}
}, dropState, ref);
let isDropTarget = dropState.isDropTarget({
type: 'root'
});
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $5SMu3$reactaria.useVisuallyHidden)();
if (!isDropTarget && dropIndicatorProps['aria-hidden']) return null;
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "row",
"aria-hidden": dropIndicatorProps['aria-hidden'],
style: {
position: 'absolute'
}
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "gridcell"
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement("div", {
role: "button",
...visuallyHiddenProps,
...dropIndicatorProps,
ref: ref
})));
}
const $c6576bb58bfa084b$export$1cd40fa16d4f033a = /*#__PURE__*/ (0, $5SMu3$reactariacollections.createBranchComponent)((0, $5SMu3$reactariacollections.SectionNode), (props, ref, item)=>{
let state = (0, $5SMu3$react.useContext)($c6576bb58bfa084b$export$8953bccafd7bce87);
let { CollectionBranch: CollectionBranch } = (0, $5SMu3$react.useContext)((0, $3114c2382242bdc0$exports.CollectionRendererContext));
let headingRef = (0, $5SMu3$react.useRef)(null);
ref = (0, $5SMu3$reactariautils.useObjectRef)(ref);
var _props_arialabel;
let { rowHeaderProps: rowHeaderProps, rowProps: rowProps, rowGroupProps: rowGroupProps } = (0, $5SMu3$reactaria.useGridListSection)({
'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : undefined
}, state, ref);
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
...props,
id: undefined,
children: undefined,
defaultClassName: 'react-aria-TreeSection',
values: undefined
});
let DOMProps = (0, $5SMu3$reactariautils.filterDOMProps)(props, {
global: true
});
delete DOMProps.id;
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.dom).section, {
...(0, $5SMu3$reactaria.mergeProps)(DOMProps, renderProps, rowGroupProps),
ref: ref
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
values: [
[
(0, $132cbde493282f82$exports.GridListHeaderContext),
{
...rowProps,
ref: headingRef
}
],
[
(0, $132cbde493282f82$exports.GridListHeaderInnerContext),
{
...rowHeaderProps
}
]
]
}, /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement(CollectionBranch, {
collection: state.collection,
parent: item
})));
});
const $c6576bb58bfa084b$export$2a73ea8963a8efd8 = (props)=>{
return /*#__PURE__*/ (0, ($parcel$interopDefault($5SMu3$react))).createElement((0, $132cbde493282f82$exports.GridListHeader), {
className: "react-aria-TreeHeader",
...props
}, props.children);
};
function $c6576bb58bfa084b$var$areSetsEqual(a, b) {
if (a.size !== b.size) return false;
for (let item of a){
if (!b.has(item)) return false;
}
return true;
}
//# sourceMappingURL=Tree.main.js.map