antd-mobile 5.40.0 → 5.41.0-alpha.0

package/2x/bundle/style.css

@@ -5751,7 +5751,6 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
 }
 
 .adm-virtual-input:focus .adm-virtual-input-caret {
-  display: block;
   animation-name: adm-caret-blink;
   animation-duration: 1s;
   animation-timing-function: linear;
@@ -5762,6 +5761,10 @@ a.adm-list-item:active:not(.adm-list-item-disabled):after {
   color: var(--disabled-color);
 }
 
+.adm-virtual-input-caret-dragging .adm-virtual-input-caret {
+  animation: none!important;
+}
+
 @keyframes adm-caret-blink {
   0% {
     opacity: 1;

package/2x/cjs/components/date-picker/date-picker-week-utils.js

@@ -100,6 +100,7 @@ function convertStringArrayToDate(value) {
   const yearString = (_a = value[0]) !== null && _a !== void 0 ? _a : '1900';
   const weekString = (_b = value[1]) !== null && _b !== void 0 ? _b : '1';
   const weekdayString = (_c = value[2]) !== null && _c !== void 0 ? _c : '1';
-  const day = (0, _dayjs.default)(`${parseInt(yearString)}-01-01`).isoWeek(parseInt(weekString)).isoWeekday(parseInt(weekdayString)).hour(0).minute(0).second(0);
+  // See https://github.com/ant-design/ant-design-mobile/issues/6905
+  const day = (0, _dayjs.default)(`${parseInt(yearString)}-01-04`).isoWeek(parseInt(weekString)).isoWeekday(parseInt(weekdayString)).hour(0).minute(0).second(0);
   return day.toDate();
 }

package/2x/cjs/components/ellipsis/ellipsis.d.ts

@@ -11,5 +11,8 @@ export declare type EllipsisProps = {
     stopPropagationForActionButtons?: PropagationEvent[];
     onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     defaultExpanded?: boolean;
+    onExpand?: (expanded: boolean, info: {
+        event: React.MouseEvent<HTMLAnchorElement, MouseEvent>;
+    }) => void;
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

package/2x/cjs/components/ellipsis/ellipsis.js

@@ -39,13 +39,21 @@ const Ellipsis = p => {
   // ========================== Expanded ==========================
   const [expanded, setExpanded] = _react.default.useState(defaultExpanded);
   const expandNode = expandText ? (0, _withStopPropagation.withStopPropagation)(stopPropagationForActionButtons, _react.default.createElement("a", {
-    onClick: () => {
+    onClick: e => {
+      var _a;
       setExpanded(true);
+      (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, true, {
+        event: e
+      });
     }
   }, expandText)) : null;
   const collapseNode = collapseText ? (0, _withStopPropagation.withStopPropagation)(stopPropagationForActionButtons, _react.default.createElement("a", {
-    onClick: () => {
+    onClick: e => {
+      var _a;
       setExpanded(false);
+      (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, false, {
+        event: e
+      });
     }
   }, collapseText)) : null;
   // ========================== Ellipsis ==========================

package/2x/cjs/components/swiper/swiper.js

@@ -279,7 +279,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
           className: `${classPrefix}-slide-placeholder`,
           style: {
-            width: `${startIndex * 100}%`
+            [isVertical ? 'height' : 'width']: `${startIndex * 100}%`
           }
         }), items);
       }

package/2x/cjs/components/tabs/tabs.js

@@ -4,22 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tabs = exports.Tab = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _web = require("@react-spring/web");
-var _nativeProps = require("../../utils/native-props");
-var _usePropsValue = require("../../utils/use-props-value");
-var _bound = require("../../utils/bound");
 var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _bound = require("../../utils/bound");
+var _nativeProps = require("../../utils/native-props");
+var _shouldRender = require("../../utils/should-render");
+var _traverseReactNode = require("../../utils/traverse-react-node");
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
 var _useMutationEffect = require("../../utils/use-mutation-effect");
+var _usePropsValue = require("../../utils/use-props-value");
 var _useResizeEffect = require("../../utils/use-resize-effect");
 var _withDefaultProps = require("../../utils/with-default-props");
-var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
-var _shouldRender = require("../../utils/should-render");
-var _traverseReactNode = require("../../utils/traverse-react-node");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const classPrefix = `adm-tabs`;
 const Tab = () => {
   return null;
@@ -35,6 +35,7 @@ const Tabs = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const tabListContainerRef = (0, _react.useRef)(null);
   const activeLineRef = (0, _react.useRef)(null);
+  const tabRefs = (0, _react.useRef)({});
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
@@ -176,7 +177,7 @@ const Tabs = p => {
   });
   const {
     run: updateMask
-  } = (0, _ahooks.useThrottleFn)((immediate = false) => {
+  } = (0, _ahooks.useThrottleFn)(immediate => {
     const container = tabListContainerRef.current;
     if (!container) return;
     const scrollLeft = container.scrollLeft;
@@ -207,6 +208,34 @@ const Tabs = p => {
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     updateMask(true);
   }, []);
+  const handleKeyDown = e => {
+    const keys = Object.keys(keyToIndexRecord);
+    const currentIndex = keyToIndexRecord[activeKey];
+    const isNext = isRTL ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
+    const isPrev = isRTL ? e.key === 'ArrowRight' : e.key === 'ArrowLeft';
+    const offsetDirection = isNext ? 1 : -1;
+    const findNextEnabledTab = (startIndex, direction) => {
+      const length = keys.length;
+      for (let i = 0; i < length; i++) {
+        const index = (startIndex + direction * (i + 1) + length) % length;
+        const key = keys[index];
+        const pane = panes.find(p => p.key === key);
+        if (!(pane === null || pane === void 0 ? void 0 : pane.props.disabled)) return key;
+      }
+      return keys[startIndex];
+    };
+    const currentKey = findNextEnabledTab(currentIndex, offsetDirection);
+    if (isNext || isPrev) {
+      e.preventDefault();
+      setActiveKey(currentKey);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    var _a;
+    if (activeKey && tabRefs.current[activeKey]) {
+      (_a = tabRefs.current[activeKey]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [activeKey]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix,
     style: {
@@ -229,6 +258,7 @@ const Tabs = p => {
     ref: tabListContainerRef,
     scrollLeft: scrollLeft,
     onScroll: updateMask,
+    onKeyDown: handleKeyDown,
     role: 'tablist'
   }, _react.default.createElement(_web.animated.div, {
     ref: activeLineRef,
@@ -243,6 +273,10 @@ const Tabs = p => {
       [`${classPrefix}-tab-wrapper-stretch`]: props.stretch
     })
   }, _react.default.createElement("div", {
+    role: 'tab',
+    "aria-selected": pane.key === activeKey,
+    tabIndex: pane.key === activeKey ? 0 : -1,
+    ref: el => tabRefs.current[pane.key] = el,
     onClick: () => {
       const {
         key
@@ -256,9 +290,7 @@ const Tabs = p => {
     className: (0, _classnames.default)(`${classPrefix}-tab`, {
       [`${classPrefix}-tab-active`]: pane.key === activeKey,
       [`${classPrefix}-tab-disabled`]: pane.props.disabled
-    }),
-    role: 'tab',
-    "aria-selected": pane.key === activeKey
+    })
   }, pane.props.title)))))), panes.map(pane => {
     if (pane.props.children === undefined) {
       return null;

package/2x/cjs/components/virtual-input/virtual-input.css

@@ -73,7 +73,6 @@
 }
 
 .adm-virtual-input:focus .adm-virtual-input-caret {
-  display: block;
   animation-name: adm-caret-blink;
   animation-duration: 1s;
   animation-timing-function: linear;
@@ -84,6 +83,10 @@
   color: var(--disabled-color);
 }
 
+.adm-virtual-input-caret-dragging .adm-virtual-input-caret {
+  animation: none !important;
+}
+
 @keyframes adm-caret-blink {
   from {
     opacity: 1;

package/2x/cjs/components/virtual-input/virtual-input.d.ts

@@ -3,6 +3,10 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { InputProps } from '../input';
 import { NumberKeyboardProps } from '../number-keyboard';
+export declare type Cursor = {
+    movable?: boolean;
+    onMove?: (position: number) => void;
+};
 export declare type VirtualInputProps = {
     onFocus?: () => void;
     onBlur?: () => void;
@@ -10,6 +14,7 @@ export declare type VirtualInputProps = {
     keyboard?: ReactElement<NumberKeyboardProps>;
     clearable?: boolean;
     onClear?: () => void;
+    cursor?: Cursor;
 } & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled' | 'clearIcon'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
 export declare type VirtualInputRef = {
     focus: () => void;
@@ -22,6 +27,7 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
+    cursor?: Cursor | undefined;
 } & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder" | "clearIcon"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;

package/2x/cjs/components/virtual-input/virtual-input.js

@@ -17,7 +17,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
-  defaultValue: ''
+  defaultValue: '',
+  cursor: {
+    movable: false
+  }
 };
 const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   const {
@@ -30,6 +33,13 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   const contentRef = (0, _react.useRef)(null);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const [caretPosition, setCaretPosition] = (0, _react.useState)(value.length); // 光标位置，从 0 开始，如值是 2 则表示光标在顺序下标为 2 的数字之前
+  const keyboardDataRef = (0, _react.useRef)({}); // 临时记录虚拟键盘输入，在下次更新时用于判断光标位置如何调整
+  const touchDataRef = (0, _react.useRef)(); // 记录上一次 touch 时的坐标位置
+  const charRef = (0, _react.useRef)(null); // 第一个字符的 DOM
+  const charWidthRef = (0, _react.useRef)(0); // 单个字符宽度
+  const caretRef = (0, _react.useRef)(null); // 光标的 DOM
+  const [isCaretDragging, setIsCaretDragging] = (0, _react.useState)(false);
+  const touchMoveTimeoutRef = (0, _react.useRef)();
   const clearIcon = (0, _withDefaultProps.mergeProp)(_react.default.createElement(_antdMobileIcons.CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
     const root = rootRef.current;
@@ -41,6 +51,24 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     if (!content) return;
     content.scrollLeft = content.clientWidth;
   }
+  (0, _react.useEffect)(() => {
+    // 记录单个字符的宽度，用于光标移动时的计算
+    if (charRef.current) {
+      charWidthRef.current = charRef.current.getBoundingClientRect().width;
+    }
+  }, [value]);
+  (0, _react.useEffect)(() => {
+    // 经过外部受控逻辑后，再调整光标位置，如果受控逻辑改动了值则光标放到最后
+    if (value === keyboardDataRef.current.newValue) {
+      if (keyboardDataRef.current.mode === 'input') {
+        setCaretPosition(c => c + 1);
+      } else if (keyboardDataRef.current.mode === 'delete') {
+        setCaretPosition(c => c - 1);
+      }
+    } else {
+      setCaretPosition(value.length);
+    }
+  }, [value]);
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     scrollToEnd();
   }, [value]);
@@ -74,16 +102,24 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     onInput: v => {
       var _a, _b;
       const newValue = value.substring(0, caretPosition) + v + value.substring(caretPosition);
+      // 临时记录，用于后续光标位置
+      keyboardDataRef.current = {
+        newValue,
+        mode: 'input'
+      };
       setValue(newValue);
-      setCaretPosition(c => c + 1);
       (_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
     },
     onDelete: () => {
       var _a, _b;
       if (caretPosition === 0) return;
       const newValue = value.substring(0, caretPosition - 1) + value.substring(caretPosition);
+      // 临时记录，用于后续光标位置
+      keyboardDataRef.current = {
+        newValue,
+        mode: 'delete'
+      };
       setValue(newValue);
-      setCaretPosition(caretPosition - 1);
       (_b = (_a = keyboard.props).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a);
     },
     visible: hasFocus,
@@ -103,23 +139,80 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
   });
   // 点击输入框时，将光标置于最后
   const setCaretPositionToEnd = () => {
-    setCaretPosition(value.length);
+    var _a, _b;
+    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);
+    }
   };
   // 点击单个字符时，根据点击位置置于字符前或后
   const changeCaretPosition = index => e => {
+    var _a, _b, _c;
+    if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
     e.stopPropagation();
     const rect = e.target.getBoundingClientRect();
     const midX = rect.left + rect.width / 2;
     const clickX = e.clientX;
     // 点击区域是否偏右
     const isRight = clickX > midX;
-    setCaretPosition(isRight ? index + 1 : index);
+    const newCaretPosition = isRight ? index + 1 : index;
+    setCaretPosition(newCaretPosition);
+    (_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
+  };
+  // 在光标附近 touchmove 时也可以调整光标位置
+  const handleTouchStart = e => {
+    var _a;
+    if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
+    if (!caretRef.current) return;
+    const touch = e.touches[0];
+    const caretRect = caretRef.current.getBoundingClientRect();
+    const distance = Math.abs(touch.clientX - (caretRect.left + caretRect.width / 2));
+    if (distance < 20) {
+      // 20px 阈值可调整
+      touchDataRef.current = {
+        startX: touch.clientX,
+        startCaretPosition: caretPosition
+      };
+    } else {
+      touchDataRef.current = null;
+    }
+  };
+  const handleTouchMove = e => {
+    var _a, _b, _c;
+    if (!touchDataRef.current || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
+    setIsCaretDragging(true);
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchDataRef.current.startX;
+    const charWidth = charWidthRef.current;
+    const moveChars = Math.round(deltaX / charWidth);
+    let newCaretPosition = touchDataRef.current.startCaretPosition + moveChars;
+    // 边界处理
+    newCaretPosition = Math.max(0, Math.min(newCaretPosition, value.length));
+    setCaretPosition(newCaretPosition);
+    (_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
+    // 防止 touchend 不触发
+    if (touchMoveTimeoutRef.current) {
+      clearTimeout(touchMoveTimeoutRef.current);
+    }
+    touchMoveTimeoutRef.current = setTimeout(() => {
+      setIsCaretDragging(false);
+      touchMoveTimeoutRef.current = null;
+    }, 500);
+  };
+  const handleTouchEnd = () => {
+    touchDataRef.current = null;
+    setIsCaretDragging(false);
+    if (touchMoveTimeoutRef.current) {
+      clearTimeout(touchMoveTimeoutRef.current);
+      touchMoveTimeoutRef.current = null;
+    }
   };
   const chars = (value + '').split('');
   return (0, _nativeProps.withNativeProps)(mergedProps, _react.default.createElement("div", {
     ref: rootRef,
     className: (0, _classnames.default)(classPrefix, {
-      [`${classPrefix}-disabled`]: mergedProps.disabled
+      [`${classPrefix}-disabled`]: mergedProps.disabled,
+      [`${classPrefix}-caret-dragging`]: isCaretDragging
     }),
     tabIndex: mergedProps.disabled ? undefined : 0,
     role: 'textbox',
@@ -131,13 +224,18 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
     "aria-label": mergedProps.placeholder,
-    onClick: setCaretPositionToEnd
+    onClick: setCaretPositionToEnd,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
   }, chars.slice(0, caretPosition).map((i, index) => _react.default.createElement("span", {
+    ref: index === 0 ? charRef : undefined,
     key: index,
     onClick: changeCaretPosition(index)
   }, i)), _react.default.createElement("div", {
     className: `${classPrefix}-caret-container`
   }, hasFocus && _react.default.createElement("div", {
+    ref: caretRef,
     className: `${classPrefix}-caret`
   })), chars.slice(caretPosition).map((i, index) => _react.default.createElement("span", {
     key: index,
@@ -148,7 +246,6 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
       var _a;
       e.stopPropagation();
       setValue('');
-      setCaretPosition(0);
       (_a = mergedProps.onClear) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
     },
     role: 'button',

package/2x/es/components/date-picker/date-picker-week-utils.js

@@ -91,6 +91,7 @@ export function convertStringArrayToDate(value) {
   const yearString = (_a = value[0]) !== null && _a !== void 0 ? _a : '1900';
   const weekString = (_b = value[1]) !== null && _b !== void 0 ? _b : '1';
   const weekdayString = (_c = value[2]) !== null && _c !== void 0 ? _c : '1';
-  const day = dayjs(`${parseInt(yearString)}-01-01`).isoWeek(parseInt(weekString)).isoWeekday(parseInt(weekdayString)).hour(0).minute(0).second(0);
+  // See https://github.com/ant-design/ant-design-mobile/issues/6905
+  const day = dayjs(`${parseInt(yearString)}-01-04`).isoWeek(parseInt(weekString)).isoWeekday(parseInt(weekdayString)).hour(0).minute(0).second(0);
   return day.toDate();
 }

package/2x/es/components/ellipsis/ellipsis.d.ts

@@ -11,5 +11,8 @@ export declare type EllipsisProps = {
     stopPropagationForActionButtons?: PropagationEvent[];
     onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     defaultExpanded?: boolean;
+    onExpand?: (expanded: boolean, info: {
+        event: React.MouseEvent<HTMLAnchorElement, MouseEvent>;
+    }) => void;
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

package/2x/es/components/ellipsis/ellipsis.js

@@ -32,13 +32,21 @@ export const Ellipsis = p => {
   // ========================== Expanded ==========================
   const [expanded, setExpanded] = React.useState(defaultExpanded);
   const expandNode = expandText ? withStopPropagation(stopPropagationForActionButtons, React.createElement("a", {
-    onClick: () => {
+    onClick: e => {
+      var _a;
       setExpanded(true);
+      (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, true, {
+        event: e
+      });
     }
   }, expandText)) : null;
   const collapseNode = collapseText ? withStopPropagation(stopPropagationForActionButtons, React.createElement("a", {
-    onClick: () => {
+    onClick: e => {
+      var _a;
       setExpanded(false);
+      (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, false, {
+        event: e
+      });
     }
   }, collapseText)) : null;
   // ========================== Ellipsis ==========================

package/2x/es/components/swiper/swiper.js

@@ -270,7 +270,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         return React.createElement(React.Fragment, null, React.createElement("div", {
           className: `${classPrefix}-slide-placeholder`,
           style: {
-            width: `${startIndex * 100}%`
+            [isVertical ? 'height' : 'width']: `${startIndex * 100}%`
           }
         }), items);
       }

package/2x/es/components/tabs/tabs.js

@@ -1,16 +1,16 @@
-import React, { isValidElement, useRef } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+import { useIsomorphicLayoutEffect, useThrottleFn } from 'ahooks';
 import classNames from 'classnames';
-import { useSpring, animated } from '@react-spring/web';
-import { withNativeProps } from '../../utils/native-props';
-import { usePropsValue } from '../../utils/use-props-value';
+import React, { isValidElement, useEffect, useRef } from 'react';
 import { bound } from '../../utils/bound';
-import { useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
+import { withNativeProps } from '../../utils/native-props';
+import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
+import { usePropsValue } from '../../utils/use-props-value';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
-import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
-import { ShouldRender } from '../../utils/should-render';
-import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-tabs`;
 export const Tab = () => {
   return null;
@@ -25,6 +25,7 @@ export const Tabs = p => {
   const props = mergeProps(defaultProps, p);
   const tabListContainerRef = useRef(null);
   const activeLineRef = useRef(null);
+  const tabRefs = useRef({});
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
@@ -166,7 +167,7 @@ export const Tabs = p => {
   });
   const {
     run: updateMask
-  } = useThrottleFn((immediate = false) => {
+  } = useThrottleFn(immediate => {
     const container = tabListContainerRef.current;
     if (!container) return;
     const scrollLeft = container.scrollLeft;
@@ -197,6 +198,34 @@ export const Tabs = p => {
   useIsomorphicLayoutEffect(() => {
     updateMask(true);
   }, []);
+  const handleKeyDown = e => {
+    const keys = Object.keys(keyToIndexRecord);
+    const currentIndex = keyToIndexRecord[activeKey];
+    const isNext = isRTL ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
+    const isPrev = isRTL ? e.key === 'ArrowRight' : e.key === 'ArrowLeft';
+    const offsetDirection = isNext ? 1 : -1;
+    const findNextEnabledTab = (startIndex, direction) => {
+      const length = keys.length;
+      for (let i = 0; i < length; i++) {
+        const index = (startIndex + direction * (i + 1) + length) % length;
+        const key = keys[index];
+        const pane = panes.find(p => p.key === key);
+        if (!(pane === null || pane === void 0 ? void 0 : pane.props.disabled)) return key;
+      }
+      return keys[startIndex];
+    };
+    const currentKey = findNextEnabledTab(currentIndex, offsetDirection);
+    if (isNext || isPrev) {
+      e.preventDefault();
+      setActiveKey(currentKey);
+    }
+  };
+  useEffect(() => {
+    var _a;
+    if (activeKey && tabRefs.current[activeKey]) {
+      (_a = tabRefs.current[activeKey]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [activeKey]);
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     style: {
@@ -219,6 +248,7 @@ export const Tabs = p => {
     ref: tabListContainerRef,
     scrollLeft: scrollLeft,
     onScroll: updateMask,
+    onKeyDown: handleKeyDown,
     role: 'tablist'
   }, React.createElement(animated.div, {
     ref: activeLineRef,
@@ -233,6 +263,10 @@ export const Tabs = p => {
       [`${classPrefix}-tab-wrapper-stretch`]: props.stretch
     })
   }, React.createElement("div", {
+    role: 'tab',
+    "aria-selected": pane.key === activeKey,
+    tabIndex: pane.key === activeKey ? 0 : -1,
+    ref: el => tabRefs.current[pane.key] = el,
     onClick: () => {
       const {
         key
@@ -246,9 +280,7 @@ export const Tabs = p => {
     className: classNames(`${classPrefix}-tab`, {
       [`${classPrefix}-tab-active`]: pane.key === activeKey,
       [`${classPrefix}-tab-disabled`]: pane.props.disabled
-    }),
-    role: 'tab',
-    "aria-selected": pane.key === activeKey
+    })
   }, pane.props.title)))))), panes.map(pane => {
     if (pane.props.children === undefined) {
       return null;

package/2x/es/components/virtual-input/virtual-input.css

@@ -73,7 +73,6 @@
 }
 
 .adm-virtual-input:focus .adm-virtual-input-caret {
-  display: block;
   animation-name: adm-caret-blink;
   animation-duration: 1s;
   animation-timing-function: linear;
@@ -84,6 +83,10 @@
   color: var(--disabled-color);
 }
 
+.adm-virtual-input-caret-dragging .adm-virtual-input-caret {
+  animation: none !important;
+}
+
 @keyframes adm-caret-blink {
   from {
     opacity: 1;

package/2x/es/components/virtual-input/virtual-input.d.ts

@@ -3,6 +3,10 @@ import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { InputProps } from '../input';
 import { NumberKeyboardProps } from '../number-keyboard';
+export declare type Cursor = {
+    movable?: boolean;
+    onMove?: (position: number) => void;
+};
 export declare type VirtualInputProps = {
     onFocus?: () => void;
     onBlur?: () => void;
@@ -10,6 +14,7 @@ export declare type VirtualInputProps = {
     keyboard?: ReactElement<NumberKeyboardProps>;
     clearable?: boolean;
     onClear?: () => void;
+    cursor?: Cursor;
 } & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled' | 'clearIcon'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
 export declare type VirtualInputRef = {
     focus: () => void;
@@ -22,6 +27,7 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
+    cursor?: Cursor | undefined;
 } & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder" | "clearIcon"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;