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

package/dist/ScrollView/useScrollView.js

@@ -0,0 +1,300 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useScrollView_exports = {};
+__export(useScrollView_exports, {
+  useScrollView: () => useScrollView
+});
+module.exports = __toCommonJS(useScrollView_exports);
+var import_utils = require("@bifrostui/utils");
+var import_react = require("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 = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, container);
+  const upperLowerStatus = (0, import_react.useRef)(0);
+  const onTouchMove = (_e) => {
+  };
+  const scrollVertical = (0, import_react.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 = (0, import_react.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 = (0, import_react.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
+    ]
+  );
+  (0, import_react.useEffect)(() => {
+    handleScroll(true);
+  }, []);
+  (0, import_react.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 = (0, import_react.useCallback)(
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues(__spreadValues({}, otherProps), rootHandlers), {
+        ref: handleRef,
+        onScroll: onScrollHandler,
+        onTouchMove: onTouchMoveHandler
+      });
+    },
+    [otherProps, handleRef, onScrollHandler, onTouchMoveHandler]
+  );
+  return {
+    getRootProps,
+    containerRef: handleRef
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScrollView
+});

package/dist/Select/Select.js

@@ -54,6 +54,26 @@ 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
@@ -123,38 +143,36 @@ 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 ttId = (0, import_utils.useUniqueId)();
-  const dataId = `${prefixCls}-tt-${ttId}`;
-  const updateOptionStyle = (0, import_utils.throttle)(() => {
+  const optionContainerRef = (0, import_react.useRef)(null);
+  const optionMainRef = (0, import_react.useRef)(null);
+  const updateOptionStyle = () => __async(void 0, null, function* () {
     const curScrollRoot = scrollContainer();
-    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) => {
+    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 (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;
@@ -179,10 +197,11 @@ 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", updateOptionStyle);
+      window.addEventListener("resize", resizeCb);
       return () => {
-        window.removeEventListener("resize", updateOptionStyle);
+        window.removeEventListener("resize", resizeCb);
       };
     }
   }, []);
@@ -194,8 +213,8 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 150,
-          exit: 150
+          enter: 167,
+          exit: 167
         }
       },
       /* @__PURE__ */ import_react.default.createElement(
@@ -209,7 +228,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          "data-id": dataId,
+          ref: optionContainerRef,
           style: optionStyle
         },
         /* @__PURE__ */ import_react.default.createElement(
@@ -218,11 +237,20 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 150,
-              exit: 150
+              enter: 167,
+              exit: 167
             }
           },
-          /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-option-main`) }, children)
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_clsx.default)(`${prefixCls}-option-main`),
+              ref: optionMainRef,
+              role: "listbox",
+              "aria-label": "option list"
+            },
+            children
+          )
         )
       )
     );
@@ -234,7 +262,12 @@ const Select = /* @__PURE__ */ import_react.default.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
     }),
@@ -244,15 +277,16 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         name,
         readOnly: true,
         ref: inputRef,
-        value: selectValue
+        value: selectValue,
+        "aria-hidden": "true",
+        tabIndex: -1
       }, inputProps), {
         className: (0, import_clsx.default)(`${prefixCls}-input`, {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), 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(
+    ), icon || defaultIcon)
+  ), /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onMounted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ import_react.default.createElement(
     import_Backdrop.default,
     __spreadProps(__spreadValues({
       open: isOpen,

package/dist/Select/SelectOption.js

@@ -83,7 +83,11 @@ const SelectOption = /* @__PURE__ */ import_react.default.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/dist/Select/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,154 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ControlledSelectDemo: () => ControlledSelectDemo,
+  basicSelectDemo: () => basicSelectDemo,
+  complexInteractionSelectDemo: () => complexInteractionSelectDemo,
+  default: () => A11yDemos_default,
+  defaultValueSelectDemo: () => defaultValueSelectDemo,
+  disabledSelectDemo: () => disabledSelectDemo,
+  selectWithDisabledOptionsDemo: () => selectWithDisabledOptionsDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Select = __toESM(require("../../Select"));
+var import_SelectOption = __toESM(require("../../SelectOption"));
+const basicSelectDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Select.default, { placeholder: "\u8BF7\u9009\u62E9\u9009\u9879", "aria-label": "\u57FA\u7840\u9009\u62E9\u5668" }, /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")));
+};
+const ControlledSelectDemo = () => {
+  const [value, setValue] = (0, import_react.useState)("option1");
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Select.default,
+    {
+      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__ */ import_react.default.createElement(import_SelectOption.default, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ), /* @__PURE__ */ import_react.default.createElement("p", null, "\u5F53\u524D\u9009\u4E2D\u503C: ", value));
+};
+const disabledSelectDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Select.default, { disabled: true, placeholder: "\u7981\u7528\u7684\u9009\u62E9\u5668", "aria-label": "\u7981\u7528\u9009\u62E9\u5668" }, /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C")));
+};
+const selectWithDisabledOptionsDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Select.default, { placeholder: "\u5305\u542B\u7981\u7528\u9009\u9879", "aria-label": "\u5305\u542B\u7981\u7528\u9009\u9879\u7684\u9009\u62E9\u5668" }, /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option2", label: "\u9009\u9879\u4E8C", disabled: true }, "\u9009\u9879\u4E8C\uFF08\u7981\u7528\uFF09"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09"), /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option4", label: "\u9009\u9879\u56DB", disabled: true }, "\u9009\u9879\u56DB\uFF08\u7981\u7528\uFF09")));
+};
+const defaultValueSelectDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Select.default,
+    {
+      defaultValue: "option2",
+      placeholder: "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668",
+      "aria-label": "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ import_react.default.createElement(import_SelectOption.default, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ));
+};
+const complexInteractionSelectDemo = () => {
+  const ComplexInteractionSelectDemo = () => {
+    const [value, setValue] = (0, import_react.useState)("");
+    const [options, setOptions] = (0, import_react.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__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_Select.default,
+      {
+        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__ */ import_react.default.createElement(
+        import_SelectOption.default,
+        {
+          key: option.value,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => toggleOptionDisabled("option2") }, "\u5207\u6362\u9009\u9879\u4E8C\u72B6\u6001")), value && /* @__PURE__ */ import_react.default.createElement("p", null, "\u5F53\u524D\u9009\u4E2D: ", value));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ComplexInteractionSelectDemo, null);
+};
+var A11yDemos_default = {
+  basicSelectDemo,
+  ControlledSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo,
+  defaultValueSelectDemo,
+  complexInteractionSelectDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlledSelectDemo,
+  basicSelectDemo,
+  complexInteractionSelectDemo,
+  defaultValueSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo
+});