pixuireactcomponents 1.5.63 → 1.5.64

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.63",
+    "version": "1.5.64",
     "description": "pixui react components",
     "main": "index.js",
     "sideEffects": false,

package/src/components/react/app/dropDown/DropDown.d.ts

@@ -1,4 +1,4 @@
-import preact, { CSSProperties, h, Component } from 'preact';
+import preact, { CSSProperties, h } from 'preact';
 export interface dropDownOption {
     value: string;
     label?: h.JSX.Element;
@@ -15,21 +15,4 @@ export interface DropDownProps {
     onChange?: (value: string) => void;
     onSpread?: (spread: boolean) => void;
 }
-interface DropDownState {
-    spread: boolean;
-}
-export declare class DropDown extends Component<DropDownProps, DropDownState> {
-    private dropdownRef;
-    private dropdownContentRef;
-    private handleClickOutsideFn;
-    constructor(props: DropDownProps);
-    componentDidUpdate(_prevProps: DropDownProps, prevState: DropDownState): void;
-    componentWillUnmount(): void;
-    private updateClickOutsideListener;
-    private removeClickOutsideListener;
-    private getElementStyleOrClass;
-    private handleOverlayClick;
-    private optionRender;
-    render(): preact.JSX.Element;
-}
-export {};
+export declare const DropDown: (props: DropDownProps) => preact.JSX.Element;

package/src/components/react/app/dropDown/DropDown.js

@@ -1,21 +1,3 @@
-// import { useEffect, useRef, useState } from 'preact/hooks';
-// import preact, { CSSProperties, h, isValidElement } from 'preact';
-// import { cloneElement } from 'preact';
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -27,128 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-// const defaultDropDownStyle: CSSProperties = {
-//     margin: 0,
-//     padding: '4px 0',
-//     backgroundColor: '#fff',
-//     borderRadius: '5px',
-//     border: '2px solid rgba(5, 5, 5, 0.06)',
-//     boxShadow:'0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)'
-// }
-// export interface dropDownOption {
-//     value: string; // item唯一标识
-//     label?: h.JSX.Element; // item标签元素
-// }
-// export interface dropdownElement {
-//     dropdownBg?: string | CSSProperties; // 下拉框样式
-// }
-// export interface DropDownProps {
-//     rootId?: string;
-//     rootClassName?: string;
-//     options: dropDownOption[];
-//     element?: dropdownElement; // 自定义元素样式
-//     children?: h.JSX.Element;
-//     onChange?: (value: string) => void;
-//     onSpread?: (spread: boolean) => void;
-//     // compRef?: any;
-// }
-// export const DropDown = (props: DropDownProps) => {
-//     const {
-//         rootId,
-//         rootClassName,
-//         options,
-//         element,
-//         children,
-//         onChange,
-//         onSpread,
-//         // compRef
-//     } = props;
-//     const getElementStyleOrClass = () =>{
-//         if(element == undefined){
-//             return {
-//                 dropdownBg: defaultDropDownStyle
-//             }
-//         } else {
-//             return element;
-//         }
-//     }
-//     const elementStyleOrClass = getElementStyleOrClass();
-//     const [spread, setSpread] = useState(false);
-//     const dropdownRef = useRef<HTMLDivElement>(null);
-//     const dropdownContentRef = useRef<HTMLDivElement>(null);
-//     useEffect(() => {
-//         onSpread && onSpread(spread);
-//     }, [spread]);
-//     useEffect(() => {
-//         const handleClickOutside = (event) => {
-//             // console.log('handleClickOutside, ', event.clientX, event.clientY)
-//             if (dropdownRef.current && dropdownContentRef.current) {
-//                 const dropDownRect = dropdownRef.current.getBoundingClientRect();
-//                 const contentRect = dropdownContentRef.current.getBoundingClientRect();
-//                 // console.log('dropDownRect', dropDownRect, 'isOutside', event.clientX < dropDownRect.left, 'isOutside', event.clientX > dropDownRect.right, 'isOutside', event.clientY < dropDownRect.top, 'isOutside', event.clientY > dropDownRect.bottom)
-//                 // console.log('contentRect', contentRect, 'isOutside', event.clientX < contentRect.left, 'isOutside', event.clientX > contentRect.right, 'isOutside', event.clientY < contentRect.top, 'isOutside', event.clientY > contentRect.bottom)
-//                 const isOutsideDropdown = 
-//                     event.clientX < dropDownRect.left ||
-//                     event.clientX > dropDownRect.right ||
-//                     event.clientY < dropDownRect.top ||
-//                     event.clientY > dropDownRect.bottom;
-//                 const isOutsideContent =
-//                     event.clientX < contentRect.left ||
-//                     event.clientX > contentRect.right ||
-//                     event.clientY < contentRect.top ||
-//                     event.clientY > contentRect.bottom;
-//                 if(isOutsideDropdown && isOutsideContent) {
-//                     setSpread(false);
-//                 }
-//             }
-//         };
-//         if (spread) {
-//             // console.log('开始监听mousedown', spread)
-//             document.body.addEventListener('mousedown', handleClickOutside);
-//         }
-//         return () => {
-//             document.body.removeEventListener('mousedown', handleClickOutside);
-//         };
-//     }, [spread]);
-//     const handleOverlayClick = (event) => {
-//         // console.log("handleOverLayClick")
-//         event.stopPropagation();
-//         setSpread(!spread);
-//     };
-//     const overlayRender = isValidElement(children) ? cloneElement(children, { onClick: handleOverlayClick}) : children
-//     const optionRender = (option: dropDownOption) => {
-//         if(!isValidElement(option.label)){
-//             return option.label;
-//         }
-//         const element = option.label as h.JSX.Element & { props: { onClick?: (event: Event) => void } }
-//         const originalClick = element.props.onClick;
-//         const newOnClick = (event) => {
-//             // console.log('new onClick');
-//             if(originalClick){
-//                 originalClick(event);
-//             }
-//             onChange && onChange(option.value);
-//             setSpread(false)
-//         }
-//         return cloneElement(option.label, { onClick: newOnClick });
-//     }
-//     return (
-//         <div style={{ flexDirection: 'column', flexShrink: 0 }} className={rootClassName} id={rootId} ref={dropdownRef}>
-//             {overlayRender}
-//             {spread && (
-//                 //在下方展开
-//                 <div ref={dropdownContentRef}
-//                     className={typeof elementStyleOrClass.dropdownBg === 'string' ? elementStyleOrClass.dropdownBg : ''}
-//                     style={{ flexDirection: 'column', overflow: 'scroll', ...( typeof elementStyleOrClass.dropdownBg === 'object' ? elementStyleOrClass.dropdownBg : undefined)}}>
-//                     {options.map((option, index) => {
-//                         return (<div>{optionRender(option)}</div>);
-//                     })}
-//                 </div>
-//             )}
-//         </div>
-//     );
-// }
-import { h, isValidElement, Component, createRef } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { h, isValidElement } from 'preact';
 import { cloneElement } from 'preact';
 var defaultDropDownStyle = {
     margin: 0,
@@ -158,98 +20,81 @@ var defaultDropDownStyle = {
     border: '2px solid rgba(5, 5, 5, 0.06)',
     boxShadow: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)'
 };
-var DropDown = /** @class */ (function (_super) {
-    __extends(DropDown, _super);
-    function DropDown(props) {
-        var _this = _super.call(this, props) || this;
-        _this.dropdownRef = createRef();
-        _this.dropdownContentRef = createRef();
-        _this.handleClickOutsideFn = null;
-        _this.handleOverlayClick = function (event) {
-            event.stopPropagation();
-            _this.setState({ spread: !_this.state.spread });
-        };
-        _this.optionRender = function (option) {
-            if (!isValidElement(option.label)) {
-                return option.label;
-            }
-            var element = option.label;
-            var originalClick = element.props.onClick;
-            var newOnClick = function (event) {
-                if (originalClick) {
-                    originalClick(event);
-                }
-                _this.props.onChange && _this.props.onChange(option.value);
-                _this.setState({ spread: false });
+export var DropDown = function (props) {
+    var rootId = props.rootId, rootClassName = props.rootClassName, options = props.options, element = props.element, children = props.children, onChange = props.onChange, onSpread = props.onSpread;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return {
+                dropdownBg: defaultDropDownStyle
             };
-            return cloneElement(option.label, { onClick: newOnClick });
-        };
-        _this.state = { spread: false };
-        return _this;
-    }
-    DropDown.prototype.componentDidUpdate = function (_prevProps, prevState) {
-        if (prevState.spread !== this.state.spread) {
-            var onSpread = this.props.onSpread;
-            onSpread && onSpread(this.state.spread);
-            this.updateClickOutsideListener();
         }
-    };
-    DropDown.prototype.componentWillUnmount = function () {
-        this.removeClickOutsideListener();
-    };
-    DropDown.prototype.updateClickOutsideListener = function () {
-        var _this = this;
-        this.removeClickOutsideListener();
-        if (this.state.spread) {
-            this.handleClickOutsideFn = function (event) {
-                if (_this.dropdownRef.current && _this.dropdownContentRef.current) {
-                    var dropDownRect = _this.dropdownRef.current.getBoundingClientRect();
-                    var contentRect = _this.dropdownContentRef.current.getBoundingClientRect();
-                    var isOutsideDropdown = event.clientX < dropDownRect.left ||
-                        event.clientX > dropDownRect.right ||
-                        event.clientY < dropDownRect.top ||
-                        event.clientY > dropDownRect.bottom;
-                    var isOutsideContent = event.clientX < contentRect.left ||
-                        event.clientX > contentRect.right ||
-                        event.clientY < contentRect.top ||
-                        event.clientY > contentRect.bottom;
-                    if (isOutsideDropdown && isOutsideContent) {
-                        _this.setState({ spread: false });
-                    }
-                }
-            };
-            document.body.addEventListener('mousedown', this.handleClickOutsideFn);
+        else {
+            return element;
         }
     };
-    DropDown.prototype.removeClickOutsideListener = function () {
-        if (this.handleClickOutsideFn) {
-            document.body.removeEventListener('mousedown', this.handleClickOutsideFn);
-            this.handleClickOutsideFn = null;
+    var elementStyleOrClass = getElementStyleOrClass();
+    var _a = useState(false), spread = _a[0], setSpread = _a[1];
+    var dropdownRef = useRef(null);
+    var dropdownContentRef = useRef(null);
+    useEffect(function () {
+        onSpread && onSpread(spread);
+    }, [spread]);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            // console.log('handleClickOutside, ', event.clientX, event.clientY)
+            if (dropdownRef.current && dropdownContentRef.current) {
+                var dropDownRect = dropdownRef.current.getBoundingClientRect();
+                var contentRect = dropdownContentRef.current.getBoundingClientRect();
+                // console.log('dropDownRect', dropDownRect, 'isOutside', event.clientX < dropDownRect.left, 'isOutside', event.clientX > dropDownRect.right, 'isOutside', event.clientY < dropDownRect.top, 'isOutside', event.clientY > dropDownRect.bottom)
+                // console.log('contentRect', contentRect, 'isOutside', event.clientX < contentRect.left, 'isOutside', event.clientX > contentRect.right, 'isOutside', event.clientY < contentRect.top, 'isOutside', event.clientY > contentRect.bottom)
+                var isOutsideDropdown = event.clientX < dropDownRect.left ||
+                    event.clientX > dropDownRect.right ||
+                    event.clientY < dropDownRect.top ||
+                    event.clientY > dropDownRect.bottom;
+                var isOutsideContent = event.clientX < contentRect.left ||
+                    event.clientX > contentRect.right ||
+                    event.clientY < contentRect.top ||
+                    event.clientY > contentRect.bottom;
+                if (isOutsideDropdown && isOutsideContent) {
+                    setSpread(false);
+                }
+            }
+        };
+        if (spread) {
+            // console.log('开始监听mousedown', spread)
+            document.body.addEventListener('mousedown', handleClickOutside);
         }
+        return function () {
+            document.body.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [spread]);
+    var handleOverlayClick = function (event) {
+        // console.log("handleOverLayClick")
+        event.stopPropagation();
+        setSpread(!spread);
     };
-    DropDown.prototype.getElementStyleOrClass = function () {
-        var element = this.props.element;
-        if (element == undefined) {
-            return { dropdownBg: defaultDropDownStyle };
-        }
-        else {
-            return element;
+    var overlayRender = isValidElement(children) ? cloneElement(children, { onClick: handleOverlayClick }) : children;
+    var optionRender = function (option) {
+        if (!isValidElement(option.label)) {
+            return option.label;
         }
+        var element = option.label;
+        var originalClick = element.props.onClick;
+        var newOnClick = function (event) {
+            // console.log('new onClick');
+            if (originalClick) {
+                originalClick(event);
+            }
+            onChange && onChange(option.value);
+            setSpread(false);
+        };
+        return cloneElement(option.label, { onClick: newOnClick });
     };
-    DropDown.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, rootId = _a.rootId, rootClassName = _a.rootClassName, options = _a.options, children = _a.children;
-        var spread = this.state.spread;
-        var elementStyleOrClass = this.getElementStyleOrClass();
-        var overlayRender = isValidElement(children)
-            ? cloneElement(children, { onClick: this.handleOverlayClick })
-            : children;
-        return (h("div", { style: { flexDirection: 'column', flexShrink: 0 }, className: rootClassName, id: rootId, ref: this.dropdownRef },
-            overlayRender,
-            spread && (h("div", { ref: this.dropdownContentRef, className: typeof elementStyleOrClass.dropdownBg === 'string' ? elementStyleOrClass.dropdownBg : '', style: __assign({ flexDirection: 'column', overflow: 'scroll' }, (typeof elementStyleOrClass.dropdownBg === 'object' ? elementStyleOrClass.dropdownBg : undefined)) }, options.map(function (option, index) {
-                return (h("div", null, _this.optionRender(option)));
-            })))));
-    };
-    return DropDown;
-}(Component));
-export { DropDown };
+    return (h("div", { style: { flexDirection: 'column', flexShrink: 0 }, className: rootClassName, id: rootId, ref: dropdownRef },
+        overlayRender,
+        spread && (
+        //在下方展开
+        h("div", { ref: dropdownContentRef, className: typeof elementStyleOrClass.dropdownBg === 'string' ? elementStyleOrClass.dropdownBg : '', style: __assign({ flexDirection: 'column', overflow: 'scroll' }, (typeof elementStyleOrClass.dropdownBg === 'object' ? elementStyleOrClass.dropdownBg : undefined)) }, options.map(function (option, index) {
+            return (h("div", null, optionRender(option)));
+        })))));
+};

package/src/components/react/app/wheelPicker/WheelPicker.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { h } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-var defaulWrapperStyle = {
+var defaultWrapperStyle = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
@@ -82,6 +82,14 @@ export var WheelPicker = function (props) {
     };
     var elementStyleOrClass = getElementStyleOrClass();
     var rootRef = useRef(null);
+    var scrollRef = useRef(null);
+    var scrollTimmer = useRef(null);
+    var isDragingRef = useRef(false);
+    var isInitialized = useRef(false);
+    var visibleItemCount = visibleAbove + visibleBelow + 1;
+    var _d = useState(0), itemHeight = _d[0], setItemHeight = _d[1];
+    var _e = useState([]), itemList = _e[0], setItemList = _e[1];
+    var _f = useState(visibleAbove), selectIndex = _f[0], setSelectIndex = _f[1];
     var getSelectedStyle = function (index) {
         if (elementStyleOrClass.selectedTextStyle) {
             if (index === selectIndex) {
@@ -98,41 +106,61 @@ export var WheelPicker = function (props) {
         }
         return typeof elementStyleOrClass.itemTextStyle === 'string' ? elementStyleOrClass.itemTextStyle : '';
     };
+    // 测量容器高度，计算 itemHeight（职责单一）
     useEffect(function () {
-        if (rootRef.current) {
-            var _a = rootRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
-            var calcuItemHeight_1 = height / (visibleAbove + visibleBelow + 1);
-            setItemHeight(calcuItemHeight_1);
-            var defaultIndex_1 = options.indexOf(defaultOption || options[0]);
-            setSelectIndex(defaultIndex_1 + visibleAbove);
-            var timer_1 = setTimeout(function () {
-                if (scrollRef.current) {
-                    scrollRef.current.scrollTop = defaultIndex_1 * calcuItemHeight_1;
-                }
-            }, 0);
-            return function () { return clearTimeout(timer_1); };
-        }
-    }, [rootRef.current]); // 依赖 rootRef.current，当它变化时重新执行
-    var scrollRef = useRef(null);
-    var _d = useState(0), itemHeight = _d[0], setItemHeight = _d[1];
-    var _e = useState([]), itemList = _e[0], setItemList = _e[1];
-    var _f = useState(false), isDraging = _f[0], setIsDraging = _f[1];
-    var _g = useState(0), selectIndex = _g[0], setSelectIndex = _g[1];
-    var scrollTimmer = useRef(null);
-    useEffect(function () {
-        if (onChange && selectIndex - visibleAbove >= 0 && selectIndex - visibleAbove < options.length) {
-            onChange(options[selectIndex - visibleAbove]);
+        var rootElement = rootRef.current;
+        if (!rootElement) {
+            return;
         }
-    }, [selectIndex]);
+        var measure = function () {
+            var currentRoot = rootRef.current;
+            if (!currentRoot)
+                return;
+            var height = currentRoot.getBoundingClientRect().height;
+            if (height > 0) {
+                var calcuItemHeight = height / visibleItemCount;
+                setItemHeight(calcuItemHeight);
+            }
+        };
+        // 首次测量
+        measure();
+        // 用 requestAnimationFrame 重试，确保布局完成后能拿到正确值
+        var frameId = requestAnimationFrame(function () {
+            measure();
+        });
+        return function () { return cancelAnimationFrame(frameId); };
+    }, [visibleItemCount]);
+    // options 变化时，重建列表并重置选中索引
     useEffect(function () {
-        setItemList(fillBlankItems());
-    }, [props.options]);
-    var fillBlankItems = function () {
         var startPadding = new Array(visibleAbove).fill('');
         var endPadding = new Array(visibleBelow).fill('');
-        return startPadding.concat(options, endPadding);
-    };
-    // 创建一个函数来获取当前时间戳
+        setItemList(startPadding.concat(options, endPadding));
+        var defaultIndex = Math.max(0, options.indexOf(defaultOption || options[0]));
+        setSelectIndex(defaultIndex + visibleAbove);
+        isInitialized.current = false;
+    }, [options, visibleAbove, visibleBelow]);
+    // 滚动定位（与测量分离，依赖 itemHeight 和 selectIndex）
+    useEffect(function () {
+        if (itemHeight <= 0 || !scrollRef.current || isDragingRef.current || scrollTimmer.current) {
+            return;
+        }
+        var finalPos = (selectIndex - visibleAbove) * itemHeight;
+        scrollRef.current.scrollTop = finalPos;
+        // 标记初始化完成
+        if (!isInitialized.current) {
+            isInitialized.current = true;
+        }
+    }, [itemHeight, selectIndex, visibleAbove]);
+    // onChange 回调（跳过首次初始化触发）
+    useEffect(function () {
+        if (!isInitialized.current) {
+            return;
+        }
+        var dataIndex = selectIndex - visibleAbove;
+        if (onChange && dataIndex >= 0 && dataIndex < options.length) {
+            onChange(options[dataIndex]);
+        }
+    }, [selectIndex]);
     var getCurrentTime = function () {
         if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
             return performance.now();
@@ -142,14 +170,18 @@ export var WheelPicker = function (props) {
         }
     };
     var onScroll = function (e) {
-        // console.log('onScroll: ', scrollRef.current.scrollTop)
+        if (!scrollRef.current || itemHeight <= 0)
+            return;
         if (scrollTimmer.current) {
             clearTimeout(scrollTimmer.current);
             scrollTimmer.current = null;
         }
         scrollTimmer.current = window.setTimeout(function () {
+            if (!scrollRef.current)
+                return;
             var finalPos = (selectIndex - visibleAbove) * itemHeight;
-            if (!isDraging && scrollRef.current.scrollTop < finalPos - 1 || scrollRef.current.scrollTop > finalPos + 1) {
+            // 修复运算符优先级：整个条件都应在 !isDraging 保护下
+            if (!isDragingRef.current && (scrollRef.current.scrollTop < finalPos - 1 || scrollRef.current.scrollTop > finalPos + 1)) {
                 animateScroll(scrollRef.current.scrollTop, finalPos, getCurrentTime(), 100);
             }
             if (scrollTimmer.current) {
@@ -164,42 +196,42 @@ export var WheelPicker = function (props) {
     };
     var animateScroll = function (currentPos, targetPos, startTime, duration) {
         var step = function () {
+            if (!scrollRef.current)
+                return;
             var currentTime = getCurrentTime();
             var time = Math.min(1, (currentTime - startTime) / duration);
             var timeFunction = time * (2 - time);
             var newPos = currentPos + (targetPos - currentPos) * timeFunction;
             scrollRef.current.scrollTop = newPos;
-            if (time < 1 && !isDraging) {
+            // 使用 ref 读取最新拖拽状态，避免闭包陷阱
+            if (time < 1 && !isDragingRef.current) {
                 requestAnimationFrame(step);
             }
         };
         requestAnimationFrame(step);
     };
-    var onMouseEvent = function (isDraging) {
-        if (isDraging) {
-            setIsDraging(true);
+    var onMouseEvent = function (dragging) {
+        isDragingRef.current = dragging;
+        if (dragging) {
+            return;
         }
-        else {
-            setIsDraging(false);
-            if (!scrollTimmer.current) {
-                var finalPos = (selectIndex - visibleAbove) * itemHeight;
-                animateScroll(scrollRef.current.scrollTop, finalPos, getCurrentTime(), 100);
-                var nowSelectIndex = Math.round((scrollRef.current.scrollTop + visibleAbove * itemHeight) / itemHeight);
-                if (selectIndex !== nowSelectIndex) {
-                    setSelectIndex(nowSelectIndex);
-                }
+        // 松手后对齐
+        if (!scrollTimmer.current && scrollRef.current && itemHeight > 0) {
+            var finalPos = (selectIndex - visibleAbove) * itemHeight;
+            animateScroll(scrollRef.current.scrollTop, finalPos, getCurrentTime(), 100);
+            var nowSelectIndex = Math.round((scrollRef.current.scrollTop + visibleAbove * itemHeight) / itemHeight);
+            if (selectIndex !== nowSelectIndex) {
+                setSelectIndex(nowSelectIndex);
             }
         }
     };
-    return (h("div", { id: rootId, className: rootClassName, style: __assign({}, defaulWrapperStyle), ref: rootRef },
+    return (h("div", { id: rootId, className: rootClassName, style: __assign({}, defaultWrapperStyle), ref: rootRef },
         elementStyleOrClass.selectedAreaStyle &&
             h("div", { className: typeof elementStyleOrClass.selectedAreaStyle === 'string' ? elementStyleOrClass.selectedAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.selectedAreaStyle === 'object' ? elementStyleOrClass.selectedAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight, "px"), top: "".concat(itemHeight * visibleAbove, "px") }) }),
         elementStyleOrClass.AboveMaskAreaStyle &&
             h("div", { className: typeof elementStyleOrClass.AboveMaskAreaStyle === 'string' ? elementStyleOrClass.AboveMaskAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.AboveMaskAreaStyle === 'object' ? elementStyleOrClass.AboveMaskAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight * visibleAbove, "px"), top: '0px' }) }),
         elementStyleOrClass.BelowMaskAreaStyle &&
             h("div", { className: typeof elementStyleOrClass.BelowMaskAreaStyle === 'string' ? elementStyleOrClass.BelowMaskAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.BelowMaskAreaStyle === 'object' ? elementStyleOrClass.BelowMaskAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight * visibleBelow, "px"), top: "".concat(itemHeight * (visibleAbove + 1), "px") }) }),
-        h("div", { style: __assign({}, defaultScrollStyle), 
-            // movement-type={'clamped'} 
-            ref: scrollRef, onScroll: function (e) { onScroll(e); }, onMouseDown: function () { onMouseEvent(true); }, onMouseUp: function () { onMouseEvent(false); } }, itemList.map(function (item, index) { return (h("div", { style: __assign(__assign({}, defaultItemStyle), { minHeight: "".concat(itemHeight, "px"), maxHeight: "".concat(itemHeight, "px") }) },
+        h("div", { style: __assign({}, defaultScrollStyle), ref: scrollRef, onScroll: function (e) { onScroll(e); }, onMouseDown: function () { onMouseEvent(true); }, onMouseUp: function () { onMouseEvent(false); } }, itemList.map(function (item, index) { return (h("div", { key: index, style: __assign(__assign({}, defaultItemStyle), { minHeight: "".concat(itemHeight, "px"), maxHeight: "".concat(itemHeight, "px") }) },
             h("div", { className: getSelectedClass(index), style: getSelectedStyle(index) }, item))); }))));
 };