@king-design/intact 3.5.1-beta.0 → 3.5.1

package/components/tree/useChecked.ts

@@ -3,6 +3,7 @@ import {useState} from '../../hooks/useState';
 import {useReceive} from '../../hooks/useReceive';
 import type {Tree} from './';
 import type {Node, DataItem} from './useNodes';
+import { isEqualArray } from '../utils';
 
 export function useChecked(getNodes: () => Node<Key>[]) {
     const instance = useInstance() as Tree;
@@ -38,9 +39,7 @@ export function useChecked(getNodes: () => Node<Key>[]) {
                 }
 
                 node.checked = checked;
-                if (checked) {
-                    node.indeterminate = false;
-                }
+                node.indeterminate = false;
 
                 if (shouldUpdateCheckedKeys) {
                     updateCheckedKeys(node);
@@ -56,6 +55,12 @@ export function useChecked(getNodes: () => Node<Key>[]) {
         needRecheckNodes.forEach(node => {
             updateUpward(node);
         });
+        
+        const oldCheckedKeys = instance.get('checkedKeys');
+        const newCheckedKeys = Array.from(checkedKeys);
+        if (!isEqualArray(oldCheckedKeys, newCheckedKeys)) {
+            instance.set('checkedKeys', newCheckedKeys);
+        }
     }
 
     function updateCheckedKeys(node: Node<Key>) {
@@ -67,7 +72,7 @@ export function useChecked(getNodes: () => Node<Key>[]) {
     }
 
     function toggle(node: Node<Key>) {
-        const uncorrelated = instance.get('uncorrelated');
+        // const uncorrelated = instance.get('uncorrelated');
         updateDownward(node, !node.checked);
         updateUpward(node.parent);
 

package/components/treeSelect/index.spec.ts

@@ -110,4 +110,51 @@ describe('TreeSelect', () => {
         await wait(500);
         expect(element.querySelector('.k-form-error')).not.to.be.null;
     });
+
+    it('should handle parent node correctly when all children are checked initially', async () => {
+        const [instance, element] = mount(CheckboxDemo);
+    
+        // init values
+        instance.set('values', ['2.1.1', '2.1.2']);
+        await wait();
+    
+        // because 2.2 is disabled, so it will select the outermost parent node 2
+        expect(instance.get('values')).to.eql(['2']);
+    
+        element.click();
+        await wait();
+        const dropdown = getElement('.k-tree-select-menu')!;
+        // verify parent node is selected
+        const parentCheckboxes = dropdown.querySelectorAll('.k-checkbox');
+        expect(parentCheckboxes[3].classList.contains('k-checked')).to.be.true; // First floor-2
+        expect(parentCheckboxes[4].classList.contains('k-checked')).to.be.true; // Second floor-2.1
+    });
+    
+    it('should clear parent node state when setting values to empty array', async () => {
+        const [instance, element] = mount(CheckboxDemo);
+    
+        // select a parent node first
+        instance.set('values', ['2.1.1']);
+        await wait();
+    
+        element.click();
+        await wait();
+        let dropdown = getElement('.k-tree-select-menu')!;
+        // verify related nodes are selected
+        const checkboxes = dropdown.querySelectorAll('.k-checkbox');
+        expect(checkboxes[3].classList.contains('k-indeterminate')).to.be.true; // First floor-2
+        expect(checkboxes[4].classList.contains('k-indeterminate')).to.be.true; // Second floor-2.1
+        expect(checkboxes[5].classList.contains('k-checkbox')).to.be.true; // Third floor-2.1.1
+        // expect(checkboxes[6].classList.contains('k-checked')).to.be.true; // Third floor-2.1.2
+    
+        // set to empty array
+        instance.set('values', []);
+        await wait();
+    
+        // verify all nodes are cleared selected state
+        checkboxes.forEach(checkbox => {
+            expect(checkbox.classList.contains('k-checked')).to.be.false;
+            expect(checkbox.classList.contains('k-indeterminate')).to.be.false;
+        });
+    });
 });

package/components/treeSelect/useValue.ts

@@ -1,9 +1,10 @@
-import {useInstance, Key, createRef} from 'intact';
+import {useInstance, Key, createRef, nextTick} from 'intact';
 import type {TreeSelect} from './';
 import {useState} from '../../hooks/useState';
 import {isNullOrUndefined} from 'intact-shared';
 import type {Tree} from '../tree';
 import type {Node} from '../tree/useNodes';
+import { isEqualArray } from '../utils';
 
 export function useValue() {
     const instance = useInstance() as TreeSelect<Key, boolean, boolean>;
@@ -23,10 +24,12 @@ export function useValue() {
         checkedKeys.set(v as Key[]);
     }
 
-    function onChangeCheckedKeys() {
+    function onChangeCheckedKeys(allKeys: Key[]) {
+        checkedKeys.set(allKeys);
         const keys = getAllCheckedKeys();
-        instance.set('value', keys);
-        checkedKeys.set(keys);
+        if (!isEqualArray(keys, instance.get('value'))) {
+            instance.set('value', keys);
+        }
     }
 
     function getAllCheckedKeys() {

package/components/virtualList/index.spec.ts

@@ -13,6 +13,7 @@ describe('VirtualList', () => {
 
         // check basic structure
         const container = element.querySelector('.k-virtual-container')!;
+        await wait();
         expect(container.outerHTML).to.matchSnapshot();
 
         const wrapper = element.querySelector('.k-virtual-wrapper')!;
@@ -259,5 +260,165 @@ describe('VirtualList', () => {
         const isAtBottom = Math.abs((containerRect.bottom - lastItemRect.bottom)) <= 1; 
         expect(isAtBottom).to.be.true;
     });
+
+    it('should handle async data correctly', async () => {
+        class AsyncDemo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: []
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(AsyncDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        // check initial state
+        expect(wrapper.children.length).to.equal(0);
+        expect(phantom.style.height).to.equal('0px');
+    
+        // simulate async data loading
+        instance.set('list', Array.from({length: 100}, (_, i) => i));
+        await wait(50);
+    
+        expect(wrapper.children.length).to.be.equal(23);
+        expect(phantom.style.height).to.be.equal('1800px');
+        
+        // check render content
+        expect(wrapper.firstElementChild!.textContent).to.equal('Item 0');
+    });
+    
+    it('should handle empty data and re-adding data correctly', async () => {
+        class EmptyDemo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(EmptyDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        // record initial state
+        const initialHeight = phantom.style.height;
+        const initialChildrenCount = wrapper.children.length;
+    
+        // clear data
+        instance.set('list', []);
+        await wait(50);
+    
+        // check empty state
+        expect(wrapper.children.length).to.equal(0);
+        expect(phantom.style.height).to.equal('0px');
+    
+        // re-add data
+        instance.set('list', Array.from({length: 50}, (_, i) => i));
+        await wait(50);
+    
+        // check re-add data state
+        expect(wrapper.children.length).to.be.equal(23);
+        expect(parseInt(phantom.style.height)).to.be.equal(900);
+        expect(wrapper.firstElementChild!.textContent).to.equal('Item 0');
+    
+        // 滚动测试
+        // container.scrollTop = 100;
+        // await wait(50);
+    
+        // // 检查滚动后的渲染是否正确
+        // expect(wrapper.firstElementChild!.textContent).to.not.equal('Item 0');
+    });
+
+    it('should handle extreme height differences correctly', async () => {
+        class ExtremeHeightDemo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} 
+                        key={$value} 
+                        style={$value < 5 ? 'height: 100px' : 'height: 30px'}
+                    >
+                        Item {$value}
+                    </div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(ExtremeHeightDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        const initialItems = wrapper.children;
+        const initialLength = initialItems.length;
+        
+        // check first 5 elements height
+        const firstItem = initialItems[0] as HTMLElement;
+        expect(firstItem.offsetHeight).to.equal(100);
+    
+        // record initial average height (calculate by total height and render count)
+        const initialTotalHeight = parseInt(phantom.style.height);
+        const initialAvgHeight = initialTotalHeight / 100;
+        expect(initialAvgHeight).to.be.greaterThan(30);
+    
+        // scroll to small height area
+        container.scrollTop = 800;
+        await wait(50);
+    
+        // check new render elements
+        const newItems = wrapper.children;
+        const newLength = newItems.length;
+        const firstNewItem = newItems[0] as HTMLElement;
+        
+        // check
+        // new render elements should be 30px height
+        expect(firstNewItem.offsetHeight).to.equal(30);
+        
+        // because average height is smaller, render elements count should be more
+        expect(newLength).to.be.greaterThan(initialLength);
+    
+        // check scroll position is correct
+        const firstVisibleIndex = parseInt(firstNewItem.textContent!.replace('Item ', ''));
+        expect(firstVisibleIndex).to.be.greaterThan(5);
+    
+        container.scrollTop = 1200;
+        await wait();
+    
+        const finalItems = wrapper.children;
+        const finalFirstItem = finalItems[0] as HTMLElement;
+        expect(finalFirstItem.offsetHeight).to.equal(30);
+        expect(finalItems.length).to.equal(newLength); // render count should be stable
+    });
 });
 
+

package/components/virtualList/rows.vdt

@@ -8,11 +8,12 @@ const rows = this.rows;
 <VirtualRowsContext.Consumer>
     {({ notifyRows, startIndex, length, disabled }) => {
         if (!disabled) {
-            children = rows.value.slice(startIndex, startIndex + length); 
             notifyRows(rows.value);
+            children = rows.value.slice(startIndex, startIndex + length);
         }
 
         if (isNullOrUndefined(tagName)) {
+            if (!children.length) return;
             return createFragment(children, 8 /* ChildrenTypes.HasKeyedChildren */);
         }
         return createVNode(tagName, null, children);

package/components/virtualList/useRows.ts

@@ -1,4 +1,4 @@
-import { useInstance, VNode, createRef, createFragment } from 'intact';
+import { useInstance, VNode, createRef, createFragment, Children, isText } from 'intact';
 import { VirtualListRows } from './rows';
 
 export function useRows() {
@@ -12,11 +12,25 @@ export function useRows() {
         // convert to array if it has only one child
         const childrenType = vNode.childrenType;
         if (childrenType & 2 /* ChildrenTypes.HasVNodeChildren */) {
-            rows.value = [vNode.children as unknown as VNode];
+            const children = vNode.children as unknown as VNode;
+            if (isText(children)) {
+                // ignore void and text vnode
+                rows.value = [];
+            } else {
+                rows.value = [children];
+            }
         } else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
             rows.value = [];
         } else {
             rows.value = vNode.children as VNode[];
+
+            if (process.env.NODE_ENV !== 'production') {
+                rows.value.forEach(row => {
+                    if (isText(row)) {
+                        console.warn('VirtualList: Text node can not been used as children.');
+                    }
+                });
+            }
         }
     });
 

package/components/virtualList/useVirtualRows.ts

@@ -22,46 +22,51 @@ export function useVirtualRows() {
     const length = useState(MIN_LENGTH);
 
     let calculatedHeight = 0;
-    let rowAvgHeight = 0;
+    let rowAvgHeight = 30;
     let rows: VNode[] = [];
     function notifyRows(_rows: VNode[]) { 
+        if (_rows === rows) return;
+
         const oldRows = rows;
         const oldLength = rows.length;
         rows = _rows;
+
         // diff oldRows, newRows
-        const newKeys = new Set(_rows.map(row => row.key));
-
-        for (let i = 0; i < oldLength; i++) {
-            const oldKey = oldRows[i].key!;
-            if (!newKeys.has(oldKey)) {
-                const height = rowsHeightMap.get(oldKey);
-                if (!isNullOrUndefined(height)) {
-                    calculatedHeight -= height;
-                    rowsHeightMap.delete(oldKey);
+        if (!_rows.length) {
+            calculatedHeight = 0;
+            rowsHeightMap.clear();
+        } else {
+            const newKeys = new Set(_rows.map(row => row.key));
+
+            for (let i = 0; i < oldLength; i++) {
+                const oldKey = oldRows[i].key!;
+                if (!newKeys.has(oldKey)) {
+                    const height = rowsHeightMap.get(oldKey);
+                    if (!isNullOrUndefined(height)) {
+                        calculatedHeight -= height;
+                        rowsHeightMap.delete(oldKey);
+                    }
                 }
             }
         }
-
-        // update rowAvgHeight
-        if (rowsHeightMap.size === 0) {
-            rowAvgHeight = calculatedHeight = 0;
-        } else {
-            rowAvgHeight = calculatedHeight / rowsHeightMap.size;
-        }
-
+    
         if (_rows.length < oldLength) {
             const maxStartIndex = Math.max(0, _rows.length - length.value);
             if (startIndex.value > maxStartIndex) {
                 startIndex.set(maxStartIndex);
-                // 重新计算位置
                 nextTick(() => {
                     handleScroll();
                 });
             }
         }
+
+        instance.forceUpdate(() => {
+            calculateRowsHeight();
+        });
     }
 
     function calculateRowsHeight() {
+        if (!rows.length) return;
         for (
             let i = startIndex.value;
             i < startIndex.value + length.value && i < rows.length;
@@ -79,6 +84,10 @@ export function useVirtualRows() {
 
         // use the average height to estimate the row height
         rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+
+        const containerHeight = containerDom.offsetHeight;
+        // calculate the length of rows we should render
+        length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
     }
 
     watchState(startIndex, () => {
@@ -89,13 +98,8 @@ export function useVirtualRows() {
     onMounted(() => {
         // get contains height
         containerDom = findDomFromVNode(instance.$lastInput!, true) as HTMLElement;
-        const containerHeight = containerDom.offsetHeight;
 
         calculateRowsHeight();
-
-        // calculate the length of rows we should render
-        length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
-
         containerDom.addEventListener('scroll', handleScroll);
     });
 

package/es/components/tree/useChecked.js

@@ -2,6 +2,7 @@ import _Set from "@babel/runtime-corejs3/core-js/set";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import { useInstance } from 'intact';
 import { useReceive } from '../../hooks/useReceive';
+import { isEqualArray } from '../utils';
 export function useChecked(getNodes) {
   var instance = useInstance();
   var checkedKeys = new _Set();
@@ -32,9 +33,7 @@ export function useChecked(getNodes) {
           }
         }
         node.checked = checked;
-        if (checked) {
-          node.indeterminate = false;
-        }
+        node.indeterminate = false;
         if (shouldUpdateCheckedKeys) {
           updateCheckedKeys(node);
         }
@@ -47,6 +46,11 @@ export function useChecked(getNodes) {
     needRecheckNodes.forEach(function (node) {
       updateUpward(node);
     });
+    var oldCheckedKeys = instance.get('checkedKeys');
+    var newCheckedKeys = _Array$from(checkedKeys);
+    if (!isEqualArray(oldCheckedKeys, newCheckedKeys)) {
+      instance.set('checkedKeys', newCheckedKeys);
+    }
   }
   function updateCheckedKeys(node) {
     if (node.checked) {
@@ -56,7 +60,7 @@ export function useChecked(getNodes) {
     }
   }
   function toggle(node) {
-    var uncorrelated = instance.get('uncorrelated');
+    // const uncorrelated = instance.get('uncorrelated');
     updateDownward(node, !node.checked);
     updateUpward(node.parent);
     instance.set('checkedKeys', _Array$from(checkedKeys));

package/es/components/treeSelect/index.spec.js

@@ -168,4 +168,66 @@ describe('TreeSelect', function () {
       }
     }, _callee5);
   })));
+  it('should handle parent node correctly when all children are checked initially', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, instance, element, dropdown, parentCheckboxes;
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _mount6 = mount(CheckboxDemo), instance = _mount6[0], element = _mount6[1]; // init values
+          instance.set('values', ['2.1.1', '2.1.2']);
+          _context7.next = 4;
+          return wait();
+        case 4:
+          // because 2.2 is disabled, so it will select the outermost parent node 2
+          expect(instance.get('values')).to.eql(['2']);
+          element.click();
+          _context7.next = 8;
+          return wait();
+        case 8:
+          dropdown = getElement('.k-tree-select-menu'); // verify parent node is selected
+          parentCheckboxes = dropdown.querySelectorAll('.k-checkbox');
+          expect(parentCheckboxes[3].classList.contains('k-checked')).to.be.true; // First floor-2
+          expect(parentCheckboxes[4].classList.contains('k-checked')).to.be.true; // Second floor-2.1
+        case 12:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee6);
+  })));
+  it('should clear parent node state when setting values to empty array', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, dropdown, checkboxes;
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _mount7 = mount(CheckboxDemo), instance = _mount7[0], element = _mount7[1]; // select a parent node first
+          instance.set('values', ['2.1.1']);
+          _context8.next = 4;
+          return wait();
+        case 4:
+          element.click();
+          _context8.next = 7;
+          return wait();
+        case 7:
+          dropdown = getElement('.k-tree-select-menu'); // verify related nodes are selected
+          checkboxes = dropdown.querySelectorAll('.k-checkbox');
+          expect(checkboxes[3].classList.contains('k-indeterminate')).to.be.true; // First floor-2
+          expect(checkboxes[4].classList.contains('k-indeterminate')).to.be.true; // Second floor-2.1
+          expect(checkboxes[5].classList.contains('k-checkbox')).to.be.true; // Third floor-2.1.1
+          // expect(checkboxes[6].classList.contains('k-checked')).to.be.true; // Third floor-2.1.2
+          // set to empty array
+          instance.set('values', []);
+          _context8.next = 15;
+          return wait();
+        case 15:
+          // verify all nodes are cleared selected state
+          checkboxes.forEach(function (checkbox) {
+            expect(checkbox.classList.contains('k-checked')).to.be.false;
+            expect(checkbox.classList.contains('k-indeterminate')).to.be.false;
+          });
+        case 16:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee7);
+  })));
 });

package/es/components/treeSelect/useValue.d.ts

@@ -4,6 +4,6 @@ export declare function useValue(): {
     selectedKeys: import("../../hooks/useState").State<Key[]>;
     checkedKeys: import("../../hooks/useState").State<Key[]>;
     treeRef: import("intact").RefObject<Tree<Key>>;
-    onChangeCheckedKeys: () => void;
+    onChangeCheckedKeys: (allKeys: Key[]) => void;
     onChangeSelectedKeys: (keys: Key[]) => void;
 };

package/es/components/treeSelect/useValue.js

@@ -1,6 +1,7 @@
 import { useInstance, createRef } from 'intact';
 import { useState } from '../../hooks/useState';
 import { isNullOrUndefined } from 'intact-shared';
+import { isEqualArray } from '../utils';
 export function useValue() {
   var instance = useInstance();
   var selectedKeys = useState([]);
@@ -16,10 +17,12 @@ export function useValue() {
     selectedKeys.set(v);
     checkedKeys.set(v);
   }
-  function onChangeCheckedKeys() {
+  function onChangeCheckedKeys(allKeys) {
+    checkedKeys.set(allKeys);
     var keys = getAllCheckedKeys();
-    instance.set('value', keys);
-    checkedKeys.set(keys);
+    if (!isEqualArray(keys, instance.get('value'))) {
+      instance.set('value', keys);
+    }
   }
   function getAllCheckedKeys() {
     // if the parent has been checked, ignore the children

package/es/components/virtualList/index.spec.js

@@ -21,13 +21,16 @@ describe('VirtualList', function () {
         case 0:
           _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1]; // check basic structure
           container = element.querySelector('.k-virtual-container');
+          _context.next = 4;
+          return wait();
+        case 4:
           expect(container.outerHTML).to.matchSnapshot();
           wrapper = element.querySelector('.k-virtual-wrapper');
           expect(wrapper).to.exist;
           // check render items is less than total
           items = wrapper.children;
           expect(items.length).to.be.lessThan(100);
-        case 7:
+        case 9:
         case "end":
           return _context.stop();
       }
@@ -369,4 +372,200 @@ describe('VirtualList', function () {
       }
     }, _callee8);
   })));
+  it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var AsyncDemo, _mount9, instance, container, wrapper, phantom;
+    return _regeneratorRuntime.wrap(function _callee9$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          AsyncDemo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(AsyncDemo, _Component5);
+            function AsyncDemo() {
+              var _context15;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this5.VirtualList = VirtualList;
+              return _this5;
+            }
+            AsyncDemo.defaults = function defaults() {
+              return {
+                list: []
+              };
+            };
+            return AsyncDemo;
+          }(Component);
+          AsyncDemo.template = "\n                const VirtualList = this.VirtualList;\n                <VirtualList style=\"height: 300px\">\n                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>\n                </VirtualList>\n            ";
+          _mount9 = mount(AsyncDemo), instance = _mount9[0];
+          _context16.next = 5;
+          return wait();
+        case 5:
+          container = getElement('.k-virtual-container');
+          wrapper = getElement('.k-virtual-wrapper');
+          phantom = getElement('.k-virtual-phantom'); // check initial state
+          expect(wrapper.children.length).to.equal(0);
+          expect(phantom.style.height).to.equal('0px');
+          // simulate async data loading
+          instance.set('list', _Array$from({
+            length: 100
+          }, function (_, i) {
+            return i;
+          }));
+          _context16.next = 13;
+          return wait(50);
+        case 13:
+          expect(wrapper.children.length).to.be.equal(23);
+          expect(phantom.style.height).to.be.equal('1800px');
+          // check render content
+          expect(wrapper.firstElementChild.textContent).to.equal('Item 0');
+        case 16:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee9);
+  })));
+  it('should handle empty data and re-adding data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var EmptyDemo, _mount10, instance, container, wrapper, phantom, initialHeight, initialChildrenCount;
+    return _regeneratorRuntime.wrap(function _callee10$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          EmptyDemo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(EmptyDemo, _Component6);
+            function EmptyDemo() {
+              var _context17;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
+              _this6.VirtualList = VirtualList;
+              return _this6;
+            }
+            EmptyDemo.defaults = function defaults() {
+              return {
+                list: _Array$from({
+                  length: 100
+                }, function (_, i) {
+                  return i;
+                })
+              };
+            };
+            return EmptyDemo;
+          }(Component);
+          EmptyDemo.template = "\n                const VirtualList = this.VirtualList;\n                <VirtualList style=\"height: 300px\">\n                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>\n                </VirtualList>\n            ";
+          _mount10 = mount(EmptyDemo), instance = _mount10[0];
+          _context18.next = 5;
+          return wait();
+        case 5:
+          container = getElement('.k-virtual-container');
+          wrapper = getElement('.k-virtual-wrapper');
+          phantom = getElement('.k-virtual-phantom'); // record initial state
+          initialHeight = phantom.style.height;
+          initialChildrenCount = wrapper.children.length; // clear data
+          instance.set('list', []);
+          _context18.next = 13;
+          return wait(50);
+        case 13:
+          // check empty state
+          expect(wrapper.children.length).to.equal(0);
+          expect(phantom.style.height).to.equal('0px');
+          // re-add data
+          instance.set('list', _Array$from({
+            length: 50
+          }, function (_, i) {
+            return i;
+          }));
+          _context18.next = 18;
+          return wait(50);
+        case 18:
+          // check re-add data state
+          expect(wrapper.children.length).to.be.equal(23);
+          expect(parseInt(phantom.style.height)).to.be.equal(900);
+          expect(wrapper.firstElementChild.textContent).to.equal('Item 0');
+          // 滚动测试
+          // container.scrollTop = 100;
+          // await wait(50);
+          // // 检查滚动后的渲染是否正确
+          // expect(wrapper.firstElementChild!.textContent).to.not.equal('Item 0');
+        case 21:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee10);
+  })));
+  it('should handle extreme height differences correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var ExtremeHeightDemo, _mount11, instance, container, wrapper, phantom, initialItems, initialLength, firstItem, initialTotalHeight, initialAvgHeight, newItems, newLength, firstNewItem, firstVisibleIndex, finalItems, finalFirstItem;
+    return _regeneratorRuntime.wrap(function _callee11$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          ExtremeHeightDemo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(ExtremeHeightDemo, _Component7);
+            function ExtremeHeightDemo() {
+              var _context19;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+              _this7.VirtualList = VirtualList;
+              return _this7;
+            }
+            ExtremeHeightDemo.defaults = function defaults() {
+              return {
+                list: _Array$from({
+                  length: 100
+                }, function (_, i) {
+                  return i;
+                })
+              };
+            };
+            return ExtremeHeightDemo;
+          }(Component);
+          ExtremeHeightDemo.template = "\n                const VirtualList = this.VirtualList;\n                <VirtualList style=\"height: 300px\">\n                    <div v-for={this.get('list')} \n                        key={$value} \n                        style={$value < 5 ? 'height: 100px' : 'height: 30px'}\n                    >\n                        Item {$value}\n                    </div>\n                </VirtualList>\n            ";
+          _mount11 = mount(ExtremeHeightDemo), instance = _mount11[0];
+          _context20.next = 5;
+          return wait();
+        case 5:
+          container = getElement('.k-virtual-container');
+          wrapper = getElement('.k-virtual-wrapper');
+          phantom = getElement('.k-virtual-phantom');
+          initialItems = wrapper.children;
+          initialLength = initialItems.length; // check first 5 elements height
+          firstItem = initialItems[0];
+          expect(firstItem.offsetHeight).to.equal(100);
+          // record initial average height (calculate by total height and render count)
+          initialTotalHeight = parseInt(phantom.style.height);
+          initialAvgHeight = initialTotalHeight / 100;
+          expect(initialAvgHeight).to.be.greaterThan(30);
+          // scroll to small height area
+          container.scrollTop = 800;
+          _context20.next = 18;
+          return wait(50);
+        case 18:
+          // check new render elements
+          newItems = wrapper.children;
+          newLength = newItems.length;
+          firstNewItem = newItems[0]; // check
+          // new render elements should be 30px height
+          expect(firstNewItem.offsetHeight).to.equal(30);
+          // because average height is smaller, render elements count should be more
+          expect(newLength).to.be.greaterThan(initialLength);
+          // check scroll position is correct
+          firstVisibleIndex = parseInt(firstNewItem.textContent.replace('Item ', ''));
+          expect(firstVisibleIndex).to.be.greaterThan(5);
+          container.scrollTop = 1200;
+          _context20.next = 28;
+          return wait();
+        case 28:
+          finalItems = wrapper.children;
+          finalFirstItem = finalItems[0];
+          expect(finalFirstItem.offsetHeight).to.equal(30);
+          expect(finalItems.length).to.equal(newLength); // render count should be stable
+        case 32:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee11);
+  })));
 });

package/es/components/virtualList/rows.vdt.js

@@ -19,10 +19,11 @@ export default function ($props, $blocks, $__proto__) {
         disabled = _ref.disabled;
       if (!disabled) {
         var _context;
-        _children = _sliceInstanceProperty(_context = rows.value).call(_context, startIndex, startIndex + length);
         notifyRows(rows.value);
+        _children = _sliceInstanceProperty(_context = rows.value).call(_context, startIndex, startIndex + length);
       }
       if (isNullOrUndefined(tagName)) {
+        if (!_children.length) return;
         return createFragment(_children, 8 /* ChildrenTypes.HasKeyedChildren */);
       }
       return createVNode(tagName, null, _children);

package/es/components/virtualList/useRows.js

@@ -1,4 +1,4 @@
-import { useInstance, createRef, createFragment } from 'intact';
+import { useInstance, createRef, createFragment, isText } from 'intact';
 export function useRows() {
   var instance = useInstance();
   var rows = createRef([]);
@@ -8,11 +8,24 @@ export function useRows() {
     // convert to array if it has only one child
     var childrenType = vNode.childrenType;
     if (childrenType & 2 /* ChildrenTypes.HasVNodeChildren */) {
-      rows.value = [vNode.children];
+      var _children = vNode.children;
+      if (isText(_children)) {
+        // ignore void and text vnode
+        rows.value = [];
+      } else {
+        rows.value = [_children];
+      }
     } else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
       rows.value = [];
     } else {
       rows.value = vNode.children;
+      if (process.env.NODE_ENV !== 'production') {
+        rows.value.forEach(function (row) {
+          if (isText(row)) {
+            console.warn('VirtualList: Text node can not been used as children.');
+          }
+        });
+      }
     }
   });
   return rows;

package/es/components/virtualList/useVirtualRows.js

@@ -14,44 +14,47 @@ export function useVirtualRows() {
   var startIndex = useState(0);
   var length = useState(MIN_LENGTH);
   var calculatedHeight = 0;
-  var rowAvgHeight = 0;
+  var rowAvgHeight = 30;
   var rows = [];
   function notifyRows(_rows) {
+    if (_rows === rows) return;
     var oldRows = rows;
     var oldLength = rows.length;
     rows = _rows;
     // diff oldRows, newRows
-    var newKeys = new _Set(_mapInstanceProperty(_rows).call(_rows, function (row) {
-      return row.key;
-    }));
-    for (var i = 0; i < oldLength; i++) {
-      var oldKey = oldRows[i].key;
-      if (!newKeys.has(oldKey)) {
-        var height = rowsHeightMap.get(oldKey);
-        if (!isNullOrUndefined(height)) {
-          calculatedHeight -= height;
-          rowsHeightMap.delete(oldKey);
+    if (!_rows.length) {
+      calculatedHeight = 0;
+      rowsHeightMap.clear();
+    } else {
+      var newKeys = new _Set(_mapInstanceProperty(_rows).call(_rows, function (row) {
+        return row.key;
+      }));
+      for (var i = 0; i < oldLength; i++) {
+        var oldKey = oldRows[i].key;
+        if (!newKeys.has(oldKey)) {
+          var height = rowsHeightMap.get(oldKey);
+          if (!isNullOrUndefined(height)) {
+            calculatedHeight -= height;
+            rowsHeightMap.delete(oldKey);
+          }
         }
       }
     }
-    // update rowAvgHeight
-    if (rowsHeightMap.size === 0) {
-      rowAvgHeight = calculatedHeight = 0;
-    } else {
-      rowAvgHeight = calculatedHeight / rowsHeightMap.size;
-    }
     if (_rows.length < oldLength) {
       var maxStartIndex = Math.max(0, _rows.length - length.value);
       if (startIndex.value > maxStartIndex) {
         startIndex.set(maxStartIndex);
-        // 重新计算位置
         nextTick(function () {
           handleScroll();
         });
       }
     }
+    instance.forceUpdate(function () {
+      calculateRowsHeight();
+    });
   }
   function calculateRowsHeight() {
+    if (!rows.length) return;
     for (var i = startIndex.value; i < startIndex.value + length.value && i < rows.length; i++) {
       var row = rows[i];
       var key = row.key;
@@ -64,6 +67,9 @@ export function useVirtualRows() {
     }
     // use the average height to estimate the row height
     rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+    var containerHeight = containerDom.offsetHeight;
+    // calculate the length of rows we should render
+    length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
   }
   watchState(startIndex, function () {
     nextTick(calculateRowsHeight);
@@ -72,10 +78,7 @@ export function useVirtualRows() {
   onMounted(function () {
     // get contains height
     containerDom = findDomFromVNode(instance.$lastInput, true);
-    var containerHeight = containerDom.offsetHeight;
     calculateRowsHeight();
-    // calculate the length of rows we should render
-    length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
     containerDom.addEventListener('scroll', handleScroll);
   });
   onUnmounted(function () {

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.1-beta.0
+ * @king-design v3.5.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,4 +65,4 @@ export * from './components/upload';
 export * from './components/view';
 export * from './components/virtualList';
 export * from './components/wave';
-export declare const version = "3.5.1-beta.0";
+export declare const version = "3.5.1";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.1-beta.0
+ * @king-design v3.5.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -66,5 +66,5 @@ export * from './components/upload';
 export * from './components/view';
 export * from './components/virtualList';
 export * from './components/wave';
-export var version = '3.5.1-beta.0';
+export var version = '3.5.1';
 /* generate end */

package/es/site/data/components/select/demos/virtual/index.js

@@ -16,7 +16,7 @@ var default_1 = /*#__PURE__*/function (_Component) {
   var _proto = default_1.prototype;
   _proto.init = function init() {
     var arr = [];
-    for (var index = 0; index < 50; index++) {
+    for (var index = 0; index < 10000; index++) {
       arr.push({
         value: index,
         label: "\u6D4B\u8BD5" + index

package/es/site/data/components/select/demos/virtual/react.js

@@ -21,7 +21,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   var _proto = Demo.prototype;
   _proto.componentDidMount = function componentDidMount() {
     var arr = [];
-    for (var index = 0; index < 50; index++) {
+    for (var index = 0; index < 10000; index++) {
       arr.push({
         value: index,
         label: "\u6D4B\u8BD5" + index
@@ -41,8 +41,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
           day: day
         });
       },
-      virtual: true,
-      filterable: true
+      virtual: true
     }, _mapInstanceProperty(_context2 = this.state.data).call(_context2, function ($value, $key) {
       return /*#__PURE__*/React.createElement(Option, {
         value: $value.value

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.5.1-beta.0
+ * @king-design v3.5.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -70,6 +70,6 @@ export * from './components/view';
 export * from './components/virtualList';
 export * from './components/wave';
 
-export const version = '3.5.1-beta.0';
+export const version = '3.5.1';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.5.1-beta.0",
+  "version": "3.5.1",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {