@king-design/intact 3.4.5 → 3.5.0

package/components/virtualList/phantom.vdt

@@ -0,0 +1,28 @@
+import { getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { cx } from '@emotion/css';
+import { createVNode } from 'intact';
+import { makePhantomStyles } from './styles';
+
+const { className, tagName } = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-virtual-phantom`]: true,
+    [makePhantomStyles()]: true,
+    [className]: className,
+}
+
+<VirtualRowsContext.Consumer>
+    {({ getTotalHeight, disabled }) => {
+        if (disabled) return;
+        
+        return createVNode(tagName || 'div', {
+            ...getRestProps(this),
+            className: cx(classNameObj),
+            style: {
+                height: getTotalHeight() + 'px', 
+            },
+        });
+    }}
+</VirtualRowsContext.Consumer>

package/components/virtualList/rows.ts

@@ -0,0 +1,13 @@
+import { Component } from 'intact';
+import { useRows } from './useRows';
+import template from './rows.vdt';
+
+export interface VirtualListRowsProps {
+    tagName?: string
+}
+
+export class VirtualListRows extends Component<VirtualListRowsProps> {
+    static template = template;
+
+    private rows = useRows();
+}

package/components/virtualList/rows.vdt

@@ -0,0 +1,20 @@
+import { createFragment, createVNode } from 'intact';
+import { isNullOrUndefined } from 'intact-shared';
+import { context as VirtualRowsContext } from './useVirtualRows';
+
+let { tagName, children } = this.get();
+const rows = this.rows;
+
+<VirtualRowsContext.Consumer>
+    {({ notifyRows, startIndex, length, disabled }) => {
+        if (!disabled) {
+            children = rows.value.slice(startIndex, startIndex + length); 
+            notifyRows(rows.value);
+        }
+
+        if (isNullOrUndefined(tagName)) {
+            return createFragment(children, 8 /* ChildrenTypes.HasKeyedChildren */);
+        }
+        return createVNode(tagName, null, children);
+    }}
+</VirtualRowsContext.Consumer>

package/components/virtualList/styles.ts

@@ -0,0 +1,29 @@
+import {css} from '@emotion/css';
+import '../../styles/global';
+import { cache } from '../utils';
+
+export const makeContainerStyles = cache(() => {
+    return css`
+        overflow: auto;
+        position: relative;
+        height: 100%;
+    `;
+});
+
+export const makePhantomStyles = cache(() => {
+    return css`
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: -1;
+        pointer-events: none;
+    `;
+});
+
+export const makeWrapperStyles = cache(() => {
+    return css`
+        width: 100%;
+        will-change: transform;
+    `;
+});

package/components/virtualList/useRows.ts

@@ -0,0 +1,24 @@
+import { useInstance, VNode, createRef, createFragment } from 'intact';
+import { VirtualListRows } from './rows';
+
+export function useRows() {
+    const instance = useInstance() as VirtualListRows;
+    const rows = createRef<VNode[]>([]);
+
+    instance.on('$receive:children', (children) => {
+        // use fragment vnode to normalize children
+        const vNode = createFragment(children, 0 /* ChildrenTypes.UnknownChildren */);
+
+        // 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];
+        } else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
+            rows.value = [];
+        } else {
+            rows.value = vNode.children as VNode[];
+        }
+    });
+
+    return rows;
+}

package/components/virtualList/useVirtualRows.ts

@@ -0,0 +1,145 @@
+import { createContext } from '../context';
+import { useState, watchState, State } from '../../hooks/useState';
+import { useInstance, nextTick, VNode, onMounted, onUnmounted, Key, findDomFromVNode } from 'intact';
+import { VirtualListContainer } from './container';
+import { isNullOrUndefined } from 'intact-shared';
+
+type ContextValue = {
+    notifyRows: (rows: State<VNode[]>) => void;
+    startIndex: number;
+    endIndex: number;
+}
+
+export const context = createContext<ContextValue>();
+
+const MIN_LENGTH = 10;
+const BUFFER_SIZE = 3;
+
+export function useVirtualRows() {
+    const instance = useInstance() as unknown as VirtualListContainer;
+    const rowsHeightMap = new Map<Key, number>();
+    const startIndex = useState(0);
+    const length = useState(MIN_LENGTH);
+
+    let calculatedHeight = 0;
+    let rowAvgHeight = 0;
+    let rows: VNode[] = [];
+    function notifyRows(_rows: VNode[]) { 
+        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);
+                }
+            }
+        }
+
+        // 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();
+                });
+            }
+        }
+    }
+
+    function calculateRowsHeight() {
+        for (
+            let i = startIndex.value;
+            i < startIndex.value + length.value && i < rows.length;
+            i++
+        ) {
+            const row = rows[i];
+            const key = row.key!;
+            if (!rowsHeightMap.has(key)) {
+                const rowDom = findDomFromVNode(row, true) as HTMLElement;
+                const height = rowDom.offsetHeight;
+                rowsHeightMap.set(key, height); 
+                calculatedHeight += height;
+            }
+        }
+
+        // use the average height to estimate the row height
+        rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+    }
+
+    watchState(startIndex, () => {
+        nextTick(calculateRowsHeight);
+    });
+
+    let containerDom: HTMLElement;
+    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);
+    });
+
+    onUnmounted(() => {
+        containerDom.removeEventListener('scroll', handleScroll); 
+    });
+
+    function getTotalHeight() {
+        return calculatedHeight + rowAvgHeight * (rows.length - rowsHeightMap.size);
+    }
+
+    const translateY = useState(0);
+    function handleScroll() {
+        const { disabled } = instance.get();
+        if (disabled) return;
+        
+        const scrollTop = containerDom.scrollTop;
+
+        let accumulatedHeight = 0;
+        let start = 0;
+
+        while (start < rows.length) {
+            accumulatedHeight += getRowHeightByIndex(start);
+            if (accumulatedHeight > scrollTop) {
+                break;
+            }
+
+            start++;
+        }
+
+        startIndex.set(Math.max(start - BUFFER_SIZE, 0));
+
+        // translateY should substract the buffer size rows height
+        for (let i = start; i >= startIndex.value; i--) {
+            accumulatedHeight -= getRowHeightByIndex(i); 
+        }
+
+        translateY.set(accumulatedHeight);
+    }
+
+    function getRowHeightByIndex(index: number) {
+        const key = rows[index].key!;
+        return rowsHeightMap.get(key) || rowAvgHeight;
+    }
+
+    return { notifyRows, startIndex, length, getTotalHeight, translateY };
+}

package/components/virtualList/virtual.ts

@@ -0,0 +1,19 @@
+import { Component, TypeDefs, createRef } from 'intact';
+import template from './virtual.vdt';
+
+export interface VirtualListProps {
+    disabled?: boolean
+}
+
+const typeDefs: Required<TypeDefs<VirtualListProps>> = {
+    disabled: Boolean,
+};
+
+export class VirtualList extends Component<VirtualListProps>  {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    // public scrollToIndex(index: number, behavior: ScrollBehavior = 'auto') {
+        // this.containerRef.value?.scrollToIndex(index, behavior);
+    // }
+}

package/components/virtualList/virtual.vdt

@@ -0,0 +1,17 @@
+import { getRestProps } from '../utils';
+import { VirtualListContainer } from './container';
+import { VirtualListWrapper } from './wrapper';
+import { VirtualListRows } from './rows';
+import { VirtualListPhantom } from './phantom';
+
+const { children, disabled } = this.get();
+
+if (disabled) {
+    return children;
+}
+<VirtualListContainer {...getRestProps(this)}>
+    <VirtualListPhantom />
+    <VirtualListWrapper>
+        <VirtualListRows>{children}</VirtualListRows>
+    </VirtualListWrapper>
+</VirtualListContainer>

package/components/virtualList/wrapper.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs, ComponentConstructor } from 'intact';
+import template from './wrapper.vdt';
+import { useConfigContext } from '../config';
+export interface VirtualListWrapperProps {
+    tagName?: string | ComponentConstructor,
+}
+
+const typeDefs: Required<TypeDefs<VirtualListWrapperProps>> = {
+    tagName: String,
+};
+
+export class VirtualListWrapper extends Component<VirtualListWrapperProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private config = useConfigContext();
+}

package/components/virtualList/wrapper.vdt

@@ -0,0 +1,24 @@
+import { addStyle, getRestProps } from '../utils';
+import { context as VirtualRowsContext } from './useVirtualRows';
+import { createVNode } from 'intact';
+import { cx } from '@emotion/css';
+
+const { children, className, tagName, style } = this.get();
+const { k } = this.config;
+
+<VirtualRowsContext.Consumer>
+    {({ translateY, disabled }) => {
+        const classNameObj = {
+            [`${k}-virtual-wrapper`]: !disabled,
+            [className]: className,
+        }
+
+        const _style = !disabled ? { transform: `translateY(${translateY}px)` } : {};
+        
+        return createVNode(tagName || 'div', {
+            ...getRestProps(this),
+            className: cx(classNameObj),
+            style: addStyle(style, _style)
+        }, children);
+    }}
+</VirtualRowsContext.Consumer>

package/es/components/affix/index.d.ts

@@ -4,6 +4,7 @@ export interface AffixProps {
     bottom?: number;
     exclude?: (data: ExcludeParam) => boolean;
     shouldFix?: (data: ShouldFixParam) => boolean;
+    disabled?: boolean;
 }
 export interface AffixEvents {
     change: [boolean];

package/es/components/affix/index.js

@@ -8,7 +8,8 @@ var typeDefs = {
   top: Number,
   bottom: Number,
   exclude: Function,
-  shouldFix: Function
+  shouldFix: Function,
+  disabled: Boolean
 };
 export var Affix = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Affix, _Component);

package/es/components/affix/useStyle.js

@@ -14,54 +14,57 @@ export function useStyle(elementRef) {
       offsetTop = _instance$get.top,
       offsetBottom = _instance$get.bottom,
       exclude = _instance$get.exclude,
-      shouldFix = _instance$get.shouldFix;
-    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-      top = _elementRef$value$get.top,
-      bottom = _elementRef$value$get.bottom,
-      width = _elementRef$value$get.width,
-      height = _elementRef$value$get.height;
-    var setStyle = function setStyle(styles) {
-      if (!exclude || exclude && !exclude({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        top: top,
-        bottom: bottom,
-        width: width,
-        height: height
-      })) {
-        style.set(_extends({
-          position: 'fixed',
-          width: width + "px"
-        }, styles));
-        containerStyle.set({
-          height: height + "px"
-        });
-      } else {
-        resetStyle();
-      }
-    };
-    if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
-      offsetTop = 0;
-    }
-    if (!isNullOrUndefined(offsetTop)) {
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom
-      }) || !shouldFix && top < offsetTop) {
-        return setStyle({
-          top: offsetTop + "px"
-        });
+      shouldFix = _instance$get.shouldFix,
+      disabled = _instance$get.disabled;
+    if (!disabled) {
+      var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        top = _elementRef$value$get.top,
+        bottom = _elementRef$value$get.bottom,
+        width = _elementRef$value$get.width,
+        height = _elementRef$value$get.height;
+      var setStyle = function setStyle(styles) {
+        if (!exclude || exclude && !exclude({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          top: top,
+          bottom: bottom,
+          width: width,
+          height: height
+        })) {
+          style.set(_extends({
+            position: 'fixed',
+            width: width + "px"
+          }, styles));
+          containerStyle.set({
+            height: height + "px"
+          });
+        } else {
+          resetStyle();
+        }
+      };
+      if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
+        offsetTop = 0;
       }
-    } else {
-      var viewportHeight = document.documentElement.clientHeight;
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        viewportHeight: viewportHeight
-      }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
-        return setStyle({
-          bottom: offsetBottom + "px"
-        });
+      if (!isNullOrUndefined(offsetTop)) {
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom
+        }) || !shouldFix && top < offsetTop) {
+          return setStyle({
+            top: offsetTop + "px"
+          });
+        }
+      } else {
+        var viewportHeight = document.documentElement.clientHeight;
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          viewportHeight: viewportHeight
+        }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
+          return setStyle({
+            bottom: offsetBottom + "px"
+          });
+        }
       }
     }
     resetStyle();

package/es/components/datepicker/basepicker.js

@@ -15,13 +15,13 @@ import { findValueIndex } from './helpers';
 import { isEqualArray, last, bind } from '../utils';
 import { BaseSelect } from '../select/base';
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
-  value: [String, Array, Date, Number, dayjs.Dayjs],
+  value: [String, Array, Date, Number, dayjs],
   range: Boolean,
   format: String,
   valueFormat: String,
   showFormat: String,
-  min: [String, Date, Number, dayjs.Dayjs],
-  max: [String, Date, Number, dayjs.Dayjs],
+  min: [String, Date, Number, dayjs],
+  max: [String, Date, Number, dayjs],
   disabledDate: Function
 });
 var defaults = function defaults() {

package/es/components/dialog/styles.js

@@ -58,8 +58,8 @@ var defaults = {
     padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
-    tipIconFontSize: '24px',
-    tipIconLineHeight: '24px',
+    tipIconFontSize: '40px',
+    tipIconLineHeight: '40px',
     // with title
     titleFontWeight: '500',
     titleTipIconFontSize: '24px',

package/es/components/dropdown/useKeyboard.js

@@ -91,6 +91,7 @@ export function useMenuKeyboard() {
   function reset() {
     var item = items[focusIndex];
     if (focusIndex > -1 && item) {
+      // TODO(find bug)
       itemEvents.get(item).onFocusout();
       focusIndex = -1;
     }
@@ -141,6 +142,8 @@ export function useItemKeyboard(itemEvents) {
     onMouseLeave: function onMouseLeave(e) {
       instance.trigger('mouseleave', e);
       keyboard.reset();
+      // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+      isFocus.set(false);
     },
     isFocus: isFocus
   };

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

@@ -8,6 +8,7 @@ import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
 import AutoRowsDemo from '~/components/input/demos/autoRows';
 import PasswordDemo from '~/components/input/demos/password';
+import AutoWidthDemo from '~/components/input/demos/autowidth';
 import { Input } from './';
 import { Dialog } from '../dialog';
 import { Component } from 'intact';
@@ -238,4 +239,24 @@ describe('Input', function () {
       }
     }, _callee6);
   })));
+  it('autoWidth', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, input;
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          // should expand when input spaces
+          _mount7 = mount(AutoWidthDemo), instance = _mount7[0], element = _mount7[1];
+          input = element.querySelector('input');
+          input.value = 'ab  ';
+          dispatchEvent(input, 'input');
+          _context8.next = 6;
+          return wait(50);
+        case 6:
+          expect(input.offsetWidth).to.gt(16);
+        case 7:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee7);
+  })));
 });

package/es/components/input/index.vdt.js

@@ -133,7 +133,7 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation
-        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
+        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'pre', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
           'ev-click': focusInputOnClick
         })
       });

package/es/components/input/styles.js

@@ -125,7 +125,7 @@ export var makeStyles = cache(function makeStyles(k) {
     return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.", k, "-resize-", type, "{.", k, "-textarea{resize:", type, ";}}");
-  }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
+  }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;pre{font-family:inherit;}}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
 });
 export var makeSearchStyles = cache(function makeSearchStyles(k) {
   return /*#__PURE__*/css("position:relative;display:inline-block;.", k, "-input{transition:width ", input.transition, ";}.", k, "-btn{position:absolute;top:0;right:0;z-index:1;}&.", k, "-default .", k, "-btn:hover{background:transparent;}.", k, "-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.", k, "-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/es/components/layout/styles.js

@@ -60,7 +60,7 @@ export var makeAsideStyles = cache(function makeAsideStyles(k) {
     if (theme === 'dark') return;
     var styles = layout.light;
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
-  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
+  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;border-right:none!important;}");
 });
 export var makeBodyStyles = cache(function makeBodyStyles(k) {
   return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");

package/es/components/select/base.d.ts

@@ -24,6 +24,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     flat?: boolean;
     nowrap?: boolean;
     draggable?: boolean;
+    virtual?: boolean;
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];

package/es/components/select/base.js

@@ -37,7 +37,8 @@ var typeDefs = {
   position: Dropdown.typeDefs.position,
   flat: Boolean,
   nowrap: Boolean,
-  draggable: Boolean
+  draggable: Boolean,
+  virtual: Boolean
 };
 var defaults = function defaults() {
   return {

package/es/components/select/group.vdt.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no } from 'intact';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact';
 import { makeGroupStyles } from './styles';
 import { getRestProps } from '../utils';
+import { VirtualList } from '../virtualList';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -14,7 +15,8 @@ export default function ($props, $blocks, $__proto__) {
     label = _this$get.label,
     className = _this$get.className;
   var _this$select$get = this.select.get(),
-    card = _this$select$get.card;
+    card = _this$select$get.card,
+    virtual = _this$select$get.virtual;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-group"] = true, _classNameObj[className] = className, _classNameObj[makeGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
@@ -27,6 +29,9 @@ export default function ($props, $blocks, $__proto__) {
       return _$blocks['label'].call($this, $super, data);
     };
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, children]);
+  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, _$cc(VirtualList, {
+    'disabled': !virtual,
+    'children': children
+  })]);
 }
 ;

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

@@ -240,7 +240,19 @@ describe('Select', function () {
           return wait();
         case 50:
           expect(instance.get('day1')).to.eql('Wednesday');
-        case 51:
+          // should input spaces
+          input1.click();
+          _context6.next = 54;
+          return wait();
+        case 54:
+          dispatchEvent(input1, 'focus');
+          input1.value = 'm ';
+          dispatchEvent(input1, 'input');
+          _context6.next = 59;
+          return wait();
+        case 59:
+          expect(input1.value).to.eql('m ');
+        case 60:
         case "end":
           return _context6.stop();
       }