@douyinfe/semi-ui 2.31.0-beta.0 → 2.31.0

package/lib/cjs/carousel/index.d.ts

@@ -38,6 +38,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     get adapter(): CarouselAdapter<CarouselProps, CarouselState>;
     static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState>;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CarouselProps>, prevState: Readonly<CarouselState>, snapshot?: any): void;
     componentWillUnmount(): void;
     play: () => void;
     stop: () => void;

package/lib/cjs/carousel/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
 var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -39,10 +41,12 @@ class Carousel extends _baseComponent.default {
     super(props);
 
     this.play = () => {
+      this.foundation.setForcePlay(true);
       return this.foundation.handleAutoPlay();
     };
 
     this.stop = () => {
+      this.foundation.setForcePlay(false);
       return this.foundation.stop();
     };
 
@@ -69,7 +73,7 @@ class Carousel extends _baseComponent.default {
         autoPlay
       } = this.props;
 
-      if (typeof autoPlay !== 'object' || autoPlay.hoverToPause) {
+      if (autoPlay === true || typeof autoPlay === 'object' && autoPlay.hoverToPause) {
         this.foundation.stop();
       }
     };
@@ -249,6 +253,18 @@ class Carousel extends _baseComponent.default {
     this.handleAutoPlay();
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const prevChildrenKeys = _react.default.Children.toArray(prevProps.children).map(child => /*#__PURE__*/(0, _react.isValidElement)(child) ? child.key : null);
+
+    const nowChildrenKeys = _react.default.Children.toArray(this.props.children).map(child => /*#__PURE__*/(0, _react.isValidElement)(child) ? child.key : null);
+
+    if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys)) {
+      this.setState({
+        children: this.getChildren()
+      });
+    }
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
   }

package/lib/cjs/form/baseForm.d.ts

@@ -83,7 +83,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
         position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-        onSearch?: (value: string) => void;
+        onSearch?: (value: string, event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;
         dropdownMargin?: number | {

package/lib/cjs/form/field.d.ts

@@ -31,7 +31,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;
     dropdownMargin?: number | {

package/lib/cjs/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates, RatioType } from "./interface";
+import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";
@@ -87,6 +87,5 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     onImageError: () => void;
     onImageLoad: (src: any) => void;
     handleMouseDown: (e: any) => void;
-    handleRatio: (type: RatioType) => void;
     render(): JSX.Element;
 }

package/lib/cjs/image/previewInner.js

@@ -105,10 +105,6 @@ class PreviewInner extends _baseComponent.default {
       this.foundation.handleMouseDown(e);
     };
 
-    this.handleRatio = type => {
-      this.foundation.handleRatio(type);
-    };
-
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -259,7 +255,10 @@ class PreviewInner extends _baseComponent.default {
     }
 
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
-      willUpdateStates.currentIndex = props.currentIndex;
+      willUpdateStates.currentIndex = props.currentIndex; // ratio will set to adaptation when change picture, 
+      // attention: If the ratio is controlled, the ratio should not change as the index changes
+
+      willUpdateStates.ratio = 'adaptation';
     }
 
     return willUpdateStates;
@@ -381,7 +380,7 @@ class PreviewInner extends _baseComponent.default {
       src: imgSrc[currentIndex],
       onZoom: this.handleZoomImage,
       disableDownload: disableDownload,
-      setRatio: this.handleRatio,
+      setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
       zoomStep: zoomStep,

package/lib/cjs/popconfirm/index.js

@@ -255,7 +255,16 @@ class Popconfirm extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_popover.default, Object.assign({
       ref: this.popoverRef
     }, attrs, {
-      content: this.renderConfirmPopCard,
+      // A arrow function needs to be passed here, otherwise the content will not be updated after the Popconfirm state is updated
+      // Popover is a PureComponent, same props will not trigger update
+      content: _ref2 => {
+        let {
+          initialFocusRef
+        } = _ref2;
+        return this.renderConfirmPopCard({
+          initialFocusRef
+        });
+      },
       visible: visible,
       position: position
     }, popProps), children);

package/lib/cjs/select/index.d.ts

@@ -86,7 +86,7 @@ export declare type SelectProps = {
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: Position;
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: React.KeyboardEvent | React.MouseEvent) => void;
     dropdownClassName?: string;
     dropdownStyle?: React.CSSProperties;
     dropdownMargin?: PopoverProps['margin'];
@@ -252,7 +252,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
-    handleInputChange: (value: string) => void;
+    handleInputChange: (value: string, event: React.KeyboardEvent) => void;
     renderInput(): JSX.Element;
     close(): void;
     open(): void;

package/lib/cjs/select/index.js

@@ -71,8 +71,6 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _utils2 = require("../_utils");
 
-var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
-
 var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
 
 require("@douyinfe/semi-foundation/lib/cjs/select/select.css");
@@ -97,7 +95,7 @@ class Select extends _baseComponent.default {
       current: node
     };
 
-    this.handleInputChange = value => this.foundation.handleInputChange(value);
+    this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
 
     this.getTagItem = (item, i, renderSelectedItem) => {
       const {
@@ -184,8 +182,6 @@ class Select extends _baseComponent.default {
     this.onKeyPress = this.onKeyPress.bind(this);
     this.eventManager = new _Event.default();
     this.foundation = new _foundation.default(this.adapter);
-    (0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
-    (0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
   }
 
   get adapter() {
@@ -355,8 +351,8 @@ class Select extends _baseComponent.default {
       notifyDropdownVisibleChange: visible => {
         this.props.onDropdownVisibleChange(visible);
       },
-      notifySearch: input => {
-        this.props.onSearch(input);
+      notifySearch: (input, event) => {
+        this.props.onSearch(input, event);
       },
       notifyCreate: input => {
         this.props.onCreate(input);

package/lib/cjs/select/virtualRow.js

@@ -12,10 +12,11 @@ const VirtualRow = _ref => {
     style
   } = _ref;
   const {
-    visibleOptions
+    visibleOptions,
+    renderOption
   } = data;
   const option = visibleOptions[index];
-  return data.renderOption(option, index, style);
+  return renderOption(option, index, style);
 };
 
 var _default = VirtualRow;

package/lib/cjs/table/ColumnSelection.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
-import { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/cjs/table/tableSelectionCellFoundation';
+import TableSelectionCellFoundation, { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/cjs/table/tableSelectionCellFoundation';
 import { CheckboxEvent, CheckboxProps } from '../checkbox';
 export interface TableSelectionCellProps {
     columnTitle?: string;
     getCheckboxProps?: () => CheckboxProps;
     type?: string;
-    onChange?: (value: any, e: TableSelectionCellEvent) => void;
+    onChange?: (checked: boolean, e: TableSelectionCellEvent) => void;
     selected?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
@@ -37,7 +37,8 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
         prefixCls: "semi-table";
     };
     get adapter(): TableSelectionCellAdapter;
+    foundation: TableSelectionCellFoundation;
     constructor(props: TableSelectionCellProps);
-    handleChange: (e: CheckboxEvent) => any;
+    handleChange: (e: CheckboxEvent) => void;
     render(): JSX.Element;
 }

package/lib/cjs/table/Table.d.ts

@@ -32,6 +32,14 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
     prePropRowSelection?: TableStateRowSelection<RecordType>;
     tableWidth?: number;
     prePagination?: Pagination;
+    /**
+    * Disabled row keys in sorted and filtered data
+    */
+    allDisabledRowKeys?: BaseRowKeyType[];
+    /**
+     * Disabled row keys set in sorted and filtered data
+     */
+    allDisabledRowKeysSet?: Set<BaseRowKeyType>;
 }
 export declare type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
     selectedRowKeysSet?: Set<(string | number)>;
@@ -227,7 +235,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
       */
     addFnsInColumn: (column?: ColumnProps) => ColumnProps<any>;
     toggleSelectRow: (selected: boolean, realKey: string | number, e: TableSelectionCellEvent) => void;
-    toggleSelectAllRow: (status: boolean, e: TableSelectionCellEvent) => void;
+    toggleSelectAllRow: (selected: boolean, e: TableSelectionCellEvent) => void;
     /**
      * render pagination
      * @param {object} pagination

package/lib/cjs/table/Table.js

@@ -346,7 +346,7 @@ class Table extends _baseComponent.default {
       let inHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       const {
         rowSelection,
-        disabledRowKeysSet
+        allDisabledRowKeysSet
       } = _this.state;
 
       if (rowSelection && typeof rowSelection === 'object') {
@@ -362,7 +362,7 @@ class Table extends _baseComponent.default {
           const allRowKeys = _this.cachedFilteredSortedRowKeys;
           const allRowKeysSet = _this.cachedFilteredSortedRowKeysSet;
 
-          const allIsSelected = _this.foundation.allIsSelected(selectedRowKeysSet, disabledRowKeysSet, allRowKeys);
+          const allIsSelected = _this.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
 
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
@@ -372,8 +372,8 @@ class Table extends _baseComponent.default {
             key: columnKey,
             selected: allIsSelected,
             indeterminate: hasRowSelected && !allIsSelected,
-            onChange: (status, e) => {
-              _this.toggleSelectAllRow(status, e);
+            onChange: (selected, e) => {
+              _this.toggleSelectAllRow(selected, e);
             }
           });
         } else {
@@ -575,8 +575,8 @@ class Table extends _baseComponent.default {
       this.foundation.handleSelectRow(realKey, selected, e);
     };
 
-    this.toggleSelectAllRow = (status, e) => {
-      this.foundation.handleSelectAllRow(status, e);
+    this.toggleSelectAllRow = (selected, e) => {
+      this.foundation.handleSelectAllRow(selected, e);
     };
     /**
      * render pagination
@@ -894,6 +894,8 @@ class Table extends _baseComponent.default {
       allRowKeys: [],
       disabledRowKeys: [],
       disabledRowKeysSet: new Set(),
+      allDisabledRowKeys: [],
+      allDisabledRowKeysSet: new Set(),
       headWidths: [],
       bodyHasScrollBar: false,
       prePropRowSelection: undefined,
@@ -998,11 +1000,20 @@ class Table extends _baseComponent.default {
         this.cachedFilteredSortedRowKeys = filteredSortedRowKeys;
         this.cachedFilteredSortedRowKeysSet = new Set(filteredSortedRowKeys);
       },
+      setAllDisabledRowKeys: allDisabledRowKeys => {
+        const allDisabledRowKeysSet = new Set(allDisabledRowKeys);
+        this.setState({
+          allDisabledRowKeys,
+          allDisabledRowKeysSet
+        });
+      },
       getCurrentPage: () => (0, _get2.default)(this.state, 'pagination.currentPage', 1),
       getCurrentPageSize: () => (0, _get2.default)(this.state, 'pagination.pageSize', _constants.numbers.DEFAULT_PAGE_SIZE),
       getCachedFilteredSortedDataSource: () => this.cachedFilteredSortedDataSource,
       getCachedFilteredSortedRowKeys: () => this.cachedFilteredSortedRowKeys,
       getCachedFilteredSortedRowKeysSet: () => this.cachedFilteredSortedRowKeysSet,
+      getAllDisabledRowKeys: () => this.state.allDisabledRowKeys,
+      getAllDisabledRowKeysSet: () => this.state.allDisabledRowKeysSet,
       notifyFilterDropdownVisibleChange: (visible, dataIndex) => this._invokeColumnFn(dataIndex, 'onFilterDropdownVisibleChange', visible),
       notifyChange: function () {
         return _this2.props.onChange(...arguments);
@@ -1203,8 +1214,11 @@ class Table extends _baseComponent.default {
           childrenRecordName,
           rowKey
         });
+        const disabledRowKeysSet = new Set(disabledRowKeys);
         willUpdateStates.disabledRowKeys = disabledRowKeys;
-        willUpdateStates.disabledRowKeysSet = new Set(disabledRowKeys);
+        willUpdateStates.disabledRowKeysSet = disabledRowKeysSet;
+        willUpdateStates.allDisabledRowKeys = disabledRowKeys;
+        willUpdateStates.allDisabledRowKeysSet = disabledRowKeysSet;
       }
 
       willUpdateStates.rowSelection = newSelectionStates;
@@ -1308,7 +1322,9 @@ class Table extends _baseComponent.default {
       // Temporarily use _dataSource=[...dataSource] for processing
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
+      const allDataDisabledRowKeys = this.foundation.getAllDisabledRowKeys(filteredSortedDataSource);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+      this.foundation.setAllDisabledRowKeys(allDataDisabledRowKeys);
       states.dataSource = filteredSortedDataSource;
 
       if (this.props.groupBy) {

package/lib/cjs/treeSelect/index.d.ts

@@ -245,7 +245,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
-    itemKey: (index: number, data: TreeNodeData) => any;
+    itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;
     renderTree: () => JSX.Element;
     render(): JSX.Element;

package/lib/cjs/treeSelect/index.js

@@ -77,6 +77,8 @@ var _checkboxGroup = _interopRequireDefault(require("../checkbox/checkboxGroup")
 
 var _index3 = _interopRequireDefault(require("../popover/index"));
 
+var _virtualRow = _interopRequireDefault(require("../select/virtualRow"));
+
 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; }
@@ -813,8 +815,11 @@ class TreeSelect extends _baseComponent.default {
     };
 
     this.itemKey = (index, data) => {
-      // Find the item at the specified index.
-      const item = data[index]; // Return a value that uniquely identifies this item.
+      const {
+        visibleOptions
+      } = data; // Find the item at the specified index.
+
+      const item = visibleOptions[index]; // Return a value that uniquely identifies this item.
 
       return item.key;
     };
@@ -848,23 +853,18 @@ class TreeSelect extends _baseComponent.default {
         });
       }
 
-      const option = _ref => {
-        let {
-          index,
-          style,
-          data
-        } = _ref;
-        return this.renderTreeNode(data[index], index, style);
+      const data = {
+        visibleOptions: flattenNodes,
+        renderOption: this.renderTreeNode
       };
-
       return /*#__PURE__*/_react.default.createElement(_autoSizer.default, {
         defaultHeight: virtualize.height,
         defaultWidth: virtualize.width
-      }, _ref2 => {
+      }, _ref => {
         let {
           height,
           width
-        } = _ref2;
+        } = _ref;
         return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
           itemCount: flattenNodes.length,
           itemSize: virtualize.itemSize,
@@ -872,12 +872,12 @@ class TreeSelect extends _baseComponent.default {
           width: width,
           // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
-          itemData: flattenNodes,
+          itemData: data,
           className: `${prefixTree}-virtual-list`,
           style: {
             direction
           }
-        }, option);
+        }, _virtualRow.default);
       });
     };
 
@@ -1188,11 +1188,11 @@ class TreeSelect extends _baseComponent.default {
     };
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
       updateLoadKeys: (data, resolve) => {
-        this.setState(_ref3 => {
+        this.setState(_ref2 => {
           let {
             loadedKeys,
             loadingKeys
-          } = _ref3;
+          } = _ref2;
           return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
         });
       },
@@ -1229,11 +1229,11 @@ class TreeSelect extends _baseComponent.default {
       notifyChangeWithObject: (node, e) => {
         this.props.onChange && this.props.onChange(node, e);
       },
-      notifyExpand: (expandedKeys, _ref4) => {
+      notifyExpand: (expandedKeys, _ref3) => {
         let {
           expanded: bool,
           node
-        } = _ref4;
+        } = _ref3;
         this.props.onExpand && this.props.onExpand([...expandedKeys], {
           expanded: bool,
           node

package/lib/es/carousel/index.d.ts

@@ -38,6 +38,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
     get adapter(): CarouselAdapter<CarouselProps, CarouselState>;
     static getDerivedStateFromProps(props: CarouselProps, state: CarouselState): Partial<CarouselState>;
     componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CarouselProps>, prevState: Readonly<CarouselState>, snapshot?: any): void;
     componentWillUnmount(): void;
     play: () => void;
     stop: () => void;

package/lib/es/carousel/index.js

@@ -1,7 +1,8 @@
+import _isEqual from "lodash/isEqual";
 import _debounce from "lodash/debounce";
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { Children } from 'react';
+import React, { Children, isValidElement } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import BaseComponent from "../_base/baseComponent";
@@ -17,10 +18,12 @@ class Carousel extends BaseComponent {
     super(props);
 
     this.play = () => {
+      this.foundation.setForcePlay(true);
       return this.foundation.handleAutoPlay();
     };
 
     this.stop = () => {
+      this.foundation.setForcePlay(false);
       return this.foundation.stop();
     };
 
@@ -47,7 +50,7 @@ class Carousel extends BaseComponent {
         autoPlay
       } = this.props;
 
-      if (typeof autoPlay !== 'object' || autoPlay.hoverToPause) {
+      if (autoPlay === true || typeof autoPlay === 'object' && autoPlay.hoverToPause) {
         this.foundation.stop();
       }
     };
@@ -227,6 +230,17 @@ class Carousel extends BaseComponent {
     this.handleAutoPlay();
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const prevChildrenKeys = React.Children.toArray(prevProps.children).map(child => /*#__PURE__*/isValidElement(child) ? child.key : null);
+    const nowChildrenKeys = React.Children.toArray(this.props.children).map(child => /*#__PURE__*/isValidElement(child) ? child.key : null);
+
+    if (!_isEqual(prevChildrenKeys, nowChildrenKeys)) {
+      this.setState({
+        children: this.getChildren()
+      });
+    }
+  }
+
   componentWillUnmount() {
     this.foundation.destroy();
   }

package/lib/es/form/baseForm.d.ts

@@ -83,7 +83,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onDropdownVisibleChange?: (visible: boolean) => void;
         zIndex?: number;
         position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-        onSearch?: (value: string) => void;
+        onSearch?: (value: string, event: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;
         dropdownMargin?: number | {

package/lib/es/form/field.d.ts

@@ -31,7 +31,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: import("react").KeyboardEvent<Element> | import("react").MouseEvent<Element, MouseEvent>) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;
     dropdownMargin?: number | {

package/lib/es/image/previewInner.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import BaseComponent from "../_base/baseComponent";
-import { PreviewProps as PreviewInnerProps, PreviewInnerStates, RatioType } from "./interface";
+import { PreviewProps as PreviewInnerProps, PreviewInnerStates } from "./interface";
 import PropTypes from "prop-types";
 import PreviewInnerFoundation, { PreviewInnerAdapter } from '@douyinfe/semi-foundation/lib/es/image/previewInnerFoundation';
 import { PreviewContextProps } from "./previewContext";
@@ -87,6 +87,5 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     onImageError: () => void;
     onImageLoad: (src: any) => void;
     handleMouseDown: (e: any) => void;
-    handleRatio: (type: RatioType) => void;
     render(): JSX.Element;
 }

package/lib/es/image/previewInner.js

@@ -83,10 +83,6 @@ export default class PreviewInner extends BaseComponent {
       this.foundation.handleMouseDown(e);
     };
 
-    this.handleRatio = type => {
-      this.foundation.handleRatio(type);
-    };
-
     this.state = {
       imgSrc: [],
       imgLoadStatus: new Map(),
@@ -237,7 +233,10 @@ export default class PreviewInner extends BaseComponent {
     }
 
     if ("currentIndex" in props && props.currentIndex !== state.currentIndex) {
-      willUpdateStates.currentIndex = props.currentIndex;
+      willUpdateStates.currentIndex = props.currentIndex; // ratio will set to adaptation when change picture, 
+      // attention: If the ratio is controlled, the ratio should not change as the index changes
+
+      willUpdateStates.ratio = 'adaptation';
     }
 
     return willUpdateStates;
@@ -359,7 +358,7 @@ export default class PreviewInner extends BaseComponent {
       src: imgSrc[currentIndex],
       onZoom: this.handleZoomImage,
       disableDownload: disableDownload,
-      setRatio: this.handleRatio,
+      setRatio: this.handleAdjustRatio,
       zoom: zoom,
       ratio: ratio,
       zoomStep: zoomStep,

package/lib/es/popconfirm/index.js

@@ -231,7 +231,16 @@ export default class Popconfirm extends BaseComponent {
     return /*#__PURE__*/React.createElement(Popover, Object.assign({
       ref: this.popoverRef
     }, attrs, {
-      content: this.renderConfirmPopCard,
+      // A arrow function needs to be passed here, otherwise the content will not be updated after the Popconfirm state is updated
+      // Popover is a PureComponent, same props will not trigger update
+      content: _ref2 => {
+        let {
+          initialFocusRef
+        } = _ref2;
+        return this.renderConfirmPopCard({
+          initialFocusRef
+        });
+      },
       visible: visible,
       position: position
     }, popProps), children);

package/lib/es/select/index.d.ts

@@ -86,7 +86,7 @@ export declare type SelectProps = {
     onDropdownVisibleChange?: (visible: boolean) => void;
     zIndex?: number;
     position?: Position;
-    onSearch?: (value: string) => void;
+    onSearch?: (value: string, event: React.KeyboardEvent | React.MouseEvent) => void;
     dropdownClassName?: string;
     dropdownStyle?: React.CSSProperties;
     dropdownMargin?: PopoverProps['margin'];
@@ -252,7 +252,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: SelectProps, prevState: SelectState): void;
-    handleInputChange: (value: string) => void;
+    handleInputChange: (value: string, event: React.KeyboardEvent) => void;
     renderInput(): JSX.Element;
     close(): void;
     open(): void;