@rainbow-oh/yee-c 0.8.2 → 0.8.3

package/dist/esm/notice/notice.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "id", "status", "title", "content", "style", "className", "icon", "duration", "closable", "showProgress", "pauseOnHover", "onClick", "onClose", "onDestroy", "data-testid"];
+var _excluded = ["prefixCls", "id", "timerGeneration", "placement", "status", "title", "content", "style", "className", "icon", "duration", "closable", "showProgress", "pauseOnHover", "onClick", "onClose", "onDestroy", "data-testid"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -11,21 +11,30 @@ import { CircleAlert, CircleCheck, CircleX, Info, X } from 'lucide-react';
 import React from 'react';
 import Progress from "../Progress";
 import useCountdown from "../hooks/useCountdown";
+import Button from "../Button";
 var icons = {
   info: /*#__PURE__*/React.createElement(Info, {
-    size: 20,
+    size: 22,
+    fill: "currentColor",
+    stroke: "#FFF",
     strokeWidth: 2
   }),
   success: /*#__PURE__*/React.createElement(CircleCheck, {
-    size: 20,
+    size: 22,
+    fill: "currentColor",
+    stroke: "#FFF",
     strokeWidth: 2
   }),
   warning: /*#__PURE__*/React.createElement(CircleAlert, {
-    size: 20,
+    size: 22,
+    fill: "currentColor",
+    stroke: "#FFF",
     strokeWidth: 2
   }),
   error: /*#__PURE__*/React.createElement(CircleX, {
-    size: 20,
+    size: 22,
+    fill: "currentColor",
+    stroke: "#FFF",
     strokeWidth: 2
   })
 };
@@ -33,6 +42,8 @@ var Notice = function Notice(props) {
   var _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? 'yee-notice' : _props$prefixCls,
     key = props.id,
+    timerGeneration = props.timerGeneration,
+    placement = props.placement,
     status = props.status,
     title = props.title,
     content = props.content,
@@ -51,26 +62,57 @@ var Notice = function Notice(props) {
     onDestroy = props.onDestroy,
     dataTestId = props['data-testid'],
     rest = _objectWithoutProperties(props, _excluded);
+
+  // The state owner dispatches onClose after removing the notice.
+  void onClose;
+  var isHoveredRef = React.useRef(false);
   var _useCountdown = useCountdown({
       duration: duration,
+      resetKey: timerGeneration,
       onComplete: function onComplete() {
-        onDestroy === null || onDestroy === void 0 || onDestroy(key);
-        onClose === null || onClose === void 0 || onClose();
+        onDestroy === null || onDestroy === void 0 || onDestroy(key, timerGeneration);
       }
     }),
     remaining = _useCountdown.remaining,
+    isPaused = _useCountdown.isPaused,
     onPause = _useCountdown.onPause,
     onResume = _useCountdown.onResume;
-  var handleClose = function handleClose(e) {
-    e.stopPropagation();
-    onDestroy === null || onDestroy === void 0 || onDestroy(key);
-    onClose === null || onClose === void 0 || onClose();
+  React.useEffect(function () {
+    if (pauseOnHover && isHoveredRef.current && !isPaused) {
+      onPause();
+    } else if ((!pauseOnHover || !isHoveredRef.current) && isPaused) {
+      onResume();
+    }
+  }, [isPaused, onPause, onResume, pauseOnHover]);
+  var handleMouseEnter = function handleMouseEnter() {
+    isHoveredRef.current = true;
+    if (pauseOnHover) {
+      onPause();
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    isHoveredRef.current = false;
+    if (isPaused) {
+      onResume();
+    }
+  };
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
+    onDestroy === null || onDestroy === void 0 || onDestroy(key, timerGeneration);
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!onClick || event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    onClick();
   };
   var renderIcon = function renderIcon() {
     if (!icon && !status) {
       return null;
     }
     return /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true",
       className: "".concat(prefixCls, "-icon")
     }, icon ? icon : status ? icons[status] : null);
   };
@@ -78,23 +120,33 @@ var Notice = function Notice(props) {
     if (!closable) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement(Button, {
+      variant: "text",
+      size: "small",
       className: "".concat(prefixCls, "-close"),
       onClick: handleClose,
-      type: "button",
-      "aria-label": "Close"
-    }, /*#__PURE__*/React.createElement(X, {
-      size: 14,
-      strokeWidth: 2
-    }));
+      "aria-label": "Close notice",
+      icon: /*#__PURE__*/React.createElement(X, {
+        "aria-hidden": "true",
+        size: 14,
+        strokeWidth: 2
+      })
+    });
   };
+  var isAssertive = status === 'error' || status === 'warning';
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "aria-atomic": "true",
+    "aria-live": isAssertive ? 'assertive' : 'polite',
+    role: onClick ? 'button' : isAssertive ? 'alert' : 'status',
+    tabIndex: onClick ? 0 : undefined,
+    "data-placement": placement,
     "data-testid": dataTestId,
-    className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-").concat(status), status), className),
+    className: clsx(prefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(status), status), "".concat(prefixCls, "-clickable"), onClick), "".concat(prefixCls, "-closable"), closable), className),
     style: style,
     onClick: onClick,
-    onMouseEnter: pauseOnHover ? onPause : undefined,
-    onMouseLeave: pauseOnHover ? onResume : undefined
+    onKeyDown: handleKeyDown,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content-wrapper")
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {

package/dist/esm/notice/style/index.less

@@ -12,7 +12,7 @@
   background-color: var(--yee-notice-bg-color);
   border-radius: var(--yee-notice-border-radius);
   box-shadow: var(--yee-notice-box-shadow);
-  cursor: pointer;
+  cursor: default;
   transition: all 0.3s ease;
   border: var(--yee-notice-border-width) solid transparent;
   overflow: hidden;
@@ -21,6 +21,18 @@
     box-shadow: var(--yee-notice-box-shadow-hover);
   }
 
+  &-clickable {
+    cursor: pointer;
+  }
+
+  &-closable {
+    @{pls}-content-wrapper {
+      padding-right: calc(
+        var(--yee-notice-close-size) + var(--yee-notice-close-right)
+      );
+    }
+  }
+
   &-content-wrapper {
     display: flex;
     align-items: flex-start;

package/dist/esm/notice/use-notice.d.ts

@@ -1,16 +1,7 @@
 import React from 'react';
-import { NoticeConfig } from './interface';
-type PlacementType = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+import { NoticeApi } from './interface';
 declare const useNotice: () => {
-    noticeApi: {
-        open: (props: string | NoticeConfig) => void;
-        success: (props: string | NoticeConfig) => void;
-        error: (props: string | NoticeConfig) => void;
-        warning: (props: string | NoticeConfig) => void;
-        info: (props: string | NoticeConfig) => void;
-        destroy: (key: string | number) => void;
-        clear: (placement?: PlacementType) => void;
-    };
+    noticeApi: NoticeApi;
     noticeHolders: React.ReactPortal[];
 };
 export default useNotice;

package/dist/esm/notice/use-notice.js

@@ -4,136 +4,216 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import NoticeList from "./notice-list";
+var invokeOnClose = function invokeOnClose(notices) {
+  var errors = [];
+  notices.forEach(function (notice) {
+    try {
+      var _notice$onClose;
+      (_notice$onClose = notice.onClose) === null || _notice$onClose === void 0 || _notice$onClose.call(notice);
+    } catch (error) {
+      errors.push(error);
+    }
+  });
+  errors.forEach(function (error) {
+    var reportError = globalThis.reportError;
+    if (reportError) {
+      reportError(error);
+    } else {
+      console.error(error);
+    }
+  });
+};
 var useNotice = function useNotice() {
   var _useState = useState(new Map()),
     _useState2 = _slicedToArray(_useState, 2),
     noticesByPlacement = _useState2[0],
     setNoticesByPlacement = _useState2[1];
-  var count = useRef(0);
-  var add = useCallback(function (props) {
-    var placement = props.placement || 'topRight';
-    var id = count.current++;
-    setNoticesByPlacement(function (prev) {
-      var newMap = new Map(prev);
-      var notices = newMap.get(placement) || [];
-      newMap.set(placement, [].concat(_toConsumableArray(notices), [_objectSpread({
-        key: id
-      }, props)]));
-      return newMap;
-    });
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    portalContainer = _useState4[0],
+    setPortalContainer = _useState4[1];
+  var noticesRef = useRef(new Map());
+  var generationByKey = useRef(new Map());
+  var generation = useRef(0);
+  var timerGeneration = useRef(0);
+  var autoKey = useRef(0);
+  useEffect(function () {
+    setPortalContainer(document.body);
+  }, []);
+  var updateNotices = useCallback(function (updater) {
+    var nextNotices = updater(noticesRef.current);
+    noticesRef.current = nextNotices;
+    setNoticesByPlacement(nextNotices);
   }, []);
-  var _onDestroy = function onDestroy(key, placement) {
-    setNoticesByPlacement(function (prev) {
-      var newMap = new Map(prev);
-      var notices = newMap.get(placement) || [];
-      var filtered = notices.filter(function (notice) {
-        return notice.key !== key;
+  var onDestroy = useCallback(function (key, expectedTimerGeneration) {
+    var _target$onClose, _target2;
+    var target;
+    noticesRef.current.forEach(function (items) {
+      var _target;
+      (_target = target) !== null && _target !== void 0 ? _target : target = items.find(function (item) {
+        return item.key === key;
       });
-      if (filtered.length === 0) {
-        newMap.delete(placement);
-      } else {
-        newMap.set(placement, filtered);
-      }
-      return newMap;
     });
-  };
-  var noticeApi = {
-    open: function open(props) {
-      add(typeof props === 'string' ? {
-        content: props,
-        status: 'info'
-      } : _objectSpread({
-        status: 'info'
-      }, props));
-    },
-    success: function success(props) {
-      add(typeof props === 'string' ? {
-        content: props,
-        status: 'success'
-      } : _objectSpread(_objectSpread({}, props), {}, {
-        status: 'success'
-      }));
-    },
-    error: function error(props) {
-      add(typeof props === 'string' ? {
-        content: props,
-        status: 'error'
-      } : _objectSpread(_objectSpread({}, props), {}, {
-        status: 'error'
-      }));
-    },
-    warning: function warning(props) {
-      add(typeof props === 'string' ? {
-        content: props,
-        status: 'warning'
-      } : _objectSpread(_objectSpread({}, props), {}, {
-        status: 'warning'
-      }));
-    },
-    info: function info(props) {
-      add(typeof props === 'string' ? {
-        content: props,
-        status: 'info'
-      } : _objectSpread(_objectSpread({}, props), {}, {
-        status: 'info'
-      }));
-    },
-    destroy: function destroy(key) {
-      setNoticesByPlacement(function (prev) {
-        var newMap = new Map(prev);
-
-        // Find and remove in all placements
-        newMap.forEach(function (notices, placement) {
-          var filtered = notices.filter(function (notice) {
-            return notice.key !== key;
+    if (!target || expectedTimerGeneration !== undefined && target.timerGeneration !== expectedTimerGeneration) {
+      return;
+    }
+    generationByKey.current.delete(key);
+    updateNotices(function (current) {
+      var next = new Map(current);
+      next.forEach(function (items, placement) {
+        var filtered = items.filter(function (item) {
+          return item.key !== key;
+        });
+        if (filtered.length === 0) {
+          next.delete(placement);
+        } else if (filtered.length !== items.length) {
+          next.set(placement, filtered);
+        }
+      });
+      return next;
+    });
+    (_target$onClose = (_target2 = target).onClose) === null || _target$onClose === void 0 || _target$onClose.call(_target2);
+  }, [updateNotices]);
+  var add = useCallback(function (props) {
+    var _props$placement, _generationByKey$curr;
+    var placement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : 'topRight';
+    var key = props.key;
+    if (key === undefined || key === null) {
+      do {
+        key = "__yee_notice_auto_".concat(autoKey.current++);
+      } while (generationByKey.current.has(key));
+    }
+    var keyGeneration = (_generationByKey$curr = generationByKey.current.get(key)) !== null && _generationByKey$curr !== void 0 ? _generationByKey$curr : generation.current++;
+    generationByKey.current.set(key, keyGeneration);
+    var nextNotice = _objectSpread(_objectSpread({}, props), {}, {
+      key: key,
+      placement: placement,
+      timerGeneration: timerGeneration.current++
+    });
+    updateNotices(function (current) {
+      var next = new Map(current);
+      var existingIndex = -1;
+      next.forEach(function (items, currentPlacement) {
+        var index = items.findIndex(function (item) {
+          return item.key === key;
+        });
+        if (index < 0) {
+          return;
+        }
+        if (currentPlacement === placement) {
+          existingIndex = index;
+        } else {
+          var filtered = items.filter(function (item) {
+            return item.key !== key;
           });
           if (filtered.length === 0) {
-            newMap.delete(placement);
-          } else if (filtered.length !== notices.length) {
-            newMap.set(placement, filtered);
+            next.delete(currentPlacement);
+          } else {
+            next.set(currentPlacement, filtered);
           }
-        });
-        return newMap;
+        }
       });
-    },
-    clear: function clear(placement) {
-      if (placement) {
-        setNoticesByPlacement(function (prev) {
-          var newMap = new Map(prev);
-          newMap.delete(placement);
-          return newMap;
-        });
+      var targetNotices = (next.get(placement) || []).filter(function (item) {
+        return item.key !== key;
+      });
+      if (existingIndex >= 0) {
+        targetNotices.splice(existingIndex, 0, nextNotice);
       } else {
-        setNoticesByPlacement(new Map());
+        targetNotices.push(nextNotice);
       }
+      next.set(placement, targetNotices);
+      return next;
+    });
+    return function () {
+      if (generationByKey.current.get(key) === keyGeneration) {
+        onDestroy(key);
+      }
+    };
+  }, [onDestroy, updateNotices]);
+  var clear = useCallback(function (placement) {
+    var removed = placement ? noticesRef.current.get(placement) || [] : Array.from(noticesRef.current.values()).flat();
+    removed.forEach(function (item) {
+      return generationByKey.current.delete(item.key);
+    });
+    updateNotices(function (current) {
+      if (!placement) {
+        return new Map();
+      }
+      var next = new Map(current);
+      next.delete(placement);
+      return next;
+    });
+    invokeOnClose(removed);
+  }, [updateNotices]);
+  var noticeApi = useMemo(function () {
+    return {
+      open: function open(props) {
+        return add(typeof props === 'string' ? {
+          content: props,
+          status: 'info'
+        } : _objectSpread({
+          status: 'info'
+        }, props));
+      },
+      success: function success(props) {
+        return add(typeof props === 'string' ? {
+          content: props,
+          status: 'success'
+        } : _objectSpread(_objectSpread({}, props), {}, {
+          status: 'success'
+        }));
+      },
+      error: function error(props) {
+        return add(typeof props === 'string' ? {
+          content: props,
+          status: 'error'
+        } : _objectSpread(_objectSpread({}, props), {}, {
+          status: 'error'
+        }));
+      },
+      warning: function warning(props) {
+        return add(typeof props === 'string' ? {
+          content: props,
+          status: 'warning'
+        } : _objectSpread(_objectSpread({}, props), {}, {
+          status: 'warning'
+        }));
+      },
+      info: function info(props) {
+        return add(typeof props === 'string' ? {
+          content: props,
+          status: 'info'
+        } : _objectSpread(_objectSpread({}, props), {}, {
+          status: 'info'
+        }));
+      },
+      destroy: onDestroy,
+      clear: clear
+    };
+  }, [add, clear, onDestroy]);
+  var noticeHolders = useMemo(function () {
+    if (!portalContainer) {
+      return [];
     }
-  };
-  var noticeHolders = React.useMemo(function () {
     var holders = [];
     noticesByPlacement.forEach(function (notices, placement) {
       holders.push( /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(NoticeList, {
         items: notices,
         placement: placement,
-        onDestroy: function onDestroy(key) {
-          return _onDestroy(key, placement);
-        }
-      }), document.body, "notice-".concat(placement)));
+        onDestroy: onDestroy
+      }), portalContainer, "notice-".concat(placement)));
     });
     return holders;
-  }, [noticesByPlacement]);
+  }, [noticesByPlacement, onDestroy, portalContainer]);
   return {
     noticeApi: noticeApi,
     noticeHolders: noticeHolders

package/dist/esm/notice/wrapper.d.ts

@@ -1,31 +1,35 @@
 import { Root } from 'react-dom/client';
-import { NoticeConfig, NoticeType, WrapperedNoticeConfig } from './interface';
-type PlacementType = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+import { NoticeClose, NoticeConfig, NoticeType, PlacementType, WrapperedNoticeConfig } from './interface';
 declare class NoticeWrapper {
     roots: Map<PlacementType, Root>;
     containers: Map<PlacementType, HTMLElement>;
     notices: Map<PlacementType, NoticeType[]>;
+    generationByKey: Map<string | number, number>;
+    generation: number;
+    timerGeneration: number;
     constructor();
     uuid(): string;
     private createContainer;
     private cleanupContainer;
     unmount(placement?: PlacementType): void;
     render(placement: PlacementType): void;
-    show(params: WrapperedNoticeConfig): void;
-    destroy(key: string | number, placement?: PlacementType): void;
-    open(params: string | NoticeConfig): void;
-    info(params: string | NoticeConfig): void;
-    success(params: string | NoticeConfig): void;
-    warning(params: string | NoticeConfig): void;
-    error(params: string | NoticeConfig): void;
+    show(params: WrapperedNoticeConfig): NoticeClose;
+    destroy(key: string | number, expectedTimerGeneration?: number): void;
+    clear(placement?: PlacementType): void;
+    open(params: string | NoticeConfig): NoticeClose;
+    info(params: string | NoticeConfig): NoticeClose;
+    success(params: string | NoticeConfig): NoticeClose;
+    warning(params: string | NoticeConfig): NoticeClose;
+    error(params: string | NoticeConfig): NoticeClose;
 }
 declare const noticeWrapper: NoticeWrapper;
 export default noticeWrapper;
 export declare const notice: {
-    open: (params: string | NoticeConfig) => void;
-    info: (params: string | NoticeConfig) => void;
-    success: (params: string | NoticeConfig) => void;
-    warning: (params: string | NoticeConfig) => void;
-    error: (params: string | NoticeConfig) => void;
-    destroy: (key: string | number, placement?: PlacementType) => void;
+    open: (params: string | NoticeConfig) => NoticeClose;
+    info: (params: string | NoticeConfig) => NoticeClose;
+    success: (params: string | NoticeConfig) => NoticeClose;
+    warning: (params: string | NoticeConfig) => NoticeClose;
+    error: (params: string | NoticeConfig) => NoticeClose;
+    destroy: (key: string | number, expectedTimerGeneration?: number) => void;
+    clear: (placement?: PlacementType) => void;
 };