@react-aria/collections 3.0.0-nightly.5042 → 3.0.0-rc.1

package/dist/Document.mjs

@@ -58,8 +58,21 @@ class $681cc3c98f569e39$export$410b0c854570d131 {
         var _this_parentNode;
         return ((_this_parentNode = this.parentNode) === null || _this_parentNode === void 0 ? void 0 : _this_parentNode.isConnected) || false;
     }
+    invalidateChildIndices(child) {
+        if (this._minInvalidChildIndex == null || !this._minInvalidChildIndex.isConnected || child.index < this._minInvalidChildIndex.index) {
+            this._minInvalidChildIndex = child;
+            this.ownerDocument.markDirty(this);
+        }
+    }
+    updateChildIndices() {
+        let node = this._minInvalidChildIndex;
+        while(node){
+            node.index = node.previousSibling ? node.previousSibling.index + 1 : 0;
+            node = node.nextSibling;
+        }
+        this._minInvalidChildIndex = null;
+    }
     appendChild(child) {
-        this.ownerDocument.startTransaction();
         if (child.parentNode) child.parentNode.removeChild(child);
         if (this.firstChild == null) this.firstChild = child;
         if (this.lastChild) {
@@ -74,41 +87,32 @@ class $681cc3c98f569e39$export$410b0c854570d131 {
         child.nextSibling = null;
         this.lastChild = child;
         this.ownerDocument.markDirty(this);
-        if (child.hasSetProps) // Only add the node to the collection if we already received props for it.
-        // Otherwise wait until then so we have the correct id for the node.
-        this.ownerDocument.addNode(child);
-        this.ownerDocument.endTransaction();
-        this.ownerDocument.queueUpdate();
+        if (this.isConnected) this.ownerDocument.queueUpdate();
     }
     insertBefore(newNode, referenceNode) {
         if (referenceNode == null) return this.appendChild(newNode);
-        this.ownerDocument.startTransaction();
         if (newNode.parentNode) newNode.parentNode.removeChild(newNode);
         newNode.nextSibling = referenceNode;
         newNode.previousSibling = referenceNode.previousSibling;
-        newNode.index = referenceNode.index;
+        // Ensure that the newNode's index is less than that of the reference node so that
+        // invalidateChildIndices will properly use the newNode as the _minInvalidChildIndex, thus making sure
+        // we will properly update the indexes of all sibiling nodes after the newNode. The value here doesn't matter
+        // since updateChildIndices should calculate the proper indexes.
+        newNode.index = referenceNode.index - 1;
         if (this.firstChild === referenceNode) this.firstChild = newNode;
         else if (referenceNode.previousSibling) referenceNode.previousSibling.nextSibling = newNode;
         referenceNode.previousSibling = newNode;
         newNode.parentNode = referenceNode.parentNode;
-        let node = referenceNode;
-        while(node){
-            node.index++;
-            node = node.nextSibling;
-        }
-        if (newNode.hasSetProps) this.ownerDocument.addNode(newNode);
-        this.ownerDocument.endTransaction();
-        this.ownerDocument.queueUpdate();
+        this.invalidateChildIndices(newNode);
+        if (this.isConnected) this.ownerDocument.queueUpdate();
     }
     removeChild(child) {
         if (child.parentNode !== this || !this.ownerDocument.isMounted) return;
-        this.ownerDocument.startTransaction();
-        let node = child.nextSibling;
-        while(node){
-            node.index--;
-            node = node.nextSibling;
+        if (this._minInvalidChildIndex === child) this._minInvalidChildIndex = null;
+        if (child.nextSibling) {
+            this.invalidateChildIndices(child.nextSibling);
+            child.nextSibling.previousSibling = child.previousSibling;
         }
-        if (child.nextSibling) child.nextSibling.previousSibling = child.previousSibling;
         if (child.previousSibling) child.previousSibling.nextSibling = child.nextSibling;
         if (this.firstChild === child) this.firstChild = child.nextSibling;
         if (this.lastChild === child) this.lastChild = child.previousSibling;
@@ -116,18 +120,38 @@ class $681cc3c98f569e39$export$410b0c854570d131 {
         child.nextSibling = null;
         child.previousSibling = null;
         child.index = 0;
-        this.ownerDocument.removeNode(child);
-        this.ownerDocument.endTransaction();
-        this.ownerDocument.queueUpdate();
+        this.ownerDocument.markDirty(child);
+        if (this.isConnected) this.ownerDocument.queueUpdate();
     }
     addEventListener() {}
     removeEventListener() {}
+    get previousVisibleSibling() {
+        let node = this.previousSibling;
+        while(node && node.isHidden)node = node.previousSibling;
+        return node;
+    }
+    get nextVisibleSibling() {
+        let node = this.nextSibling;
+        while(node && node.isHidden)node = node.nextSibling;
+        return node;
+    }
+    get firstVisibleChild() {
+        let node = this.firstChild;
+        while(node && node.isHidden)node = node.nextSibling;
+        return node;
+    }
+    get lastVisibleChild() {
+        let node = this.lastChild;
+        while(node && node.isHidden)node = node.previousSibling;
+        return node;
+    }
     constructor(ownerDocument){
         this._firstChild = null;
         this._lastChild = null;
         this._previousSibling = null;
         this._nextSibling = null;
         this._parentNode = null;
+        this._minInvalidChildIndex = null;
         this.ownerDocument = ownerDocument;
     }
 }
@@ -143,62 +167,97 @@ class $681cc3c98f569e39$export$dc064fe9e59310fd extends $681cc3c98f569e39$export
         if (this.parentNode instanceof $681cc3c98f569e39$export$dc064fe9e59310fd) return this.parentNode.level + (this.node.type === 'item' ? 1 : 0);
         return 0;
     }
+    /**
+   * Lazily gets a mutable instance of a Node. If the node has already
+   * been cloned during this update cycle, it just returns the existing one.
+   */ getMutableNode() {
+        if (!this.isMutated) {
+            this.node = this.node.clone();
+            this.isMutated = true;
+        }
+        this.ownerDocument.markDirty(this);
+        return this.node;
+    }
     updateNode() {
-        var _this_previousSibling, _this_nextSibling, _this_firstChild, _this_lastChild;
-        let node = this.ownerDocument.getMutableNode(this);
+        var _this_previousVisibleSibling, _this_firstVisibleChild, _this_lastVisibleChild;
+        let nextSibling = this.nextVisibleSibling;
+        let node = this.getMutableNode();
         node.index = this.index;
         node.level = this.level;
         node.parentKey = this.parentNode instanceof $681cc3c98f569e39$export$dc064fe9e59310fd ? this.parentNode.node.key : null;
-        var _this_previousSibling_node_key;
-        node.prevKey = (_this_previousSibling_node_key = (_this_previousSibling = this.previousSibling) === null || _this_previousSibling === void 0 ? void 0 : _this_previousSibling.node.key) !== null && _this_previousSibling_node_key !== void 0 ? _this_previousSibling_node_key : null;
-        var _this_nextSibling_node_key;
-        node.nextKey = (_this_nextSibling_node_key = (_this_nextSibling = this.nextSibling) === null || _this_nextSibling === void 0 ? void 0 : _this_nextSibling.node.key) !== null && _this_nextSibling_node_key !== void 0 ? _this_nextSibling_node_key : null;
+        var _this_previousVisibleSibling_node_key;
+        node.prevKey = (_this_previousVisibleSibling_node_key = (_this_previousVisibleSibling = this.previousVisibleSibling) === null || _this_previousVisibleSibling === void 0 ? void 0 : _this_previousVisibleSibling.node.key) !== null && _this_previousVisibleSibling_node_key !== void 0 ? _this_previousVisibleSibling_node_key : null;
+        var _nextSibling_node_key;
+        node.nextKey = (_nextSibling_node_key = nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.node.key) !== null && _nextSibling_node_key !== void 0 ? _nextSibling_node_key : null;
         node.hasChildNodes = !!this.firstChild;
-        var _this_firstChild_node_key;
-        node.firstChildKey = (_this_firstChild_node_key = (_this_firstChild = this.firstChild) === null || _this_firstChild === void 0 ? void 0 : _this_firstChild.node.key) !== null && _this_firstChild_node_key !== void 0 ? _this_firstChild_node_key : null;
-        var _this_lastChild_node_key;
-        node.lastChildKey = (_this_lastChild_node_key = (_this_lastChild = this.lastChild) === null || _this_lastChild === void 0 ? void 0 : _this_lastChild.node.key) !== null && _this_lastChild_node_key !== void 0 ? _this_lastChild_node_key : null;
+        var _this_firstVisibleChild_node_key;
+        node.firstChildKey = (_this_firstVisibleChild_node_key = (_this_firstVisibleChild = this.firstVisibleChild) === null || _this_firstVisibleChild === void 0 ? void 0 : _this_firstVisibleChild.node.key) !== null && _this_firstVisibleChild_node_key !== void 0 ? _this_firstVisibleChild_node_key : null;
+        var _this_lastVisibleChild_node_key;
+        node.lastChildKey = (_this_lastVisibleChild_node_key = (_this_lastVisibleChild = this.lastVisibleChild) === null || _this_lastVisibleChild === void 0 ? void 0 : _this_lastVisibleChild.node.key) !== null && _this_lastVisibleChild_node_key !== void 0 ? _this_lastVisibleChild_node_key : null;
+        // Update the colIndex of sibling nodes if this node has a colSpan.
+        if ((node.colSpan != null || node.colIndex != null) && nextSibling) {
+            var _node_colIndex, _node_colSpan;
+            // This queues the next sibling for update, which means this happens recursively.
+            let nextColIndex = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index) + ((_node_colSpan = node.colSpan) !== null && _node_colSpan !== void 0 ? _node_colSpan : 1);
+            if (nextColIndex !== nextSibling.node.colIndex) {
+                let siblingNode = nextSibling.getMutableNode();
+                siblingNode.colIndex = nextColIndex;
+            }
+        }
     }
     setProps(obj, ref, rendered, render) {
-        let node = this.ownerDocument.getMutableNode(this);
-        let { value: value, textValue: textValue, id: id, ...props } = obj;
+        let node = this.getMutableNode();
+        let { value: value1, textValue: textValue, id: id, ...props } = obj;
         props.ref = ref;
         node.props = props;
         node.rendered = rendered;
         node.render = render;
-        node.value = value;
+        node.value = value1;
         node.textValue = textValue || (typeof props.children === 'string' ? props.children : '') || obj['aria-label'] || '';
         if (id != null && id !== node.key) {
             if (this.hasSetProps) throw new Error('Cannot change the id of an item');
             node.key = id;
         }
-        // If this is the first time props have been set, end the transaction started in the constructor
-        // so this node can be emitted.
-        if (!this.hasSetProps) {
-            this.ownerDocument.addNode(this);
-            this.ownerDocument.endTransaction();
-            this.hasSetProps = true;
-        }
-        this.ownerDocument.queueUpdate();
+        if (props.colSpan != null) node.colSpan = props.colSpan;
+        this.hasSetProps = true;
+        if (this.isConnected) this.ownerDocument.queueUpdate();
     }
     get style() {
-        return {};
+        // React sets display: none to hide elements during Suspense.
+        // We'll handle this by setting the element to hidden and invalidating
+        // its siblings/parent. Hidden elements remain in the Document, but
+        // are removed from the Collection.
+        let element = this;
+        return {
+            get display () {
+                return element.isHidden ? 'none' : '';
+            },
+            set display (value){
+                let isHidden = value === 'none';
+                if (element.isHidden !== isHidden) {
+                    var _element_parentNode, _element_parentNode1;
+                    // Mark parent node dirty if this element is currently the first or last visible child.
+                    if (((_element_parentNode = element.parentNode) === null || _element_parentNode === void 0 ? void 0 : _element_parentNode.firstVisibleChild) === element || ((_element_parentNode1 = element.parentNode) === null || _element_parentNode1 === void 0 ? void 0 : _element_parentNode1.lastVisibleChild) === element) element.ownerDocument.markDirty(element.parentNode);
+                    // Mark sibling visible elements dirty.
+                    let prev = element.previousVisibleSibling;
+                    let next = element.nextVisibleSibling;
+                    if (prev) element.ownerDocument.markDirty(prev);
+                    if (next) element.ownerDocument.markDirty(next);
+                    // Mark self dirty.
+                    element.isHidden = isHidden;
+                    element.ownerDocument.markDirty(element);
+                }
+            }
+        };
     }
     hasAttribute() {}
     setAttribute() {}
     setAttributeNS() {}
     removeAttribute() {}
     constructor(type, ownerDocument){
-        super(ownerDocument);
-        this.nodeType = 8 // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
-        ;
-        this._index = 0;
-        this.hasSetProps = false;
+        super(ownerDocument), this.nodeType = 8 // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
+        , this.isMutated = true, this._index = 0, this.hasSetProps = false, this.isHidden = false;
         this.node = new (0, $23b9f4fcf0fe224b$export$d68d59712b04d9d1)(type, `react-aria-${++ownerDocument.nodeId}`);
-        // Start a transaction so that no updates are emitted from the collection
-        // until the props for this node are set. We don't know the real id for the
-        // node until then, so we need to avoid emitting collections in an inconsistent state.
-        this.ownerDocument.startTransaction();
     }
 }
 class $681cc3c98f569e39$export$b34a105447964f9f extends $681cc3c98f569e39$export$410b0c854570d131 {
@@ -208,72 +267,70 @@ class $681cc3c98f569e39$export$b34a105447964f9f extends $681cc3c98f569e39$export
     createElement(type) {
         return new $681cc3c98f569e39$export$dc064fe9e59310fd(type, this);
     }
-    /**
-   * Lazily gets a mutable instance of a Node. If the node has already
-   * been cloned during this update cycle, it just returns the existing one.
-   */ getMutableNode(element) {
-        let node = element.node;
-        if (!this.mutatedNodes.has(element)) {
-            node = element.node.clone();
-            this.mutatedNodes.add(element);
-            element.node = node;
-        }
-        this.markDirty(element);
-        return node;
-    }
     getMutableCollection() {
-        if (!this.isSSR && !this.collectionMutated) {
-            this.collection = this.collection.clone();
-            this.collectionMutated = true;
-        }
-        return this.collection;
+        if (!this.nextCollection) this.nextCollection = this.collection.clone();
+        return this.nextCollection;
     }
     markDirty(node) {
         this.dirtyNodes.add(node);
     }
-    startTransaction() {
-        this.transactionCount++;
-    }
-    endTransaction() {
-        this.transactionCount--;
-    }
     addNode(element) {
+        if (element.isHidden) return;
         let collection = this.getMutableCollection();
-        if (!collection.getItem(element.node.key)) {
-            collection.addNode(element.node);
-            for (let child of element)this.addNode(child);
-        }
-        this.markDirty(element);
+        if (!collection.getItem(element.node.key)) for (let child of element)this.addNode(child);
+        collection.addNode(element.node);
     }
     removeNode(node) {
         for (let child of node)this.removeNode(child);
         let collection = this.getMutableCollection();
         collection.removeNode(node.node.key);
-        this.markDirty(node);
     }
     /** Finalizes the collection update, updating all nodes and freezing the collection. */ getCollection() {
-        if (this.transactionCount > 0) return this.collection;
+        // If in a subscription update, return a clone of the existing collection.
+        // This ensures React will queue a render. React will call getCollection again
+        // during render, at which point all the updates will be complete and we can return
+        // the new collection.
+        if (this.inSubscription) return this.collection.clone();
+        // Reset queuedRender to false when getCollection is called during render.
+        this.queuedRender = false;
         this.updateCollection();
         return this.collection;
     }
     updateCollection() {
-        for (let element of this.dirtyNodes)if (element instanceof $681cc3c98f569e39$export$dc064fe9e59310fd && element.isConnected) element.updateNode();
+        // First, remove disconnected nodes and update the indices of dirty element children.
+        for (let element of this.dirtyNodes)if (element instanceof $681cc3c98f569e39$export$dc064fe9e59310fd && (!element.isConnected || element.isHidden)) this.removeNode(element);
+        else element.updateChildIndices();
+        // Next, update dirty collection nodes.
+        for (let element of this.dirtyNodes)if (element instanceof $681cc3c98f569e39$export$dc064fe9e59310fd) {
+            if (element.isConnected && !element.isHidden) {
+                element.updateNode();
+                this.addNode(element);
+            }
+            element.isMutated = false;
+        }
         this.dirtyNodes.clear();
-        if (this.mutatedNodes.size || this.collectionMutated) {
-            var _this_firstChild, _this_lastChild;
-            let collection = this.getMutableCollection();
-            for (let element of this.mutatedNodes)if (element.isConnected) collection.addNode(element.node);
-            var _this_firstChild_node_key, _this_lastChild_node_key;
-            collection.commit((_this_firstChild_node_key = (_this_firstChild = this.firstChild) === null || _this_firstChild === void 0 ? void 0 : _this_firstChild.node.key) !== null && _this_firstChild_node_key !== void 0 ? _this_firstChild_node_key : null, (_this_lastChild_node_key = (_this_lastChild = this.lastChild) === null || _this_lastChild === void 0 ? void 0 : _this_lastChild.node.key) !== null && _this_lastChild_node_key !== void 0 ? _this_lastChild_node_key : null, this.isSSR);
-            this.mutatedNodes.clear();
+        // Finally, update the collection.
+        if (this.nextCollection) {
+            var _this_firstVisibleChild, _this_lastVisibleChild;
+            var _this_firstVisibleChild_node_key, _this_lastVisibleChild_node_key;
+            this.nextCollection.commit((_this_firstVisibleChild_node_key = (_this_firstVisibleChild = this.firstVisibleChild) === null || _this_firstVisibleChild === void 0 ? void 0 : _this_firstVisibleChild.node.key) !== null && _this_firstVisibleChild_node_key !== void 0 ? _this_firstVisibleChild_node_key : null, (_this_lastVisibleChild_node_key = (_this_lastVisibleChild = this.lastVisibleChild) === null || _this_lastVisibleChild === void 0 ? void 0 : _this_lastVisibleChild.node.key) !== null && _this_lastVisibleChild_node_key !== void 0 ? _this_lastVisibleChild_node_key : null, this.isSSR);
+            if (!this.isSSR) {
+                this.collection = this.nextCollection;
+                this.nextCollection = null;
+            }
         }
-        this.collectionMutated = false;
     }
     queueUpdate() {
-        // Don't emit any updates if there is a transaction in progress.
-        // queueUpdate should be called again after the transaction.
-        if (this.dirtyNodes.size === 0 || this.transactionCount > 0) return;
+        if (this.dirtyNodes.size === 0 || this.queuedRender) return;
+        // Only trigger subscriptions once during an update, when the first item changes.
+        // React's useSyncExternalStore will call getCollection immediately, to check whether the snapshot changed.
+        // If so, React will queue a render to happen after the current commit to our fake DOM finishes.
+        // We track whether getCollection is called in a subscription, and once it is called during render,
+        // we reset queuedRender back to false.
+        this.queuedRender = true;
+        this.inSubscription = true;
         for (let fn of this.subscriptions)fn();
+        this.inSubscription = false;
     }
     subscribe(fn) {
         this.subscriptions.add(fn);
@@ -289,20 +346,10 @@ class $681cc3c98f569e39$export$b34a105447964f9f extends $681cc3c98f569e39$export
     }
     constructor(collection){
         // @ts-ignore
-        super(null);
-        this.nodeType = 11 // DOCUMENT_FRAGMENT_NODE
-        ;
-        this.ownerDocument = this;
-        this.dirtyNodes = new Set();
-        this.isSSR = false;
-        this.nodeId = 0;
-        this.nodesByProps = new WeakMap();
-        this.isMounted = true;
-        this.mutatedNodes = new Set();
-        this.subscriptions = new Set();
-        this.transactionCount = 0;
+        super(null), this.nodeType = 11 // DOCUMENT_FRAGMENT_NODE
+        , this.ownerDocument = this, this.dirtyNodes = new Set(), this.isSSR = false, this.nodeId = 0, this.nodesByProps = new WeakMap(), this.isMounted = true, this.nextCollection = null, this.subscriptions = new Set(), this.queuedRender = false, this.inSubscription = false;
         this.collection = collection;
-        this.collectionMutated = true;
+        this.nextCollection = collection;
     }
 }