antd-mobile 5.41.1 → 5.42.0-alpha.1

package/2x/bundle/antd-mobile.cjs.development.js

@@ -23207,7 +23207,6 @@ const NumberKeyboard = (p) => {
   };
   const onKeyPress = (e2, key) => {
     var _a, _b;
-    e2.preventDefault();
     switch (key) {
       case "BACKSPACE":
         onDelete === null || onDelete === void 0 ? void 0 : onDelete();
@@ -23245,39 +23244,51 @@ const NumberKeyboard = (p) => {
       tabIndex: -1
     }, React$3.createElement(DownOutline, null)));
   };
+  const onBackspaceTouchStart = () => {
+    stopContinueClear();
+    startContinueClear();
+  };
+  const onBackspaceTouchEnd = (e2) => {
+    e2.preventDefault();
+    stopContinueClear();
+    onKeyPress(e2, "BACKSPACE");
+  };
   const renderKey = (key, index2) => {
-    const isNumberKey = /^\d$/.test(key);
-    const isBackspace = key === "BACKSPACE";
+    const keyConfig = typeof key === "string" ? {
+      key,
+      title: key
+    } : key;
+    const realKey = keyConfig.key;
+    const isNumberKey = /^\d$/.test(realKey);
+    const isBackspace = realKey === "BACKSPACE";
+    const title2 = isBackspace ? locale.Input.clear : keyConfig.title;
     const className = classNames(`${classPrefix$x}-key`, {
       [`${classPrefix$x}-key-number`]: isNumberKey,
-      [`${classPrefix$x}-key-sign`]: !isNumberKey && key,
+      [`${classPrefix$x}-key-sign`]: !isNumberKey && realKey,
       [`${classPrefix$x}-key-mid`]: index2 === 9 && !!confirmText && keys2.length < 12
     });
-    const ariaProps = key ? {
+    const ariaProps = realKey ? {
       role: "button",
-      title: isBackspace ? locale.Input.clear : key,
+      title: title2,
+      "aria-label": title2,
       tabIndex: -1
     } : void 0;
     return React$3.createElement("div", Object.assign({
-      key,
+      key: realKey,
       className,
       // 仅为  backspace 绑定，支持长按快速删除
-      onTouchStart: isBackspace ? () => {
-        stopContinueClear();
-        startContinueClear();
-      } : void 0,
-      onTouchEnd: isBackspace ? (e2) => {
-        stopContinueClear();
-        onKeyPress(e2, key);
-      } : void 0,
+      onTouchStart: isBackspace ? onBackspaceTouchStart : void 0,
+      onTouchEnd: isBackspace ? onBackspaceTouchEnd : void 0,
+      onTouchCancel: isBackspace ? stopContinueClear : void 0,
       // <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
       // see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
-      // 所以还是绑定 click，通过 touchEnd 的 preventDefault 防重复触发
+      // 所以普通按钮绑定 click 事件，而 backspace 仍然额外绑定 touch 事件支持长按删除
+      // backspace touchend 时会 preventDefault 阻止其后续 click 事件
       onClick: (e2) => {
         stopContinueClear();
-        onKeyPress(e2, key);
+        onKeyPress(e2, realKey);
       }
-    }, ariaProps), isBackspace ? React$3.createElement(TextDeletionOutline, null) : key);
+    }, ariaProps), isBackspace ? React$3.createElement(TextDeletionOutline, null) : realKey);
   };
   return React$3.createElement(Popup, {
     visible,
@@ -23291,10 +23302,7 @@ const NumberKeyboard = (p) => {
     forceRender: props.forceRender
   }, withNativeProps(props, React$3.createElement("div", {
     ref: keyboardRef,
-    className: classPrefix$x,
-    onMouseDown: (e2) => {
-      e2.preventDefault();
-    }
+    className: classPrefix$x
   }, renderHeader(), React$3.createElement("div", {
     className: `${classPrefix$x}-wrapper`
   }, React$3.createElement("div", {
@@ -23305,13 +23313,9 @@ const NumberKeyboard = (p) => {
     className: `${classPrefix$x}-confirm`
   }, React$3.createElement("div", {
     className: `${classPrefix$x}-key ${classPrefix$x}-key-extra ${classPrefix$x}-key-bs`,
-    onTouchStart: () => {
-      startContinueClear();
-    },
-    onTouchEnd: (e2) => {
-      stopContinueClear();
-      onKeyPress(e2, "BACKSPACE");
-    },
+    onTouchStart: onBackspaceTouchStart,
+    onTouchEnd: onBackspaceTouchEnd,
+    onTouchCancel: stopContinueClear,
     onClick: (e2) => {
       stopContinueClear();
       onKeyPress(e2, "BACKSPACE");
@@ -27595,6 +27599,20 @@ const Multiple = (p) => {
 const index = attachPropertiesToComponent(TreeSelect, {
   Multiple
 });
+function useClickOutside(handler, ref2) {
+  React$3.useEffect(() => {
+    function handleClick(event) {
+      if (!ref2.current || ref2.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    }
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [handler, ref2]);
+}
 const classPrefix$2 = "adm-virtual-input";
 const defaultProps$2 = {
   defaultValue: "",
@@ -27622,15 +27640,10 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
   const touchMoveTimeoutRef = React$3.useRef();
   const clearIcon = mergeProp(React$3.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
-    const root2 = rootRef.current;
-    if (!root2)
-      return;
-    if (document.activeElement !== root2) {
-      return;
-    }
     const content = contentRef.current;
-    if (!content)
+    if (!content) {
       return;
+    }
     content.scrollLeft = content.clientWidth;
   }
   React$3.useEffect(() => {
@@ -27660,23 +27673,31 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
   React$3.useImperativeHandle(ref2, () => ({
     focus: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     blur: () => {
       var _a;
-      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      setBlur();
     }
   }));
-  function onFocus() {
+  function setFocus() {
     var _a;
+    if (hasFocus)
+      return;
     setHasFocus(true);
     (_a = mergedProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
-  function onBlur() {
+  function setBlur() {
     var _a;
+    if (!hasFocus)
+      return;
     setHasFocus(false);
     (_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
   }
+  useClickOutside(() => {
+    setBlur();
+  }, rootRef);
   const keyboard = mergedProps.keyboard;
   const keyboardElement = keyboard && React$3.cloneElement(keyboard, {
     onInput: (v) => {
@@ -27703,23 +27724,19 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
     },
     visible: hasFocus,
     onClose: () => {
-      var _a, _b, _c, _d;
-      const activeElement = document.activeElement;
-      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
-        activeElement.blur();
-      } else {
-        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-      }
-      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
+      var _a, _b;
+      setBlur();
+      (_b = (_a = keyboard.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     },
     getContainer: null
   });
-  const setCaretPositionToEnd = () => {
-    var _a, _b;
+  const setCaretPositionToEnd = (e2) => {
+    var _a, _b, _c;
     if (caretPosition !== value.length) {
       setCaretPosition(value.length);
       (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
     }
+    (_c = mergedProps.onClick) === null || _c === void 0 ? void 0 : _c.call(mergedProps, e2);
   };
   const changeCaretPosition = (index2) => (e2) => {
     var _a, _b, _c;
@@ -27786,23 +27803,27 @@ const VirtualInput = React$3.forwardRef((props, ref2) => {
     ref: rootRef,
     className: classNames(classPrefix$2, {
       [`${classPrefix$2}-disabled`]: mergedProps.disabled,
-      [`${classPrefix$2}-caret-dragging`]: isCaretDragging
-    }),
-    tabIndex: mergedProps.disabled ? void 0 : 0,
-    role: "textbox",
-    onFocus,
-    onBlur,
-    onClick: mergedProps.onClick
+      [`${classPrefix$2}-caret-dragging`]: isCaretDragging,
+      [`${classPrefix$2}-focused`]: hasFocus
+    })
   }, React$3.createElement("div", {
     className: `${classPrefix$2}-content`,
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
-    "aria-label": mergedProps.placeholder,
+    "aria-label": value || mergedProps.placeholder,
+    role: "textbox",
+    tabIndex: mergedProps.disabled ? void 0 : 0,
+    // note: 这里增加 onFocus 有两个目的：
+    // 1. 在安卓 talkback 模式下，role=textbox 的元素双击后只会触发 focus 而非 click
+    // 2. 处理 content 框点击、单个字符点击时，不用再额外处理 focus 逻辑，因为 focus 事件会先触发
+    onFocus: setFocus,
     onClick: setCaretPositionToEnd,
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd
-  }, chars.slice(0, caretPosition).map((i2, index2) => React$3.createElement("span", {
+  }, React$3.createElement("span", {
+    className: `${classPrefix$2}-trap`
+  }), chars.slice(0, caretPosition).map((i2, index2) => React$3.createElement("span", {
     ref: index2 === 0 ? charRef : void 0,
     key: index2,
     onClick: changeCaretPosition(index2)