@bifrostui/react 2.0.0-beta.10 → 2.0.0-beta.11

package/es/Dialog/FunctionalDialog.js

@@ -50,7 +50,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import React, { useCallback, useEffect, useState } from "react";
-import { getRootElement, render, unmount } from "@bifrostui/utils";
+import { getRootContainer, render, unmount } from "@bifrostui/utils";
 import Popup from "./Dialog";
 const { isValidElement, Component } = React;
 const formatProps = (props) => {
@@ -61,10 +61,21 @@ const formatProps = (props) => {
 };
 const DialogGenerator = (options) => {
   const rootWrapper = document.createElement("div");
-  const rootElement = getRootElement();
+  const rootElement = getRootContainer(options == null ? void 0 : options.container);
   rootElement.appendChild(rootWrapper);
   const DialogComponent = () => {
-    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
+    const _a = options, {
+      onConfirm,
+      onCancel,
+      ref,
+      container: container
+    } = _a, others = __objRest(_a, [
+      "onConfirm",
+      "onCancel",
+      "ref",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      "container"
+    ]);
     const [visible, setVisible] = useState(false);
     const close = useCallback(() => {
       setVisible(false);

package/es/Input/Input.css

@@ -31,8 +31,6 @@
 .bui-input-input {
   flex: 1;
   min-width: 0;
-  display: flex;
-  align-items: center;
   padding: 0;
   height: 100%;
   color: var(--bui-color-fg-default);

package/es/Picker/Picker.css

@@ -8,6 +8,7 @@
   --panel-container-height: var(--bui-picker-panel-height, 260px);
   --indicator-top: var(--bui-picker-indicator-top, 108px);
   --option-height: var(--bui-picker-option-height, 36px);
+  --bui-picker-confirm-disabled-opacity: 0.38;
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
@@ -41,6 +42,10 @@
   line-height: var(--confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--panel-container-height);

package/es/Picker/Picker.js

@@ -37,6 +37,12 @@ import { useLocaleText } from "../locales";
 import { formatOptions, pickerPanelType, safeData } from "./utils";
 import "./Picker.css";
 const prefixCls = "bui-picker";
+const checkDisabled = (values, columns) => values.find(
+  (value, index) => {
+    var _a, _b;
+    return (_b = (_a = columns == null ? void 0 : columns[index]) == null ? void 0 : _a.find((column) => (column == null ? void 0 : column.value) === value)) == null ? void 0 : _b.disabled;
+  }
+);
 const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -44,6 +50,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     title,
     options = [],
     value,
+    confirmText: propConfirmText,
+    cancelText: propCancelText,
     contentProps,
     onConfirm,
     onOptionChange,
@@ -55,6 +63,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "title",
     "options",
     "value",
+    "confirmText",
+    "cancelText",
     "contentProps",
     "onConfirm",
     "onOptionChange",
@@ -66,6 +76,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [columns, setColumns] = useState([]);
   const [internalValue, setInternalValue] = useState([]);
   const { cancel: cancelText, confirm: confirmText } = useLocaleText("picker");
+  const disabled = checkDisabled(internalValue, columns);
   useEffect(() => {
     if (!open)
       return;
@@ -88,7 +99,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }, [value, options]);
   const confirm = (e) => {
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
-    if (isMoving)
+    if (isMoving || disabled)
       return;
     const { safeValue } = safeData({
       value: internalValue,
@@ -147,7 +158,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: conbineValues,
           options: formatted,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       } else {
         const result = [...internalValue];
@@ -156,7 +168,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: result,
           options,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       }
     }
@@ -198,7 +211,16 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       __spreadProps(__spreadValues({}, contentProps), {
         className: clsx(`${prefixCls}-content`, contentProps == null ? void 0 : contentProps.className)
       }),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, confirmText)),
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, propCancelText || cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(`${prefixCls}-confirm`, {
+            [`${prefixCls}-confirm-disabled`]: disabled
+          }),
+          onClick: confirm
+        },
+        propConfirmText || confirmText
+      )),
       /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
         PickerPanel,
         {
@@ -206,7 +228,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
           key: index,
           options: column,
           columnIndex: index,
-          defaultValue: internalValue == null ? void 0 : internalValue[index],
+          value: internalValue == null ? void 0 : internalValue[index],
           onSelect: handleSelect,
           pickerStyle: others == null ? void 0 : others.style
         }

package/es/Picker/Picker.types.d.ts

@@ -10,6 +10,10 @@ export interface IPickerOptionItem {
      * 选项对应唯一的值
      */
     value: string | number;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
 }
 export type ICascadePickerChildOptionItem = IPickerOptionItem & {
     /**
@@ -34,6 +38,14 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
          * 标题
          */
         title?: string;
+        /**
+         * 确认文本内容
+         */
+        confirmText?: string;
+        /**
+         * 取消文本内容
+         */
+        cancelText?: string;
         /**
          * 列表数据
          * @default []
@@ -61,6 +73,7 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
             value: (string | number)[];
             options: ICascadePickerChildOptionItem[][];
             currentOption: ICascadePickerChildOptionItem;
+            columnIndex: number;
         }) => void;
         /**
          * 点击取消按钮时候回调
@@ -85,9 +98,9 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          */
         options?: ICascadePickerChildOptionItem[];
         /**
-         * 默认值
+         * 选中值
          */
-        defaultValue?: string | number;
+        value?: string | number;
         /**
          * 列索引
          */

package/es/Picker/PickerPanel.css

@@ -1,4 +1,5 @@
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -56,6 +57,9 @@
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/es/Picker/PickerPanel.js

@@ -36,13 +36,13 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     var _b;
     const _a = props, {
       options = [],
-      defaultValue,
+      value,
       onSelect,
       columnIndex,
       pickerStyle
     } = _a, others = __objRest(_a, [
       "options",
-      "defaultValue",
+      "value",
       "onSelect",
       "columnIndex",
       "pickerStyle"
@@ -72,9 +72,9 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     useTouchEmulator(PickerPanelRef.current);
     const updateSelect = () => {
       let index = -1;
-      if (defaultValue) {
+      if (value) {
         options.some((item, idx) => {
-          if (item.value === defaultValue) {
+          if (item.value === value) {
             index = idx;
             return true;
           }
@@ -92,7 +92,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       return () => {
         clearTimeout(timer);
       };
-    }, [options]);
+    }, [options, value]);
     const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -225,7 +225,8 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
           "div",
           {
             className: clsx(`${prefixCls}-option`, {
-              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
+              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
+              [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {

package/es/Popover/Popover.js

@@ -26,14 +26,35 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import clsx from "clsx";
 import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
   parsePlacement,
-  useUniqueId,
-  throttle
+  throttle,
+  useForkRef,
+  isMini
 } from "@bifrostui/utils";
 import Portal from "../Portal";
 import "./Popover.css";
@@ -49,9 +70,9 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
-    onOpenChange,
     open,
-    hideArrow
+    hideArrow,
+    onOpenChange
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -62,9 +83,9 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "offsetSpacing",
     "placement",
     "trigger",
-    "onOpenChange",
     "open",
-    "hideArrow"
+    "hideArrow",
+    "onOpenChange"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = parsePlacement(placement);
@@ -72,11 +93,18 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
   const [arrowLocation, setArrowLocation] = useState(location);
-  const [tooltyles, setTooltyles] = useState({});
-  const ttId = useUniqueId();
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const nodeRef = useForkRef(ref, tipRef);
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
   const changeOpenStatus = (event, status) => {
     if (controlByUser)
       return;
+    clearRef(status);
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
   };
@@ -95,23 +123,33 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (!controlByUser)
       return;
     setOpenStatus(open);
+    clearRef(open);
   }, [open]);
+  useEffect(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
   const clickEventHandler = (event) => {
     if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
       return;
     hidePopover(event);
   };
-  const onRootElementMouted = throttle(() => {
+  const onRootElementMouted = throttle(() => __async(void 0, null, function* () {
+    if (!tipRef.current)
+      return;
     const {
       direction: newParsedDirection,
       location: newParsedLocation = "center"
     } = parsePlacement(placement);
-    const result = getStylesAndLocation({
+    const result = yield getStylesAndLocation({
       childrenRef,
       arrowDirection: newParsedDirection,
       arrowLocation: newParsedLocation,
       offsetSpacing,
-      selector: `[data-id="tt_${ttId}"]`
+      tipRef
     });
     if (!result)
       return;
@@ -122,26 +160,32 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (newArrowLocation !== arrowLocation) {
       setArrowLocation(newArrowLocation);
     }
-    setTooltyles(styles);
-  }, 100);
-  const bindEvent = () => {
-    if (!controlByUser) {
-      document.addEventListener("click", clickEventHandler);
-    }
-    window.addEventListener("resize", onRootElementMouted);
-  };
-  const unbindEvent = () => {
-    if (!controlByUser) {
-      document.removeEventListener("click", clickEventHandler);
-    }
-    window.removeEventListener("resize", onRootElementMouted);
-  };
+    setToolStyles(styles);
+  }), 100);
   useEffect(() => {
+    const bindEvent = () => {
+      if (!tipRef.current)
+        return;
+      if (!controlByUser) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.addEventListener("resize", onRootElementMouted);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.removeEventListener("resize", onRootElementMouted);
+      }
+    };
     bindEvent();
     return () => {
       unbindEvent();
     };
-  }, []);
+  }, [openStatus]);
   if (!title && !content)
     return null;
   let triggerEventOption;
@@ -156,14 +200,14 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted }, /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      "data-id": `tt_${ttId}`,
-      style: __spreadValues(__spreadValues({}, style), tooltyles)
+      style: __spreadValues(__spreadValues({}, style), toolStyles),
+      ref: nodeRef
     }, others),
     !hideArrow ? /* @__PURE__ */ React.createElement(
       "div",

package/es/Portal/Portal.miniapp.js

@@ -18,11 +18,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import Taro from "@tarojs/taro";
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import PortalCore from "./PortalCore";
 const Portal = forwardRef((props, ref) => {
   const { disablePortal } = props;
-  const rootWrapperElement = useMemo(() => {
+  const [rootWrapperElement, setRootWrapperElement] = useState();
+  useEffect(() => {
+    let root;
     if (!disablePortal) {
       const currentPages = Taro.getCurrentPages() || [];
       const currentPage = currentPages[currentPages.length - 1];
@@ -34,11 +36,12 @@ const Portal = forwardRef((props, ref) => {
         const view = document.createElement("view");
         view.id = portalId;
         rootElement == null ? void 0 : rootElement.appendChild(view);
-        return view;
+        root = view;
+      } else {
+        root = portalWrapperElement;
       }
-      return portalWrapperElement;
     }
-    return void 0;
+    setRootWrapperElement(root);
   }, []);
   return /* @__PURE__ */ React.createElement(PortalCore, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });

package/es/ScrollView/ScrollView.js

@@ -2,12 +2,14 @@ import { useForkRef } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
 import "./ScrollView.css";
-function easeOutScroll(from, to, callback) {
+function easeOutScroll(from, to, callback, dur) {
+  if (dur <= 0) {
+    dur = 500;
+  }
   if (from === to || typeof from !== "number") {
     return;
   }
   const change = to - from;
-  const dur = 500;
   const sTime = +/* @__PURE__ */ new Date();
   function linear(t, b, c, d) {
     return c * t / d + b;
@@ -42,7 +44,8 @@ const ScrollView = forwardRef(
       scrollIntoView,
       onTouchMove: propsOnTouchMove,
       scrollIntoViewAlignment,
-      children
+      children,
+      scrollAnimationDuration = 500
     } = props;
     const container = useRef(null);
     const handleRef = useForkRef(ref, container);
@@ -52,10 +55,15 @@ const ScrollView = forwardRef(
       if (top === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(container.current.scrollTop, top, (pos) => {
-          if (container.current)
-            container.current.scrollTop = pos;
-        });
+        easeOutScroll(
+          container.current.scrollTop,
+          top,
+          (pos) => {
+            if (container.current)
+              container.current.scrollTop = pos;
+          },
+          scrollAnimationDuration
+        );
       } else if (container.current)
         container.current.scrollTop = top;
     }, []);
@@ -63,10 +71,15 @@ const ScrollView = forwardRef(
       if (left === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(container.current.scrollLeft, left, (pos) => {
-          if (container.current)
-            container.current.scrollLeft = pos;
-        });
+        easeOutScroll(
+          container.current.scrollLeft,
+          left,
+          (pos) => {
+            if (container.current)
+              container.current.scrollLeft = pos;
+          },
+          scrollAnimationDuration
+        );
       } else if (container.current)
         container.current.scrollLeft = left;
     }, []);

package/es/ScrollView/ScrollView.types.d.ts

@@ -138,7 +138,6 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          */
         fastDeceleration?: boolean;
         /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
-         * 仅小程序可用
          */
         scrollAnimationDuration?: number;
         /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。

package/es/Select/Select.css

@@ -48,13 +48,9 @@
 .bui-select-option-container {
   position: absolute;
   box-sizing: border-box;
-  top: 100%;
-  left: 0;
-  width: 100%;
   font-size: var(--bui-select-font-size, var(--bui-title-size-3));
   z-index: var(--bui-z-index-tooltip);
   border-radius: 3px;
-  background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
@@ -71,6 +67,7 @@
   border-radius: 3px;
   padding: var(--bui-select-option-container-padding, 3px 0);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  background-color: var(--bui-color-bg-view);
   overflow: hidden;
 }
 .bui-select-option {