@bifrostui/react 1.4.7-beta.0 → 1.4.7

package/es/Portal/Portal.miniapp.js

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

package/es/ScrollView/ScrollView.js

@@ -2,14 +2,12 @@ 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, dur) {
-  if (dur <= 0) {
-    dur = 500;
-  }
+function easeOutScroll(from, to, callback) {
   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;
@@ -44,8 +42,7 @@ const ScrollView = forwardRef(
       scrollIntoView,
       onTouchMove: propsOnTouchMove,
       scrollIntoViewAlignment,
-      children,
-      scrollAnimationDuration = 500
+      children
     } = props;
     const container = useRef(null);
     const handleRef = useForkRef(ref, container);
@@ -55,15 +52,10 @@ const ScrollView = forwardRef(
       if (top === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(
-          container.current.scrollTop,
-          top,
-          (pos) => {
-            if (container.current)
-              container.current.scrollTop = pos;
-          },
-          scrollAnimationDuration
-        );
+        easeOutScroll(container.current.scrollTop, top, (pos) => {
+          if (container.current)
+            container.current.scrollTop = pos;
+        });
       } else if (container.current)
         container.current.scrollTop = top;
     }, []);
@@ -71,15 +63,10 @@ const ScrollView = forwardRef(
       if (left === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(
-          container.current.scrollLeft,
-          left,
-          (pos) => {
-            if (container.current)
-              container.current.scrollLeft = pos;
-          },
-          scrollAnimationDuration
-        );
+        easeOutScroll(container.current.scrollLeft, left, (pos) => {
+          if (container.current)
+            container.current.scrollLeft = pos;
+        });
       } else if (container.current)
         container.current.scrollLeft = left;
     }, []);

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

@@ -138,6 +138,7 @@ 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,9 +48,13 @@
 .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;
 }
@@ -67,7 +71,6 @@
   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 {

package/es/Select/Select.js

@@ -29,32 +29,13 @@ 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 { CaretDownIcon, CaretUpIcon } from "@bifrostui/icons";
 import {
   getStylesAndLocation,
   isMini,
   throttle,
   useForkRef,
+  useUniqueId,
   useValue
 } from "@bifrostui/utils";
 import clsx from "clsx";
@@ -117,36 +98,38 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const isOpen = open !== void 0 ? open : internalOpen;
   const locatorRef = useRef(null);
   const rootRef = useForkRef(ref, locatorRef);
-  const optionContainerRef = useRef(null);
-  const optionMainRef = useRef(null);
-  const updateOptionStyle = () => __async(void 0, null, function* () {
+  const ttId = useUniqueId();
+  const dataId = `${prefixCls}-tt-${ttId}`;
+  const updateOptionStyle = throttle(() => {
     const curScrollRoot = scrollContainer();
-    const result = yield getStylesAndLocation({
-      scrollRoot: curScrollRoot,
-      childrenRef: locatorRef,
-      tipRef: optionContainerRef,
-      arrowDirection: defaultPlacement,
-      arrowLocation: "none",
-      offsetSpacing: 0
-    });
-    if (!result)
-      return;
-    const { styles, childrenStyle, newArrowDirection } = result;
-    optionMainRef.current.style.transition = "none";
-    optionMainRef.current.style.transform = `translateY(${newArrowDirection === "bottom" ? "-100%" : "100%"})`;
-    setPlacement(newArrowDirection);
-    setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle == null ? void 0 : childrenStyle.width }));
-  });
-  const changeOpen = (newOpen) => __async(void 0, null, function* () {
+    if (!isMini && curScrollRoot) {
+      const result = getStylesAndLocation({
+        scrollRoot: curScrollRoot,
+        childrenRef: locatorRef,
+        arrowDirection: defaultPlacement,
+        arrowLocation: "none",
+        selector: `[data-id="${dataId}"]`,
+        offsetSpacing: 0
+      });
+      if (!result)
+        return;
+      const { styles, childrenStyle, newArrowDirection } = result;
+      setPlacement(newArrowDirection);
+      setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle.width }));
+    }
+  }, 100);
+  const changeOpen = (newOpen) => {
     if (newOpen) {
-      yield updateOptionStyle();
-      setInternalOpen(newOpen);
-      onOpen == null ? void 0 : onOpen();
+      updateOptionStyle();
+      setTimeout(() => {
+        setInternalOpen(newOpen);
+        onOpen == null ? void 0 : onOpen();
+      }, 100);
     } else {
       onClose == null ? void 0 : onClose();
       setInternalOpen(newOpen);
     }
-  });
+  };
   const handleSelectClick = (e) => {
     if (disabled)
       return;
@@ -171,11 +154,10 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
-    const resizeCb = throttle(updateOptionStyle, 100);
     if (!isMini) {
-      window.addEventListener("resize", resizeCb);
+      window.addEventListener("resize", updateOptionStyle);
       return () => {
-        window.removeEventListener("resize", resizeCb);
+        window.removeEventListener("resize", updateOptionStyle);
       };
     }
   }, []);
@@ -193,8 +175,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 167,
-          exit: 167
+          enter: 150,
+          exit: 150
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -208,7 +190,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          ref: optionContainerRef,
+          "data-id": dataId,
           style: optionStyle
         },
         /* @__PURE__ */ React.createElement(
@@ -217,18 +199,11 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 167,
-              exit: 167
+              enter: 150,
+              exit: 150
             }
           },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: clsx(`${prefixCls}-option-main`),
-              ref: optionMainRef
-            },
-            children
-          )
+          /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
         )
       )
     );
@@ -256,8 +231,9 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), icon || defaultIcon)
-  ), /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
+    ), icon || defaultIcon),
+    isMini && renderOptions()
+  ), !isMini && /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,
@@ -274,7 +250,9 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
 Select.displayName = "BuiSelect";
 Select.defaultProps = {
   defaultValue: "",
-  scrollContainer: () => null
+  scrollContainer: () => {
+    return isMini ? null : document.body;
+  }
 };
 var Select_default = Select;
 export {

package/es/Slider/Slider.js

@@ -50,9 +50,7 @@ import { GripperBarVerticalIcon } from "@bifrostui/icons";
 import {
   isMini,
   useForkRef,
-  emulateTouchStart,
-  emulateTouchMove,
-  emulateTouchEnd,
+  useTouchEmulator,
   useValue,
   getBoundingClientRect
 } from "@bifrostui/utils";
@@ -112,6 +110,7 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const value = shouldProtection ? latestVal.current : valueProp;
   const [rootRef, setRootRef] = useState(null);
   const handleRef = useForkRef(ref, setRootRef);
+  useTouchEmulator(rootRef);
   const sliderRect = useRef();
   const touchStartPageX = useRef();
   const touchStartLeft = useRef();
@@ -182,7 +181,9 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
       return;
     beforeMoveValue.current = internalValue;
     tooltipRef.current = internalValue;
-    getLineWidth();
+    if (!sliderRect.current.width) {
+      getLineWidth();
+    }
     const currentTarget = isMini ? e.mpEvent.currentTarget : e.currentTarget;
     touchStartPageX.current = e.touches[0].pageX;
     touchStartLeft.current = currentTarget == null ? void 0 : currentTarget.offsetLeft;
@@ -241,16 +242,6 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
     setFrontTooltipVisible(false);
     setEndTooltipVisible(false);
   };
-  const onMouseUp = (e) => {
-    emulateTouchEnd(e);
-    document.removeEventListener("mousemove", emulateTouchMove);
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  const onMouseDown = (e) => {
-    emulateTouchStart(e);
-    document.addEventListener("mousemove", emulateTouchMove);
-    document.addEventListener("mouseup", onMouseUp);
-  };
   const renderButton = (index) => {
     const valuenow = internalValue[index];
     return /* @__PURE__ */ React.createElement(
@@ -273,8 +264,7 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
         },
         onTouchMove,
         onTouchEnd,
-        onTouchCancel: onTouchEnd,
-        onMouseDown
+        onTouchCancel: onTouchEnd
       },
       index === SLIDER_BUTTON.FRONT ? startIcon || defaultIcon : endIcon || defaultIcon
     );

package/es/Tabs/Tab.js

@@ -36,19 +36,7 @@ import TabsContext from "./TabsContext";
 import "./Tab.css";
 const prefixCls = "bui-tab";
 const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    children,
-    index,
-    disabled = false,
-    onClick
-  } = _a, others = __objRest(_a, [
-    "className",
-    "children",
-    "index",
-    "disabled",
-    "onClick"
-  ]);
+  const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
   const tabsContext = React.useContext(TabsContext);
   const { value, align, triggerChange } = tabsContext;
   return /* @__PURE__ */ React.createElement(
@@ -86,6 +74,9 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Tab.displayName = "BuiTab";
+Tab.defaultProps = {
+  disabled: false
+};
 var Tab_default = Tab;
 export {
   Tab_default as default

package/es/Tabs/Tabs.js

@@ -42,10 +42,9 @@ import React, {
 } from "react";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import scrollLeftTo from "./utils/scroll";
+import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
-const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
   const [active, setActive] = useState("");
@@ -60,11 +59,14 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const getActiveTabElement = () => {
+  const animate = ({ transitionInUse }) => {
     const container = tabsRef.current;
     if (!container)
-      return void 0;
+      return;
     const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
+    const activeLine = activeLineRef.current;
+    if (!activeLine)
+      return;
     let activeTab;
     if (tabs.length) {
       activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
@@ -78,25 +80,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
-    return activeTab;
-  };
-  const scrollIntoView = () => {
-    const tabsContainer = tabsRef.current;
-    const activeTab = getActiveTabElement();
-    if (!tabsContainer || !activeTab) {
-      return;
-    }
-    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
-    scrollLeftTo(tabsContainer, to, duration);
-  };
-  const animate = ({ transitionInUse }) => {
-    const container = tabsRef.current;
-    if (!container)
-      return;
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
-    const activeTab = getActiveTabElement();
     let activeTabLeft = 0;
     let activeTabWidth = 0;
     let containerWidth = 0;
@@ -119,8 +102,13 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
       return;
-    if (!isMini) {
-      scrollIntoView();
+    const nextScrollLeft = bound(
+      activeTabLeft - (containerWidth - activeTabWidth) / 2,
+      0,
+      containerScrollWidth - containerWidth
+    );
+    if (tabsRef.current) {
+      tabsRef.current.scrollLeft = nextScrollLeft;
     }
   };
   useEffect(() => {
@@ -150,10 +138,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
           return;
         const scrollLeft = container == null ? void 0 : container.scrollLeft;
         const showLeftMask = scrollLeft > 0;
-        const rightRange = Math.abs(
-          container.scrollWidth - (scrollLeft + container.offsetWidth)
-        );
-        const showRightMask = rightRange > 1;
+        const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
         setMaskData({
           leftMaskOpacity: showLeftMask ? 1 : 0,
           rightMaskOpacity: showRightMask ? 1 : 0
@@ -211,7 +196,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         "bui-tabline-invisible": isMini || !lineData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? `transform ${duration / 1e3}s ease` : void 0,
+        transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
         transform: `translate3d(${lineData.x}px, 0px, 0px)`
       }
     }

package/es/Tabs/utils/bound.d.ts

@@ -0,0 +1 @@
+export default function bound(position: number, min: number | undefined, max: number | undefined): number;

package/es/Tabs/utils/bound.js

@@ -0,0 +1,13 @@
+function bound(position, min, max) {
+  let ret = position;
+  if (min !== void 0) {
+    ret = Math.max(position, min);
+  }
+  if (max !== void 0) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}
+export {
+  bound as default
+};

package/es/Toast/FunctionalToast.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { render, unmount, getRootContainer } from "@bifrostui/utils";
+import { render, unmount, getRootElement } from "@bifrostui/utils";
 import React, { useCallback, useEffect, useState } from "react";
 import ToastView from "./Toast";
 let toastCloses = [];
@@ -70,7 +70,7 @@ const functionalToast = (props) => {
       rootWrapper.style[property] = styles[property];
     });
   }
-  const rootElement = getRootContainer();
+  const rootElement = getRootElement();
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);

package/es/Toast/Toast.css

@@ -13,6 +13,7 @@
   position: fixed;
   left: 50%;
   z-index: var(--bui-z-index-toast);
+  width: fit-content;
   min-width: var(--min-width);
   max-width: var(--max-width);
   padding: var(--padding);