feat: add stopPropagation api to timepicker (#1966)

* feat: add stopPropagation api to timepicker

* fix: remove useless console log

* feat: make stopPropagation defaultValue is true

* feat: corrected the type of timepicker stopPropagation to boolean

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

@@ -927,6 +927,7 @@ function Demo() {
 | startDateOffset    | When type is dateRange, set the start date of the selected range                                                                                                                                                                              | (selectedDate?: Date) => Date;                                                                                                                                                                            | -                                                                                     | **1.10.0**                |
 | startYear | start year of the year scroll panel                                                                                                                                                                                                           | number | 100 years before current year | **2.36.0** |
 | endYear | end year of the year scroll panel                                                                                                                                                                                                             | number | 100 years after current year | **2.36.0** |
+| stopPropagation | Whether to prevent click events on the popup layer from bubbling | boolean | true | |
 | syncSwitchMonth    | In the scene of range, it supports synchronous switching of the month of the dual panel                                                                                                                                                       |boolean|false|**1.28.0**|
 | timePickerOpts     | For other parameters that can be transparently passed to the time selector, see [TimePicker·API Reference](/en-US/input/timepicker#API%20Reference)                                                                                           |                                                                                                                                                                                                           | object                                                                                | **1.1.0**                 |
 | topSlot            | Render the top extra area                                                                                                                                                                                                                     | ReactNode                                                                                                                                                                                                 |                                                | **1.22.0**                   |

content/input/datepicker/index.md

@@ -892,7 +892,7 @@ function Demo() {
 | startDateOffset | type 为 dateRange 时，设置单击选择范围的开始日期                                                                     | <ApiType detail='(selectedDate?: Date) => Date '>(selectedDate) => Date </ApiType>| - | **1.10.0** |
 | startYear | 滚轮的开始年                                                                                               | number | 当前年前 100 年 | **2.36.0** |
 | endYear | 滚轮的结束年，结束年需要大于开始年                                                                                    | number | 当前年后 100 年 | **2.36.0** |
-| stopPropagation | 是否阻止弹出层上的点击事件冒泡                                                                                      | boolean | false |  |
+| stopPropagation | 是否阻止弹出层上的点击事件冒泡                                                                                      | boolean | true |  |
 | style | 自定义样式                                                                                                | CSSProperties |  |  |
 | syncSwitchMonth | 在范围选择的场景中，支持同步切换双面板的月份                                                                               | boolean | false | **1.28.0** |
 | timePickerOpts | 其他可以透传给时间选择器的参数，详见 [TimePicker·API 参考](/zh-CN/input/timepicker#API_参考)                               |  | object | **1.1.0** |

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

@@ -334,6 +334,7 @@ function Demo(props = {}) {
 | scrollItemProps | The props passed through to ScrollItem. The optional values are the same as [ScrollList#API](/zh-CN/show/scrolllist#ScrollItem)                                                                                                               | object |  | **0.31.0** |
 | secondStep | Second option interval                                                                                                                                                                                                                        | number | 1 |
 | showClear | Whether to show the clear button                                                                                                                                                                                                              | boolean | true | **0.35.0**|
+| stopPropagation | Whether to prevent click events on the popup layer from bubbling | boolean | true | **2.49.0** |
 | size  | Size of input box, one of 'default', 'small' and 'large'                                                                                                                                                                                      | string                                                                   | 'default'                                                              |                    |
 | triggerRender | Custom trigger rendering method                                                                                                                                                                                                               | ({ placeholder: string }) => ReactNode |  | **0.34.0** |
 | type | type                                                                                                                                                                                                                                          | "time"\|"timeRange" | "time" |

content/input/timepicker/index.md

@@ -325,6 +325,7 @@ function Demo(props = {}) {
 | scrollItemProps     | 透传给 scrollItem 的属性，可选值同[ScrollList#API](/zh-CN/show/scrolllist#ScrollItem)                                                | object                                                           | | **0.31.0**         |
 | secondStep          | 秒选项间隔                                             | number                                                                            | 1                                                                 |                    |
 | showClear           | 是否展示清除按钮 **v>=0.35.0**                         | boolean                                                                           | true                                                              |                    |
+| stopPropagation | 是否阻止弹出层上的点击事件冒泡                                                                                      | boolean | true | **2.49.0**   |
 | size                | 输入框的大小，可选 'default'，'small'，'large'          | string                                                                   | 'default'                                                              |                    |
 | triggerRender       | 自定义触发器渲染方法                                   | ({ placeholder: string }) => ReactNode                                            | -                                                                 | **0.34.0**  |
 | type                | 类型                                                   | "time"\|"timeRange"                                                               | "time"                                                            |                    |

packages/semi-ui/timePicker/TimePicker.tsx

@@ -82,6 +82,7 @@ export type TimePickerProps = {
     secondStep?: number;
     showClear?: boolean;
     size?: InputSize;
+    stopPropagation: boolean;
     style?: React.CSSProperties;
     timeZone?: string | number;
     triggerRender?: (props?: any) => React.ReactNode;
@@ -150,6 +151,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         focusOnOpen: PropTypes.bool,
         autoFocus: PropTypes.bool,
         size: PropTypes.oneOf(strings.SIZE),
+        stopPropagation: PropTypes.bool,
         panels: PropTypes.arrayOf(PropTypes.shape(PanelShape)),
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
@@ -184,6 +186,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         prefixCls: cssClasses.PREFIX,
         inputReadOnly: false,
         style: {},
+        stopPropagation: true,
         className: '',
         popupClassName: '',
         popupStyle: { left: '0px', top: '0px' },
@@ -470,6 +473,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             triggerRender,
             motion,
             autoAdjustOverflow,
+            stopPropagation,
             ...rest
         } = this.props;
         const format = this.foundation.getDefaultFormatIfNeed();
@@ -534,6 +538,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                     motion={motion}
                     margin={dropdownMargin}
                     autoAdjustOverflow={autoAdjustOverflow}
+                    stopPropagation={stopPropagation}
                 >
                     {useCustomTrigger ? (
                         <Trigger

packages/semi-ui/timePicker/_story/timepicker.stories.jsx

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
+import { TimePicker as BasicTimePicker, Button, Form, Popover } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -335,4 +335,19 @@ export const Fix1716 = () => {
 
 Fix1716.story = {
   name: 'Fix 1716',
-};
+};
+
+export const StopPropagation = () => {
+  return (
+    <Popover 
+      content={
+        <div style={{ padding: 12 }}>
+          <TimePicker insetLabel="每天" style={{ width: '100%' }} stopPropagation={true} />
+        </div>
+      }
+      trigger="click"
+    >
+        <Button>click me</Button>
+    </Popover>
+  );
+}