@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/notification/index.js

@@ -0,0 +1,316 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context5 = _interopRequireDefault(require("../configProvider/context"));
+
+var _notificationListFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/notification/notificationListFoundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/notification/constants");
+
+var _notice = _interopRequireDefault(require("./notice"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+require("@douyinfe/semi-foundation/lib/cjs/notification/notification.css");
+
+var _NoticeTransition = _interopRequireDefault(require("./NoticeTransition"));
+
+var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
+
+var _useNotification = _interopRequireDefault(require("./useNotification"));
+
+let ref = null;
+const defaultConfig = {
+  duration: 3,
+  position: 'topRight',
+  motion: true,
+  content: '',
+  title: '',
+  zIndex: 1010
+};
+
+class NotificationList extends _baseComponent.default {
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+
+    this.add = noticeOpts => this.foundation.addNotice(noticeOpts);
+
+    this.remove = id => {
+      this.foundation.removeNotice(id);
+    };
+
+    this.destroyAll = () => this.foundation.destroyAll();
+
+    this.renderNoticeInPosition = function (notices, position) {
+      let removedItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      const className = (0, _classnames.default)(_constants.cssClasses.LIST); // TODO notifyOnClose
+
+      if (notices.length) {
+        const style = _this.setPosInStyle(notices[0]);
+
+        return (
+          /*#__PURE__*/
+          // @ts-ignore
+          _react.default.createElement("div", {
+            placement: position,
+            key: position,
+            className: className,
+            style: style
+          }, (0, _map.default)(notices).call(notices, (notice, index) => notice.motion ? /*#__PURE__*/_react.default.createElement(_NoticeTransition.default, {
+            key: notice.id || index,
+            position: position,
+            motion: notice.motion
+          }, (0, _find.default)(removedItems).call(removedItems, item => item.id === notice.id) ? null : transitionStyle => /*#__PURE__*/_react.default.createElement(_notice.default, (0, _assign.default)({}, notice, {
+            style: (0, _assign.default)((0, _assign.default)({}, transitionStyle), notice.style),
+            key: notice.id,
+            close: _this.remove
+          }))) : /*#__PURE__*/_react.default.createElement(_notice.default, (0, _assign.default)({}, notice, {
+            style: (0, _assign.default)({}, notice.style),
+            key: notice.id,
+            close: _this.remove
+          }))))
+        );
+      }
+
+      return null;
+    };
+
+    this.state = {
+      notices: [],
+      removedItems: []
+    };
+    this.noticeStorage = [];
+    this.removeItemStorage = [];
+    this.foundation = new _notificationListFoundation.default(this.adapter);
+  }
+
+  get adapter() {
+    var _this2 = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      updateNotices: function (notices) {
+        let removedItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+        _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
+        });
+      },
+      getNotices: () => this.noticeStorage
+    });
+  }
+
+  static addNotice(notice) {
+    const id = (0, _uuid.default)('notification');
+
+    if (!ref) {
+      const {
+        getPopupContainer
+      } = notice;
+      const div = document.createElement('div');
+
+      if (!this.wrapperId) {
+        var _context;
+
+        this.wrapperId = (0, _slice.default)(_context = (0, _uuid.default)('notification-wrapper')).call(_context, 0, 32);
+      }
+
+      div.className = _constants.cssClasses.WRAPPER;
+      div.id = this.wrapperId;
+      div.style.zIndex = String(typeof notice.zIndex === 'number' ? notice.zIndex : defaultConfig.zIndex);
+
+      if (getPopupContainer) {
+        const container = getPopupContainer();
+        container.appendChild(div);
+      } else {
+        document.body.appendChild(div);
+      }
+
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(NotificationList, {
+        ref: instance => ref = instance
+      }), div, () => {
+        ref.add((0, _assign.default)((0, _assign.default)({}, notice), {
+          id
+        }));
+      });
+    } else {
+      ref.add((0, _assign.default)((0, _assign.default)({}, notice), {
+        id
+      }));
+    }
+
+    return id;
+  }
+
+  static removeNotice(id) {
+    if (ref) {
+      ref.remove(id);
+    }
+
+    return id;
+  }
+
+  static info(opts) {
+    return this.addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), opts), {
+      type: 'info'
+    }));
+  }
+
+  static success(opts) {
+    return this.addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), opts), {
+      type: 'success'
+    }));
+  }
+
+  static error(opts) {
+    return this.addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), opts), {
+      type: 'error'
+    }));
+  }
+
+  static warning(opts) {
+    return this.addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), opts), {
+      type: 'warning'
+    }));
+  }
+
+  static open(opts) {
+    return this.addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), opts), {
+      type: 'default'
+    }));
+  }
+
+  static close(id) {
+    return this.removeNotice(id);
+  }
+
+  static destroyAll() {
+    if (ref) {
+      ref.destroyAll();
+      const wrapper = document.querySelector("#".concat(this.wrapperId));
+
+      _reactDom.default.unmountComponentAtNode(wrapper);
+
+      wrapper && wrapper.parentNode.removeChild(wrapper);
+      ref = null;
+      this.wrapperId = null;
+    }
+  }
+
+  static config(opts) {
+    var _context2;
+
+    (0, _map.default)(_context2 = ['top', 'left', 'bottom', 'right']).call(_context2, pos => {
+      if (pos in opts) {
+        defaultConfig[pos] = opts[pos];
+      }
+    });
+
+    if (typeof opts.zIndex === 'number') {
+      defaultConfig.zIndex = opts.zIndex;
+    }
+
+    if (typeof opts.duration === 'number') {
+      defaultConfig.duration = opts.duration;
+    }
+
+    if (typeof opts.position === 'string') {
+      defaultConfig.position = opts.position;
+    }
+  }
+
+  setPosInStyle(noticeInstance) {
+    var _context3;
+
+    const style = {};
+    (0, _forEach.default)(_context3 = ['top', 'left', 'bottom', 'right']).call(_context3, pos => {
+      if (pos in noticeInstance) {
+        const val = noticeInstance[pos];
+        style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
+      }
+    });
+    return style;
+  }
+
+  render() {
+    var _context4;
+
+    let {
+      notices
+    } = this.state;
+    const {
+      removedItems
+    } = this.state;
+    notices = (0, _from.default)(new _set.default([...notices, ...removedItems]));
+    const noticesInPosition = {
+      top: [],
+      topLeft: [],
+      topRight: [],
+      bottom: [],
+      bottomLeft: [],
+      bottomRight: []
+    };
+    (0, _forEach.default)(notices).call(notices, notice => {
+      const direction = notice.direction || this.context.direction;
+      const defaultPosition = direction === 'rtl' ? 'topLeft' : 'topRight';
+      const position = notice.position || defaultPosition;
+      noticesInPosition[position].push(notice);
+    });
+    const noticesList = (0, _map.default)(_context4 = (0, _entries.default)(noticesInPosition)).call(_context4, obj => {
+      const pos = obj[0];
+      const noticesInPos = obj[1];
+      return this.renderNoticeInPosition(noticesInPos, pos, removedItems);
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, noticesList);
+  }
+
+}
+
+NotificationList.contextType = _context5.default;
+NotificationList.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  direction: _propTypes.default.oneOf(_constants.strings.directions)
+};
+NotificationList.defaultProps = {};
+NotificationList.useNotification = _useNotification.default;
+var _default = NotificationList;
+exports.default = _default;

package/lib/cjs/notification/notice.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NoticeAdapter, NoticeState, NoticeProps } from '@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation';
+import BaseComponent from '../_base/baseComponent';
+export interface NoticeReactProps extends NoticeProps {
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static propTypes: {
+        duration: PropTypes.Requireable<number>;
+        id: PropTypes.Requireable<string | number>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        type: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
+        showClose: PropTypes.Requireable<boolean>;
+        close: PropTypes.Requireable<(...args: any[]) => any>;
+        direction: PropTypes.Requireable<"ltr" | "rtl">;
+    };
+    static defaultProps: {
+        duration: number;
+        id: string;
+        close: (...args: any[]) => void;
+        onClose: (...args: any[]) => void;
+        onClick: (...args: any[]) => void;
+        onCloseClick: (...args: any[]) => void;
+        content: string;
+        title: string;
+        showClose: boolean;
+        theme: string;
+    };
+    get adapter(): NoticeAdapter;
+    constructor(props: NoticeReactProps);
+    componentWillUnmount(): void;
+    renderTypeIcon(): JSX.Element;
+    clearCloseTimer: () => void;
+    startCloseTimer: () => void;
+    close: (e: React.MouseEvent) => void;
+    notifyClick: (e: React.MouseEvent) => void;
+    render(): JSX.Element;
+}
+export default Notice;

package/lib/cjs/notification/notice.js

@@ -0,0 +1,240 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context4 = _interopRequireDefault(require("../configProvider/context"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/notification/constants");
+
+var _notificationFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation"));
+
+var _iconButton = _interopRequireDefault(require("../iconButton"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _utils = require("../_utils");
+
+var _lodashEs = require("lodash-es");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable no-unreachable */
+
+
+const prefixCls = _constants.cssClasses.NOTICE;
+const {
+  duration
+} = _constants.numbers;
+const {
+  types,
+  themes,
+  directions
+} = _constants.strings;
+
+class Notice extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.clearCloseTimer = () => {
+      this.foundation._clearCloseTimer();
+    };
+
+    this.startCloseTimer = () => {
+      this.foundation._startCloseTimer();
+    };
+
+    this.close = e => {
+      this.props.onCloseClick(this.props.id);
+      this.foundation.close(e);
+    };
+
+    this.notifyClick = e => {
+      this.props.onClick(e);
+    };
+
+    this.state = {
+      visible: true
+    };
+    this.foundation = new _notificationFoundation.default(this.adapter);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyWrapperToRemove: id => {
+        this.props.close(id);
+      },
+      notifyClose: () => {
+        this.props.onClose();
+        this.props.onHookClose && this.props.onHookClose();
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  renderTypeIcon() {
+    var _context;
+
+    const {
+      type,
+      icon
+    } = this.props;
+    const iconMap = {
+      warning: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, {
+        size: "large"
+      }),
+      success: /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, {
+        size: "large"
+      }),
+      info: /*#__PURE__*/_react.default.createElement(_semiIcons.IconInfoCircle, {
+        size: "large"
+      }),
+      error: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, {
+        size: "large"
+      })
+    };
+    let iconType = iconMap[type];
+    const iconCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-icon")]: true,
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, type)]: true
+    });
+
+    if (icon) {
+      iconType = icon;
+    }
+
+    if (iconType) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: iconCls
+      }, (0, _utils.isSemiIcon)(iconType) ? /*#__PURE__*/_react.default.cloneElement(iconType, {
+        size: iconType.props.size || 'large'
+      }) : iconType);
+    }
+
+    return null;
+  }
+
+  render() {
+    var _context2, _context3;
+
+    const direction = this.props.direction || this.context.direction;
+    const defaultPosition = direction === 'rtl' ? 'topLeft' : 'topRight';
+
+    const _a = this.props,
+          {
+      content,
+      title,
+      theme,
+      position = defaultPosition,
+      type,
+      id,
+      onCloseClick,
+      className,
+      showClose,
+      style
+    } = _a,
+          attr = __rest(_a, ["content", "title", "theme", "position", "type", "id", "onCloseClick", "className", "showClose", "style"]);
+
+    const {
+      visible
+    } = this.state;
+    const wrapper = (0, _classnames.default)(prefixCls, className, {
+      ["".concat(prefixCls, "-close")]: !visible,
+      ["".concat(prefixCls, "-icon-show")]: (0, _includes.default)(types).call(types, type),
+      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: true,
+      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, theme)]: theme === 'light',
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapper,
+      style: style,
+      onMouseEnter: this.clearCloseTimer,
+      onMouseLeave: this.startCloseTimer,
+      onClick: this.notifyClick
+    }, /*#__PURE__*/_react.default.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-inner")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content-wrapper")
+    }, title ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-title")
+    }, title) : '', content ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, content) : ''), showClose && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      className: "".concat(prefixCls, "-icon-close"),
+      type: "tertiary",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      theme: "borderless",
+      size: "small",
+      onClick: this.close
+    })));
+  }
+
+}
+
+Notice.contextType = _context4.default;
+Notice.propTypes = {
+  duration: _propTypes.default.number,
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  title: _propTypes.default.node,
+  content: _propTypes.default.node,
+  type: _propTypes.default.oneOf(types),
+  theme: _propTypes.default.oneOf(themes),
+  icon: _propTypes.default.node,
+  onClick: _propTypes.default.func,
+  onClose: _propTypes.default.func,
+  onCloseClick: _propTypes.default.func,
+  showClose: _propTypes.default.bool,
+  // private props
+  close: _propTypes.default.func,
+  direction: _propTypes.default.oneOf(directions)
+};
+Notice.defaultProps = {
+  duration,
+  id: '',
+  close: _lodashEs.noop,
+  onClose: _lodashEs.noop,
+  onClick: _lodashEs.noop,
+  onCloseClick: _lodashEs.noop,
+  content: '',
+  title: '',
+  showClose: true,
+  theme: 'normal'
+};
+var _default = Notice;
+exports.default = _default;

package/lib/cjs/notification/useNotification/HookNotice.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NoticeInstance } from '@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation';
+export interface HookNoticeProps extends NoticeInstance {
+    afterClose: (id: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<HookNoticeProps & React.RefAttributes<any>>;
+export default _default;

package/lib/cjs/notification/useNotification/HookNotice.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _notice = _interopRequireDefault(require("../notice"));
+
+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; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const HookNotice = (_a, ref) => {
+  var {
+    afterClose
+  } = _a,
+      config = __rest(_a, ["afterClose"]);
+
+  const [visible, setVisible] = (0, _react.useState)(true);
+
+  const close = () => {
+    setVisible(false);
+  };
+
+  _react.default.useImperativeHandle(ref, () => ({
+    close: () => {
+      setVisible(false);
+    }
+  }));
+
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      afterClose(String(config.id));
+    }
+  }, [visible]);
+  return visible ? /*#__PURE__*/_react.default.createElement(_notice.default, (0, _assign.default)({}, config, {
+    onHookClose: close
+  })) : null;
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(HookNotice);
+
+exports.default = _default;

package/lib/cjs/notification/useNotification/index.d.ts

@@ -0,0 +1,10 @@
+import '@douyinfe/semi-foundation/lib/cjs/notification/notification.css';
+import { NoticeProps } from '@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation';
+export default function useNotification(): (JSX.Element | {
+    success: (config: NoticeProps) => string;
+    info: (config: NoticeProps) => string;
+    error: (config: NoticeProps) => string;
+    warning: (config: NoticeProps) => string;
+    open: (config: NoticeProps) => string;
+    close: (instanceID: string) => void;
+})[];