Merge branch 'Tencent:develop' into fix/calendar

shumuuu · web-flow · commit b2252616dc9f · 2025-11-02T14:02:01.000+08:00
diff --git a/packages/components/date-picker/DatePicker.tsx b/packages/components/date-picker/DatePicker.tsx
@@ -153,7 +153,6 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     if (enableTimePicker) {
       setCacheValue(formatDate(date, { format }));
       if (props.needConfirm) return;
-      handlePopupInvisible();
       onChange(formatDate(date, { format, targetFormat: valueType }), {
         dayjsValue: parseToDayjs(date, format),
         trigger: 'pick',
diff --git a/packages/components/date-picker/DateRangePicker.tsx b/packages/components/date-picker/DateRangePicker.tsx
@@ -13,6 +13,8 @@ import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date
 import log from '@tdesign/common-js/log/index';
 import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useLatest from '../hooks/useLatest';
+import useUpdateEffect from '../hooks/useUpdateEffect';
 import { RangeInputPopup } from '../range-input';
 import { dateRangePickerDefaultProps } from './defaultProps';
 import useRange from './hooks/useRange';
@@ -44,6 +46,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     cancelRangeSelectLimit,
     onPick,
     disableTime,
+    needConfirm,
   } = props;
 
   const {
@@ -97,6 +100,30 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     props.popupProps?.onVisibleChange?.(false, {});
   };
 
+  const onTriggerNeedConfirm = useLatest(() => {
+    if (needConfirm || !enableTimePicker || popupVisible) return;
+
+    const nextValue = [...inputValue];
+    const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v, format));
+
+    // Only proceed when both ends have valid values
+    if (notValidIndex === -1 && nextValue.length === 2) {
+      const currentValue = formatDate(value || [], { format });
+
+      // Only trigger onChange when value actually changes
+      if (currentValue[0] !== nextValue[0] || currentValue[1] !== nextValue[1]) {
+        const formattedValue = formatDate(nextValue, { format, targetFormat: valueType, autoSwap: true });
+        onChange(formattedValue, {
+          dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
+          trigger: 'confirm',
+        });
+      }
+    } else {
+      // If there's invalid input, restore to original value
+      setInputValue(formatDate(value || [], { format }));
+    }
+  });
+
   useEffect(() => {
     if (value === cacheValue) return;
     // 面板展开重置数据
@@ -132,6 +159,11 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     // eslint-disable-next-line
   }, [popupVisible]);
 
+  // Listen to popupVisible changes, handle auto-confirm for needConfirm=false
+  useUpdateEffect(() => {
+    onTriggerNeedConfirm.current();
+  }, [popupVisible]);
+
   // 日期 hover
   function onCellMouseEnter(date: Date) {
     setIsHoverCell(true);
@@ -380,6 +412,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
     activeIndex,
     popupVisible,
     cancelRangeSelectLimit,
+    needConfirm,
     onCellClick,
     onCellMouseEnter,
     onCellMouseLeave,
diff --git a/packages/components/hooks/useMouseEvent.ts b/packages/components/hooks/useMouseEvent.ts
@@ -82,6 +82,10 @@ const useMouseEvent = (elementRef: React.RefObject<HTMLElement>, options: MouseE
   };
 
   const handleMouseDown = (e: MouseEventLike) => {
+    // 只处理鼠标左键，忽略中和右键
+    // 触摸事件没有 button 属性，会正常处理
+    if ('button' in e && e.button !== 0) return;
+
     isMovingRef.current = true;
     emitMouseChange(e, options.onDown);
     document.addEventListener('mouseup', handleMouseUp);
diff --git a/packages/components/menu/MenuGroup.tsx b/packages/components/menu/MenuGroup.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
-import { StyledProps, TNode } from '../common';
-import { TdMenuGroupProps } from './type';
+
 import useConfig from '../hooks/useConfig';
-import { cacularPaddingLeft } from './_util/cacularPaddingLeft';
+import { calculatePaddingLeft } from './_util/calculatePaddingLeft';
+import type { StyledProps, TNode } from '../common';
+import type { TdMenuGroupProps } from './type';
 
 export interface MenuGroupProps extends TdMenuGroupProps, StyledProps {
   children?: TNode;
@@ -14,7 +15,7 @@ const MenuGroup: React.FC<MenuGroupProps> = ({ title, className, style, children
   const { classPrefix } = useConfig();
 
   const itemAndGroupPaddingBias = 28;
-  const menuPaddingLeft = cacularPaddingLeft(level - 1) - itemAndGroupPaddingBias;
+  const menuPaddingLeft = calculatePaddingLeft(level - 1) - itemAndGroupPaddingBias;
 
   return (
     <div className={classNames(className, `${classPrefix}-menu-group`)} style={style}>
diff --git a/packages/components/menu/SubMenu.tsx b/packages/components/menu/SubMenu.tsx
@@ -1,19 +1,22 @@
-import React, { FC, useContext, useState, ReactElement, useMemo, useRef } from 'react';
 import classNames from 'classnames';
+import React, { FC, ReactElement, useContext, useMemo, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { StyledProps } from '../common';
-import type { TdSubmenuProps } from './type';
+
+import parseTNode from '../_util/parseTNode';
+import FakeArrow from '../common/FakeArrow';
 import useConfig from '../hooks/useConfig';
-import { MenuContext } from './MenuContext';
+import useControlled from '../hooks/useControlled';
 import useDomRefCallback from '../hooks/useDomRefCallback';
 import useRipple from '../hooks/useRipple';
-import { getSubMenuMaxHeight } from './_util/getSubMenuChildStyle';
+import { Popup, type PopupPlacement } from '../popup';
+import { calculatePaddingLeft } from './_util/calculatePaddingLeft';
+import { checkIsMenuGroup, checkIsSubMenu } from './_util/checkMenuType';
 import checkSubMenuChildrenActive from './_util/checkSubMenuChildrenActive';
-import FakeArrow from '../common/FakeArrow';
-import { checkIsSubMenu, checkIsMenuGroup } from './_util/checkMenuType';
-import { cacularPaddingLeft } from './_util/cacularPaddingLeft';
-import { Popup, PopupPlacement } from '../popup';
-import parseTNode from '../_util/parseTNode';
+import { getSubMenuMaxHeight } from './_util/getSubMenuChildStyle';
+import { MenuContext } from './MenuContext';
+
+import type { StyledProps } from '../common';
+import type { TdSubmenuProps } from './type';
 
 export interface SubMenuProps extends TdSubmenuProps, StyledProps {}
 
@@ -25,25 +28,24 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
   const { content, children = content, disabled, icon, title, value, className, style, level = 1, popupProps } = props;
   const { overlayClassName, overlayInnerClassName, ...restPopupProps } = popupProps || {};
 
+  const [open, setOpen] = useControlled(popupProps, 'visible', restPopupProps.onVisibleChange);
+
   const { classPrefix } = useConfig();
 
-  // popup 状态下控制开关
-  const [open, setOpen] = useState(false);
   const { expanded = [], onExpand, active, expandType, theme = 'light' } = useContext(MenuContext);
 
   const isPopUp = expandType === 'popup';
-
   // 非 popup 展开
   const isExpand = expanded.includes(value) && !disabled && !isPopUp;
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     onExpand(value, expanded);
-    setOpen(false);
+    setOpen(false, {});
   };
 
-  const handleVisibleChange = (visible: boolean) => {
-    setOpen(visible);
+  const handleVisibleChange = (visible: boolean, ctx) => {
+    setOpen(visible, ctx);
   };
 
   const popupChildren = React.Children.map(children, (child) =>
@@ -70,7 +72,7 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
   }, [disabled, isPopUp, open, isExpand]);
 
   // 计算左边距，兼容多层级子菜单
-  const menuPaddingLeft = cacularPaddingLeft(level - 1);
+  const menuPaddingLeft = calculatePaddingLeft(level - 1);
 
   const fakeArrowStyle = isPopUp && level > 1 ? { transform: 'rotate(-90deg)' } : {};
 
@@ -160,9 +162,9 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
           { [`${classPrefix}-menu-is-nested`]: level > 1 },
           overlayClassName,
         ]}
-        visible={open}
         placement="right-top"
         content={pupContent}
+        visible={open}
         onVisibleChange={handleVisibleChange}
       >
         {submenu}
@@ -175,17 +177,16 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
 
 const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
   const { className, style, children, disabled, icon, title, value, level = 1, popupProps } = props;
-
   const { overlayClassName, overlayInnerClassName, ...restPopupProps } = popupProps || {};
 
+  const [open, setOpen] = useControlled(popupProps, 'visible', restPopupProps.onVisibleChange);
   const { active, onChange, expandType, theme = 'light' } = useContext(MenuContext);
   const { classPrefix } = useConfig();
-  const [open, setOpen] = useState(false);
 
   const handleClick = () => onChange(value);
 
-  const handleVisibleChange = (visible: boolean) => {
-    setOpen(visible);
+  const handleVisibleChange = (visible: boolean, ctx) => {
+    setOpen(visible, ctx);
   };
 
   // 斜八角动画
@@ -262,9 +263,9 @@ const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
           { [`${classPrefix}-menu-is-nested`]: level > 1 },
           overlayClassName,
         ]}
-        visible={open}
         placement={placement as PopupPlacement}
         content={pupContent}
+        visible={open}
         onVisibleChange={handleVisibleChange}
       >
         {submenu}
diff --git a/packages/components/menu/_util/calculatePaddingLeft.ts b/packages/components/menu/_util/calculatePaddingLeft.ts
@@ -1,5 +1,5 @@
 const DEFAULT_SUBMENU_PADDING_LEFT = 44;
 const INCREASE_SUBMENU_PADDING_LEFT = 16;
 
-export const cacularPaddingLeft = (level: number) =>
+export const calculatePaddingLeft = (level: number) =>
   DEFAULT_SUBMENU_PADDING_LEFT + level * INCREASE_SUBMENU_PADDING_LEFT;
