@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/ScrollView/useScrollView.js

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { useForkRef } from "@bifrostui/utils";
+import { useCallback, useEffect, useRef } from "react";
+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;
+  }
+  const isLarger = to >= from;
+  function step() {
+    const stepFrom = linear(+/* @__PURE__ */ new Date() - sTime, from, change, dur);
+    if (isLarger && stepFrom >= to || !isLarger && to >= stepFrom) {
+      callback == null ? void 0 : callback(to);
+      return;
+    }
+    callback == null ? void 0 : callback(stepFrom);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+function useScrollView(parameters) {
+  const _a = parameters, {
+    ref,
+    onScroll,
+    onScrollToUpper,
+    onScrollToLower,
+    scrollTop: scrollTopProp,
+    scrollLeft: scrollLeftProp,
+    scrollX,
+    scrollY,
+    scrollIntoView,
+    onTouchMove: propsOnTouchMove,
+    scrollIntoViewAlignment,
+    upperThreshold = 50,
+    lowerThreshold = 50,
+    scrollWithAnimation
+  } = _a, otherProps = __objRest(_a, [
+    "ref",
+    "onScroll",
+    "onScrollToUpper",
+    "onScrollToLower",
+    "scrollTop",
+    "scrollLeft",
+    "scrollX",
+    "scrollY",
+    "scrollIntoView",
+    "onTouchMove",
+    "scrollIntoViewAlignment",
+    "upperThreshold",
+    "lowerThreshold",
+    "scrollWithAnimation"
+  ]);
+  const container = useRef(null);
+  const handleRef = useForkRef(ref, container);
+  const upperLowerStatus = useRef(0);
+  const onTouchMove = (_e) => {
+  };
+  const scrollVertical = useCallback((top, isAnimation) => {
+    if (top === void 0)
+      return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollTop, top, (pos) => {
+        if (container.current)
+          container.current.scrollTop = pos;
+      });
+    } else if (container.current)
+      container.current.scrollTop = top;
+  }, []);
+  const scrollHorizontal = useCallback(
+    (left, isAnimation) => {
+      if (left === void 0)
+        return;
+      if (isAnimation) {
+        easeOutScroll(container.current.scrollLeft, left, (pos) => {
+          if (container.current)
+            container.current.scrollLeft = pos;
+        });
+      } else if (container.current)
+        container.current.scrollLeft = left;
+    },
+    []
+  );
+  const handleScroll = useCallback(
+    (isInit = false) => {
+      var _a2, _b;
+      const isAnimation = scrollWithAnimation;
+      if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a2 = container == null ? void 0 : container.current) == null ? void 0 : _a2.querySelector) == null ? void 0 : _b.call(_a2, `#${scrollIntoView}`))) {
+        const doScrollIntoView = (id, alignment = "start", _isAnimation = isAnimation) => {
+          const target = container.current.querySelector(
+            `#${id}`
+          );
+          if (scrollY) {
+            const start = target.offsetTop;
+            const end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
+            let nearest;
+            if (container.current.scrollTop < end)
+              nearest = end;
+            else if (container.current.scrollTop > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollTop;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollVertical(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+          if (scrollX) {
+            const start = target.offsetLeft;
+            const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
+            let nearest;
+            if (container.current.scrollLeft < end)
+              nearest = end;
+            else if (container.current.scrollLeft > start)
+              nearest = start;
+            else
+              nearest = container.current.scrollLeft;
+            const center = (start + end) / 2;
+            const positions = { start, end, nearest, center };
+            scrollHorizontal(
+              positions[alignment],
+              _isAnimation
+            );
+          }
+        };
+        if (isInit) {
+          setTimeout(
+            () => doScrollIntoView(
+              scrollIntoView,
+              scrollIntoViewAlignment,
+              isAnimation
+            ),
+            500
+          );
+        } else {
+          doScrollIntoView(
+            scrollIntoView,
+            scrollIntoViewAlignment,
+            isAnimation
+          );
+        }
+      } else {
+        if (scrollY && typeof scrollTopProp === "number" && scrollTopProp !== container.current.scrollTop) {
+          if (isInit) {
+            setTimeout(() => scrollVertical(scrollTopProp, isAnimation), 10);
+          } else {
+            scrollVertical(scrollTopProp, isAnimation);
+          }
+        }
+        if (scrollX && typeof scrollLeftProp === "number" && scrollLeftProp !== container.current.scrollLeft) {
+          if (isInit) {
+            setTimeout(() => scrollHorizontal(scrollLeftProp, isAnimation), 10);
+          } else {
+            scrollHorizontal(scrollLeftProp, isAnimation);
+          }
+        }
+      }
+    },
+    [
+      scrollIntoView,
+      scrollY,
+      scrollTopProp,
+      scrollX,
+      scrollLeftProp,
+      scrollVertical,
+      scrollHorizontal,
+      scrollWithAnimation,
+      scrollIntoViewAlignment
+    ]
+  );
+  useEffect(() => {
+    handleScroll(true);
+  }, []);
+  useEffect(() => {
+    handleScroll();
+  }, [
+    scrollIntoView,
+    scrollY,
+    scrollTopProp,
+    scrollX,
+    scrollLeftProp,
+    handleScroll
+  ]);
+  const upperAndLower = (e) => {
+    if (!container.current)
+      return;
+    const {
+      offsetWidth,
+      offsetHeight,
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    } = container.current;
+    if (onScrollToLower && (scrollY && offsetHeight + scrollTop + Number(lowerThreshold) >= scrollHeight || scrollX && offsetWidth + scrollLeft + Number(lowerThreshold) >= scrollWidth)) {
+      if (upperLowerStatus.current !== -1)
+        onScrollToLower(e);
+      upperLowerStatus.current = -1;
+    } else if (onScrollToUpper && (scrollY && scrollTop <= Number(upperThreshold) || scrollX && scrollLeft <= Number(upperThreshold))) {
+      if (upperLowerStatus.current !== 1)
+        onScrollToUpper(e);
+      upperLowerStatus.current = 1;
+    } else {
+      upperLowerStatus.current = 0;
+    }
+  };
+  const onScrollHandler = (e) => {
+    const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = container.current;
+    Object.defineProperty(e, "detail", {
+      enumerable: true,
+      writable: true,
+      value: {
+        scrollLeft,
+        scrollTop,
+        scrollHeight,
+        scrollWidth
+      }
+    });
+    upperAndLower(e);
+    onScroll == null ? void 0 : onScroll(e);
+  };
+  const onTouchMoveHandler = (e) => {
+    var _a2;
+    (_a2 = propsOnTouchMove || onTouchMove) == null ? void 0 : _a2(e);
+  };
+  const getRootProps = useCallback(
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues(__spreadValues({}, otherProps), rootHandlers), {
+        ref: handleRef,
+        onScroll: onScrollHandler,
+        onTouchMove: onTouchMoveHandler
+      });
+    },
+    [otherProps, handleRef, onScrollHandler, onTouchMoveHandler]
+  );
+  return {
+    getRootProps,
+    containerRef: handleRef
+  };
+}
+export {
+  useScrollView
+};

package/es/Select/Select.js

@@ -29,13 +29,32 @@ 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";
@@ -100,38 +119,36 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const isOpen = open !== void 0 ? open : internalOpen;
   const locatorRef = useRef(null);
   const rootRef = useForkRef(ref, locatorRef);
-  const ttId = useUniqueId();
-  const dataId = `${prefixCls}-tt-${ttId}`;
-  const updateOptionStyle = throttle(() => {
+  const optionContainerRef = useRef(null);
+  const optionMainRef = useRef(null);
+  const updateOptionStyle = () => __async(void 0, null, function* () {
     const curScrollRoot = scrollContainer();
-    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) => {
+    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 (newOpen) {
-      updateOptionStyle();
-      setTimeout(() => {
-        setInternalOpen(newOpen);
-        onOpen == null ? void 0 : onOpen();
-      }, 100);
+      yield updateOptionStyle();
+      setInternalOpen(newOpen);
+      onOpen == null ? void 0 : onOpen();
     } else {
       onClose == null ? void 0 : onClose();
       setInternalOpen(newOpen);
     }
-  };
+  });
   const handleSelectClick = (e) => {
     if (disabled)
       return;
@@ -156,10 +173,11 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
+    const resizeCb = throttle(updateOptionStyle, 100);
     if (!isMini) {
-      window.addEventListener("resize", updateOptionStyle);
+      window.addEventListener("resize", resizeCb);
       return () => {
-        window.removeEventListener("resize", updateOptionStyle);
+        window.removeEventListener("resize", resizeCb);
       };
     }
   }, []);
@@ -171,8 +189,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 150,
-          exit: 150
+          enter: 167,
+          exit: 167
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -186,7 +204,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          "data-id": dataId,
+          ref: optionContainerRef,
           style: optionStyle
         },
         /* @__PURE__ */ React.createElement(
@@ -195,11 +213,20 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 150,
-              exit: 150
+              enter: 167,
+              exit: 167
             }
           },
-          /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: clsx(`${prefixCls}-option-main`),
+              ref: optionMainRef,
+              role: "listbox",
+              "aria-label": "option list"
+            },
+            children
+          )
         )
       )
     );
@@ -211,7 +238,12 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref: rootRef
+      ref: rootRef,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": others["aria-label"] || "Select",
+      tabIndex: disabled ? -1 : 0
     }, others), {
       onClick: handleSelectClick
     }),
@@ -221,15 +253,16 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         name,
         readOnly: true,
         ref: inputRef,
-        value: selectValue
+        value: selectValue,
+        "aria-hidden": "true",
+        tabIndex: -1
       }, inputProps), {
         className: clsx(`${prefixCls}-input`, {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), icon || defaultIcon),
-    isMini && renderOptions()
-  ), !isMini && /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
+    ), icon || defaultIcon)
+  ), /* @__PURE__ */ React.createElement(Portal, { onMounted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,

package/es/Select/SelectOption.js

@@ -53,7 +53,11 @@ const SelectOption = /* @__PURE__ */ React.forwardRef(
           [`${prefixCls}-active`]: !disabled && value === selectValue,
           [`${prefixCls}-disabled`]: disabled
         }),
-        ref
+        ref,
+        role: "option",
+        "aria-selected": !disabled && value === selectValue,
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0
       }, others), {
         onClick: (e) => {
           if (!disabled)

package/es/Select/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState } from "react";
+import Select from "../../Select";
+import SelectOption from "../../SelectOption";
+const basicSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u8BF7\u9009\u62E9\u9009\u9879", "aria-label": "\u57FA\u7840\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")));
+};
+const ControlledSelectDemo = () => {
+  const [value, setValue] = useState("option1");
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      value,
+      placeholder: "\u53D7\u63A7\u9009\u62E9\u5668",
+      "aria-label": "\u53D7\u63A7\u9009\u62E9\u5668",
+      onChange: (e, { value: newValue }) => {
+        setValue(newValue);
+        console.log("\u9009\u4E2D\u503C:", newValue);
+      }
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ), /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D\u503C: ", value));
+};
+const disabledSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { disabled: true, placeholder: "\u7981\u7528\u7684\u9009\u62E9\u5668", "aria-label": "\u7981\u7528\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C")));
+};
+const selectWithDisabledOptionsDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u5305\u542B\u7981\u7528\u9009\u9879", "aria-label": "\u5305\u542B\u7981\u7528\u9009\u9879\u7684\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C", disabled: true }, "\u9009\u9879\u4E8C\uFF08\u7981\u7528\uFF09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option4", label: "\u9009\u9879\u56DB", disabled: true }, "\u9009\u9879\u56DB\uFF08\u7981\u7528\uFF09")));
+};
+const defaultValueSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      defaultValue: "option2",
+      placeholder: "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668",
+      "aria-label": "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668"
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ));
+};
+const complexInteractionSelectDemo = () => {
+  const ComplexInteractionSelectDemo = () => {
+    const [value, setValue] = useState("");
+    const [options, setOptions] = useState([
+      { value: "option1", label: "\u9009\u9879\u4E00", disabled: false },
+      { value: "option2", label: "\u9009\u9879\u4E8C", disabled: false },
+      { value: "option3", label: "\u9009\u9879\u4E09", disabled: false }
+    ]);
+    const toggleOptionDisabled = (targetValue) => {
+      setOptions(
+        (prevOptions) => prevOptions.map(
+          (option) => option.value === targetValue ? __spreadProps(__spreadValues({}, option), { disabled: !option.disabled }) : option
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        value,
+        placeholder: "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        "aria-label": "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        onChange: (e, { value: newValue }) => {
+          setValue(newValue);
+        }
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(
+        SelectOption,
+        {
+          key: option.value,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => toggleOptionDisabled("option2") }, "\u5207\u6362\u9009\u9879\u4E8C\u72B6\u6001")), value && /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D: ", value));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionSelectDemo, null);
+};
+var A11yDemos_default = {
+  basicSelectDemo,
+  ControlledSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo,
+  defaultValueSelectDemo,
+  complexInteractionSelectDemo
+};
+export {
+  ControlledSelectDemo,
+  basicSelectDemo,
+  complexInteractionSelectDemo,
+  A11yDemos_default as default,
+  defaultValueSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo
+};

package/es/Select/index.css

@@ -8,9 +8,10 @@ xhs-page {
   --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-margin: 2px 3px;
   --bui-select-option-height: 32px;
   --bui-select-option-active-bg-color: #fff2f0;
+  --bui-select-option-hover-bg-color: rgba(255, 242, 240, 0.4);
 }
 .bui-select {
   position: relative;
@@ -58,13 +59,9 @@ xhs-page {
 .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;
 }
@@ -81,18 +78,22 @@ xhs-page {
   border-radius: 3px;
   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 {
-  display: flex;
-  align-items: center;
   height: var(--bui-select-option-height);
+  line-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);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bui-select-option:hover {
-  background-color: var(--bui-select-option-active-bg-color);
+  background-color: var(--bui-select-option-hover-bg-color);
   color: var(--bui-color-primary);
 }
 .bui-select-option-active {
@@ -100,6 +101,9 @@ xhs-page {
   color: var(--bui-color-primary);
   background-color: var(--bui-select-option-active-bg-color);
 }
+.bui-select-option-active:hover {
+  background-color: var(--bui-select-option-active-bg-color);
+}
 .bui-select-option-hide {
   opacity: 0;
   transform: translateY(-5px);

package/es/Slide/Slide.js

@@ -93,7 +93,7 @@ const Slide = /* @__PURE__ */ React.forwardRef(
         ref: nodeRef
       }),
       (state, childProps) => {
-        const transition = transitions.create(
+        const transition = state === "entering" || state === "exiting" ? transitions.create(
           "transform",
           getTransitionProps(
             { timeout, style, easing: easingProp, delay },
@@ -101,7 +101,7 @@ const Slide = /* @__PURE__ */ React.forwardRef(
               mode: state
             }
           )
-        );
+        ) : "none";
         const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
         return React.cloneElement(children, __spreadValues({
           style: __spreadValues(__spreadValues({