@rainbow-oh/yee-c 0.8.1 → 0.8.3

package/src/hooks/useCountdown.ts

@@ -4,19 +4,33 @@ export type CountdownOptions = {
   duration: number;
   interval?: number;
   onComplete?: () => void;
+  resetKey?: string | number;
 };
 
 export default function useCountdown({
   duration,
   interval = 100,
   onComplete,
+  resetKey,
 }: CountdownOptions) {
-  const [remaining, setRemaining] = useState(duration);
+  const initialRemaining = Math.max(0, duration);
+  const [remaining, setRemaining] = useState(initialRemaining);
   const [isPaused, setIsPaused] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const remainingRef = useRef(duration);
+  const remainingRef = useRef(initialRemaining);
+  const isPausedRef = useRef(false);
   const onCompleteRef = useRef(onComplete);
+  const identityRef = useRef({ duration, resetKey });
+  const epochRef = useRef(0);
+
   onCompleteRef.current = onComplete;
+  if (
+    identityRef.current.duration !== duration ||
+    identityRef.current.resetKey !== resetKey
+  ) {
+    identityRef.current = { duration, resetKey };
+    epochRef.current += 1;
+  }
 
   const clear = useCallback(() => {
     if (timerRef.current !== null) {
@@ -25,41 +39,58 @@ export default function useCountdown({
     }
   }, []);
 
-  const tick = useCallback(() => {
-    const next = Math.max(0, remainingRef.current - interval);
-    remainingRef.current = next;
-    setRemaining(next);
+  const tick = useCallback(
+    (epoch: number) => {
+      if (epoch !== epochRef.current) {
+        return;
+      }
 
-    if (next <= 0) {
-      onCompleteRef.current?.();
-    } else {
-      timerRef.current = setTimeout(tick, interval);
-    }
-  }, [interval]);
+      const next = Math.max(0, remainingRef.current - interval);
+      remainingRef.current = next;
+      setRemaining(next);
+
+      if (next <= 0) {
+        onCompleteRef.current?.();
+      } else {
+        timerRef.current = setTimeout(() => tick(epoch), interval);
+      }
+    },
+    [interval],
+  );
 
   const start = useCallback(() => {
     clear();
-    timerRef.current = setTimeout(tick, interval);
+    if (remainingRef.current > 0 && !isPausedRef.current) {
+      const epoch = epochRef.current;
+      timerRef.current = setTimeout(() => tick(epoch), interval);
+    }
   }, [clear, interval, tick]);
 
   useEffect(() => {
-    remainingRef.current = duration;
-    setRemaining(duration);
-    setIsPaused(false);
-    start();
+    clear();
+    const nextRemaining = Math.max(0, duration);
+    remainingRef.current = nextRemaining;
+    setRemaining(nextRemaining);
+
+    if (nextRemaining > 0 && !isPausedRef.current) {
+      start();
+    }
+
     return clear;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration]);
+  }, [clear, duration, resetKey, start]);
 
   const onPause = useCallback(() => {
+    isPausedRef.current = true;
     clear();
     setIsPaused(true);
   }, [clear]);
 
   const onResume = useCallback(() => {
-    if (remainingRef.current <= 0) return;
+    isPausedRef.current = false;
     setIsPaused(false);
-    start();
+    if (remainingRef.current > 0) {
+      start();
+    }
   }, [start]);
 
   return { remaining, isPaused, onPause, onResume };

package/src/hooks/useEvent.ts

@@ -7,9 +7,7 @@ export default function useEvent<T extends Function>(callback?: T): T {
 
   const memoFn = React.useCallback(
     (...args: unknown[]) =>
-      (ref.current as ((...args: unknown[]) => unknown) | undefined)?.(
-        ...args,
-      ),
+      (ref.current as ((...args: unknown[]) => unknown) | undefined)?.(...args),
     [],
   ) as unknown as T;
 

package/src/locale/context.tsx

@@ -7,7 +7,11 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { DEFAULT_LOCALE, DEFAULT_LOCALE_CONFIG, LOCALE_CONFIGS } from './constants';
+import {
+  DEFAULT_LOCALE,
+  DEFAULT_LOCALE_CONFIG,
+  LOCALE_CONFIGS,
+} from './constants';
 import type { Locale, LocaleConfigInput, TFunction } from './interface';
 import defaultLocaleData from './lang/en_US';
 import { deepMerge, isValidLocale, translate } from './util';

package/src/locale/interface.ts

@@ -76,6 +76,9 @@ export interface LocaleTable {
   selectionAll?: string; // "Select all on current page"
   selectionInvert?: string; // "Invert selection on current page"
   selectionNone?: string; // "Clear selection on current page"
+  sortAscending?: string; // "Click to sort ascending"
+  sortDescending?: string; // "Click to sort descending"
+  sortCancel?: string; // "Click to cancel sorting"
 }
 
 // Pagination component
@@ -220,4 +223,6 @@ export type DeepPartial<T> = T extends (...args: any[]) => any
  *   so the provider knows which built-in pack to merge the overrides onto;
  *   only the keys you specify are overridden, everything else is inherited.
  */
-export type LocaleConfigInput = string | (DeepPartial<Locale> & { locale: string });
+export type LocaleConfigInput =
+  | string
+  | (DeepPartial<Locale> & { locale: string });

package/src/locale/lang/en_US.ts

@@ -102,6 +102,9 @@ const locale: Locale = {
     selectionAll: 'Select All on Page',
     selectionInvert: 'Invert Selection on Page',
     selectionNone: 'Clear Selection on Page',
+    sortAscending: 'Click to sort ascending',
+    sortDescending: 'Click to sort descending',
+    sortCancel: 'Click to cancel sorting',
   },
 
   pagination: {

package/src/locale/lang/ja_JP.ts

@@ -102,6 +102,9 @@ const locale: Locale = {
     selectionAll: 'ページ内すべて選択',
     selectionInvert: 'ページ内選択を反転',
     selectionNone: 'ページ内選択をクリア',
+    sortAscending: 'クリックで昇順に並べ替え',
+    sortDescending: 'クリックで降順に並べ替え',
+    sortCancel: 'クリックで並べ替えを解除',
   },
 
   pagination: {

package/src/locale/lang/zh_CN.ts

@@ -93,6 +93,9 @@ const locale: Locale = {
     selectionAll: '全选当页',
     selectionInvert: '反选当页',
     selectionNone: '清空当页选择',
+    sortAscending: '点击升序排列',
+    sortDescending: '点击降序排列',
+    sortCancel: '点击取消排序',
   },
 
   pagination: {

package/src/locale/lang/zh_TW.ts

@@ -93,6 +93,9 @@ const locale: Locale = {
     selectionAll: '全選當頁',
     selectionInvert: '反選當頁',
     selectionNone: '清空當頁選擇',
+    sortAscending: '點擊升序排列',
+    sortDescending: '點擊降序排列',
+    sortCancel: '點擊取消排序',
   },
 
   pagination: {

package/src/message/demo/base.tsx

@@ -6,7 +6,7 @@ const BaseDemo = () => {
   const showMessage = (type: string) => {
     switch (type) {
       case 'info':
-        messageApi.open('This is an info message');
+        messageApi.open({content: 'This is an info message', duration: 0});
         break;
       case 'success':
         message.success('This is a success message');

package/src/message/index.ts

@@ -1,4 +1,4 @@
 import { message } from './wrapper';
-export type { MessageConfig } from './interface';
+export type { MessageApi, MessageClose, MessageConfig } from './interface';
 export * from './message-provider';
 export default message;

package/src/message/interface.ts

@@ -1,8 +1,9 @@
 export type MessageConfig = {
-  /**
-   * test identifier
-   */
-  'data-testid'?: string;
+  [dataAttribute: `data-${string}`]:
+    | string
+    | number
+    | boolean
+    | undefined;
   /**
    * Custom prefix class name
    */
@@ -20,8 +21,8 @@ export type MessageConfig = {
    */
   content: React.ReactNode;
   /**
-   * Auto close time (ms), 0 means no auto close
-   * @default 3000
+   * Auto close time (seconds), 0 means no auto close
+   * @default 3
    */
   duration?: number;
   /**
@@ -42,6 +43,19 @@ export type MessageConfig = {
   onClose?: () => void;
 };
 
+export type MessageClose = () => void;
+
+export interface MessageApi {
+  open: (config: string | MessageConfig) => MessageClose;
+  info: (config: string | MessageConfig) => MessageClose;
+  success: (config: string | MessageConfig) => MessageClose;
+  warning: (config: string | MessageConfig) => MessageClose;
+  error: (config: string | MessageConfig) => MessageClose;
+  loading: (config: string | MessageConfig) => MessageClose;
+  destroy: (key: string | number) => void;
+  clear: () => void;
+}
+
 // With status
 export type WrapperedMessageConfig = MessageConfig & {
   status?: 'info' | 'success' | 'warning' | 'error' | 'loading';
@@ -50,11 +64,12 @@ export type WrapperedMessageConfig = MessageConfig & {
 // With key
 export type MessageType = WrapperedMessageConfig & {
   key: string | number;
+  timerGeneration: number;
 };
 
 export interface MessageProps extends MessageType {
   /**
    * Destroy component callback
    */
-  onDestroy?: (key: string | number) => void;
+  onDestroy?: (key: string | number, timerGeneration?: number) => void;
 }

package/src/message/message-provider.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useContext } from 'react';
+import type { MessageApi } from './interface';
 import useMessage from './use-message';
 
-const MessageContext = createContext<any>({});
+const MessageContext = createContext<MessageApi | undefined>(undefined);
 
 export function MessageProvider({ children }: { children: React.ReactNode }) {
   const { messageApi, messageHolder } = useMessage();
@@ -14,7 +15,7 @@ export function MessageProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function useGlobalMessage() {
+export function useGlobalMessage(): MessageApi {
   const context = useContext(MessageContext);
 
   if (context === undefined) {

package/src/message/message.test.tsx

@@ -0,0 +1,283 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render, renderHook, screen } from '@testing-library/react';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { MessageApi, MessageClose } from './interface';
+import { useGlobalMessage } from './message-provider';
+import useMessage from './use-message';
+import messageWrapper, { message } from './wrapper';
+
+let currentApi: MessageApi;
+
+function MessageHarness() {
+  const { messageApi, messageHolder } = useMessage();
+  currentApi = messageApi;
+  return <>{messageHolder}</>;
+}
+
+afterEach(() => {
+  cleanup();
+  messageWrapper.unmount();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe('message', () => {
+  it('renders safely without a document during SSR', () => {
+    vi.stubGlobal('document', undefined);
+
+    expect(() => renderToString(<MessageHarness />)).not.toThrow();
+    expect(() => message.info('server message')).not.toThrow();
+  });
+
+  it('keeps the hook API reference stable across message updates', () => {
+    render(<MessageHarness />);
+    const initialApi = currentApi;
+
+    act(() => {
+      currentApi.info({ content: 'saved', duration: 0 });
+    });
+
+    expect(currentApi).toBe(initialApi);
+  });
+
+  it('does not restart existing timers when another message is added', () => {
+    vi.useFakeTimers();
+    const firstOnClose = vi.fn();
+    render(<MessageHarness />);
+
+    act(() => {
+      currentApi.info({
+        content: 'first',
+        duration: 3,
+        onClose: firstOnClose,
+      });
+    });
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    act(() => {
+      currentApi.info({ content: 'second', duration: 3 });
+    });
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(firstOnClose).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('first')).toBeNull();
+    expect(screen.queryByText('second')).not.toBeNull();
+  });
+
+  it('does not let an old timer close a reused key in the same batch', () => {
+    vi.useFakeTimers();
+    const secondOnClose = vi.fn();
+    render(<MessageHarness />);
+
+    act(() => {
+      currentApi.info({ key: 'timer', content: 'first', duration: 3 });
+    });
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    act(() => {
+      currentApi.destroy('timer');
+      currentApi.info({
+        key: 'timer',
+        content: 'second',
+        duration: 3,
+        onClose: secondOnClose,
+      });
+    });
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(screen.queryByText('second')).not.toBeNull();
+    expect(secondOnClose).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(screen.queryByText('second')).toBeNull();
+    expect(secondOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('restarts the timer when an existing key is updated', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render(<MessageHarness />);
+
+    act(() => {
+      currentApi.info({
+        key: 'updating-timer',
+        content: 'working',
+        duration: 3,
+        onClose,
+      });
+    });
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    act(() => {
+      currentApi.info({
+        key: 'updating-timer',
+        content: 'finished',
+        duration: 3,
+        onClose,
+      });
+    });
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(screen.queryByText('finished')).not.toBeNull();
+    expect(onClose).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(screen.queryByText('finished')).toBeNull();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates duplicate keys and closes the current message with its handle', () => {
+    const firstOnClose = vi.fn();
+    const updatedOnClose = vi.fn();
+    let close!: MessageClose;
+    render(<MessageHarness />);
+
+    act(() => {
+      close = currentApi.info({
+        key: 'job',
+        content: 'working',
+        duration: 0,
+        onClose: firstOnClose,
+      });
+      currentApi.success({
+        key: 'job',
+        content: 'finished',
+        duration: 0,
+        onClose: updatedOnClose,
+      });
+    });
+
+    expect(screen.queryByText('working')).toBeNull();
+    expect(screen.queryByText('finished')).not.toBeNull();
+    expect(document.querySelectorAll('.yee-message')).toHaveLength(1);
+
+    act(() => close());
+
+    expect(screen.queryByText('finished')).toBeNull();
+    expect(firstOnClose).not.toHaveBeenCalled();
+    expect(updatedOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not let stale hook close handles close a reused key', () => {
+    let staleClose!: MessageClose;
+    render(<MessageHarness />);
+
+    act(() => {
+      staleClose = currentApi.info({
+        key: 'reused',
+        content: 'first generation',
+        duration: 0,
+      });
+      staleClose();
+      currentApi.info({
+        key: 'reused',
+        content: 'second generation',
+        duration: 0,
+      });
+      staleClose();
+    });
+
+    expect(screen.queryByText('second generation')).not.toBeNull();
+  });
+
+  it('does not let stale global close handles close a reused key', () => {
+    let staleClose!: MessageClose;
+
+    act(() => {
+      staleClose = message.info({
+        key: 'global-reused',
+        content: 'first generation',
+        duration: 0,
+      });
+      staleClose();
+      message.info({
+        key: 'global-reused',
+        content: 'second generation',
+        duration: 0,
+      });
+      staleClose();
+    });
+
+    expect(screen.queryByText('second generation')).not.toBeNull();
+    act(() => message.destroy('global-reused'));
+  });
+
+  it('calls onClose when clearing hook messages', () => {
+    const firstOnClose = vi.fn();
+    const secondOnClose = vi.fn();
+    render(<MessageHarness />);
+
+    act(() => {
+      currentApi.info({ content: 'first', duration: 0, onClose: firstOnClose });
+      currentApi.info({ content: 'second', duration: 0, onClose: secondOnClose });
+      currentApi.clear();
+    });
+
+    expect(firstOnClose).toHaveBeenCalledTimes(1);
+    expect(secondOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('preserves a falsy global key without mutating the config', () => {
+    const onClose = vi.fn();
+    const config = { key: 0, content: 'zero', duration: 0, onClose };
+
+    act(() => {
+      message.open(config);
+    });
+
+    expect(config.key).toBe(0);
+    expect(screen.queryByText('zero')).not.toBeNull();
+
+    act(() => {
+      message.destroy(0);
+    });
+
+    expect(screen.queryByText('zero')).toBeNull();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('throws a clear error outside MessageProvider', () => {
+    expect(() => renderHook(() => useGlobalMessage())).toThrow(
+      'useGlobalMessage must be used within MessageProvider',
+    );
+  });
+
+  it('forwards data attributes and exposes live-region semantics', () => {
+    render(<MessageHarness />);
+
+    act(() => {
+      currentApi.error({
+        content: <div>failed</div>,
+        duration: 0,
+        'data-track-id': 'failure-message',
+      });
+    });
+
+    const element = screen.getByText('failed').closest('.yee-message');
+    expect(element?.getAttribute('data-track-id')).toBe('failure-message');
+    expect(element?.getAttribute('role')).toBe('alert');
+    expect(element?.getAttribute('aria-live')).toBe('assertive');
+    expect(element?.querySelector('.yee-message-content')?.tagName).toBe('DIV');
+    expect(element?.querySelector('.yee-message-icon')?.getAttribute('aria-hidden')).toBe(
+      'true',
+    );
+  });
+});

package/src/message/message.tsx

@@ -5,10 +5,10 @@ import Spin from '../Spin';
 import type { MessageProps } from './interface';
 
 const icons = {
-  info: <Info size={16} strokeWidth={2} />,
-  success: <CircleCheck size={16} strokeWidth={2} />,
-  warning: <CircleAlert size={16} strokeWidth={2} />,
-  error: <CircleX size={16} strokeWidth={2} />,
+  info: <Info size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  success: <CircleCheck size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  warning: <CircleAlert size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
+  error: <CircleX size={22} fill='currentColor' stroke="#FFF" strokeWidth={2} />,
   loading: <Spin className="loading" type="spin" size="small" height="auto" />,
 };
 
@@ -16,6 +16,7 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
   const {
     prefixCls = 'yee-message',
     id: key,
+    timerGeneration,
     status,
     content,
     style,
@@ -32,15 +33,14 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
   useEffect(() => {
     if (duration && duration > 0) {
       const timer = setTimeout(() => {
-        onDestroy?.(key);
-        onClose?.();
+        onDestroy?.(key, timerGeneration);
       }, duration * 1000);
 
       return () => {
         clearTimeout(timer);
       };
     }
-  }, [duration, key, onDestroy, onClose]);
+  }, [duration, key, onDestroy, onClose, timerGeneration]);
 
   const renderIcon = () => {
     if (!icon && !status) {
@@ -48,22 +48,27 @@ const Message: React.FC<MessageProps & { id: string | number }> = (props) => {
     }
 
     return (
-      <span className={`${prefixCls}-icon`}>
+      <span aria-hidden="true" className={`${prefixCls}-icon`}>
         {icon ? icon : status ? icons[status] : null}
       </span>
     );
   };
 
+  const isAssertive = status === 'error' || status === 'warning';
+
   return (
     <div
       {...rest}
+      aria-atomic="true"
+      aria-live={isAssertive ? 'assertive' : 'polite'}
+      role={isAssertive ? 'alert' : 'status'}
       data-testid={dataTestId}
       className={clsx(prefixCls, [`${prefixCls}-${status}`], className)}
       style={style}
       onClick={onClick}
     >
       {renderIcon()}
-      <p className={`${prefixCls}-content`}>{content}</p>
+      <div className={`${prefixCls}-content`}>{content}</div>
     </div>
   );
 };

package/src/message/style/index.less

@@ -6,6 +6,7 @@
   align-items: center;
   width: fit-content;
   padding: var(--yee-message-padding);
+  pointer-events: auto;
   background-color: var(--yee-message-bg-color);
   border-radius: var(--yee-message-border-radius);
   box-shadow: var(--yee-message-box-shadow);
@@ -30,12 +31,13 @@
     align-items: center;
     justify-content: center;
     width: 100vw;
+    pointer-events: none;
   }
 
   // status
   &-success {
     @{pls}-icon {
-      color: var(--yee-primary-color);
+      color: var(--yee-success-color);
     }
   }