@bifrostui/react 1.4.7-beta.0 → 2.0.0-beta.0

package/dist/Popover/Popover.js

@@ -51,26 +51,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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());
-  });
-};
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
@@ -93,9 +73,9 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
+    onOpenChange,
     open,
-    hideArrow,
-    onOpenChange
+    hideArrow
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -106,9 +86,9 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "offsetSpacing",
     "placement",
     "trigger",
+    "onOpenChange",
     "open",
-    "hideArrow",
-    "onOpenChange"
+    "hideArrow"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
@@ -116,18 +96,11 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
   const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
   const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
-  const [toolStyles, setToolStyles] = (0, import_react.useState)({});
-  const tipRef = (0, import_react.useRef)(null);
-  const nodeRef = (0, import_utils.useForkRef)(ref, tipRef);
-  const clearRef = (status) => {
-    if (status === false) {
-      tipRef.current = null;
-    }
-  };
+  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
+  const ttId = (0, import_utils.useUniqueId)();
   const changeOpenStatus = (event, status) => {
     if (controlByUser)
       return;
-    clearRef(status);
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
   };
@@ -146,33 +119,23 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     if (!controlByUser)
       return;
     setOpenStatus(open);
-    clearRef(open);
   }, [open]);
-  (0, import_react.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 = (0, import_utils.throttle)(() => __async(void 0, null, function* () {
-    if (!tipRef.current)
-      return;
+  const onRootElementMouted = (0, import_utils.throttle)(() => {
     const {
       direction: newParsedDirection,
       location: newParsedLocation = "center"
     } = (0, import_utils.parsePlacement)(placement);
-    const result = yield (0, import_utils.getStylesAndLocation)({
+    const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
       arrowDirection: newParsedDirection,
       arrowLocation: newParsedLocation,
       offsetSpacing,
-      tipRef
+      selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)
       return;
@@ -183,32 +146,26 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     if (newArrowLocation !== arrowLocation) {
       setArrowLocation(newArrowLocation);
     }
-    setToolStyles(styles);
-  }), 100);
+    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);
+  };
   (0, import_react.useEffect)(() => {
-    const bindEvent = () => {
-      if (!tipRef.current)
-        return;
-      if (!controlByUser) {
-        document.addEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.addEventListener("resize", onRootElementMouted);
-      }
-    };
-    const unbindEvent = () => {
-      if (!controlByUser) {
-        document.removeEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.removeEventListener("resize", onRootElementMouted);
-      }
-    };
     bindEvent();
     return () => {
       unbindEvent();
     };
-  }, [openStatus]);
+  }, []);
   if (!title && !content)
     return null;
   let triggerEventOption;
@@ -223,14 +180,14 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
       className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      style: __spreadValues(__spreadValues({}, style), toolStyles),
-      ref: nodeRef
+      "data-id": `tt_${ttId}`,
+      style: __spreadValues(__spreadValues({}, style), tooltyles)
     }, others),
     !hideArrow ? /* @__PURE__ */ import_react.default.createElement(
       "div",

package/dist/Portal/Portal.miniapp.js

@@ -53,9 +53,7 @@ var import_react = __toESM(require("react"));
 var import_PortalCore = __toESM(require("./PortalCore"));
 const Portal = (0, import_react.forwardRef)((props, ref) => {
   const { disablePortal } = props;
-  const [rootWrapperElement, setRootWrapperElement] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
-    let root;
+  const rootWrapperElement = (0, import_react.useMemo)(() => {
     if (!disablePortal) {
       const currentPages = import_taro.default.getCurrentPages() || [];
       const currentPage = currentPages[currentPages.length - 1];
@@ -67,12 +65,11 @@ const Portal = (0, import_react.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__ */ import_react.default.createElement(import_PortalCore.default, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });

package/dist/Radio/Radio.css

@@ -1,7 +1,6 @@
 .bui-radio {
   --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
   --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
-  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
   --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;

package/dist/Radio/Radio.js

@@ -69,7 +69,7 @@ const prefixCls = "bui-radio";
 const Radio = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    defaultChecked,
+    defaultChecked = false,
     checked,
     inputProps,
     inputRef,
@@ -78,7 +78,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
     disabled,
     icon,
     checkedIcon,
-    labelPlacement,
+    labelPlacement = "right",
     onChange,
     children
   } = _a, others = __objRest(_a, [
@@ -177,8 +177,4 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Radio.displayName = "BuiRadio";
-Radio.defaultProps = {
-  defaultChecked: false,
-  labelPlacement: "right"
-};
 var Radio_default = Radio;

package/dist/Radio/RadioGroup.js

@@ -100,7 +100,4 @@ const RadioGroup = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 RadioGroup.displayName = "BuiRadioGroup";
-RadioGroup.defaultProps = {
-  disabled: false
-};
 var RadioGroup_default = RadioGroup;

package/dist/Rating/Rating.js

@@ -69,18 +69,18 @@ const classes = {
 const Rating = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    size,
+    size = "medium",
     defaultValue,
-    allowHalf,
-    icon,
-    checkedIcon,
-    count,
-    readOnly,
-    disabled,
+    allowHalf = false,
+    icon = /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { htmlColor: "#ced1d6" }),
+    checkedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { color: "warning" }),
+    count = 5,
+    readOnly = false,
+    disabled = false,
     value,
     onChange,
     name,
-    disableClear
+    disableClear = false
   } = _a, others = __objRest(_a, [
     "className",
     "size",
@@ -164,14 +164,4 @@ const Rating = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Rating.displayName = "BuiRating";
-Rating.defaultProps = {
-  size: "medium",
-  count: 5,
-  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { htmlColor: "#ced1d6" }),
-  checkedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { color: "warning" }),
-  readOnly: false,
-  disabled: false,
-  allowHalf: false,
-  disableClear: false
-};
 var Rating_default = Rating;

package/dist/ScrollView/ScrollView.js

@@ -34,14 +34,12 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_ScrollView = require("./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;
@@ -76,8 +74,7 @@ const ScrollView = (0, import_react.forwardRef)(
       scrollIntoView,
       onTouchMove: propsOnTouchMove,
       scrollIntoViewAlignment,
-      children,
-      scrollAnimationDuration = 500
+      children
     } = props;
     const container = (0, import_react.useRef)(null);
     const handleRef = (0, import_utils.useForkRef)(ref, container);
@@ -87,15 +84,10 @@ const ScrollView = (0, import_react.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;
     }, []);
@@ -103,15 +95,10 @@ const ScrollView = (0, import_react.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/dist/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/dist/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/dist/Select/Select.js

@@ -54,26 +54,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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());
-  });
-};
 var Select_exports = {};
 __export(Select_exports, {
   default: () => Select_default
@@ -100,12 +80,14 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     inputProps,
     BackdropProps,
     value,
-    defaultValue,
+    defaultValue = "",
     disabled,
     placeholder,
     icon,
     open,
-    scrollContainer,
+    scrollContainer = () => {
+      return import_utils.isMini ? null : document.body;
+    },
     onChange,
     onClose,
     onOpen,
@@ -141,36 +123,38 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const isOpen = open !== void 0 ? open : internalOpen;
   const locatorRef = (0, import_react.useRef)(null);
   const rootRef = (0, import_utils.useForkRef)(ref, locatorRef);
-  const optionContainerRef = (0, import_react.useRef)(null);
-  const optionMainRef = (0, import_react.useRef)(null);
-  const updateOptionStyle = () => __async(void 0, null, function* () {
+  const ttId = (0, import_utils.useUniqueId)();
+  const dataId = `${prefixCls}-tt-${ttId}`;
+  const updateOptionStyle = (0, import_utils.throttle)(() => {
     const curScrollRoot = scrollContainer();
-    const result = yield (0, import_utils.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 (!import_utils.isMini && curScrollRoot) {
+      const result = (0, import_utils.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;
@@ -195,11 +179,10 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     [selectValue, onChange, setRenderValue]
   );
   (0, import_react.useEffect)(() => {
-    const resizeCb = (0, import_utils.throttle)(updateOptionStyle, 100);
     if (!import_utils.isMini) {
-      window.addEventListener("resize", resizeCb);
+      window.addEventListener("resize", updateOptionStyle);
       return () => {
-        window.removeEventListener("resize", resizeCb);
+        window.removeEventListener("resize", updateOptionStyle);
       };
     }
   }, []);
@@ -217,8 +200,8 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 167,
-          exit: 167
+          enter: 150,
+          exit: 150
         }
       },
       /* @__PURE__ */ import_react.default.createElement(
@@ -232,7 +215,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          ref: optionContainerRef,
+          "data-id": dataId,
           style: optionStyle
         },
         /* @__PURE__ */ import_react.default.createElement(
@@ -241,18 +224,11 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 167,
-              exit: 167
+              enter: 150,
+              exit: 150
             }
           },
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: (0, import_clsx.default)(`${prefixCls}-option-main`),
-              ref: optionMainRef
-            },
-            children
-          )
+          /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-option-main`) }, children)
         )
       )
     );
@@ -280,8 +256,9 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), icon || defaultIcon)
-  ), /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ import_react.default.createElement(
+    ), icon || defaultIcon),
+    import_utils.isMini && renderOptions()
+  ), !import_utils.isMini && /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ import_react.default.createElement(
     import_Backdrop.default,
     __spreadProps(__spreadValues({
       open: isOpen,
@@ -296,8 +273,4 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   ));
 });
 Select.displayName = "BuiSelect";
-Select.defaultProps = {
-  defaultValue: "",
-  scrollContainer: () => null
-};
 var Select_default = Select;

package/dist/Skeleton/Skeleton.js

@@ -61,16 +61,16 @@ var import_react = __toESM(require("react"));
 var import_Skeleton = require("./Skeleton.css");
 const prefixCls = "bui-skeleton";
 const Skeleton = /* @__PURE__ */ import_react.default.forwardRef(
-  (props, ref) => {
-    const _a = props, {
+  (_a, ref) => {
+    var _b = _a, {
       className,
       style,
-      animation,
+      animation = "wave",
       width,
       height,
-      variant,
+      variant = "text",
       children
-    } = _a, others = __objRest(_a, [
+    } = _b, others = __objRest(_b, [
       "className",
       "style",
       "animation",
@@ -99,8 +99,4 @@ const Skeleton = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 Skeleton.displayName = "BuiSkeleton";
-Skeleton.defaultProps = {
-  animation: "wave",
-  variant: "text"
-};
 var Skeleton_default = Skeleton;