@douyinfe/semi-ui 2.44.0 → 2.45.0-beta.0

package/lib/es/notification/index.js

@@ -26,12 +26,17 @@ class NotificationList extends BaseComponent {
     super(props);
     _this = this;
     this.add = noticeOpts => this.foundation.addNotice(noticeOpts);
+    this.has = id => this.foundation.has(id);
     this.remove = id => {
       this.foundation.removeNotice(String(id));
     };
+    this.update = (id, opts) => {
+      return this.foundation.update(id, opts);
+    };
     this.destroyAll = () => this.foundation.destroyAll();
     this.renderNoticeInPosition = function (notices, position) {
       let removedItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      let updatedItems = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
       const className = cls(cssClasses.LIST);
       // TODO notifyOnClose
       if (notices.length) {
@@ -57,6 +62,11 @@ class NotificationList extends BaseComponent {
                 isAnimating
               } = _ref;
               return isRemoved && !isAnimating ? null : /*#__PURE__*/React.createElement(Notice, Object.assign({}, notice, {
+                ref: notice => {
+                  if (notice && updatedItems.some(item => item.id === notice.props.id)) {
+                    notice.foundation.restartCloseTimer();
+                  }
+                },
                 className: cls({
                   [notice.className]: Boolean(notice.className),
                   [animationClassName]: true
@@ -73,7 +83,8 @@ class NotificationList extends BaseComponent {
     };
     this.state = {
       notices: [],
-      removedItems: []
+      removedItems: [],
+      updatedItems: []
     };
     this.noticeStorage = [];
     this.removeItemStorage = [];
@@ -84,19 +95,22 @@ class NotificationList extends BaseComponent {
     return Object.assign(Object.assign({}, super.adapter), {
       updateNotices: function (notices) {
         let removedItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+        let updatedItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
         _this2.noticeStorage = [...notices];
         _this2.removeItemStorage = [...removedItems];
         // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
         _this2.setState({
           notices,
-          removedItems
+          removedItems,
+          updatedItems
         });
       },
       getNotices: () => this.noticeStorage
     });
   }
   static addNotice(notice) {
-    const id = getUuid('notification');
+    var _a;
+    const id = (_a = notice.id) !== null && _a !== void 0 ? _a : getUuid('notification');
     if (!ref) {
       const {
         getPopupContainer
@@ -122,9 +136,13 @@ class NotificationList extends BaseComponent {
         }));
       });
     } else {
-      ref.add(Object.assign(Object.assign({}, notice), {
-        id
-      }));
+      if (ref.has(`${id}`)) {
+        ref.update(id, notice);
+      } else {
+        ref.add(Object.assign(Object.assign({}, notice), {
+          id
+        }));
+      }
     }
     return id;
   }
@@ -203,7 +221,8 @@ class NotificationList extends BaseComponent {
       notices
     } = this.state;
     const {
-      removedItems
+      removedItems,
+      updatedItems
     } = this.state;
     notices = Array.from(new Set([...notices, ...removedItems]));
     const noticesInPosition = {
@@ -223,7 +242,7 @@ class NotificationList extends BaseComponent {
     const noticesList = Object.entries(noticesInPosition).map(obj => {
       const pos = obj[0];
       const noticesInPos = obj[1];
-      return this.renderNoticeInPosition(noticesInPos, pos, removedItems);
+      return this.renderNoticeInPosition(noticesInPos, pos, removedItems, updatedItems);
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, noticesList);
   }

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

@@ -26,7 +26,10 @@ export interface PopoverProps extends BaseProps {
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
     showArrow?: boolean;
-    spacing?: number;
+    spacing?: number | {
+        x: number;
+        y: number;
+    };
     stopPropagation?: boolean | string;
     arrowStyle?: ArrowStyle;
     arrowBounding?: ArrowBounding;
@@ -64,7 +67,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        spacing: PropTypes.Requireable<number>;
+        spacing: PropTypes.Requireable<NonNullable<number | object>>;
         zIndex: PropTypes.Requireable<number>;
         showArrow: PropTypes.Requireable<boolean>;
         arrowStyle: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/es/popover/index.js

@@ -16,6 +16,7 @@ import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/p
 import Tooltip from '../tooltip/index';
 import Arrow from './Arrow';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
+import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 class Popover extends React.PureComponent {
@@ -88,7 +89,7 @@ class Popover extends React.PureComponent {
       arrowStyle
     };
     const arrow = showArrow ? /*#__PURE__*/React.createElement(Arrow, Object.assign({}, arrowProps)) : false;
-    if (typeof spacing !== 'number') {
+    if (isNullOrUndefined(spacing)) {
       spacing = showArrow ? numbers.SPACING_WITH_ARROW : numbers.SPACING;
     }
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
@@ -125,7 +126,7 @@ Popover.propTypes = {
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
   style: PropTypes.object,
-  spacing: PropTypes.number,
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   zIndex: PropTypes.number,
   showArrow: PropTypes.bool,
   arrowStyle: PropTypes.shape({

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

@@ -128,7 +128,7 @@ export type SelectProps = {
     showClear?: boolean;
     showArrow?: boolean;
     renderSelectedItem?: RenderSelectedItemFn;
-    renderCreateItem?: (inputValue: OptionProps['value'], focus: boolean) => React.ReactNode;
+    renderCreateItem?: (inputValue: OptionProps['value'], focus: boolean, style?: React.CSSProperties) => React.ReactNode;
     renderOptionItem?: (props: optionRenderProps) => React.ReactNode;
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
@@ -241,7 +241,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        spacing: PropTypes.Requireable<number>;
+        spacing: PropTypes.Requireable<NonNullable<number | object>>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/select/index.js

@@ -550,7 +550,7 @@ class Select extends BaseComponent {
       }, locale.createText), option.value)));
       return defaultCreateItem;
     }
-    const customCreateItem = renderCreateItem(option.value, isFocused);
+    const customCreateItem = renderCreateItem(option.value, isFocused, style);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
@@ -1271,7 +1271,7 @@ Select.propTypes = {
   autoAdjustOverflow: PropTypes.bool,
   mouseEnterDelay: PropTypes.number,
   mouseLeaveDelay: PropTypes.number,
-  spacing: PropTypes.number,
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   onClear: PropTypes.func,

package/lib/es/toast/index.js

@@ -221,9 +221,6 @@ const createBaseToast = () => {
       const refFn = toast => {
         var _a;
         if (((_a = toast === null || toast === void 0 ? void 0 : toast.foundation) === null || _a === void 0 ? void 0 : _a._id) && updatedIds.includes(toast.foundation._id)) {
-          toast.foundation.setState({
-            duration: toast.props.duration
-          });
           toast.foundation.restartCloseTimer();
         }
       };

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

@@ -36,7 +36,10 @@ export interface TooltipProps extends BaseProps {
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
-    spacing?: number;
+    spacing?: number | {
+        x: number;
+        y: number;
+    };
     margin?: number | {
         marginLeft: number;
         marginTop: number;
@@ -103,7 +106,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         prefixCls: PropTypes.Requireable<string>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
-        spacing: PropTypes.Requireable<number>;
+        spacing: PropTypes.Requireable<NonNullable<number | object>>;
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         zIndex: PropTypes.Requireable<number>;

package/lib/es/tooltip/index.js

@@ -655,7 +655,7 @@ Tooltip.propTypes = {
   prefixCls: PropTypes.string,
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
-  spacing: PropTypes.number,
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   margin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   zIndex: PropTypes.number,

package/lib/es/tree/index.js

@@ -233,8 +233,10 @@ class Tree extends BaseComponent {
       const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
       return firstInProps || treeDataHasChange;
     };
+    const needUpdateTreeData = needUpdate('treeData');
+    const needUpdateSimpleJson = needUpdate('treeDataSimpleJson');
     // Update the data of tree in state
-    if (needUpdate('treeData') || props.draggable && needUpdateData()) {
+    if (needUpdateTreeData || props.draggable && needUpdateData()) {
       treeData = props.treeData;
       newState.treeData = treeData;
       const entitiesMap = convertDataToEntities(treeData);
@@ -242,7 +244,7 @@ class Tree extends BaseComponent {
       keyEntities = newState.keyEntities;
       newState.cachedKeyValuePairs = Object.assign({}, entitiesMap.valueEntities);
       valueEntities = newState.cachedKeyValuePairs;
-    } else if (needUpdate('treeDataSimpleJson')) {
+    } else if (needUpdateSimpleJson) {
       // Convert treeDataSimpleJson to treeData
       treeData = convertJsonToData(props.treeDataSimpleJson);
       newState.treeData = treeData;
@@ -259,7 +261,7 @@ class Tree extends BaseComponent {
         newState.motionType = null;
       }
     }
-    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const dataUpdated = needUpdateSimpleJson || needUpdateTreeData;
     const expandAllWhenDataChange = dataUpdated && props.expandAll;
     if (!isSeaching) {
       // Update expandedKeys

package/lib/es/treeSelect/index.js

@@ -886,8 +886,10 @@ class TreeSelect extends BaseComponent {
     const newState = {
       prevProps: props
     };
+    const needUpdateTreeData = needUpdate('treeData');
+    const needUpdateExpandedKeys = needUpdate('expandedKeys');
     // TreeNode
-    if (needUpdate('treeData')) {
+    if (needUpdateTreeData) {
       treeData = props.treeData;
       newState.treeData = treeData;
       const entitiesMap = convertDataToEntities(treeData);
@@ -903,9 +905,9 @@ class TreeSelect extends BaseComponent {
         newState.motionType = null;
       }
     }
-    const expandAllWhenDataChange = needUpdate('treeData') && props.expandAll;
+    const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
     // expandedKeys
-    if (needUpdate('expandedKeys') || prevProps && needUpdate('autoExpandParent')) {
+    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
       newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
       // only show animation when treeData does not change
       if (prevProps && props.motion && !treeData) {
@@ -926,7 +928,7 @@ class TreeSelect extends BaseComponent {
       newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject), keyEntities, props.multiple, valueEntities);
     }
     // flattenNodes
-    if (treeData || needUpdate('expandedKeys')) {
+    if (treeData || needUpdateExpandedKeys) {
       const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
       newState.flattenNodes = flattenNodes;
     }
@@ -978,7 +980,7 @@ class TreeSelect extends BaseComponent {
       newState.loadedKeys = new Set(props.loadedKeys);
     }
     // ================== rePosKey ==================
-    if (needUpdate('treeData') || needUpdate('value')) {
+    if (needUpdateTreeData || needUpdate('value')) {
       newState.rePosKey = rePosKey + 1;
     }
     // ================ disableStrictly =================

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.44.0",
+    "version": "2.45.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.44.0",
-        "@douyinfe/semi-animation-react": "2.44.0",
-        "@douyinfe/semi-foundation": "2.44.0",
-        "@douyinfe/semi-icons": "2.44.0",
-        "@douyinfe/semi-illustrations": "2.44.0",
-        "@douyinfe/semi-theme-default": "2.44.0",
+        "@douyinfe/semi-animation": "2.45.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.45.0-beta.0",
+        "@douyinfe/semi-foundation": "2.45.0-beta.0",
+        "@douyinfe/semi-icons": "2.45.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.45.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.45.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d683a25e4dd9c5fb8dbb069d83ffd24998b14191",
+    "gitHead": "7a93b57c88a43db5c47b649741a9b6ba861560f4",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",