@king-design/intact 3.6.0-beta.0 → 3.6.1

package/es/components/datepicker/useValueBase.js

@@ -0,0 +1,280 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { useInstance } from 'intact';
+import { useState, watchState } from '../../hooks/useState';
+import dayjs from './dayjs';
+import { findValueIndex } from './helpers';
+import { isEqualArray, last } from '../utils';
+export function useValueBase(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInput, getEqualType, updateStateValue) {
+  var createDateByValueFormat = _ref.createDateByValueFormat,
+    createDateByShowFormat = _ref.createDateByShowFormat,
+    getShowString = _ref.getShowString,
+    getValueString = _ref.getValueString;
+  var isDisabled = _ref2.isDisabled,
+    minDate = _ref2.minDate;
+  // Normalize the value to multipe values, no matter it's multipe or not
+  var value = useState([]);
+  var instance = useInstance();
+  var dayjsValue = [];
+  instance.watch('value', function (newValue, oldValue) {
+    if (isEqualArray(newValue, oldValue)) return;
+    dayjsValue = convertToDayjs(newValue);
+    updateStateValue(dayjsValue, value);
+    // should update keywords
+    instance.resetKeywords();
+  });
+  watchState(value, function (value) {
+    // silently update the keywords to display the currently selected value 
+    instance.resetKeywords(true);
+    /**
+     * the position may changed after the input break line in multipe mode
+     * use Macro task instead of nextTick, because it has too many Micro tasks
+     */
+    setTimeout(function () {
+      instance.position();
+    });
+  });
+  instance.on('hide', function () {
+    // reset the value after hiding
+    value.set(_sliceInstanceProperty(dayjsValue).call(dayjsValue, 0));
+  });
+  watchState(instance.input.keywords, function (v) {
+    var _instance$get = instance.get(),
+      range = _instance$get.range,
+      multiple = _instance$get.multiple;
+    if (!multiple && v === '') return instance.set('value', null);
+    if (range) {
+      var _context;
+      var _v$split$map = _mapInstanceProperty(_context = v.split(/\s*~\s*/)).call(_context, function (s) {
+          return _trimInstanceProperty(s).call(s);
+        }),
+        start = _v$split$map[0],
+        end = _v$split$map[1];
+      if (start && end) {
+        var startDate = createDateByShowFormat(start);
+        if (!isValidDate(startDate)) {
+          return;
+        }
+        var endDate = createDateByShowFormat(end);
+        if (!isValidDate(endDate)) {
+          return;
+        }
+        if (endDate.isAfter(startDate)) {
+          updateValueOnInput([startDate, endDate]);
+        } else {
+          updateValueOnInput([endDate, startDate]);
+        }
+      }
+    } else {
+      var date = createDateByShowFormat(v);
+      if (isValidDate(date)) {
+        updateValueOnInput(date);
+      }
+    }
+  });
+  function convertToDayjs(v) {
+    if (!v || Array.isArray(v) && !v.length) return [];
+    var _instance$get2 = instance.get(),
+      multiple = _instance$get2.multiple;
+    if (!multiple) {
+      v = [v];
+    }
+    return _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        // range
+        return _mapInstanceProperty(value).call(value, createDateByValueFormat);
+      }
+      return createDateByValueFormat(value);
+    });
+  }
+  function convertToValueString(v) {
+    var results = _mapInstanceProperty(v).call(v, function (value) {
+      if (Array.isArray(value)) {
+        return _mapInstanceProperty(value).call(value, getValueString);
+      }
+      return getValueString(value);
+    });
+    if (!instance.get('multiple')) {
+      return results[0] || null;
+    }
+    return results;
+  }
+  function format() {
+    var _instance$get3 = instance.get(),
+      multiple = _instance$get3.multiple;
+    var labelValue = value.value;
+    if (multiple) {
+      labelValue = dayjsValue;
+    }
+    var results = _mapInstanceProperty(labelValue).call(labelValue, formatSingleValue);
+    if (!instance.get('multiple')) {
+      return results[0];
+    }
+    return results;
+  }
+  function formatSingleValue(value) {
+    if (Array.isArray(value)) {
+      if (value.length === 1) {
+        return getShowString(value[0]) + ' ~';
+      }
+      return _mapInstanceProperty(value).call(value, getShowString).join(' ~ ');
+    }
+    return getShowString(value);
+  }
+  function setSingleDate(v, fromInput) {
+    value.set([v]);
+    if (fromInput || shouldUpdateValue(v)) {
+      updateValue();
+    }
+  }
+  function addMultipeDate(v, fromInput) {
+    var _instance$get4 = instance.get(),
+      range = _instance$get4.range;
+    var _value = value.value;
+    _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
+    if (range && v.length === 2) {
+      // pop the last value firstly, if it only has the start date 
+      var lastValue = last(_value);
+      if (lastValue && lastValue.length < 2) {
+        _value.pop();
+      }
+    }
+    if (_value.length > dayjsValue.length) {
+      // remove the temporary value added by selecting time directly
+      _value.pop();
+    }
+    var _shouldUpdateValue = true;
+    if (fromInput || shouldUpdateValue(v)) {
+      // if select the date/year/month, then toggle the value.
+      // if from input, treat the value as the final value
+      var index = findValueIndex(_value, v, getEqualType());
+      if (index > -1) {
+        _spliceInstanceProperty(_value).call(_value, index, 1);
+      } else {
+        _value.push(v);
+      }
+    } else {
+      // select the datetime, only push the value,
+      // and unique the array on click confirm button
+      _value.push(v);
+      _shouldUpdateValue = false;
+    }
+    value.set(_value);
+    if (_shouldUpdateValue) {
+      updateValue();
+    }
+  }
+  function setValue(v, fromInput) {
+    var multiple = instance.get('multiple');
+    if (multiple) {
+      addMultipeDate(v, fromInput);
+    } else {
+      setSingleDate(v, fromInput);
+    }
+  }
+  function updateValue() {
+    var _value = value.value;
+    var _instance$get5 = instance.get(),
+      range = _instance$get5.range;
+    if (range) {
+      // only fix the last value, since the others are already fixed 
+      var lastValue = last(_value);
+      if (lastValue) {
+        _sortInstanceProperty(lastValue).call(lastValue, function (a, b) {
+          return a.isAfter(b) ? 1 : -1;
+        });
+      }
+    }
+    var valueStr = convertToValueString(_value);
+    // only trigger change event once
+    if (!isEqualArray(valueStr, instance.get('value'))) {
+      instance.set('value', valueStr);
+      instance.resetKeywords();
+    }
+  }
+  // TODO
+  function setMoment() {
+    var now = dayjs();
+    setValue(now, true);
+    instance.hide();
+  }
+  function unique() {
+    var _value = value.value;
+    var map = {};
+    var results = [];
+    _value.forEach(function (value) {
+      var key;
+      if (Array.isArray(value)) {
+        key = _mapInstanceProperty(value).call(value, getValueString).join(' ~ ');
+      } else {
+        key = getValueString(value);
+      }
+      if (!map[key]) {
+        map[key] = true;
+        results.push(value);
+      }
+    });
+    value.set(results);
+  }
+  function isValidDate(date) {
+    return date.isValid() && !isDisabled(date, getEqualType());
+  }
+  function onChangeTime(date, flag) {
+    var _context2;
+    var _instance$get6 = instance.get(),
+      range = _instance$get6.range,
+      multiple = _instance$get6.multiple;
+    var values = _sliceInstanceProperty(_context2 = value.value).call(_context2);
+    // maybe we select time directly
+    var lastIndex = Math.max(values.length - 1, 0);
+    if (allValuesUpdatedInMultipleMode()) {
+      // need add new value, if all value.value has updated to dayjsValue
+      lastIndex = values.length;
+    }
+    var _value = date;
+    if (range) {
+      _value = values[lastIndex];
+      if (_value) {
+        _value = _sliceInstanceProperty(_value).call(_value);
+      } else {
+        _value = [];
+      }
+      _value[flag] = date;
+      instance.trigger('selecting', _value, false);
+    }
+    values[lastIndex] = _value;
+    value.set(values);
+  }
+  function getTimeValue(flag) {
+    var _value = value.value;
+    if (!_value.length) return null;
+    var _instance$get7 = instance.get(),
+      range = _instance$get7.range,
+      min = _instance$get7.min;
+    var lastValue = last(_value);
+    return range ? lastValue[flag] : lastValue;
+  }
+  function getDayjsValue() {
+    return dayjsValue;
+  }
+  function allValuesUpdatedInMultipleMode() {
+    return instance.get('multiple') && value.value.length === dayjsValue.length;
+  }
+  return {
+    value: value,
+    format: format,
+    formatSingleValue: formatSingleValue,
+    onChangeTime: onChangeTime,
+    getTimeValue: getTimeValue,
+    setValue: setValue,
+    convertToDayjs: convertToDayjs,
+    getDayjsValue: getDayjsValue,
+    unique: unique,
+    setMoment: setMoment,
+    updateValue: updateValue,
+    allValuesUpdatedInMultipleMode: allValuesUpdatedInMultipleMode
+  };
+}

package/es/components/datepicker/useYears.js

@@ -44,10 +44,13 @@ export function useYears(showDate, status, focusDate) {
   }
   function onClick(date) {
     showDate.set(date);
-    if (instance.datepicker.get('type') !== 'year') {
-      instance.type.set('month');
-    } else {
+    var datepickerType = instance.datepicker.get('type');
+    if (datepickerType === 'year') {
       instance.triggerChange(date);
+    } else if (datepickerType === 'quarter') {
+      instance.type.set('quarter');
+    } else {
+      instance.type.set('month');
     }
   }
   return {

package/es/components/dropdown/dropdown.d.ts

@@ -16,6 +16,7 @@ export interface DropdownProps {
     collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
+    alwaysShowOnClick?: boolean;
 }
 export interface DropdownEvents {
     shouldFocus: [];

package/es/components/dropdown/dropdown.js

@@ -23,7 +23,8 @@ var typeDefs = {
   // Event is undefined in NodeJs
   of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
   container: [String, Function],
-  collison: ['none', 'fit', 'flip', 'flipfit', Array]
+  collison: ['none', 'fit', 'flip', 'flipfit', Array],
+  alwaysShowOnClick: Boolean
 };
 var defaults = function defaults() {
   return {
@@ -222,14 +223,16 @@ function useDocumentClickForDropdown(dropdown) {
       // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
       // case 3: if click on a trigger and its trigger type is focus, do nothing 
       // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
-      var trigger = dropdown.get('trigger');
+      var _dropdown$get = dropdown.get(),
+        trigger = _dropdown$get.trigger,
+        alwaysShowOnClick = _dropdown$get.alwaysShowOnClick;
       if (trigger === 'focus') return;
       var isHover = trigger === 'hover';
-      if (isHover || trigger === 'contextmenu') {
+      if (isHover || trigger === 'contextmenu' || alwaysShowOnClick) {
         var triggerDom = findDomFromVNode(dropdown.$lastInput, true);
         var target = e.target;
         if (containsOrEqual(triggerDom, target)) {
-          if (isHover) return;
+          if (isHover || alwaysShowOnClick) return;
           if (!isHover && e.type === 'contextmenu') return;
         }
       }

package/es/components/form/form.d.ts

@@ -32,6 +32,7 @@ export declare class Form extends Component<FormProps, FormEvents> {
     init(): void;
     validate(): Promise<boolean>;
     getFirstInvalidFormItem(): FormItem | undefined;
+    getAllInvalidFormItems(): FormItem[];
     submit(e: Event): void;
     reset(): void;
     private onSubmit;

package/es/components/form/form.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _Promise from "@babel/runtime-corejs3/core-js/promise";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
 import { Component, provide } from 'intact';
 import template from './form.vdt';
@@ -59,6 +60,12 @@ export var Form = /*#__PURE__*/function (_Component) {
       }
     });
   };
+  _proto.getAllInvalidFormItems = function getAllInvalidFormItems() {
+    var _context4;
+    return _filterInstanceProperty(_context4 = this.items).call(_context4, function (item) {
+      return !item.isValid();
+    });
+  };
   _proto.submit = function submit(e) {
     var _this2 = this;
     this.validate().then(function (valid) {

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

@@ -32,7 +32,7 @@ describe('Form', function () {
     return unmount();
   });
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, form, item, input;
+    var _mount, instance, element, form, item, items, input;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -44,24 +44,26 @@ describe('Form', function () {
           expect(element.innerHTML).to.matchSnapshot();
           item = form.getFirstInvalidFormItem();
           expect(item.get('label')).to.eql('Input');
+          items = form.getAllInvalidFormItems();
+          expect(items.length).to.eql(10);
           instance.reset();
-          _context.next = 10;
+          _context.next = 12;
           return wait();
-        case 10:
+        case 12:
           expect(instance.get('model')).to.matchSnapshot();
           // validate on focusout
           input = element.querySelector('input');
           dispatchEvent(input, 'focus');
-          _context.next = 15;
+          _context.next = 17;
           return wait();
-        case 15:
+        case 17:
           expect(element.innerHTML).to.matchSnapshot();
           dispatchEvent(input, 'focusout');
-          _context.next = 19;
+          _context.next = 21;
           return wait();
-        case 19:
+        case 21:
           expect(element.innerHTML).to.matchSnapshot();
-        case 20:
+        case 22:
         case "end":
           return _context.stop();
       }

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

@@ -64,5 +64,7 @@ export declare class Input<V extends Value = Value> extends Component<InputProps
     focus(): void;
     blur(): void;
     select(): void;
+    getStringWidth(str: string): Promise<number>;
+    getSelectionStart(): number | null;
     private clear;
 }

package/es/components/input/index.js

@@ -76,6 +76,12 @@ export var Input = /*#__PURE__*/function (_Component) {
   _proto.select = function select() {
     selectValue(this.inputRef.value);
   };
+  _proto.getStringWidth = function getStringWidth(str) {
+    return this.autoWidth.getStringWidth(str);
+  };
+  _proto.getSelectionStart = function getSelectionStart() {
+    return this.inputRef.value.selectionStart;
+  };
   _proto.clear = function clear(e) {
     this.set('value', '');
     this.focus();

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

@@ -259,4 +259,49 @@ describe('Input', function () {
       }
     }, _callee7);
   })));
+  it('should handle textarea resize correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var ResizeDemo, _mount8, instance, element, inputElements, resizeNoneElement, resizeVerticalElement, resizeNoneAutoElement, textareas, textarea1, textarea2, computedStyle1, computedStyle2;
+    return _regeneratorRuntime.wrap(function _callee8$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          ResizeDemo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(ResizeDemo, _Component2);
+            function ResizeDemo() {
+              var _context9;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this2.Input = Input;
+              return _this2;
+            }
+            return ResizeDemo;
+          }(Component);
+          ResizeDemo.template = "\n                const {Input} = this;\n                <div>\n                    <Input type=\"textarea\" resize=\"none\" placeholder=\"resize none\" />\n                    <Input type=\"textarea\" resize=\"vertical\" placeholder=\"resize vertical\" />\n                    <Input type=\"textarea\" resize=\"none\" rows=\"auto\" placeholder=\"resize none with auto rows\" />\n                </div>\n            ";
+          _mount8 = mount(ResizeDemo), instance = _mount8[0], element = _mount8[1];
+          inputElements = element.querySelectorAll('.k-input'); // should have k-resize-none class
+          resizeNoneElement = inputElements[0];
+          expect(resizeNoneElement.classList.contains('k-resize-none')).to.be.true;
+          expect(resizeNoneElement.classList.contains('k-resize-vertical')).to.be.false;
+          resizeVerticalElement = inputElements[1];
+          expect(resizeVerticalElement.classList.contains('k-resize-vertical')).to.be.true;
+          expect(resizeVerticalElement.classList.contains('k-resize-none')).to.be.false;
+          // resize="none" with rows="auto" (should have k-resize-none class)
+          resizeNoneAutoElement = inputElements[2];
+          expect(resizeNoneAutoElement.classList.contains('k-resize-none')).to.be.true;
+          // Test CSS computed styles to ensure resize is applied correctly
+          textareas = element.querySelectorAll('.k-textarea');
+          textarea1 = textareas[0];
+          textarea2 = textareas[1];
+          computedStyle1 = getComputedStyle(textarea1);
+          computedStyle2 = getComputedStyle(textarea2);
+          expect(computedStyle1.resize).to.eql('none');
+          expect(computedStyle2.resize).to.eql('vertical');
+        case 19:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee8);
+  })));
 });

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

@@ -59,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
     focusInputOnClick = _this$focusHook.focusInputOnClick;
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj[k + "-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + (isNotAutoRows ? resize : 'none')] = type === 'textarea', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
     isShowPassword = _this$showPassword.isShow,
     toggleShowPassword = _this$showPassword.toggleShow,
@@ -67,7 +67,8 @@ export default function ($props, $blocks, $__proto__) {
     showPasswordIcon = _this$showPassword.showIcon;
   var _this$autoWidth = this.autoWidth,
     fakeRef = _this$autoWidth.fakeRef,
-    fakeWidth = _this$autoWidth.width.value;
+    fakeWidth = _this$autoWidth.width.value,
+    forceShowFake = _this$autoWidth.forceShowFake;
   var height = this.autoRows;
   var inputValue = frozenOnInput && inputing ? originalValue : value;
   var hasInputValue = !isNullOrUndefined(inputValue);
@@ -133,7 +134,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, 'pre', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
+        }) : undefined, autoWidth || forceShowFake.value ? _$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/useAutoWidth.d.ts

@@ -1,4 +1,6 @@
 export declare function useAutoWidth(): {
     fakeRef: import("intact").RefObject<HTMLDivElement>;
     width: import("../../hooks/useState").State<number>;
+    forceShowFake: import("../../hooks/useState").State<boolean>;
+    getStringWidth: (str: string) => Promise<number>;
 };

package/es/components/input/useAutoWidth.js

@@ -1,9 +1,11 @@
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
 import { useInstance, createRef, onMounted, nextTick } from 'intact';
 import { useState } from '../../hooks/useState';
 export function useAutoWidth() {
   var instance = useInstance();
   var fakeRef = createRef();
   var width = useState(0);
+  var forceShowFake = useState(false);
   instance.watch('value', adjustWidth, {
     inited: true,
     presented: true
@@ -24,9 +26,25 @@ export function useAutoWidth() {
       });
     }
   }
+  function getStringWidth(str) {
+    forceShowFake.set(true);
+    return new _Promise(function (resolve) {
+      nextTick(function () {
+        var fakeElem = fakeRef.value;
+        var textNode = fakeElem.firstChild;
+        var oldStr = textNode.nodeValue;
+        textNode.nodeValue = str;
+        resolve(fakeElem.offsetWidth);
+        textNode.nodeValue = oldStr;
+        forceShowFake.set(false);
+      });
+    });
+  }
   return {
     fakeRef: fakeRef,
-    width: width
+    width: width,
+    forceShowFake: forceShowFake,
+    getStringWidth: getStringWidth
   };
 }
 function isVisible(elem) {

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

@@ -8,6 +8,7 @@ import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import CollapseArrowDemo from '~/components/menu/demos/showCollapseArrow';
+import HorizontalDemo from '~/components/menu/demos/horizontal';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
 import { Menu, MenuItem } from './';
 describe('Menu', function () {
@@ -271,4 +272,31 @@ describe('Menu', function () {
       }
     }, _callee7);
   })));
+  it('detecting pop-up position during rapid mouse hover over menus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, _element$querySelecto2, menu3, menu4, dropdownmenu1, top1, dropdownmenu2, top2;
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _mount8 = mount(HorizontalDemo), instance = _mount8[0], element = _mount8[1];
+          _element$querySelecto2 = element.querySelectorAll('.k-menu-item-title'), menu3 = _element$querySelecto2[2], menu4 = _element$querySelecto2[3];
+          dispatchEvent(menu3, 'mouseenter');
+          _context9.next = 5;
+          return wait(500);
+        case 5:
+          dropdownmenu1 = getElement('.k-dropdown-menu');
+          top1 = dropdownmenu1.getBoundingClientRect().top;
+          dispatchEvent(menu3, 'mouseleave');
+          dispatchEvent(menu4, 'mouseenter');
+          _context9.next = 11;
+          return wait(1000);
+        case 11:
+          dropdownmenu2 = getElement('.k-dropdown-menu');
+          top2 = dropdownmenu2.getBoundingClientRect().top;
+          expect(top1).to.eql(top2);
+        case 14:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee8);
+  })));
 });

package/es/components/menu/styles.js

@@ -21,7 +21,7 @@ var defaults = {
   item: {
     height: '40px',
     padding: '0 12px',
-    bodyPadding: '0 4px',
+    bodyPadding: '4px',
     color: '#aeaeb9',
     hoverColor: '#fff',
     disabledColor: '#53535a',
@@ -115,7 +115,7 @@ export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
-  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
+  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";position:absolute;.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
 });
 export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;

package/es/components/scrollSelect/useMouseEvents.js

@@ -12,6 +12,7 @@ export function useMouseEvents(translate, list) {
   var y;
   var itemHeight;
   var deltaY;
+  var wheelDeltaY = 0;
   var _useDraggable = useDraggable({
       onStart: function onStart(e) {
         dragged = false;
@@ -61,14 +62,14 @@ export function useMouseEvents(translate, list) {
     e.preventDefault();
     itemHeight = getItemHeight();
     var threshold = itemHeight * 0.6;
-    deltaY = (deltaY || 0) + e.deltaY;
-    if (Math.abs(deltaY) >= threshold) {
-      if (deltaY > 0) {
+    wheelDeltaY += e.deltaY;
+    if (Math.abs(wheelDeltaY) >= threshold) {
+      if (wheelDeltaY > 0) {
         setByRelativeIndex(1, null, true);
       } else {
         setByRelativeIndex(-1, null, true);
       }
-      deltaY = 0;
+      wheelDeltaY = 0;
     }
   }
   // throttle onWheel

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

@@ -67,7 +67,7 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     position(): void;
     show(): void;
     hide(): void;
-    resetKeywords(keywords: State<string>): void;
+    resetKeywords(): void;
     protected hasValue(): any;
     private delete;
     protected clear(e: MouseEvent): void;