refactor: remove close prop and simplify closable handling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/Notification.tsx

@@ -22,7 +22,7 @@ export interface NotificationStyles {
 
 export interface NotificationProps {
   // Style
-  prefixCls?: string;
+  prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
   classNames?: NotificationClassNames;
@@ -31,7 +31,6 @@ export interface NotificationProps {
   // UI
   content?: React.ReactNode;
   actions?: React.ReactNode;
-  close?: React.ReactNode;
   closable?: ClosableType;
   offset?: {
     x: number;
@@ -50,13 +49,14 @@ export interface NotificationProps {
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  /** @deprecated Please use `closable.onClose` instead. */
   onClose?: () => void;
 }
 
 const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {
   const {
     // Style
-    prefixCls = 'rc-notification',
+    prefixCls,
     className,
     style,
     classNames,
@@ -65,7 +65,6 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
     // UI
     content,
     actions,
-    close,
     closable,
     offset,
     props: rootProps,
@@ -87,24 +86,16 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
   const noticePrefixCls = `${prefixCls}-notice`;
 
   // ========================= Close ==========================
-  const onEventClose = useEvent(onClose);
-
-  const [closableEnabled, closableConfig, closeBtnAriaProps] = useClosable(closable);
-  const closeContent = close === undefined ? closableConfig.closeIcon : close;
-  const mergedClosable = close !== undefined ? close !== null : closableEnabled;
+  const [mergedClosable, closableConfig, closeBtnAriaProps] = useClosable(closable);
+  const onInternalClose = useEvent(() => {
+    closableConfig.onClose?.();
+    onClose?.();
+  });
 
   // ======================== Duration ========================
   const [hovering, setHovering] = React.useState(false);
 
-  const [onResume, onPause] = useNoticeTimer(
-    duration,
-    () => {
-      closableConfig.onClose?.();
-      onEventClose();
-    },
-    setPercent,
-    !!showProgress,
-  );
+  const [onResume, onPause] = useNoticeTimer(duration, onInternalClose, setPercent, !!showProgress);
 
   const validPercent = 100 - Math.min(Math.max(percent * 100, 0), 100);
 
@@ -137,6 +128,12 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
     onMouseLeave?.(event);
   }
 
+  function onInternalCloseClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+    onInternalClose();
+  }
+
   // ======================== Position ========================
   const offsetRef = React.useRef(offset);
   if (offset) {
@@ -182,35 +179,22 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
           aria-label="Close"
           {...closeBtnAriaProps}
           style={styles?.close}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' || event.code === 'Enter') {
-              closableConfig.onClose?.();
-              onEventClose();
-            }
-          }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            closableConfig.onClose?.();
-            onEventClose();
-          }}
+          onClick={onInternalCloseClick}
         >
-          {closeContent}
+          {closableConfig.closeIcon}
         </button>
       )}
 
+      {actions && <div className="actions">{actions}</div>}
+
       {showProgress && typeof duration === 'number' && duration > 0 && (
         <progress
           className={clsx(`${noticePrefixCls}-progress`, classNames?.progress)}
           max="100"
           value={validPercent}
           style={styles?.progress}
-        >
-          {validPercent}%
-        </progress>
+        />
       )}
-
-      {actions && <div className="actions">{actions}</div>}
     </div>
   );
 });

src/NotificationList.tsx

@@ -16,7 +16,7 @@ import useStack from './hooks/useStack';
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 export type { StackConfig } from './interface';
 
-export interface NotificationListConfig extends NotificationProps {
+export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
   key: React.Key;
   placement?: Placement;
   times?: number;

src/hooks/useClosable.ts

@@ -33,7 +33,7 @@ export default function useClosable(
   const closableConfig = React.useMemo<ParsedClosableConfig>(
     () => ({
       ...closableObj,
-      closeIcon: closableObj.closeIcon ?? '×',
+      closeIcon: 'closeIcon' in closableObj ? closableObj.closeIcon : '×',
       disabled: closableObj.disabled ?? false,
     }),
     [closableObj],