@nutui/nutui-react-taro 2.0.0-alpha.8 → 2.0.0-beta.1

package/dist/esm/nutui-react.es.js

@@ -1,127 +1,118 @@
-import { B } from "./button.taro-01eae688.js";
+import { B } from "./button.taro-60dfd83e.js";
 import { C } from "./cell.taro-4e31d1fa.js";
 import { C as C2 } from "./cellgroup.taro-a790d91b.js";
-import { C as C3 } from "./configprovider.taro-25758d9f.js";
-import { I } from "./image.taro-767aa000.js";
+import { C as C3 } from "./configprovider.taro-a7f3bcfd.js";
+import { I } from "./image.taro-567edf0f.js";
 import { O } from "./overlay.taro-75012bd3.js";
 import { C as C4 } from "./col.taro-d6a46a7d.js";
 import { D } from "./divider.taro-0cb5f894.js";
-import { G } from "./grid.taro-fbbd8618.js";
-import { G as G2 } from "./griditem.taro-b0c37077.js";
+import { G } from "./grid.taro-8a6bc264.js";
+import { G as G2 } from "./griditem.taro-8fc37b25.js";
 import { L } from "./layout.taro-9659a928.js";
 import { R } from "./row.taro-8b7febd4.js";
-import { S } from "./sticky.taro-3c03eb0a.js";
+import { S } from "./sticky.taro-6bc62a96.js";
 import { B as B2 } from "./backtop.taro-7de36464.js";
-import { E } from "./elevator.taro-bc162e4f.js";
-import { F } from "./fixednav.taro-28e5f776.js";
+import { E } from "./elevator.taro-df8fde9d.js";
+import { F } from "./fixednav.taro-c905d63e.js";
 import { N } from "./navbar.taro-5e1a0835.js";
-import { S as S2 } from "./sidenavbar.taro-9f210df4.js";
-import { S as S3 } from "./sidenavbaritem.taro-32a45ce6.js";
-import { S as S4 } from "./subsidenavbar.taro-abe07673.js";
-import { T } from "./tabbar.taro-18eee41f.js";
-import { T as T2 } from "./tabbaritem.taro-89646ca1.js";
+import { S as S2 } from "./sidenavbar.taro-7bf8d265.js";
+import { S as S3 } from "./sidenavbaritem.taro-7d805f92.js";
+import { S as S4 } from "./subsidenavbar.taro-47bb6e74.js";
+import { T } from "./tabbar.taro-4f49ed90.js";
+import { T as T2 } from "./tabbaritem.taro-16a380db.js";
 import { T as T3 } from "./tabpane.taro-f8d92ece.js";
 import { T as T4 } from "./tabs.taro-66164782.js";
-import { A } from "./address.taro-1c534feb.js";
-import { C as C5 } from "./calendar.taro-10a6cb11.js";
-import { C as C6 } from "./calendaritem.taro-3e5f114e.js";
-import { C as C7 } from "./cascader.taro-fb7a0230.js";
-import { C as C8, a } from "./checkbox.taro-016074da.js";
-import { D as D2 } from "./datepicker.taro-3f718964.js";
-import { F as F2 } from "./form.taro-b06754e8.js";
-import { F as F3 } from "./formitem.taro-b326809d.js";
-import { I as I2 } from "./input.taro-27d686c9.js";
-import { I as I3 } from "./inputnumber.taro-877dc947.js";
-import { M } from "./menu.taro-cd0fef41.js";
-import { M as M2 } from "./menuitem.taro-6076bffa.js";
-import { N as N2 } from "./numberkeyboard.taro-0a0e866a.js";
-import { P } from "./picker.taro-a5603921.js";
-import { R as R2, a as a2 } from "./radio.taro-3a54f4c8.js";
-import { R as R3 } from "./range.taro-615e193a.js";
+import { A } from "./address.taro-09392335.js";
+import { C as C5 } from "./calendar.taro-63544d95.js";
+import { C as C6 } from "./calendaritem.taro-c222ea25.js";
+import { C as C7 } from "./cascader.taro-b5c1f5c6.js";
+import { C as C8, a } from "./checkbox.taro-303276d7.js";
+import { D as D2 } from "./datepicker.taro-d04fc491.js";
+import { F as F2 } from "./form.taro-a348734b.js";
+import { F as F3 } from "./formitem.taro-c9ded1ef.js";
+import { I as I2 } from "./input.taro-a4c8fecb.js";
+import { I as I3 } from "./inputnumber.taro-c4c0cfb3.js";
+import { M } from "./menu.taro-40d36e0a.js";
+import { M as M2 } from "./menuitem.taro-7f8c12cf.js";
+import { N as N2 } from "./numberkeyboard.taro-f245cb85.js";
+import { P } from "./picker.taro-69fb40fe.js";
+import { R as R2, a as a2 } from "./radio.taro-5d6ca4ad.js";
+import { R as R3 } from "./range.taro-a1d1ad25.js";
 import { R as R4 } from "./rate.taro-78c66969.js";
-import { S as S5 } from "./searchbar.taro-37ade36e.js";
-import { S as S6 } from "./shortpassword.taro-f7292032.js";
-import { S as S7 } from "./signature.taro-c57469aa.js";
+import { S as S5 } from "./searchbar.taro-450d361d.js";
+import { S as S6 } from "./shortpassword.taro-ac22a29e.js";
+import { S as S7 } from "./signature.taro-4f68516a.js";
 import { S as S8 } from "./switch.taro-f0da73a3.js";
-import { T as T5 } from "./textarea.taro-c110565e.js";
-import { U } from "./uploader.taro-92977813.js";
-import { A as A2 } from "./actionsheet.taro-d2217152.js";
+import { T as T5 } from "./textarea.taro-6b6142cc.js";
+import { U } from "./uploader.taro-ea2c7ab9.js";
+import { A as A2 } from "./actionsheet.taro-06df0e47.js";
 import { B as B3 } from "./badge.taro-872605bf.js";
-import { B as B4 } from "./dialog.taro-290eb9a6.js";
+import { B as B4 } from "./dialog.taro-2c2ca662.js";
 import { D as D3 } from "./drag.taro-48e1ff38.js";
-import { E as E2 } from "./empty.taro-ca792f57.js";
-import { I as I4 } from "./infiniteloading.taro-f8f23ac6.js";
-import { N as N3 } from "./noticebar.taro-b3bfd4fe.js";
-import { N as N4 } from "./notify.taro-6b6eb6bf.js";
-import { P as P2 } from "./popover.taro-ad483372.js";
-import { P as P3 } from "./pulltorefresh.taro-c611fd92.js";
-import { S as S9 } from "./skeleton.taro-9ff9baf4.js";
-import { S as S10 } from "./swipe.taro-de80fcd8.js";
-import { P as P4 } from "./popup.taro-e756f3fc.js";
-import { T as T6 } from "./toast.taro-92c10e1d.js";
+import { E as E2 } from "./empty.taro-a670f621.js";
+import { I as I4 } from "./infiniteloading.taro-59778aef.js";
+import { N as N3 } from "./noticebar.taro-dc895cc5.js";
+import { N as N4 } from "./notify.taro-5768403d.js";
+import { P as P2 } from "./popover.taro-ae72d2de.js";
+import { P as P3 } from "./pulltorefresh.taro-71ad5d15.js";
+import { S as S9 } from "./skeleton.taro-79775802.js";
+import { S as S10 } from "./swipe.taro-4eb0cc9a.js";
+import { P as P4 } from "./popup.taro-23f882b0.js";
+import { T as T6 } from "./toast.taro-85007ac8.js";
 import { A as A3 } from "./animate.taro-c8b29242.js";
-import { A as A4 } from "./animatingnumbers.taro-c2a52dbd.js";
-import { A as A5 } from "./audio.taro-bbd39f93.js";
-import { A as A6 } from "./avatar.taro-01536aff.js";
-import { A as A7 } from "./avatargroup-ad5ffb46.js";
+import { default as default2 } from "./AnimatingNumbers.js";
+import { A as A4 } from "./audio.taro-e4e33cdd.js";
+import { A as A5 } from "./avatar.taro-3f6ebf79.js";
+import { A as A6 } from "./avatargroup.taro-ad5ffb46.js";
 import { C as C9 } from "./circleprogress.taro-7149e09d.js";
-import { C as C10 } from "./collapse.taro-3d997680.js";
-import { C as C11 } from "./collapseitem-f4571575.js";
-import { C as C12 } from "./countdown.taro-22200811.js";
-import { E as E3 } from "./ellipsis.taro-f9688dd7.js";
-import { I as I5 } from "./imagepreview.taro-8832dc01.js";
-import { I as I6 } from "./indicator.taro-f2bd212f.js";
-import { V } from "./virtuallist.taro-99f03769.js";
-import { P as P5 } from "./pagination.taro-63607c3b.js";
-import { P as P6 } from "./price.taro-c4f45310.js";
-import { P as P7 } from "./progress.taro-ff63be75.js";
-import { S as S11 } from "./step.taro-3bc01c0c.js";
-import { S as S12 } from "./steps.taro-77e301ab.js";
-import { S as S13 } from "./swiper.taro-74cf9306.js";
-import { S as S14 } from "./swiperitem-80df464a.js";
-import { T as T7 } from "./table.taro-15a55c5d.js";
-import { T as T8 } from "./tag.taro-1b4134a5.js";
-import { V as V2 } from "./video-5d106e33.js";
-import { B as B5 } from "./barrage.taro-c8cb9864.js";
-import { C as C13 } from "./card.taro-a46fdf25.js";
-import { T as T9 } from "./timedetail.taro-8d2acbbf.js";
-import { T as T10 } from "./timepannel.taro-ee4c5dfa.js";
-import { T as T11 } from "./timeselect.taro-069deedd.js";
-import { T as T12 } from "./trendarrow.taro-0cf43935.js";
-import { W } from "./watermark.taro-cef29c03.js";
+import { C as C10 } from "./collapse.taro-1d9e3bb2.js";
+import { C as C11 } from "./collapseitem.taro-eac33538.js";
+import { C as C12 } from "./countdown.taro-384168de.js";
+import { E as E3 } from "./ellipsis.taro-5653d0b2.js";
+import { I as I5 } from "./imagepreview.taro-9e0c5171.js";
+import { I as I6 } from "./indicator.taro-edbc71df.js";
+import { V } from "./virtuallist.taro-97d3403a.js";
+import { P as P5 } from "./pagination.taro-0d851480.js";
+import { P as P6 } from "./price.taro-479f1b82.js";
+import { P as P7 } from "./progress.taro-437b9f6a.js";
+import { S as S11 } from "./step.taro-2f55e4f2.js";
+import { S as S12 } from "./steps.taro-196c1f59.js";
+import { S as S13 } from "./swiper.taro-4aeb8526.js";
+import { S as S14 } from "./swiperitem.taro-ef7342e8.js";
+import { T as T7 } from "./table.taro-4fd3bfe8.js";
+import { T as T8 } from "./tag.taro-614758eb.js";
+import { V as V2 } from "./video.taro-2a26d7da.js";
+import { B as B5 } from "./barrage.taro-e87bc58e.js";
+import { C as C13 } from "./card.taro-92fe9733.js";
+import { T as T9 } from "./timedetail.taro-d7aa4c1b.js";
+import { T as T10 } from "./timeselect.taro-df7477a3.js";
+import { T as T11 } from "./trendarrow.taro-253025d2.js";
+import { W } from "./watermark.taro-788cb452.js";
 import "react";
 import "classnames";
 import "@nutui/icons-react-taro";
+import "@tarojs/taro";
 import "./typings-11d83a22.js";
 import "@tarojs/components";
 import "./UserContext-ab42ba7f.js";
-import "@tarojs/taro";
-import "./use-client-rect-f317804e.js";
-import "./get-scroll-parent-8da04f2e.js";
+import "./use-client-rect-2bb6c562.js";
 import "./can-use-dom-0e539bd3.js";
-import "./offsetContext-f32a9246.js";
+import "./context-f32a9246.js";
 import "./use-props-value-7ac1b1b5.js";
-import "./bem-cdccae08.js";
-import "@bem-react/classname";
-import "./ConfigProvider.js";
 import "react-transition-group";
 import "./use-touch-ff43512c.js";
-import "./supports-passive-aaaf0eff.js";
 import "./index-e3184f19.js";
-import "@use-gesture/react";
-import "@react-spring/web";
 import "react-dom";
 import "./context-d0fccf11.js";
-import "./UserContext-735db09f.js";
-import "./UserContext-fde5badc.js";
+import "./context-ab42ba7f.js";
 export {
   A2 as ActionSheet,
   A as Address,
   A3 as Animate,
-  A4 as AnimatingNumbers,
-  A5 as Audio,
-  A6 as Avatar,
-  A7 as AvatarGroup,
+  default2 as AnimatingNumbers,
+  A4 as Audio,
+  A5 as Avatar,
+  A6 as AvatarGroup,
   B2 as BackTop,
   B3 as Badge,
   B5 as Barrage,
@@ -155,7 +146,7 @@ export {
   I as Image,
   I5 as ImagePreview,
   I6 as Indicator,
-  I4 as Infiniteloading,
+  I4 as InfiniteLoading,
   I2 as Input,
   I3 as InputNumber,
   L as Layout,
@@ -200,10 +191,9 @@ export {
   T8 as Tag,
   T5 as TextArea,
   T9 as TimeDetail,
-  T10 as TimePannel,
-  T11 as TimeSelect,
+  T10 as TimeSelect,
   T6 as Toast,
-  T12 as TrendArrow,
+  T11 as TrendArrow,
   U as Uploader,
   V2 as Video,
   V as VirtualList,

package/dist/esm/{pagination.taro-63607c3b.js → pagination.taro-0d851480.js}

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import classNames from "classnames";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {

package/dist/esm/{picker.taro-a5603921.js → picker.taro-69fb40fe.js}

@@ -2,13 +2,26 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
 import Taro from "@tarojs/taro";
 import { View, PickerView, PickerViewColumn } from "@tarojs/components";
-import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { P as Popup } from "./popup.taro-23f882b0.js";
 import { u as useTouch } from "./use-touch-ff43512c.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
-import { p as passiveSupported } from "./supports-passive-aaaf0eff.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
+let passiveSupported = false;
+if (canUseDom) {
+  try {
+    const opts = Object.defineProperty({}, "passive", {
+      get() {
+        passiveSupported = true;
+      }
+    });
+    window.addEventListener("test-passive-supported", null, opts);
+  } catch (e) {
+    console.log(e);
+  }
+}
 const InternalPickerPanel = (props, ref) => {
   const { keyIndex = 0, defaultValue, options = [], threeDimensional = true, duration = 1e3, itemShow = false, chooseItem } = props;
   const touch = useTouch();
@@ -237,7 +250,7 @@ const defaultProps = {
 };
 const InternalPicker = (props, ref) => {
   const { locale } = useConfig();
-  const { visible, title, options = [], defaultValue = [], className, style, threeDimensional, duration, onConfirm, onClose, afterClose, onChange, ...rest } = { ...defaultProps, ...props };
+  const { children, visible, title, options = [], defaultValue = [], className, style, threeDimensional, duration, onConfirm, onClose, afterClose, onChange, ...rest } = { ...defaultProps, ...props };
   const classPrefix = "nut-picker";
   const classes = classNames(classPrefix, className);
   const [selectedValue, setSelectedValue] = usePropsValue({
@@ -249,12 +262,27 @@ const InternalPicker = (props, ref) => {
       (_a = props.onConfirm) == null ? void 0 : _a.call(props, setSelectedOptions(), val);
     }
   });
+  const [innerVisible, setInnerVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false
+  });
+  const [innerValue, setInnerValue] = useState(selectedValue);
   const [currentValue, setCurrentValue] = useState([]);
   const [columnIndex, setColumnIndex] = useState(0);
   const pickerRef = useRef(null);
   const [refs, setRefs] = useRefs();
   const [columnsList, setColumnsList] = useState([]);
   const isConfirmEvent = useRef(false);
+  const actions = {
+    open: () => {
+      setInnerVisible(true);
+    },
+    close: () => {
+      setInnerVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const formatCascade = (columns, values) => {
     const formatted = [];
     let columnOptions = {
@@ -287,40 +315,49 @@ const InternalPicker = (props, ref) => {
     }
     return "single";
   };
-  const normalListData = () => {
+  const normalListData = (innerValue2) => {
     const type = columnsType();
     switch (type) {
       case "multiple":
         return options;
       case "cascade":
-        return formatCascade(options, selectedValue);
+        return formatCascade(options, innerValue2);
       default:
         return [options];
     }
   };
   const init = () => {
-    const normalData = normalListData();
+    const normalData = normalListData(innerValue);
     setColumnsList(normalData);
     const data = [];
     normalData.length > 0 && normalData.map((item) => {
       item[0] && data.push(item[0].value);
       return item;
     });
-    if (!defaultValue.length && selectedValue.length === 0) {
-      setSelectedValue([...data]);
+    if (!innerValue.length && innerValue.length === 0) {
+      setInnerValue([...data]);
     }
   };
   useEffect(() => {
-    if (!visible) {
+    setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
+  }, [innerVisible]);
+  useEffect(() => {
+    if (innerVisible) {
+      init();
+    }
+  }, [options, innerVisible]);
+  useEffect(() => {
+    if (!innerVisible) {
       return;
     }
-    init();
-  }, [options, visible]);
+    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
+    onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
+  }, [innerValue, columnsList, innerVisible]);
   const setSelectedOptions = () => {
     const options2 = [];
     let currOptions = [];
     columnsList.forEach((columnOptions, index) => {
-      currOptions = columnOptions.filter((item) => item.value === selectedValue[index]);
+      currOptions = columnOptions.filter((item) => item.value === innerValue[index]);
       if (currOptions[0]) {
         options2.push(currOptions[0]);
       } else {
@@ -331,8 +368,8 @@ const InternalPicker = (props, ref) => {
   };
   const defaultValuesConvert = () => {
     const defaultIndexs = [];
-    if (selectedValue.length > 0) {
-      selectedValue.forEach((value, index) => {
+    if (innerValue.length > 0) {
+      innerValue.forEach((value, index) => {
         var _a;
         for (let i = 0; i < ((_a = columnsList == null ? void 0 : columnsList[index]) == null ? void 0 : _a.length); i++) {
           if (columnsList[index][i].value === value) {
@@ -349,37 +386,30 @@ const InternalPicker = (props, ref) => {
     }
     return defaultIndexs;
   };
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
-    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
-    }
-  }, [selectedValue, columnsList, visible]);
   const chooseItem = (columnOptions, columnIndex2) => {
     var _a, _b;
+    const values = [];
+    const start = columnIndex2;
     if (columnOptions && Object.keys(columnOptions).length) {
-      if (selectedValue[columnIndex2] !== columnOptions.value) {
+      if (values[columnIndex2] !== columnOptions.value) {
         if (columnsType() === "cascade") {
-          selectedValue[columnIndex2] = columnOptions.value || "";
-          setSelectedValue([...selectedValue]);
+          values[columnIndex2] = columnOptions.value || "";
           while ((_a = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _a[0]) {
-            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
-            setSelectedValue([...selectedValue]);
+            values[columnIndex2 + 1] = columnOptions.children[0].value;
             columnIndex2++;
             columnOptions = columnOptions.children[0];
           }
           if ((_b = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _b.length) {
-            selectedValue[columnIndex2 + 1] = "";
-            setSelectedValue([...selectedValue]);
+            values[columnIndex2 + 1] = "";
           }
-          setColumnsList(normalListData());
+          const combineResult = [
+            ...innerValue.slice(0, start),
+            ...values.splice(start)
+          ];
+          setInnerValue(combineResult);
+          setColumnsList(normalListData(combineResult));
         } else {
-          setSelectedValue((data) => {
+          setInnerValue((data) => {
             const cdata = [...data];
             cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
             return cdata;
@@ -390,16 +420,17 @@ const InternalPicker = (props, ref) => {
     }
   };
   const confirm = () => {
-    let movings = false;
+    let moving = false;
     refs.forEach((ref2) => {
       if (ref2.moving)
-        movings = true;
+        moving = true;
       ref2.stopMomentum();
     });
-    if (movings) {
+    if (moving) {
       isConfirmEvent.current = true;
     } else {
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      console.log("picker confirmed", innerValue);
+      setSelectedValue(innerValue);
       closePicker();
     }
     setTimeout(() => {
@@ -407,19 +438,26 @@ const InternalPicker = (props, ref) => {
     }, 0);
   };
   const closePicker = () => {
-    onClose && onClose(setSelectedOptions(), selectedValue);
-    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+    setInnerVisible(false);
+    onClose && onClose(setSelectedOptions(), innerValue);
+    afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
   };
   const renderTitleBar = () => {
     return React.createElement(
       "div",
       { className: `${classPrefix}__control` },
-      React.createElement("span", { className: `${classPrefix}__cancel-btn`, onClick: () => closePicker() }, locale.cancel),
+      React.createElement("span", { className: `${classPrefix}__cancel-btn`, onClick: (e) => {
+        e.stopPropagation();
+        closePicker();
+      } }, locale.cancel),
       React.createElement("div", { className: `${classPrefix}__title` }, title || ""),
-      React.createElement("span", { className: `${classPrefix}__confirm-btn`, onClick: confirm }, locale.confirm)
+      React.createElement("span", { className: `${classPrefix}__confirm-btn`, onClick: (e) => {
+        e.stopPropagation();
+        confirm();
+      } }, locale.confirm)
     );
   };
-  const [pickingStatus, setPickingStatus] = useState(false);
+  const [, setPickingStatus] = useState(false);
   const pickerStart = () => {
     setPickingStatus(true);
   };
@@ -439,25 +477,31 @@ const InternalPicker = (props, ref) => {
     chooseItem(columnsList[changeIndex][data.detail.value[changeIndex]], changeIndex);
   };
   return React.createElement(
-    Popup,
-    { visible, position: "bottom", onClose: () => {
-      closePicker();
-    } },
+    React.Fragment,
+    null,
+    typeof children === "function" && children(selectedValue),
     React.createElement(
-      View,
-      { className: classes, style, ...rest, catchMove: true },
-      renderTitleBar(),
-      React.createElement("div", { className: `${classPrefix}__panel`, ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
-        return React.createElement(PickerPanel$1, { ref: setRefs(index), defaultValue: selectedValue == null ? void 0 : selectedValue[index], options: item, threeDimensional, chooseItem: (value, index2) => chooseItem(value, index2), duration, key: index, keyIndex: index, itemShow: visible });
-      }) : React.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "nut-picker-view-panel" }, columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
-        return React.createElement(PickerViewColumn, { key: `col${index}` }, columnOptions.map((item, index2) => {
-          return React.createElement(
-            View,
-            { key: item.value || index2, className: "nut-picker-roller-item-title" },
-            React.createElement(React.Fragment, null, item.text || item)
-          );
-        }));
-      })))
+      Popup,
+      { visible: innerVisible, position: "bottom", afterClose: () => {
+        closePicker();
+      } },
+      React.createElement(
+        View,
+        { className: classes, style, ...rest, catchMove: true },
+        renderTitleBar(),
+        typeof children !== "function" && children,
+        React.createElement("div", { className: `${classPrefix}__panel`, ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
+          return React.createElement(PickerPanel$1, { ref: setRefs(index), defaultValue: innerValue == null ? void 0 : innerValue[index], options: item, threeDimensional, chooseItem: (value, index2) => chooseItem(value, index2), duration, key: index, keyIndex: index, itemShow: visible });
+        }) : React.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "nut-picker-view-panel" }, columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
+          return React.createElement(PickerViewColumn, { key: `col${index}` }, columnOptions.map((item, index2) => {
+            return React.createElement(
+              View,
+              { key: item.value || index2, className: "nut-picker-roller-item-title" },
+              React.createElement(React.Fragment, null, item.text || item)
+            );
+          }));
+        })))
+      )
     )
   );
 };