antd-mobile 5.0.0-rc.5 → 5.0.0-rc.9

package/cjs/components/tabs/tabs.d.ts

@@ -12,5 +12,5 @@ export declare type TabsProps = {
     activeLineMode?: 'auto' | 'full' | 'fixed';
     stretch?: boolean;
     onChange?: (key: string) => void;
-} & NativeProps<'--fixed-active-line-width' | '--title-font-size' | '--content-padding'>;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding'>;
 export declare const Tabs: FC<TabsProps>;

package/cjs/components/tree-select/tree-select.css

@@ -24,6 +24,7 @@
   display: flex;
   align-items: center;
   min-height: 50px;
+  box-sizing: border-box;
   padding: 6px 12px;
   position: relative;
 }

package/cjs/components/virtual-input/virtual-input.js

@@ -53,9 +53,7 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
 
     var content = contentRef.current;
     if (!content) return;
-    content.scrollTo({
-      left: content.clientWidth
-    });
+    content.scrollLeft = content.clientWidth;
   }
 
   (0, _react.useLayoutEffect)(function () {

package/cjs/global/global.css

@@ -21,9 +21,6 @@ body {
   font-size: var(--adm-font-size-main);
   font-family: var(--adm-font-family);
 }
-* {
-  box-sizing: border-box;
-}
 a,
 button {
   cursor: pointer;

package/cjs/index.d.ts

@@ -41,6 +41,7 @@ export { default as NavBar } from './components/nav-bar';
 export { default as NoticeBar } from './components/notice-bar';
 export { default as NumberKeyboard } from './components/number-keyboard';
 export { default as PageIndicator } from './components/page-indicator';
+export { default as PasscodeInput } from './components/passcode-input';
 export { default as Picker } from './components/picker';
 export { default as PickerView } from './components/picker-view';
 export { default as Popover } from './components/popover';
@@ -57,6 +58,7 @@ export { default as Search } from './components/search-bar';
 export { default as SearchBar } from './components/search-bar';
 export { default as Selector } from './components/selector';
 export { default as SideBar } from './components/side-bar';
+export { default as Skeleton } from './components/skeleton';
 export { default as Slider } from './components/slider';
 export { default as Space } from './components/space';
 export { default as Stepper } from './components//stepper';
@@ -72,4 +74,3 @@ export { default as Toast } from './components/toast';
 export { default as TreeSelect } from './components/tree-select';
 export { default as VirtualInput } from './components/virtual-input';
 export { default as WaterMark } from './components/water-mark';
-export { default as PasscodeInput } from './components/passcode-input';

package/cjs/index.js

@@ -351,6 +351,12 @@ Object.defineProperty(exports, "SideBar", {
     return _sideBar["default"];
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton["default"];
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
@@ -532,6 +538,8 @@ var _numberKeyboard = _interopRequireDefault(require("./components/number-keyboa
 
 var _pageIndicator = _interopRequireDefault(require("./components/page-indicator"));
 
+var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
+
 var _picker = _interopRequireDefault(require("./components/picker"));
 
 var _pickerView = _interopRequireDefault(require("./components/picker-view"));
@@ -562,6 +570,8 @@ var _selector = _interopRequireDefault(require("./components/selector"));
 
 var _sideBar = _interopRequireDefault(require("./components/side-bar"));
 
+var _skeleton = _interopRequireDefault(require("./components/skeleton"));
+
 var _slider = _interopRequireDefault(require("./components/slider"));
 
 var _space = _interopRequireDefault(require("./components/space"));
@@ -592,8 +602,6 @@ var _virtualInput = _interopRequireDefault(require("./components/virtual-input")
 
 var _waterMark = _interopRequireDefault(require("./components/water-mark"));
 
-var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/cjs/utils/use-mutation-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useMutationEffect(effect, targetRef, options) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useEffect)(function () {
     var observer = new MutationObserver(function () {
       fn();

package/cjs/utils/use-props-value.js

@@ -20,7 +20,7 @@ function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  var setState = (0, _ahooks.usePersistFn)(function (v) {
+  var setState = (0, _ahooks.useMemoizedFn)(function (v) {
     if (value === undefined) {
       stateRef.current = v;
       update();

package/cjs/utils/use-resize-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useResizeEffect(effect, targetRef) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useLayoutEffect)(function () {
     var target = targetRef.current;
     if (!target) return;

package/es/components/cascader/cascader.d.ts

@@ -13,8 +13,8 @@ export declare type CascaderProps = {
     onClose?: () => void;
     visible?: boolean;
     title?: ReactNode;
-    confirmText?: string;
-    cancelText?: string;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
     children?: (items: (CascaderOption | null)[]) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
 export declare const Cascader: FC<CascaderProps>;

package/es/components/checkbox/checkbox.css

@@ -67,7 +67,7 @@
   background-color: currentColor;
 }
 .adm-checkbox-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/es/components/date-picker/date-picker.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Picker from '../picker';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
@@ -31,7 +31,7 @@ export var DatePicker = function DatePicker(p) {
   var onConfirm = useCallback(function (val) {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);
-  var onSelect = usePersistFn(function (val) {
+  var onSelect = useMemoizedFn(function (val) {
     var _a;
 
     var date = convertStringArrayToDate(val, props.precision);

package/es/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/es/components/dialog/dialog.js

@@ -68,13 +68,15 @@ export var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/es/components/form/form-item.css

@@ -4,6 +4,7 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
   color: #666;
   position: relative;
@@ -18,7 +19,7 @@
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {

package/es/components/form/form-item.js

@@ -43,7 +43,7 @@ var FormItemLayout = function FormItemLayout(props) {
       hidden = props.hidden,
       errors = props.errors;
   var context = useContext(FormContext);
-  var hasFeedback = props.hasFeedback || context.hasFeedback;
+  var hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   var layout = props.layout || context.layout;
   var feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
   var labelElement = label ? /*#__PURE__*/React.createElement("label", {

package/es/components/form/index.css

@@ -10,6 +10,7 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
   color: #666;
   position: relative;
@@ -24,7 +25,7 @@
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {

package/es/components/image/lazy-detector.js

@@ -2,7 +2,10 @@ import React, { useEffect, useRef } from 'react';
 import { useInViewport } from 'ahooks';
 export var LazyDetector = function LazyDetector(props) {
   var ref = useRef(null);
-  var inViewport = useInViewport(ref);
+
+  var _useInViewport = useInViewport(ref),
+      inViewport = _useInViewport[0];
+
   useEffect(function () {
     if (inViewport) {
       props.onActive();

package/es/components/image-uploader/image-uploader.js

@@ -36,7 +36,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 var classPrefix = "adm-image-uploader";
@@ -56,7 +56,7 @@ export var ImageUploader = function ImageUploader(p) {
       value = _usePropsValue[0],
       setValue = _usePropsValue[1];
 
-  var updateValue = usePersistFn(function (updater) {
+  var updateValue = useMemoizedFn(function (updater) {
     setValue(updater(value));
   });
 
@@ -167,9 +167,8 @@ export var ImageUploader = function ImageUploader(p) {
                             });
                           });
                           updateValue(function (prev) {
-                            return [].concat(prev, [{
-                              url: result.url
-                            }]);
+                            var newVal = Object.assign({}, result);
+                            return [].concat(prev, [newVal]);
                           });
                           _context.next = 12;
                           break;

package/es/components/image-viewer/slide.js

@@ -92,11 +92,6 @@ export var Slide = function Slide(props) {
       }
     },
     pinch: {
-      transform: function transform(_ref) {
-        var d = _ref[0],
-            a = _ref[1];
-        return [d < 0 ? d * 0.5 : d * 2, 0];
-      },
       from: function from() {
         return [zoom.get(), 0];
       }

package/es/components/index-bar/index-bar.css

@@ -52,7 +52,7 @@
 }
 .adm-index-bar-sidebar-row {
   cursor: pointer;
-  width: 100%;
+  width: auto;
   text-align: right;
   position: relative;
   padding: 0 12px;

package/es/components/infinite-scroll/infinite-scroll.js

@@ -1,6 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props';
 import React, { useEffect, useRef } from 'react';
-import { useLockFn, usePersistFn } from 'ahooks';
+import { useLockFn, useMemoizedFn } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { getScrollParent } from '../../utils/get-scroll-parent';
 import Loading from '../loading';
@@ -25,7 +25,7 @@ export var InfiniteScroll = function InfiniteScroll(p) {
   });
   var elementRef = useRef(null);
   var checkTimeoutRef = useRef();
-  var check = usePersistFn(function () {
+  var check = useMemoizedFn(function () {
     window.clearTimeout(checkTimeoutRef.current);
     checkTimeoutRef.current = window.setTimeout(function () {
       if (!props.hasMore) return;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -19,7 +19,7 @@ export declare type InputRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/mask/mask.js

@@ -77,9 +77,10 @@ export var Mask = function Mask(p) {
   var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({}, props.style), {
+    style: Object.assign(Object.assign({
       background: background,
-      opacity: opacity,
+      opacity: opacity
+    }, props.style), {
       display: active ? 'unset' : 'none'
     })
   }, props.onMaskClick && /*#__PURE__*/React.createElement("div", {

package/es/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/es/components/modal/modal.js

@@ -68,13 +68,15 @@ export var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/es/components/notice-bar/notice-bar.css

@@ -1,5 +1,6 @@
 .adm-notice-bar {
   height: 30px;
+  box-sizing: border-box;
   font-size: 14px;
   line-height: 30px;
   padding: 0 12px;

package/es/components/number-keyboard/number-keyboard.js

@@ -6,7 +6,7 @@ import { shuffle } from '../../utils/shuffle';
 import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 var classPrefix = 'adm-number-keyboard';
 var defaultProps = {
   defaultVisible: false,
@@ -43,7 +43,7 @@ export var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = useRef(-1);
   var intervalRef = useRef(-1);
-  var onDelete = usePersistFn(function () {
+  var onDelete = useMemoizedFn(function () {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);

package/es/components/picker/picker.d.ts

@@ -12,8 +12,8 @@ export declare type PickerProps = {
     onClose?: () => void;
     visible?: boolean;
     title?: ReactNode;
-    confirmText?: string;
-    cancelText?: string;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/es/components/picker/picker.js

@@ -7,7 +7,7 @@ import PickerView from '../picker-view';
 import { useColumns } from '../picker-view/use-columns';
 import { useConfig } from '../config-provider';
 import { usePickerValueExtend } from '../picker-view/use-picker-value-extend';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 var classPrefix = "adm-picker";
 var defaultProps = {
   defaultValue: []
@@ -42,7 +42,7 @@ export var Picker = /*#__PURE__*/memo(function (p) {
       setInnerValue = _useState[1];
 
   useEffect(function () {
-    if (!props.visible) {
+    if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
@@ -51,7 +51,7 @@ export var Picker = /*#__PURE__*/memo(function (p) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = usePersistFn(function (val, ext) {
+  var onChange = useMemoizedFn(function (val, ext) {
     var _a;
 
     setInnerValue(val);
@@ -107,4 +107,5 @@ export var Picker = /*#__PURE__*/memo(function (p) {
     stopPropagation: props.stopPropagation
   }, pickerElement);
   return /*#__PURE__*/React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
-});
+});
+Picker.displayName = 'Picker';

package/es/components/picker-view/picker-view.css

@@ -5,6 +5,7 @@
   display: flex;
   position: relative;
   overflow: hidden;
+  background: var(--adm-color-white);
 }
 .adm-picker-view-column {
   height: 100%;

package/es/components/picker-view/picker-view.js

@@ -1,6 +1,6 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
-import { Column } from './column';
+import { Wheel } from './wheel';
 import { useColumns } from './use-columns';
 import { withNativeProps } from '../../utils/native-props';
 import { usePickerValueExtend } from './use-picker-value-extend';
@@ -32,31 +32,36 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
-  }, [props.value]); // Reset `innerValue` after 1s in case user does not update `value` when `onChange` is called
-
-  useDebounceEffect(function () {
-    if (props.value !== undefined && props.value !== innerValue) {
-      setInnerValue(props.value);
-    }
-  }, [props.value, innerValue], {
-    wait: 1000,
-    leading: false,
-    trailing: true
-  });
+  }, [props.value]);
+  useEffect(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
   var columns = useColumns(props.columns, innerValue);
   var generateValueExtend = usePickerValueExtend(columns);
+  var handleSelect = useCallback(function (val, index) {
+    setInnerValue(function (prev) {
+      var next = [].concat(prev);
+      next[index] = val;
+      return next;
+    });
+  }, []);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: "" + classPrefix
   }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement(Column, {
+    return /*#__PURE__*/React.createElement(Wheel, {
       key: index,
+      index: index,
       column: column,
       value: innerValue[index],
-      onSelect: function onSelect(val) {
-        var nextInnerValue = [].concat(innerValue);
-        nextInnerValue[index] = val;
-        setInnerValue(nextInnerValue);
-      }
+      onSelect: handleSelect
     });
   }), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-mask"
@@ -67,4 +72,5 @@ export var PickerView = /*#__PURE__*/memo(function (p) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-mask-bottom"
   }))));
-});
+});
+PickerView.displayName = 'PickerView';

package/es/components/picker-view/wheel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+interface Props {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+}
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};

package/es/components/picker-view/{column.js → wheel.js}

@@ -1,16 +1,20 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { memo, useLayoutEffect, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
+import isEqual from 'lodash/isEqual';
 var classPrefix = "adm-picker-view";
-export var Column = function Column(props) {
+export var Wheel = /*#__PURE__*/memo(function (props) {
   var itemHeight = convertPx(34);
   var value = props.value,
-      onSelect = props.onSelect,
       column = props.column;
 
+  function onSelect(val) {
+    props.onSelect(val, props.index);
+  }
+
   var _useSpring = useSpring(function () {
     return {
       from: {
@@ -36,20 +40,20 @@ export var Column = function Column(props) {
     var finalPosition = targetIndex * -itemHeight;
     api.start({
       y: finalPosition,
-      immediate: y.idle
+      immediate: y.goal !== finalPosition
     });
   }, [value, column]);
   useLayoutEffect(function () {
     if (column.length === 0) {
       if (value !== null) {
-        props.onSelect(null);
+        onSelect(null);
       }
     } else {
       if (!column.some(function (item) {
         return item.value === value;
       })) {
         var firstItem = column[0];
-        props.onSelect(firstItem.value);
+        onSelect(firstItem.value);
       }
     }
   }, [column, value]);
@@ -59,7 +63,9 @@ export var Column = function Column(props) {
     api.start({
       y: finalPosition
     });
-    onSelect(column[index].value);
+    var item = column[index];
+    if (!item) return;
+    onSelect(item.value);
   }
 
   var bind = useDrag(function (state) {
@@ -70,7 +76,7 @@ export var Column = function Column(props) {
     if (state.last) {
       draggingRef.current = false;
       var position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
-      var targetIndex = -Math.round(bound(position, min, max) / itemHeight);
+      var targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight) : 0;
       scrollSelect(targetIndex);
     } else {
       var _position = state.offset[1];
@@ -91,8 +97,6 @@ export var Column = function Column(props) {
   var selectedIndex = null;
 
   function renderAccessible() {
-    console.log('selectedIndex', selectedIndex);
-
     if (selectedIndex === null) {
       return null;
     }
@@ -153,4 +157,15 @@ export var Column = function Column(props) {
       className: classPrefix + "-column-item-label"
     }, item.label));
   })), renderAccessible());
-};
+}, function (prev, next) {
+  if (prev.index !== next.index) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.onSelect !== next.onSelect) return false;
+
+  if (!isEqual(prev.column, next.column)) {
+    return false;
+  }
+
+  return true;
+});
+Wheel.displayName = 'Wheel';