refactor closable handling

Author: zombieJ

Agent.md

@@ -0,0 +1,6 @@
+# Agent Rules
+
+## Refactor
+
+- Do not modify any files under `src/legacy` when handling refactor requests unless the user explicitly asks for legacy changes.
+- For refactor requests, do not run tests by default. Only run tests if the user explicitly asks for them or the task clearly requires verification.

src/Notification.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
-import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import useNoticeTimer from './hooks/useNoticeTimer';
 import { useEvent } from '@rc-component/util';
+import useClosable, { type ClosableType } from './hooks/useClosable';
 
 export interface NotificationClassNames {
   wrapper?: string;
@@ -32,9 +32,7 @@ export interface NotificationProps {
   content?: React.ReactNode;
   actions?: React.ReactNode;
   close?: React.ReactNode;
-  closable?:
-    | boolean
-    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
+  closable?: ClosableType;
   offset?: {
     x: number;
     y: number;
@@ -90,36 +88,24 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
 
   // ========================= Close ==========================
   const onEventClose = useEvent(onClose);
-  const offsetRef = React.useRef(offset);
-  const closableObj = React.useMemo(() => {
-    if (typeof closable === 'object' && closable !== null) {
-      return closable;
-    }
 
-    return {};
-  }, [closable]);
-  const closeContent = close === undefined ? (closableObj.closeIcon ?? 'x') : close;
-  const mergedClosable = close !== undefined ? close !== null : !!closable;
-  const ariaProps = pickAttrs(closableObj, true);
-
-  if (offset) {
-    offsetRef.current = offset;
-  }
+  const [closableEnabled, closableConfig, closeBtnAriaProps] = useClosable(closable);
+  const closeContent = close === undefined ? closableConfig.closeIcon : close;
+  const mergedClosable = close !== undefined ? close !== null : closableEnabled;
 
   // ======================== Duration ========================
   const [hovering, setHovering] = React.useState(false);
 
   const [onResume, onPause] = useNoticeTimer(
     duration,
     () => {
-      closableObj.onClose?.();
+      closableConfig.onClose?.();
       onEventClose();
     },
     setPercent,
     !!showProgress,
   );
 
-  const mergedOffset = offset ?? offsetRef.current;
   const validPercent = 100 - Math.min(Math.max(percent * 100, 0), 100);
 
   React.useEffect(() => {
@@ -151,6 +137,14 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
     onMouseLeave?.(event);
   }
 
+  // ======================== Position ========================
+  const offsetRef = React.useRef(offset);
+  if (offset) {
+    offsetRef.current = offset;
+  }
+
+  const mergedOffset = offset ?? offsetRef.current;
+
   // ========================= Render =========================
   return (
     <div
@@ -186,18 +180,18 @@ const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props,
         <button
           className={clsx(`${noticePrefixCls}-close`, classNames?.close)}
           aria-label="Close"
-          {...ariaProps}
+          {...closeBtnAriaProps}
           style={styles?.close}
           onKeyDown={(event) => {
             if (event.key === 'Enter' || event.code === 'Enter') {
-              closableObj.onClose?.();
+              closableConfig.onClose?.();
               onEventClose();
             }
           }}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            closableObj.onClose?.();
+            closableConfig.onClose?.();
             onEventClose();
           }}
         >

src/NotificationList.tsx

@@ -119,10 +119,17 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
 
   return (
     <div
-      className={clsx(prefixCls, `${prefixCls}-${placement}`, contextClassNames?.list, className, {
-        [`${prefixCls}-stack`]: stackEnabled,
-        [`${prefixCls}-stack-expanded`]: expanded,
-      })}
+      className={clsx(
+        prefixCls,
+        listPrefixCls,
+        `${prefixCls}-${placement}`,
+        contextClassNames?.list,
+        className,
+        {
+          [`${prefixCls}-stack`]: stackEnabled,
+          [`${prefixCls}-stack-expanded`]: expanded,
+        },
+      )}
       onWheel={onWheel}
       onMouseEnter={() => {
         setListHovering(true);

src/hooks/useClosable.ts

@@ -0,0 +1,41 @@
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
+import * as React from 'react';
+
+export type ClosableConfig = {
+  closeIcon?: React.ReactNode;
+  onClose?: VoidFunction;
+} & React.AriaAttributes;
+
+export type ClosableType = boolean | ClosableConfig | null | undefined;
+
+export type MergedClosableConfig = Omit<ClosableConfig, 'closeIcon'> & {
+  closeIcon: React.ReactNode;
+};
+
+const EMPTY_CLOSABLE: ClosableConfig = {};
+
+function normalizeClosable(closable?: ClosableType): ClosableConfig {
+  if (typeof closable === 'object' && closable !== null) {
+    return closable;
+  }
+
+  return EMPTY_CLOSABLE;
+}
+
+export default function useClosable(
+  closable?: ClosableType,
+): [boolean, MergedClosableConfig, ReturnType<typeof pickAttrs>] {
+  const closableObj = React.useMemo(() => normalizeClosable(closable), [closable]);
+
+  const closableConfig = React.useMemo<MergedClosableConfig>(
+    () => ({
+      ...closableObj,
+      closeIcon: closableObj.closeIcon ?? 'x',
+    }),
+    [closableObj],
+  );
+
+  const closableAriaProps = React.useMemo(() => pickAttrs(closableConfig, true), [closableConfig]);
+
+  return [!!closable, closableConfig, closableAriaProps];
+}

tests/index.test.tsx

@@ -68,6 +68,26 @@ describe('Notification.Basic', () => {
     expect(document.querySelector('.test-icon').textContent).toEqual('test-close-icon');
   });
 
+  it('works with default close icon and aria props', () => {
+    const { instance } = renderDemo();
+
+    act(() => {
+      instance.open({
+        content: <p className="test">1</p>,
+        closable: {
+          'aria-describedby': 'custom-close',
+        },
+        duration: 0,
+      });
+    });
+
+    const closeBtn = document.querySelector('.rc-notification-notice-close');
+
+    expect(document.querySelectorAll('.test')).toHaveLength(1);
+    expect(closeBtn?.textContent).toEqual('x');
+    expect(closeBtn).toHaveAttribute('aria-describedby', 'custom-close');
+  });
+
   it('works with multi instance', () => {
     const { instance } = renderDemo();