feat: onClickoutSide in Datepicker adds event parameter (#2531)

content/input/datepicker/index-en-US.md

@@ -939,7 +939,7 @@ function Demo() {
 | onCancel           | Cancel the callback when selected, enter the reference as the value of the last confirmed selection, only `type` equals "dateTime"or "dateTimeRange" and `needConfirm` equals true                                                            | <ApiType detail='(date: DateType, dateStr: StringType) => void'>(date, dateString) => void</ApiType>                                                              |                                                                                       | **0.18.0**                |
 | onChange           | A callback when the value changes                                                                                                                                                                                                             |   <ApiType detail='(date: DateType, dateString: StringType) => void'>(date, dateString) => void</ApiType>       |                                                                                       |                           |
 | onClear            | A callback when click the clear button                                                                                                                                                                                                        | (event) => void                                                                                                                                                                                     | () => {}                                                                              | **1.16.0**           |
-| onClickOutSide    | When the pop-up layer is in a display state, click the non-popup layer and trigger callback                                                                                                                                                   | () => void | () => {} | **2.31.0** |
+| onClickOutSide    | When the pop-up layer is in a display state, click the non-popup layer and trigger callback, event parameter is supported since 2.68.0 | (event: React.mouseEvent) => void | () => {} | **2.31.0** |
 | onConfirm          | Confirm the callback at the time of selection, enter the reference as the value of the current selection, only `type` equals "dateTime" or "dateTimeRange" and `needConfirm` equals true                                                      |  <ApiType detail='(date: DateType, dateStr: StringType) => void'>(date, dateString) => void</ApiType>|                                                                                       | **0.18.0**                |
 | onFocus | Callback when focus is obtained. It is not recommended to use this API in range selection                                                                                                                                                     | (event) => void | () => {} | **1.0.0** |
 | onOpenChange       | Callback when popup open or close                                                                                                                                                                                                             | (isOpen) => void                                                                                                                                                                                 |                                                                                       |                           |

content/input/datepicker/index.md

@@ -900,7 +900,7 @@ function Demo() {
 | onChange | 值变化时的回调。<br/>0.x版本入参顺序与新版有所不同                                                                        | <ApiType detail='(date: DateType, dateString: StringType) => void'>(date, dateString) => void</ApiType> |  |  |
 | onChangeWithDateFirst | 0.x 中 onChange(string, Date), 1.0 后(Date, string)。此开关设为 false 时，入参顺序将与 0.x 版本保持一致                    | boolean | true |  |
 | onClear | 点击 clear 按钮时触发                                                                                       | (e: event) => void | () => {} |  |
-| onClickOutSide | 当弹出层处于展示状态，点击非弹出层、触发器的回调                                                                             | () => void | () => {} | **2.31.0** |
+| onClickOutSide | 当弹出层处于展示状态，点击非弹出层、触发器的回调, event 参数自 2.68.0 支持 | (event: React.mouseEvent) => void | () => {} | **2.31.0** |
 | onConfirm | 确认选择时的回调，入参为当前选择的值，仅 type="dateTime"\|"dateTimeRange" 且 needConfirm=true 时有效。<br/>0.x版本入参顺序与新版有所不同   | <ApiType detail='(date: DateType, dateStr: StringType) => void'>(date, dateString) => void</ApiType>|  | |
 | onFocus | 获得焦点时的回调，范围选择时不推荐使用                                                                                  | (e: event) => void | () => {} |  |
 | onOpenChange | 面板显示或隐藏状态切换的回调                                                                                       | <ApiType detail='(isOpen: boolean) => void'>(isOpen) => void</ApiType> |  |  |

packages/semi-foundation/datePicker/foundation.ts

@@ -114,7 +114,7 @@ export interface EventHandlerProps {
     onClear?: (e: any) => void;
     onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
-    onClickOutSide?: () => void
+    onClickOutSide?: (e: any) => void
 }
 
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps, Pick<MonthsGridFoundationProps, 'startYear' | 'endYear'> {

packages/semi-ui/datePicker/datePicker.tsx

@@ -62,7 +62,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
      */
     onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void;
     onPresetClick?: (item: PresetType, e: React.MouseEvent<HTMLDivElement>) => void;
-    onClickOutSide?: () => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
     locale?: Locale['DatePicker'];
     leftSlot?: React.ReactNode;
     dateFnsLocale?: Locale['dateFnsLocale'];
@@ -267,7 +267,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                         !(panelEl && panelEl.contains(target)) &&
                         !(path.includes(triggerEl) || path.includes(panelEl))
                     ) {
-                        this.props.onClickOutSide();
+                        this.props.onClickOutSide(e as any);
                         if (!this.adapter.needConfirm()) {
                             this.foundation.closePanel(e);
                         }