@bifrostui/react 1.5.0 → 2.0.0-alpha.0

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.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectProps } from './Select.types';
-import './Select.less';
+import './index.less';
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Select;

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";
@@ -64,7 +45,7 @@ import Slide from "../Slide";
 import BuiSelectContext from "./selectContext";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select";
 const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -76,12 +57,14 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     inputProps,
     BackdropProps,
     value,
-    defaultValue,
+    defaultValue = "",
     disabled,
     placeholder,
     icon,
     open,
-    scrollContainer,
+    scrollContainer = () => {
+      return isMini ? null : document.body;
+    },
     onChange,
     onClose,
     onOpen,
@@ -117,36 +100,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,21 +156,14 @@ 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);
       };
     }
   }, []);
-  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ React.createElement(
-    CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
-    }
-  );
+  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ React.createElement(CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
   const renderOptions = () => {
     var _a2;
     return /* @__PURE__ */ React.createElement(
@@ -193,8 +171,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 167,
-          exit: 167
+          enter: 150,
+          exit: 150
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -208,7 +186,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 +195,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 +227,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,
@@ -272,10 +244,6 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   ));
 });
 Select.displayName = "BuiSelect";
-Select.defaultProps = {
-  defaultValue: "",
-  scrollContainer: () => null
-};
 var Select_default = Select;
 export {
   Select_default as default

package/es/Select/SelectOption.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectOptionProps } from './Select.types';
-import './Select.less';
+import './index.less';
 declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SelectOption;

package/es/Select/SelectOption.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import clsx from "clsx";
 import React, { useContext, useEffect } from "react";
 import BuiSelectContext from "./selectContext";
-import "./Select.css";
+import "./index.css";
 const prefixCls = "bui-select-option";
 const SelectOption = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/es/Select/{Select.css → index.css}

@@ -1,13 +1,23 @@
+:root,
+page,
+xhs-page {
+  --bui-select-height: 32px;
+  --bui-select-min-width: 100px;
+  --bui-select-font-size: var(--bui-text-size-1);
+  --bui-select-selector-container-padding: 0 14px;
+  --bui-select-option-main-padding: 3px 0;
+  --bui-select-option-padding: 0 14px;
+  --bui-select-option-border-radius: 5px;
+  --bui-select-option-margin: 0 3px;
+  --bui-select-option-height: 32px;
+  --bui-select-option-active-bg-color: #fff2f0;
+}
 .bui-select {
-  --height: var(--bui-select-height, 27px);
-  --mini-width: var(--bui-select-min-width, 100px);
-  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
-  --padding: var(--bui-select-selector-container, 0 14px);
   position: relative;
   cursor: pointer;
-  height: var(--height);
-  min-width: var(--mini-width);
-  font-size: var(--font-size);
+  height: var(--bui-select-height);
+  min-width: var(--bui-select-min-width);
+  font-size: var(--bui-select-font-size);
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
@@ -19,7 +29,7 @@
 .bui-select-selector-container {
   display: flex;
   align-items: center;
-  padding: var(--padding);
+  padding: var(--bui-select-selector-container-padding);
   height: 100%;
 }
 .bui-select-input {
@@ -37,7 +47,7 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  height: var(--height);
+  height: var(--bui-select-height);
   background-color: transparent;
   outline: none;
   border: 0;
@@ -48,9 +58,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;
 }
@@ -65,30 +79,26 @@
 }
 .bui-select-option-main {
   border-radius: 3px;
-  padding: var(--bui-select-option-container-padding, 3px 0);
+  padding: var(--bui-select-option-main-padding);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
-  background-color: var(--bui-color-bg-view);
   overflow: hidden;
 }
 .bui-select-option {
-  --option-padding: var(--bui-select-option-padding, 0 14px);
-  --option-margin: var(--bui-select-option-margin, 0 3px);
-  --option-height: var(--bui-select-option-height, 27px);
   display: flex;
   align-items: center;
-  height: var(--option-height);
-  padding: var(--option-padding);
-  border-radius: 5px;
-  margin: var(--option-margin);
+  height: var(--bui-select-option-height);
+  padding: var(--bui-select-option-padding);
+  border-radius: var(--bui-select-option-border-radius);
+  margin: var(--bui-select-option-margin);
 }
 .bui-select-option:hover {
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
+  background-color: var(--bui-select-option-active-bg-color);
   color: var(--bui-color-primary);
 }
 .bui-select-option-active {
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-primary);
-  background-color: var(---bui-select-options-active-bg, #fff2f0);
+  background-color: var(--bui-select-option-active-bg-color);
 }
 .bui-select-option-hide {
   opacity: 0;

package/es/Skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Skeleton.less';
 import { SkeletonProps } from './Skeleton.types';
+import './index.less';
 declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps<"div", {}>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export default Skeleton;

package/es/Skeleton/Skeleton.js

@@ -28,19 +28,19 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Skeleton.css";
+import "./index.css";
 const prefixCls = "bui-skeleton";
 const Skeleton = /* @__PURE__ */ React.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",
@@ -69,10 +69,6 @@ const Skeleton = /* @__PURE__ */ React.forwardRef(
   }
 );
 Skeleton.displayName = "BuiSkeleton";
-Skeleton.defaultProps = {
-  animation: "wave",
-  variant: "text"
-};
 var Skeleton_default = Skeleton;
 export {
   Skeleton_default as default

package/es/Skeleton/{Skeleton.css → index.css}

@@ -1,5 +1,9 @@
+:root,
+page,
+xhs-page {
+  --bui-skeleton-height: 1.2em;
+}
 .bui-skeleton {
-  --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
 .bui-skeleton-animation-wave {
@@ -26,10 +30,10 @@
   content: "\a0";
 }
 .bui-skeleton-rectangular {
-  height: var(--height);
+  height: var(--bui-skeleton-height);
 }
 .bui-skeleton-rounded {
-  height: var(--height);
+  height: var(--bui-skeleton-height);
   border-radius: var(--bui-shape-radius-label);
 }
 .bui-skeleton-circular {

package/es/Slide/Slide.js

@@ -46,82 +46,77 @@ const defaultTimeout = {
   enter: duration.enteringScreen,
   exit: duration.leavingScreen
 };
-const Slide = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, {
-    appear,
-    in: inProp,
-    children,
-    style,
-    easing: easingProp,
-    timeout,
-    direction,
-    delay
-  } = _a, others = __objRest(_a, [
-    "appear",
-    "in",
-    "children",
-    "style",
-    "easing",
-    "timeout",
-    "direction",
-    "delay"
-  ]);
-  const transitions = createTransitions();
-  const nodeRef = useForkRef(ref, children == null ? void 0 : children.ref);
-  const getTranslateValue = (_direction) => {
-    if (_direction === "left") {
-      return "translateX(100%)";
-    }
-    if (_direction === "right") {
-      return "translateX(-100%)";
-    }
-    if (_direction === "up") {
-      return "translateY(100%)";
-    }
-    return "translateY(-100%)";
-  };
-  if (!children)
-    return null;
-  return /* @__PURE__ */ React.createElement(
-    Transition,
-    __spreadProps(__spreadValues({}, others), {
-      appear,
+const Slide = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      appear = true,
       in: inProp,
-      timeout,
-      delay,
-      ref: nodeRef
-    }),
-    (state, childProps) => {
-      const transition = transitions.create(
-        "transform",
-        getTransitionProps(
-          { timeout, style, easing: easingProp, delay },
-          {
-            mode: state
-          }
-        )
-      );
-      const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
-      return React.cloneElement(children, __spreadValues({
-        style: __spreadValues(__spreadValues({
-          visibility: state === "exited" ? "hidden" : "visible",
-          transition,
-          WebkitTransition: transition,
-          transform,
-          WebkitTransform: transform
-        }, style), children.props.style)
-      }, childProps));
-    }
-  );
-});
+      children,
+      style,
+      easing: easingProp = defaultEasing,
+      timeout = defaultTimeout,
+      direction = "down",
+      delay = 0
+    } = _b, others = __objRest(_b, [
+      "appear",
+      "in",
+      "children",
+      "style",
+      "easing",
+      "timeout",
+      "direction",
+      "delay"
+    ]);
+    const transitions = createTransitions();
+    const nodeRef = useForkRef(ref, children == null ? void 0 : children.ref);
+    const getTranslateValue = (_direction) => {
+      if (_direction === "left") {
+        return "translateX(100%)";
+      }
+      if (_direction === "right") {
+        return "translateX(-100%)";
+      }
+      if (_direction === "up") {
+        return "translateY(100%)";
+      }
+      return "translateY(-100%)";
+    };
+    if (!children)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      Transition,
+      __spreadProps(__spreadValues({}, others), {
+        appear,
+        in: inProp,
+        timeout,
+        delay,
+        ref: nodeRef
+      }),
+      (state, childProps) => {
+        const transition = transitions.create(
+          "transform",
+          getTransitionProps(
+            { timeout, style, easing: easingProp, delay },
+            {
+              mode: state
+            }
+          )
+        );
+        const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
+        return React.cloneElement(children, __spreadValues({
+          style: __spreadValues(__spreadValues({
+            visibility: state === "exited" ? "hidden" : "visible",
+            transition,
+            WebkitTransition: transition,
+            transform,
+            WebkitTransform: transform
+          }, style), children.props.style)
+        }, childProps));
+      }
+    );
+  }
+);
 Slide.displayName = "BuiSlide";
-Slide.defaultProps = {
-  appear: true,
-  easing: defaultEasing,
-  timeout: defaultTimeout,
-  direction: "down",
-  delay: 0
-};
 var Slide_default = Slide;
 export {
   Slide_default as default

package/es/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Slider.less';
 import { SliderProps } from './Slider.types';
+import './index.less';
 declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Slider;