@rainbow-oh/yee-c 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Form/form-store.ts

@@ -242,6 +242,11 @@ export class FormStore {
         return false;
       });
     }
+    // If no rules match the current trigger, skip validation entirely
+    // to avoid clearing existing errors from a previous validation pass.
+    if (trigger && mergedRules.length === 0) {
+      return [];
+    }
     const value = this.getFieldValue(name);
     for (const rule of mergedRules) {
       const result = await validate(rule, value);

package/src/Input/style/index.less

@@ -9,6 +9,7 @@
   padding: var(--yee-input-padding, 2px 8px);
   font-size: var(--yee-input-font-size);
   line-height: var(--yee-input-line-height);
+  background-color: var(--yee-input-content-bg-color);
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
   font-family: var(--yee-font-family);

package/src/Select/interface.ts

@@ -81,7 +81,7 @@ export interface SelectProps
   /**
    * Dropdown options
    */
-  options: Array<Option>;
+  options?: Array<Option>;
   /**
    * Selection mode
    */

package/src/Selector/style/index.less

@@ -5,6 +5,7 @@
   box-sizing: border-box;
   width: 100%;
   padding: var(--yee-selector-padding);
+  background-color: var(--yee-input-content-bg-color);
   border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-selector-border-radius);
 

package/src/Table/icon/arrow-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const TriangleArrow = ({
   direction = 'down',
   className,
-  size = 10,
+  size = 8,
   ...props
 }: {
   direction?: 'up' | 'down' | 'left' | 'right';

package/src/Table/theader/cell.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useContext } from 'react';
+import { useLocale } from '../../locale';
 import Tooltip from '../../Tooltip';
 import ArrowIcon from '../icon/arrow-icon';
 import { HeadCellProps } from '../interface';
@@ -35,6 +36,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
   } = props;
 
   const { prefixCls } = useContext(TableCtx);
+  const { locale } = useLocale();
+  const { table: tableLocale } = locale;
 
   const showFilter = !!filter;
 
@@ -80,11 +83,11 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
       if (showSorterTooltip && sorter) {
         let title = '';
         if (displaySortOrder === 0) {
-          title = 'Click to sort ascending';
+          title = tableLocale.sortAscending || 'Click to sort ascending';
         } else if (displaySortOrder === 1) {
-          title = 'Click to sort descending';
+          title = tableLocale.sortDescending || 'Click to sort descending';
         } else if (displaySortOrder === 2) {
-          title = 'Click to cancel sorting';
+          title = tableLocale.sortCancel || 'Click to cancel sorting';
         }
 
         return <Tooltip title={title}>{trigger}</Tooltip>;

package/src/TextArea/style/index.less

@@ -66,6 +66,7 @@
   padding: 4px 8px;
   font-size: var(--yee-textarea-font-size);
   line-height: var(--yee-textarea-line-height);
+  background-color: var(--yee-input-content-bg-color);
   border-radius: var(--yee-textarea-border-radius, 4px);
   font-family: var(--yee-font-family);
   width: 100%;

package/src/VerificationCode/style/index.less

@@ -9,6 +9,7 @@
     width: var(--yee-verification-code-item-width);
     height: var(--yee-verification-code-item-height);
     text-align: center;
+    background-color: var(--yee-input-content-bg-color);
     border: var(--yee-verification-code-item-border-width) solid
       var(--yee-input-border-color);
     border-radius: var(--yee-verification-code-item-border-radius);

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/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

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',
+    );
+  });
+});