@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

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
@@ -88,7 +68,7 @@ var import_Slide = __toESM(require("../Slide"));
 var import_selectContext = __toESM(require("./selectContext"));
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
-var import_Select2 = require("./Select.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-select";
 const defaultPlacement = "bottom";
 const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
@@ -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,21 +179,14 @@ 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);
       };
     }
   }, []);
-  const defaultIcon = isOpen ? /* @__PURE__ */ import_react.default.createElement(import_icons.CaretUpIcon, { className: `${prefixCls}-selector-icon`, htmlColor: "#9c9ca5" }) : /* @__PURE__ */ import_react.default.createElement(
-    import_icons.CaretDownIcon,
-    {
-      className: `${prefixCls}-selector-icon`,
-      htmlColor: "#9c9ca5"
-    }
-  );
+  const defaultIcon = isOpen ? /* @__PURE__ */ import_react.default.createElement(import_icons.CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ import_react.default.createElement(import_icons.CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
   const renderOptions = () => {
     var _a2;
     return /* @__PURE__ */ import_react.default.createElement(
@@ -217,8 +194,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 +209,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 +218,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 +250,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 +267,4 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   ));
 });
 Select.displayName = "BuiSelect";
-Select.defaultProps = {
-  defaultValue: "",
-  scrollContainer: () => null
-};
 var Select_default = Select;

package/dist/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/dist/Select/SelectOption.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(SelectOption_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_selectContext = __toESM(require("./selectContext"));
-var import_Select2 = require("./Select.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-select-option";
 const SelectOption = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {

package/dist/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/dist/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/dist/Skeleton/Skeleton.js

@@ -58,19 +58,19 @@ __export(Skeleton_exports, {
 module.exports = __toCommonJS(Skeleton_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Skeleton = require("./Skeleton.css");
+var import_index = require("./index.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;

package/dist/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/dist/Slide/Slide.js

@@ -70,80 +70,75 @@ const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
 };
-const Slide = /* @__PURE__ */ import_react.default.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 = (0, import_utils.createTransitions)();
-  const nodeRef = (0, import_utils.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__ */ import_react.default.createElement(
-    import_Transition.default,
-    __spreadProps(__spreadValues({}, others), {
-      appear,
+const Slide = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      appear = true,
       in: inProp,
-      timeout,
-      delay,
-      ref: nodeRef
-    }),
-    (state, childProps) => {
-      const transition = transitions.create(
-        "transform",
-        (0, import_utils.getTransitionProps)(
-          { timeout, style, easing: easingProp, delay },
-          {
-            mode: state
-          }
-        )
-      );
-      const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
-      return import_react.default.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 = (0, import_utils.createTransitions)();
+    const nodeRef = (0, import_utils.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__ */ import_react.default.createElement(
+      import_Transition.default,
+      __spreadProps(__spreadValues({}, others), {
+        appear,
+        in: inProp,
+        timeout,
+        delay,
+        ref: nodeRef
+      }),
+      (state, childProps) => {
+        const transition = transitions.create(
+          "transform",
+          (0, import_utils.getTransitionProps)(
+            { timeout, style, easing: easingProp, delay },
+            {
+              mode: state
+            }
+          )
+        );
+        const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
+        return import_react.default.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;

package/dist/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;

package/dist/Slider/Slider.js

@@ -80,8 +80,8 @@ var import_icons = require("@bifrostui/icons");
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Slider = require("./Slider.css");
 var import_utils2 = require("./utils");
+var import_index = require("./index.css");
 const classes = {
   root: "bui-slider",
   button: "bui-slider-button",
@@ -97,15 +97,15 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     className,
     defaultValue,
     value: valueProp,
-    min,
-    max,
-    step,
-    tipVisible,
-    tooltipRender,
+    min = 0,
+    max = 100,
+    step = 1,
+    tipVisible = false,
+    tooltipRender = (value2) => value2,
     disabled,
     startIcon,
     endIcon,
-    disableSwap,
+    disableSwap = false,
     onChange
   } = _a, others = __objRest(_a, [
     "className",
@@ -128,12 +128,13 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const value = shouldProtection ? latestVal.current : valueProp;
   const [rootRef, setRootRef] = (0, import_react.useState)(null);
   const handleRef = (0, import_utils.useForkRef)(ref, setRootRef);
+  (0, import_utils.useTouchEmulator)(rootRef);
   const sliderRect = (0, import_react.useRef)();
   const touchStartPageX = (0, import_react.useRef)();
   const touchStartLeft = (0, import_react.useRef)();
   const buttonIndex = (0, import_react.useRef)(0);
   const beforeMoveValue = (0, import_react.useRef)([0, 0]);
-  const defaultIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.GripperBarVerticalIcon, { htmlColor: "#2e333e" });
+  const defaultIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.GripperBarVerticalIcon, { htmlColor: "var(--bui-color-fg-default)" });
   const initialRange = (0, import_react.useRef)(
     value !== void 0 && Array.isArray(value) || defaultValue !== void 0 && Array.isArray(defaultValue)
   );
@@ -198,7 +199,9 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       return;
     beforeMoveValue.current = internalValue;
     tooltipRef.current = internalValue;
-    getLineWidth();
+    if (!sliderRect.current.width) {
+      getLineWidth();
+    }
     const currentTarget = import_utils.isMini ? e.mpEvent.currentTarget : e.currentTarget;
     touchStartPageX.current = e.touches[0].pageX;
     touchStartLeft.current = currentTarget == null ? void 0 : currentTarget.offsetLeft;
@@ -257,16 +260,6 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     setFrontTooltipVisible(false);
     setEndTooltipVisible(false);
   };
-  const onMouseUp = (e) => {
-    (0, import_utils.emulateTouchEnd)(e);
-    document.removeEventListener("mousemove", import_utils.emulateTouchMove);
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  const onMouseDown = (e) => {
-    (0, import_utils.emulateTouchStart)(e);
-    document.addEventListener("mousemove", import_utils.emulateTouchMove);
-    document.addEventListener("mouseup", onMouseUp);
-  };
   const renderButton = (index) => {
     const valuenow = internalValue[index];
     return /* @__PURE__ */ import_react.default.createElement(
@@ -289,8 +282,7 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         },
         onTouchMove,
         onTouchEnd,
-        onTouchCancel: onTouchEnd,
-        onMouseDown
+        onTouchCancel: onTouchEnd
       },
       index === SLIDER_BUTTON.FRONT ? startIcon || defaultIcon : endIcon || defaultIcon
     );
@@ -322,12 +314,4 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 Slider.displayName = "BuiSlider";
-Slider.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 1,
-  disableSwap: false,
-  tipVisible: false,
-  tooltipRender: (value) => value
-};
 var Slider_default = Slider;