@rainbow-oh/yee-c 0.8.5 → 0.8.7

package/package.json

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

package/src/Alert/alert.tsx

@@ -87,6 +87,7 @@ const Alert: React.FC<AlertProps> = (baseprops) => {
   return (
     <div
       {...rest}
+      role="alert"
       className={clsx(
         prefixCls,
         [`${prefixCls}-${mergedState}`],

package/src/Anchor/anchor.tsx

@@ -25,6 +25,20 @@ export const AnchorContext = createContext<AnchorContextType>(
   {} as AnchorContextType,
 );
 
+const NAVIGATION_LOCK_TIMEOUT = 5000;
+const NAVIGATION_SETTLE_DELAY = 100;
+const TARGET_POSITION_TOLERANCE = 2;
+const SCROLL_KEYS = new Set([
+  'ArrowUp',
+  'ArrowDown',
+  'PageUp',
+  'PageDown',
+  'Home',
+  'End',
+  ' ',
+  'Spacebar',
+]);
+
 const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
   const { anchor } = useContext(GlobalContext);
   const props = mergeContextToProps(baseprops, anchor);
@@ -57,11 +71,89 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
   const [anchorList, setAnchorList] = useState<Array<AnchorItemType>>([]);
 
   const containerRef = useRef<HTMLElement | Window | null>(null);
+  const anchorRootRef = useRef<HTMLDivElement | null>(null);
   const activeKeyRef = useRef(mergedActiveKey);
+  const handleScrollRef = useRef<() => void>(() => {});
+  const pendingTargetKeyRef = useRef<string | undefined>(undefined);
+  const navigationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const navigationSettleTimeoutRef = useRef<
+    ReturnType<typeof setTimeout> | null
+  >(null);
+
   useEffect(() => {
     activeKeyRef.current = mergedActiveKey;
   }, [mergedActiveKey]);
 
+  const setAnchorRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      anchorRootRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  const clearNavigationSettleTimer = useCallback(() => {
+    if (navigationSettleTimeoutRef.current !== null) {
+      clearTimeout(navigationSettleTimeoutRef.current);
+      navigationSettleTimeoutRef.current = null;
+    }
+  }, []);
+
+  const clearNavigationLock = useCallback(() => {
+    pendingTargetKeyRef.current = undefined;
+    clearNavigationSettleTimer();
+    if (navigationTimeoutRef.current !== null) {
+      clearTimeout(navigationTimeoutRef.current);
+      navigationTimeoutRef.current = null;
+    }
+  }, [clearNavigationSettleTimer]);
+
+  const scheduleNavigationUnlock = useCallback(
+    (key: string) => {
+      clearNavigationSettleTimer();
+      navigationSettleTimeoutRef.current = setTimeout(() => {
+        if (pendingTargetKeyRef.current === key) {
+          clearNavigationLock();
+        }
+      }, NAVIGATION_SETTLE_DELAY);
+    },
+    [clearNavigationLock, clearNavigationSettleTimer],
+  );
+
+  const startNavigationLock = useCallback(
+    (key: string) => {
+      clearNavigationLock();
+      pendingTargetKeyRef.current = key;
+      navigationTimeoutRef.current = setTimeout(() => {
+        if (pendingTargetKeyRef.current === key) {
+          clearNavigationLock();
+          handleScrollRef.current();
+        }
+      }, NAVIGATION_LOCK_TIMEOUT);
+    },
+    [clearNavigationLock],
+  );
+
+  useEffect(() => clearNavigationLock, [clearNavigationLock]);
+
+  const commitActiveKey = useCallback(
+    (key: string, forceNotify = false) => {
+      const changed = activeKeyRef.current !== key;
+      activeKeyRef.current = key;
+      setMergedActiveKey(key);
+      if (changed || forceNotify) {
+        onChange?.(key);
+      }
+    },
+    [onChange],
+  );
+
   // Auto-generate anchor list from DOM
   const generateAnchorList = useCallback(() => {
     if (!auto || !name) return;
@@ -107,11 +199,51 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
     return currentScroll + (target.getBoundingClientRect().top - containerTop);
   }, []);
 
+  const hasReachedTarget = useCallback(
+    (key: string) => {
+      const container = containerRef.current;
+      const target = document.getElementById(key);
+      if (!container || !target) return false;
+
+      const currentScroll =
+        container === window
+          ? window.pageYOffset || document.documentElement.scrollTop
+          : (container as HTMLElement).scrollTop;
+      const maxScroll =
+        container === window
+          ? Math.max(
+              document.documentElement.scrollHeight,
+              document.body?.scrollHeight || 0,
+            ) - window.innerHeight
+          : (container as HTMLElement).scrollHeight -
+            (container as HTMLElement).clientHeight;
+      const targetScroll = Math.min(
+        Math.max(getTargetOffsetTop(target) - offsetTop, 0),
+        Math.max(maxScroll, 0),
+      );
+
+      return (
+        Math.abs(currentScroll - targetScroll) <= TARGET_POSITION_TOLERANCE
+      );
+    },
+    [getTargetOffsetTop, offsetTop],
+  );
+
   // Handle scroll to update active key
   const handleScroll = useCallback(() => {
     const container = containerRef.current;
     if (!container) return;
 
+    const pendingTargetKey = pendingTargetKeyRef.current;
+    if (pendingTargetKey) {
+      if (hasReachedTarget(pendingTargetKey)) {
+        scheduleNavigationUnlock(pendingTargetKey);
+      } else {
+        clearNavigationSettleTimer();
+      }
+      return;
+    }
+
     const scrollTop =
       container === window
         ? window.pageYOffset || document.documentElement.scrollTop
@@ -145,11 +277,25 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
       nextActiveKey = first?.key;
     }
 
-    if (nextActiveKey && activeKeyRef.current !== nextActiveKey) {
-      setMergedActiveKey(nextActiveKey);
-      onChange?.(nextActiveKey);
+    if (nextActiveKey) {
+      commitActiveKey(nextActiveKey);
     }
-  }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
+  }, [
+    auto,
+    anchorList,
+    items,
+    offsetTop,
+    getTargetOffsetTop,
+    hasReachedTarget,
+    scheduleNavigationUnlock,
+    clearNavigationSettleTimer,
+    clearNavigationLock,
+    commitActiveKey,
+  ]);
+
+  useEffect(() => {
+    handleScrollRef.current = handleScroll;
+  }, [handleScroll]);
 
   useEffect(() => {
     // Resolve in a passive effect: parent-owned refs passed via `getContainer`
@@ -161,31 +307,83 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
     // rAF throttle so the active key tracks scroll live.
     let rafId: ReturnType<typeof requestAnimationFrame> | null = null;
     const onScroll = () => {
+      if (pendingTargetKeyRef.current) {
+        clearNavigationSettleTimer();
+      }
       if (rafId !== null) return;
       rafId = requestAnimationFrame(() => {
         rafId = null;
         handleScroll();
       });
     };
+    const onScrollEnd = () => {
+      const pendingTargetKey = pendingTargetKeyRef.current;
+      if (pendingTargetKey && hasReachedTarget(pendingTargetKey)) {
+        scheduleNavigationUnlock(pendingTargetKey);
+      }
+    };
+    const onUserInterrupt = (event: Event) => {
+      if (event.type === 'pointerdown' && event.target instanceof Element) {
+        const item = event.target.closest(
+          `.${CSS.escape(`${prefixCls}-item`)}`,
+        );
+        const owner = item?.closest(`.${CSS.escape(prefixCls)}`);
+        if (owner === anchorRootRef.current) {
+          return;
+        }
+      }
+      if (
+        event.type === 'keydown' &&
+        !SCROLL_KEYS.has((event as KeyboardEvent).key)
+      ) {
+        return;
+      }
+      clearNavigationLock();
+    };
+
     container.addEventListener('scroll', onScroll as EventListener);
+    container.addEventListener('scrollend', onScrollEnd as EventListener);
+    container.addEventListener('wheel', onUserInterrupt as EventListener);
+    container.addEventListener('touchstart', onUserInterrupt as EventListener);
+    document.addEventListener('pointerdown', onUserInterrupt as EventListener);
+    container.addEventListener('keydown', onUserInterrupt as EventListener);
     handleScroll();
 
     return () => {
       container.removeEventListener('scroll', onScroll as EventListener);
+      container.removeEventListener('scrollend', onScrollEnd as EventListener);
+      container.removeEventListener('wheel', onUserInterrupt as EventListener);
+      container.removeEventListener(
+        'touchstart',
+        onUserInterrupt as EventListener,
+      );
+      document.removeEventListener(
+        'pointerdown',
+        onUserInterrupt as EventListener,
+      );
+      container.removeEventListener('keydown', onUserInterrupt as EventListener);
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
       }
     };
-  }, [getContainer, handleScroll]);
+  }, [
+    getContainer,
+    handleScroll,
+    hasReachedTarget,
+    scheduleNavigationUnlock,
+    clearNavigationSettleTimer,
+    clearNavigationLock,
+    prefixCls,
+  ]);
 
   // Scroll to target when activeKey changes
   const scrollToAnchor = useCallback(
     (key: string) => {
       const target = document.getElementById(key);
-      if (!target) return;
+      if (!target) return false;
 
       const container = containerRef.current;
-      if (!container) return;
+      if (!container) return false;
 
       const targetTop = getTargetOffsetTop(target) - offsetTop;
 
@@ -197,6 +395,7 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
           behavior: 'smooth',
         });
       }
+      return true;
     },
     [offsetTop, getTargetOffsetTop],
   );
@@ -210,11 +409,23 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
 
   const handleItemClick = useCallback(
     (key: string) => {
-      setMergedActiveKey(key);
-      scrollToAnchor(key);
-      onChange?.(key);
-    },
-    [scrollToAnchor, onChange],
+      startNavigationLock(key);
+      commitActiveKey(key, true);
+
+      if (!scrollToAnchor(key)) {
+        clearNavigationLock();
+        return;
+      }
+
+      // Handles instant scrolling and targets that are already in position.
+      handleScroll();
+    }, [
+      startNavigationLock,
+      commitActiveKey,
+      scrollToAnchor,
+      clearNavigationLock,
+      handleScroll,
+    ],
   );
 
   const cls = clsx(
@@ -250,7 +461,7 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
   };
 
   return (
-    <div {...rest} className={cls} style={style} ref={ref}>
+    <div {...rest} className={cls} style={style} ref={setAnchorRootRef}>
       {renderNavArrow()}
       <AnchorContext.Provider value={contextValue}>
         <div className={`${prefixCls}-content-wrapper`}>

package/src/Anchor/index.en-US.md

@@ -35,7 +35,7 @@ Anchor component for linking to specific sections within a page.
 | auto | `boolean` | Whether to auto-generate anchors | `false` |
 | name | `string` | Anchor group name (for auto-generation) | - |
 | defaultActiveKey | `string` | Default active anchor key | - |
-| activeKey | `string` | Active anchor key (controlled) | - |
+| activeKey | `string` | Active anchor key (controlled; update it in `onChange`) | - |
 | affix | `boolean` | Whether to fix position | `true` |
 | direction | `'vertical' \| 'horizontal'` | Navigation direction | `'vertical'` |
 | offsetTop | `number` | Offset top to trigger anchor change | `0` |

package/src/Anchor/index.zh-CN.md

@@ -35,7 +35,7 @@ toc: 'content'
 | auto | `boolean` | 是否自动生成锚点 | `false` |
 | name | `string` | 锚点组名称（用于自动生成） | - |
 | defaultActiveKey | `string` | 锚点默认位置 | - |
-| activeKey | `string` | 锚点位置（受控） | - |
+| activeKey | `string` | 锚点位置（受控，需在 `onChange` 中同步回写） | - |
 | affix | `boolean` | 是否固定 | `true` |
 | direction | `'vertical' \| 'horizontal'` | 设置导航方向 | `'vertical'` |
 | offsetTop | `number` | 距离顶部距离为多少时，触发锚点改变 | `0` |

package/src/Anchor/interface.ts

@@ -91,7 +91,7 @@ export interface AnchorProps extends DataAttributeProps {
    */
   defaultActiveKey?: string;
   /**
-   * Anchor position (controlled)
+   * Anchor position (controlled). When provided, update it from onChange.
    */
   activeKey?: string;
   /**

package/src/Input/input.tsx

@@ -104,6 +104,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>((baseprops, ref) => {
               <span
                 className={clsx(`${prefixCls}-clear`, classNames?.clear)}
                 style={styles?.clear}
+                role="button"
+                aria-label="clear"
+                tabIndex={0}
                 onClick={onClear}
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => {
                   if (event.key === 'Enter') {

package/src/Input/style/index.less

@@ -8,7 +8,7 @@
   width: 100%;
   padding: var(--yee-input-padding, 2px 8px);
   font-size: var(--yee-input-font-size);
-  line-height: var(--yee-input-line-height);
+  // 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);
@@ -49,7 +49,7 @@
   &-inner {
     width: 100%;
     font-family: var(--yee-font-family);
-    line-height: var(--yee-input-line-height);
+    // line-height: var(--yee-input-line-height);
     background-color: inherit;
     border: none;
     outline: none;

package/src/Select/option.tsx

@@ -43,7 +43,8 @@ const Option = (props: OptionProps) => {
         [`${prefixCls}-option-focused`]: focused,
         [`${prefixCls}-option-disabled`]: disabled,
       })}
-      aria-label="option"
+      aria-selected={selected}
+      aria-disabled={disabled || undefined}
       onClick={handleClick}
       onKeyDown={(e) => {
         if (e.key === 'Enter') {

package/src/Select/options.tsx

@@ -166,6 +166,8 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
           )}
           style={popupStyle}
           ref={rootRef}
+          role="listbox"
+          aria-multiselectable={multiple || undefined}
           tabIndex={-1}
         >
           <OptionsCtx.Provider value={ctxValue}>
@@ -220,6 +222,8 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
           )}
           style={popupStyle}
           ref={rootRef}
+          role="listbox"
+          aria-multiselectable={multiple || undefined}
           tabIndex={-1}
         >
           <OptionsCtx.Provider value={ctxValue}>
@@ -268,6 +272,8 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
             : undefined),
         }}
         ref={rootRef}
+        role="listbox"
+        aria-multiselectable={multiple || undefined}
         tabIndex={-1}
       >
         {isEmpty ? (

package/src/Selector/selector.tsx

@@ -246,7 +246,18 @@ const Selector = React.forwardRef(
         return null;
       }
       return (
-        <span className={`${prefixCls}-clear`} onClick={handleClear}>
+        <span
+          className={`${prefixCls}-clear`}
+          role="button"
+          aria-label="clear"
+          tabIndex={0}
+          onClick={handleClear}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleClear(e as unknown as React.MouseEvent<HTMLSpanElement>);
+            }
+          }}
+        >
           <X size={12} strokeWidth={1} />
         </span>
       );
@@ -258,6 +269,10 @@ const Selector = React.forwardRef(
         tabIndex={disabled || searchable ? -1 : 0}
         className={cls}
         style={style}
+        role="combobox"
+        aria-expanded={open || false}
+        aria-haspopup="listbox"
+        aria-disabled={disabled || undefined}
         onKeyDown={(event) => {
           if (disabled) return;
           // For non-searchable single select, handle Enter to open dropdown

package/src/Spin/style/index.less

@@ -38,7 +38,7 @@
     }
 
     &-ring {
-      .yee-spin-ring {
+      @{pls}-ring {
         box-sizing: border-box;
         display: block;
         border-style: solid;
@@ -53,13 +53,13 @@
     }
 
     &-spokes {
-      .yee-spin-spokes {
+      @{pls}-spokes {
         position: relative;
         width: 100%;
         height: 100%;
       }
 
-      .yee-spin-spokes-line {
+      @{pls}-spokes-line {
         position: absolute;
         top: 0;
         left: 50%;
@@ -101,9 +101,14 @@
 
   &-blur {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
     background-color: var(--yee-color-bg-mask-light, rgba(255, 255, 255, 40%));
   }
 

package/src/Table/theader/filter.tsx

@@ -175,7 +175,7 @@ const HeaderFilter = React.memo((props: any) => {
               <Search size={14} strokeWidth={1.5} />
             )
           }
-          variant={selectNodes.length ? 'filled' : undefined}
+          variant={selectNodes.length || searchValue ? 'filled' : undefined}
           type="text"
           size="small"
         />

package/src/Tag/tag.tsx

@@ -56,6 +56,7 @@ const Tag = forwardRef(
           style={styles?.close}
           type="text"
           size="small"
+          aria-label="close"
           onClick={onClose}
         >
           {typeof closable === 'boolean' ? (
@@ -69,7 +70,19 @@ const Tag = forwardRef(
     const closeNode = renderClose();
 
     return (
-      <div {...rest} className={cls} onClick={handleClick} ref={ref}>
+      <div
+        {...rest}
+        className={cls}
+        onClick={handleClick}
+        ref={ref}
+        {...(checkable
+          ? {
+              role: 'checkbox',
+              'aria-checked': checked || false,
+              tabIndex: 0,
+            }
+          : undefined)}
+      >
         {icon && (
           <span
             className={clsx(`${prefixCls}-icon`, classNames?.icon)}

package/src/Tree/interface.ts

@@ -1,3 +1,5 @@
+import type { DataAttributeProps } from '../utils/types';
+
 export type SemanticType = '';
 
 export type DragPosition = 'before' | 'after' | 'inside';
@@ -73,7 +75,7 @@ export interface TreeNodeProps<T> {
   style?: React.CSSProperties;
 }
 
-export interface TreeProps<T> {
+export interface TreeProps<T> extends DataAttributeProps {
   /**
    * Custom class name prefix
    */

package/src/Tree/tree-node.tsx

@@ -170,6 +170,11 @@ const Node = <T extends Record<string, unknown> = any>(
         [`${prefixCls}-node-drag-over-inside`]: dropPosition === 'inside',
       })}
       style={nodeStyle}
+      role="treeitem"
+      aria-expanded={isLeaf ? undefined : expanded}
+      aria-selected={selected}
+      aria-level={depth + 1}
+      aria-disabled={disabled || undefined}
       {...dragProps}
     >
       {renderEmptyNodes(depth)}

package/src/Tree/tree.tsx

@@ -13,6 +13,7 @@ import useEvent from '../hooks/useEvent';
 import useMergedState from '../hooks/useMergedState';
 import useVirtualList from '../hooks/useVirtualList';
 import mergeContextToProps from '../utils/mergeContextToProps';
+import { pickDataAttrs } from '../utils/types';
 import type { DragPosition, TreeNode, TreeProps } from './interface';
 import TreeNodeComp from './tree-node';
 import { getCheckedKeys, tree2array } from './utils/tree-tools';
@@ -205,8 +206,11 @@ const Tree = <T extends Record<string, unknown> = any>(
     virtual = false,
     height,
     itemHeight = 28,
+    ...rest
   } = props;
 
+  const dataAttrs = pickDataAttrs(rest as Record<string, unknown>);
+
   // ======================== Data ========================
   const [flatItems, itemMap] = useMemo(
     () => tree2array(dataSource ?? [], fieldNames),
@@ -606,7 +610,9 @@ const Tree = <T extends Record<string, unknown> = any>(
       <div
         className={clsx(prefixCls, className)}
         style={style}
+        role="tree"
         onDragEnd={handleDragEnd}
+        {...dataAttrs}
       >
         <TreeContext.Provider value={contextValue}>
           <div
@@ -675,7 +681,9 @@ const Tree = <T extends Record<string, unknown> = any>(
     <div
       className={clsx(prefixCls, className)}
       style={style}
+      role="tree"
       onDragEnd={handleDragEnd}
+      {...dataAttrs}
     >
       <TreeContext.Provider value={contextValue}>
         <AnimatePresence initial={false}>

package/src/Trigger/interface.ts

@@ -1,4 +1,5 @@
 import { TriggerProps as RcTriggerProps } from '@rc-component/trigger';
+import type { DataAttributeProps } from '../utils/types';
 
 export type Placement =
   | 'top'
@@ -31,7 +32,7 @@ export type Point =
   | 'cl'
   | 'cr';
 
-export interface TriggerProps extends Omit<RcTriggerProps, 'children'> {
+export interface TriggerProps extends Omit<RcTriggerProps, 'children'>, DataAttributeProps {
   /**
    * Custom class name prefix
    */

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.5";
+export const version = "0.8.7";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;