@rainbow-oh/yee-c 0.8.2 → 0.8.3

package/dist/cjs/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/dist/cjs/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/dist/cjs/Table/icon/arrow-icon.js

@@ -63,7 +63,7 @@ var TriangleArrow = (_a) => {
   var _b = _a, {
     direction = "down",
     className,
-    size = 10
+    size = 8
   } = _b, props = __objRest(_b, [
     "direction",
     "className",

package/dist/cjs/Table/theader/cell.js

@@ -63,6 +63,7 @@ __export(cell_exports, {
 module.exports = __toCommonJS(cell_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_locale = require("../../locale");
 var import_Tooltip = __toESM(require("../../Tooltip"));
 var import_arrow_icon = __toESM(require("../icon/arrow-icon"));
 var import_filter = __toESM(require("./filter"));
@@ -116,6 +117,8 @@ var HeadCell = (props) => {
     "onInternalFilter"
   ]);
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
+  const { locale } = (0, import_locale.useLocale)();
+  const { table: tableLocale } = locale;
   const showFilter = !!filter;
   const sortOrder = dataIndex && (sorters == null ? void 0 : sorters[dataIndex]) || 0;
   const displaySortOrder = sortOrder === -1 ? 2 : sortOrder;
@@ -148,11 +151,11 @@ var HeadCell = (props) => {
       if (showSorterTooltip && sorter) {
         let title2 = "";
         if (displaySortOrder === 0) {
-          title2 = "Click to sort ascending";
+          title2 = tableLocale.sortAscending || "Click to sort ascending";
         } else if (displaySortOrder === 1) {
-          title2 = "Click to sort descending";
+          title2 = tableLocale.sortDescending || "Click to sort descending";
         } else if (displaySortOrder === 2) {
-          title2 = "Click to cancel sorting";
+          title2 = tableLocale.sortCancel || "Click to cancel sorting";
         }
         return /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: title2 }, trigger);
       }

package/dist/cjs/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/dist/cjs/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/dist/cjs/hooks/useCountdown.d.ts

@@ -2,8 +2,9 @@ export type CountdownOptions = {
     duration: number;
     interval?: number;
     onComplete?: () => void;
+    resetKey?: string | number;
 };
-export default function useCountdown({ duration, interval, onComplete, }: CountdownOptions): {
+export default function useCountdown({ duration, interval, onComplete, resetKey, }: CountdownOptions): {
     remaining: number;
     isPaused: boolean;
     onPause: () => void;

package/dist/cjs/hooks/useCountdown.js

@@ -26,51 +26,74 @@ var import_react = require("react");
 function useCountdown({
   duration,
   interval = 100,
-  onComplete
+  onComplete,
+  resetKey
 }) {
-  const [remaining, setRemaining] = (0, import_react.useState)(duration);
+  const initialRemaining = Math.max(0, duration);
+  const [remaining, setRemaining] = (0, import_react.useState)(initialRemaining);
   const [isPaused, setIsPaused] = (0, import_react.useState)(false);
   const timerRef = (0, import_react.useRef)(null);
-  const remainingRef = (0, import_react.useRef)(duration);
+  const remainingRef = (0, import_react.useRef)(initialRemaining);
+  const isPausedRef = (0, import_react.useRef)(false);
   const onCompleteRef = (0, import_react.useRef)(onComplete);
+  const identityRef = (0, import_react.useRef)({ duration, resetKey });
+  const epochRef = (0, import_react.useRef)(0);
   onCompleteRef.current = onComplete;
+  if (identityRef.current.duration !== duration || identityRef.current.resetKey !== resetKey) {
+    identityRef.current = { duration, resetKey };
+    epochRef.current += 1;
+  }
   const clear = (0, import_react.useCallback)(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const tick = (0, import_react.useCallback)(() => {
-    var _a;
-    const next = Math.max(0, remainingRef.current - interval);
-    remainingRef.current = next;
-    setRemaining(next);
-    if (next <= 0) {
-      (_a = onCompleteRef.current) == null ? void 0 : _a.call(onCompleteRef);
-    } else {
-      timerRef.current = setTimeout(tick, interval);
-    }
-  }, [interval]);
+  const tick = (0, import_react.useCallback)(
+    (epoch) => {
+      var _a;
+      if (epoch !== epochRef.current) {
+        return;
+      }
+      const next = Math.max(0, remainingRef.current - interval);
+      remainingRef.current = next;
+      setRemaining(next);
+      if (next <= 0) {
+        (_a = onCompleteRef.current) == null ? void 0 : _a.call(onCompleteRef);
+      } else {
+        timerRef.current = setTimeout(() => tick(epoch), interval);
+      }
+    },
+    [interval]
+  );
   const start = (0, import_react.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]);
   (0, import_react.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;
-  }, [duration]);
+  }, [clear, duration, resetKey, start]);
   const onPause = (0, import_react.useCallback)(() => {
+    isPausedRef.current = true;
     clear();
     setIsPaused(true);
   }, [clear]);
   const onResume = (0, import_react.useCallback)(() => {
-    if (remainingRef.current <= 0)
-      return;
+    isPausedRef.current = false;
     setIsPaused(false);
-    start();
+    if (remainingRef.current > 0) {
+      start();
+    }
   }, [start]);
   return { remaining, isPaused, onPause, onResume };
 }

package/dist/cjs/locale/interface.d.ts

@@ -52,6 +52,9 @@ export interface LocaleTable {
     selectionAll?: string;
     selectionInvert?: string;
     selectionNone?: string;
+    sortAscending?: string;
+    sortDescending?: string;
+    sortCancel?: string;
 }
 export interface LocalePagination {
     total?: string;

package/dist/cjs/locale/lang/en_US.js

@@ -112,7 +112,10 @@ var locale = {
     selectNone: "Clear Selection",
     selectionAll: "Select All on Page",
     selectionInvert: "Invert Selection on Page",
-    selectionNone: "Clear Selection on Page"
+    selectionNone: "Clear Selection on Page",
+    sortAscending: "Click to sort ascending",
+    sortDescending: "Click to sort descending",
+    sortCancel: "Click to cancel sorting"
   },
   pagination: {
     total: "Total {total} items",

package/dist/cjs/locale/lang/ja_JP.js

@@ -112,7 +112,10 @@ var locale = {
     selectNone: "選択をクリア",
     selectionAll: "ページ内すべて選択",
     selectionInvert: "ページ内選択を反転",
-    selectionNone: "ページ内選択をクリア"
+    selectionNone: "ページ内選択をクリア",
+    sortAscending: "クリックで昇順に並べ替え",
+    sortDescending: "クリックで降順に並べ替え",
+    sortCancel: "クリックで並べ替えを解除"
   },
   pagination: {
     total: "合計 {total} 件",

package/dist/cjs/locale/lang/zh_CN.js

@@ -103,7 +103,10 @@ var locale = {
     selectNone: "清空选择",
     selectionAll: "全选当页",
     selectionInvert: "反选当页",
-    selectionNone: "清空当页选择"
+    selectionNone: "清空当页选择",
+    sortAscending: "点击升序排列",
+    sortDescending: "点击降序排列",
+    sortCancel: "点击取消排序"
   },
   pagination: {
     total: "共 {total} 条",

package/dist/cjs/locale/lang/zh_TW.js

@@ -103,7 +103,10 @@ var locale = {
     selectNone: "清空選擇",
     selectionAll: "全選當頁",
     selectionInvert: "反選當頁",
-    selectionNone: "清空當頁選擇"
+    selectionNone: "清空當頁選擇",
+    sortAscending: "點擊升序排列",
+    sortDescending: "點擊降序排列",
+    sortCancel: "點擊取消排序"
   },
   pagination: {
     total: "共 {total} 條",

package/dist/cjs/message/demo/base.js

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

package/dist/cjs/message/index.d.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/dist/cjs/message/interface.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 export type MessageConfig = {
-    /**
-     * test identifier
-     */
-    'data-testid'?: string;
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
     /**
      * Custom prefix class name
      */
@@ -21,8 +18,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,15 +39,27 @@ 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;
+}
 export type WrapperedMessageConfig = MessageConfig & {
     status?: 'info' | 'success' | 'warning' | 'error' | 'loading';
 };
 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/dist/cjs/message/message-provider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { MessageApi } from './interface';
 export declare function MessageProvider({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
-export declare function useGlobalMessage(): any;
+export declare function useGlobalMessage(): MessageApi;

package/dist/cjs/message/message-provider.js

@@ -35,7 +35,7 @@ __export(message_provider_exports, {
 module.exports = __toCommonJS(message_provider_exports);
 var import_react = __toESM(require("react"));
 var import_use_message = __toESM(require("./use-message"));
-var MessageContext = (0, import_react.createContext)({});
+var MessageContext = (0, import_react.createContext)(void 0);
 function MessageProvider({ children }) {
   const { messageApi, messageHolder } = (0, import_use_message.default)();
   return /* @__PURE__ */ import_react.default.createElement(MessageContext.Provider, { value: messageApi }, messageHolder, children);

package/dist/cjs/message/message.js

@@ -66,16 +66,17 @@ var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_Spin = __toESM(require("../Spin"));
 var icons = {
-  info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 16, strokeWidth: 2 }),
-  success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size: 16, strokeWidth: 2 }),
-  warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 16, strokeWidth: 2 }),
-  error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 16, strokeWidth: 2 }),
+  info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
   loading: /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { className: "loading", type: "spin", size: "small", height: "auto" })
 };
 var Message = (props) => {
   const _a = props, {
     prefixCls = "yee-message",
     id: key,
+    timerGeneration,
     status,
     content,
     style,
@@ -89,6 +90,7 @@ var Message = (props) => {
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "id",
+    "timerGeneration",
     "status",
     "content",
     "style",
@@ -103,30 +105,33 @@ var Message = (props) => {
   (0, import_react.useEffect)(() => {
     if (duration && duration > 0) {
       const timer = setTimeout(() => {
-        onDestroy == null ? void 0 : onDestroy(key);
-        onClose == null ? void 0 : onClose();
+        onDestroy == null ? void 0 : onDestroy(key, timerGeneration);
       }, duration * 1e3);
       return () => {
         clearTimeout(timer);
       };
     }
-  }, [duration, key, onDestroy, onClose]);
+  }, [duration, key, onDestroy, onClose, timerGeneration]);
   const renderIcon = () => {
     if (!icon && !status) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
+    return /* @__PURE__ */ import_react.default.createElement("span", { "aria-hidden": "true", className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
   };
+  const isAssertive = status === "error" || status === "warning";
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "aria-atomic": "true",
+      "aria-live": isAssertive ? "assertive" : "polite",
+      role: isAssertive ? "alert" : "status",
       "data-testid": dataTestId,
       className: (0, import_clsx.default)(prefixCls, [`${prefixCls}-${status}`], className),
       style,
       onClick
     }),
     renderIcon(),
-    /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefixCls}-content` }, content)
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, content)
   );
 };
 var message_default = Message;

package/dist/cjs/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);
     }
   }
 

package/dist/cjs/message/use-message.d.ts

@@ -1,16 +1,7 @@
 import React from 'react';
-import { MessageConfig } from './interface';
+import { MessageApi } from './interface';
 declare const useMessage: () => {
-    messageApi: {
-        open: (props: string | MessageConfig) => () => void;
-        info: (props: string | MessageConfig) => () => void;
-        success: (props: string | MessageConfig) => () => void;
-        error: (props: string | MessageConfig) => () => void;
-        warning: (props: string | MessageConfig) => () => void;
-        loading: (props: string | MessageConfig) => () => void;
-        destroy: (key: string | number) => void;
-        clear: () => void;
-    };
-    messageHolder: React.ReactPortal;
+    messageApi: MessageApi;
+    messageHolder: React.ReactPortal | null;
 };
 export default useMessage;

package/dist/cjs/message/use-message.js

@@ -54,61 +54,119 @@ var import_react_dom = require("react-dom");
 var import_message = __toESM(require("./message"));
 var useMessage = () => {
   const [messages, setMessages] = (0, import_react.useState)([]);
+  const [portalContainer, setPortalContainer] = (0, import_react.useState)(
+    null
+  );
+  const messagesRef = (0, import_react.useRef)([]);
+  const generationByKey = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const generation = (0, import_react.useRef)(0);
+  const timerGeneration = (0, import_react.useRef)(0);
   const count = (0, import_react.useRef)(0);
-  const onDestroy = (key) => {
-    setMessages((prevMessage) => [
-      ...prevMessage.filter((msg) => msg.key !== key)
-    ]);
-  };
-  const add = (0, import_react.useCallback)((props) => {
-    const id = count.current++;
-    setMessages((prevMessages) => [...prevMessages, __spreadValues({ key: id }, props)]);
-    return () => onDestroy(id);
+  (0, import_react.useEffect)(() => {
+    setPortalContainer(document.body);
   }, []);
-  const messageApi = {
-    open: (props) => {
-      return add(
-        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
-      );
+  const updateMessages = (0, import_react.useCallback)(
+    (updater) => {
+      const nextMessages = updater(messagesRef.current);
+      messagesRef.current = nextMessages;
+      setMessages(nextMessages);
     },
-    info: (props) => {
-      return add(
-        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
+    []
+  );
+  const onDestroy = (0, import_react.useCallback)(
+    (key, expectedTimerGeneration) => {
+      var _a;
+      const target = messagesRef.current.find((message) => message.key === key);
+      if (expectedTimerGeneration !== void 0 && (target == null ? void 0 : target.timerGeneration) !== expectedTimerGeneration) {
+        return;
+      }
+      if (!target) {
+        return;
+      }
+      generationByKey.current.delete(key);
+      updateMessages(
+        (current) => current.filter((message) => message.key !== key)
       );
+      (_a = target.onClose) == null ? void 0 : _a.call(target);
     },
-    success: (props) => {
-      return add(
-        typeof props === "string" ? { content: props, status: "success" } : __spreadProps(__spreadValues({}, props), { status: "success" })
-      );
+    [updateMessages]
+  );
+  const add = (0, import_react.useCallback)(
+    (props) => {
+      var _a, _b;
+      const key = (_a = props.key) != null ? _a : count.current++;
+      if (typeof key === "number" && key >= count.current) {
+        count.current = key + 1;
+      }
+      const keyGeneration = (_b = generationByKey.current.get(key)) != null ? _b : generation.current++;
+      generationByKey.current.set(key, keyGeneration);
+      const nextMessage = __spreadProps(__spreadValues({}, props), {
+        key,
+        timerGeneration: timerGeneration.current++
+      });
+      updateMessages((current) => {
+        const exists = current.some((item) => item.key === key);
+        if (exists) {
+          return current.map(
+            (item) => item.key === key ? nextMessage : item
+          );
+        }
+        return [...current, nextMessage];
+      });
+      return () => {
+        if (generationByKey.current.get(key) === keyGeneration) {
+          onDestroy(key);
+        }
+      };
     },
-    error: (props) => {
-      return add(
+    [onDestroy, updateMessages]
+  );
+  const clear = (0, import_react.useCallback)(() => {
+    const currentMessages = messagesRef.current;
+    generationByKey.current.clear();
+    messagesRef.current = [];
+    setMessages([]);
+    currentMessages.forEach((message) => {
+      var _a;
+      return (_a = message.onClose) == null ? void 0 : _a.call(message);
+    });
+  }, []);
+  const messageApi = (0, import_react.useMemo)(
+    () => ({
+      open: (props) => add(
+        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
+      ),
+      info: (props) => add(
+        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
+      ),
+      success: (props) => add(
+        typeof props === "string" ? { content: props, status: "success" } : __spreadProps(__spreadValues({}, props), { status: "success" })
+      ),
+      error: (props) => add(
         typeof props === "string" ? { content: props, status: "error" } : __spreadProps(__spreadValues({}, props), { status: "error" })
-      );
-    },
-    warning: (props) => {
-      return add(
+      ),
+      warning: (props) => add(
         typeof props === "string" ? { content: props, status: "warning" } : __spreadProps(__spreadValues({}, props), { status: "warning" })
-      );
-    },
-    loading: (props) => {
-      return add(
+      ),
+      loading: (props) => add(
         typeof props === "string" ? { content: props, status: "loading" } : __spreadProps(__spreadValues({}, props), { status: "loading" })
-      );
-    },
-    destroy: (key) => {
-      setMessages(
-        (prevMessages) => prevMessages.filter((message) => message.key !== key)
-      );
-    },
-    clear: () => {
-      setMessages([]);
-    }
-  };
-  const messageHolder = (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "yee-message-list" }, messages.map((msg) => /* @__PURE__ */ import_react.default.createElement(import_message.default, __spreadProps(__spreadValues({}, msg), { onDestroy, id: msg.key, key: msg.key })))),
-    document.body
+      ),
+      destroy: onDestroy,
+      clear
+    }),
+    [add, clear, onDestroy]
   );
+  const messageHolder = portalContainer ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "yee-message-list" }, messages.map((msg) => /* @__PURE__ */ import_react.default.createElement(
+      import_message.default,
+      __spreadProps(__spreadValues({}, msg), {
+        onDestroy,
+        id: msg.key,
+        key: msg.key
+      })
+    ))),
+    portalContainer
+  ) : null;
   return { messageApi, messageHolder };
 };
 var use_message_default = useMessage;