@rainbow-oh/yee-c 0.8.5 → 0.8.7

package/dist/cjs/Alert/alert.js

@@ -151,6 +151,7 @@ var Alert = (baseprops) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      role: "alert",
       className: (0, import_clsx.default)(
         prefixCls,
         [`${prefixCls}-${mergedState}`],

package/dist/cjs/Anchor/anchor.js

@@ -73,6 +73,19 @@ var import_style = require("./style/index.less");
 var AnchorContext = (0, import_react.createContext)(
   {}
 );
+var NAVIGATION_LOCK_TIMEOUT = 5e3;
+var NAVIGATION_SETTLE_DELAY = 100;
+var TARGET_POSITION_TOLERANCE = 2;
+var SCROLL_KEYS = /* @__PURE__ */ new Set([
+  "ArrowUp",
+  "ArrowDown",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End",
+  " ",
+  "Spacebar"
+]);
 var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   const { anchor } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
   const props = (0, import_mergeContextToProps.default)(baseprops, anchor);
@@ -117,10 +130,79 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   });
   const [anchorList, setAnchorList] = (0, import_react.useState)([]);
   const containerRef = (0, import_react.useRef)(null);
+  const anchorRootRef = (0, import_react.useRef)(null);
   const activeKeyRef = (0, import_react.useRef)(mergedActiveKey);
+  const handleScrollRef = (0, import_react.useRef)(() => {
+  });
+  const pendingTargetKeyRef = (0, import_react.useRef)(void 0);
+  const navigationTimeoutRef = (0, import_react.useRef)(
+    null
+  );
+  const navigationSettleTimeoutRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     activeKeyRef.current = mergedActiveKey;
   }, [mergedActiveKey]);
+  const setAnchorRootRef = (0, import_react.useCallback)(
+    (node) => {
+      anchorRootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const clearNavigationSettleTimer = (0, import_react.useCallback)(() => {
+    if (navigationSettleTimeoutRef.current !== null) {
+      clearTimeout(navigationSettleTimeoutRef.current);
+      navigationSettleTimeoutRef.current = null;
+    }
+  }, []);
+  const clearNavigationLock = (0, import_react.useCallback)(() => {
+    pendingTargetKeyRef.current = void 0;
+    clearNavigationSettleTimer();
+    if (navigationTimeoutRef.current !== null) {
+      clearTimeout(navigationTimeoutRef.current);
+      navigationTimeoutRef.current = null;
+    }
+  }, [clearNavigationSettleTimer]);
+  const scheduleNavigationUnlock = (0, import_react.useCallback)(
+    (key) => {
+      clearNavigationSettleTimer();
+      navigationSettleTimeoutRef.current = setTimeout(() => {
+        if (pendingTargetKeyRef.current === key) {
+          clearNavigationLock();
+        }
+      }, NAVIGATION_SETTLE_DELAY);
+    },
+    [clearNavigationLock, clearNavigationSettleTimer]
+  );
+  const startNavigationLock = (0, import_react.useCallback)(
+    (key) => {
+      clearNavigationLock();
+      pendingTargetKeyRef.current = key;
+      navigationTimeoutRef.current = setTimeout(() => {
+        if (pendingTargetKeyRef.current === key) {
+          clearNavigationLock();
+          handleScrollRef.current();
+        }
+      }, NAVIGATION_LOCK_TIMEOUT);
+    },
+    [clearNavigationLock]
+  );
+  (0, import_react.useEffect)(() => clearNavigationLock, [clearNavigationLock]);
+  const commitActiveKey = (0, import_react.useCallback)(
+    (key, forceNotify = false) => {
+      const changed = activeKeyRef.current !== key;
+      activeKeyRef.current = key;
+      setMergedActiveKey(key);
+      if (changed || forceNotify) {
+        onChange == null ? void 0 : onChange(key);
+      }
+    },
+    [onChange]
+  );
   const generateAnchorList = (0, import_react.useCallback)(() => {
     if (!auto || !name)
       return;
@@ -149,10 +231,39 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
     const currentScroll = container === window ? window.scrollY : container.scrollTop;
     return currentScroll + (target.getBoundingClientRect().top - containerTop);
   }, []);
+  const hasReachedTarget = (0, import_react.useCallback)(
+    (key) => {
+      var _a2;
+      const container = containerRef.current;
+      const target = document.getElementById(key);
+      if (!container || !target)
+        return false;
+      const currentScroll = container === window ? window.pageYOffset || document.documentElement.scrollTop : container.scrollTop;
+      const maxScroll = container === window ? Math.max(
+        document.documentElement.scrollHeight,
+        ((_a2 = document.body) == null ? void 0 : _a2.scrollHeight) || 0
+      ) - window.innerHeight : container.scrollHeight - container.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]
+  );
   const handleScroll = (0, import_react.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 : container.scrollTop;
     const currentItems2 = auto ? anchorList : items;
     if (!currentItems2 || currentItems2.length === 0)
@@ -175,11 +286,24 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       );
       nextActiveKey = first == null ? void 0 : first.key;
     }
-    if (nextActiveKey && activeKeyRef.current !== nextActiveKey) {
-      setMergedActiveKey(nextActiveKey);
-      onChange == null ? void 0 : onChange(nextActiveKey);
+    if (nextActiveKey) {
+      commitActiveKey(nextActiveKey);
     }
-  }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
+  }, [
+    auto,
+    anchorList,
+    items,
+    offsetTop,
+    getTargetOffsetTop,
+    hasReachedTarget,
+    scheduleNavigationUnlock,
+    clearNavigationSettleTimer,
+    clearNavigationLock,
+    commitActiveKey
+  ]);
+  (0, import_react.useEffect)(() => {
+    handleScrollRef.current = handleScroll;
+  }, [handleScroll]);
   (0, import_react.useEffect)(() => {
     const container = getContainer ? getContainer() : window;
     containerRef.current = container;
@@ -187,6 +311,9 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       return;
     let rafId = null;
     const onScroll = () => {
+      if (pendingTargetKeyRef.current) {
+        clearNavigationSettleTimer();
+      }
       if (rafId !== null)
         return;
       rafId = requestAnimationFrame(() => {
@@ -194,23 +321,68 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
         handleScroll();
       });
     };
+    const onScrollEnd = () => {
+      const pendingTargetKey = pendingTargetKeyRef.current;
+      if (pendingTargetKey && hasReachedTarget(pendingTargetKey)) {
+        scheduleNavigationUnlock(pendingTargetKey);
+      }
+    };
+    const onUserInterrupt = (event) => {
+      if (event.type === "pointerdown" && event.target instanceof Element) {
+        const item = event.target.closest(
+          `.${CSS.escape(`${prefixCls}-item`)}`
+        );
+        const owner = item == null ? void 0 : item.closest(`.${CSS.escape(prefixCls)}`);
+        if (owner === anchorRootRef.current) {
+          return;
+        }
+      }
+      if (event.type === "keydown" && !SCROLL_KEYS.has(event.key)) {
+        return;
+      }
+      clearNavigationLock();
+    };
     container.addEventListener("scroll", onScroll);
+    container.addEventListener("scrollend", onScrollEnd);
+    container.addEventListener("wheel", onUserInterrupt);
+    container.addEventListener("touchstart", onUserInterrupt);
+    document.addEventListener("pointerdown", onUserInterrupt);
+    container.addEventListener("keydown", onUserInterrupt);
     handleScroll();
     return () => {
       container.removeEventListener("scroll", onScroll);
+      container.removeEventListener("scrollend", onScrollEnd);
+      container.removeEventListener("wheel", onUserInterrupt);
+      container.removeEventListener(
+        "touchstart",
+        onUserInterrupt
+      );
+      document.removeEventListener(
+        "pointerdown",
+        onUserInterrupt
+      );
+      container.removeEventListener("keydown", onUserInterrupt);
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
       }
     };
-  }, [getContainer, handleScroll]);
+  }, [
+    getContainer,
+    handleScroll,
+    hasReachedTarget,
+    scheduleNavigationUnlock,
+    clearNavigationSettleTimer,
+    clearNavigationLock,
+    prefixCls
+  ]);
   const scrollToAnchor = (0, import_react.useCallback)(
     (key) => {
       const target = document.getElementById(key);
       if (!target)
-        return;
+        return false;
       const container = containerRef.current;
       if (!container)
-        return;
+        return false;
       const targetTop = getTargetOffsetTop(target) - offsetTop;
       if (container === window) {
         window.scrollTo({ top: targetTop, behavior: "smooth" });
@@ -220,6 +392,7 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
           behavior: "smooth"
         });
       }
+      return true;
     },
     [offsetTop, getTargetOffsetTop]
   );
@@ -230,11 +403,21 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   }, [defaultActiveKey]);
   const handleItemClick = (0, import_react.useCallback)(
     (key) => {
-      setMergedActiveKey(key);
-      scrollToAnchor(key);
-      onChange == null ? void 0 : onChange(key);
+      startNavigationLock(key);
+      commitActiveKey(key, true);
+      if (!scrollToAnchor(key)) {
+        clearNavigationLock();
+        return;
+      }
+      handleScroll();
     },
-    [scrollToAnchor, onChange]
+    [
+      startNavigationLock,
+      commitActiveKey,
+      scrollToAnchor,
+      clearNavigationLock,
+      handleScroll
+    ]
   );
   const cls = (0, import_clsx.default)(
     prefixCls,
@@ -258,7 +441,7 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       return null;
     return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-nav-arrow` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-arrow-icon` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, { size: 18 })));
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, rest), { className: cls, style, ref }), renderNavArrow(), /* @__PURE__ */ import_react.default.createElement(AnchorContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, rest), { className: cls, style, ref: setAnchorRootRef }), renderNavArrow(), /* @__PURE__ */ import_react.default.createElement(AnchorContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
     "ul",
     {
       className: (0, import_clsx.default)(`${prefixCls}-content`, classNames == null ? void 0 : classNames.content),

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

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

package/dist/cjs/Input/input.js

@@ -159,6 +159,9 @@ var Input = (0, import_react.forwardRef)((baseprops, ref) => {
         {
           className: (0, import_clsx.default)(`${prefixCls}-clear`, classNames == null ? void 0 : classNames.clear),
           style: styles == null ? void 0 : styles.clear,
+          role: "button",
+          "aria-label": "clear",
+          tabIndex: 0,
           onClick: onClear,
           onKeyDown: (event) => {
             if (event.key === "Enter") {

package/dist/cjs/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/dist/cjs/Select/option.js

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

package/dist/cjs/Select/options.js

@@ -210,6 +210,8 @@ var Options = (0, import_react.forwardRef)(
           ),
           style: popupStyle,
           ref: rootRef,
+          role: "listbox",
+          "aria-multiselectable": multiple || void 0,
           tabIndex: -1
         }),
         /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, /* @__PURE__ */ import_react.default.createElement(
@@ -259,6 +261,8 @@ var Options = (0, import_react.forwardRef)(
           ),
           style: popupStyle,
           ref: rootRef,
+          role: "listbox",
+          "aria-multiselectable": multiple || void 0,
           tabIndex: -1
         }),
         /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, /* @__PURE__ */ import_react.default.createElement(
@@ -297,6 +301,8 @@ var Options = (0, import_react.forwardRef)(
         ),
         style: __spreadValues(__spreadValues({}, popupStyle), multiColumn ? { "--yee-select-columns": columns } : void 0),
         ref: rootRef,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
         tabIndex: -1
       }),
       isEmpty ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(

package/dist/cjs/Selector/selector.js

@@ -274,7 +274,22 @@ var Selector = import_react.default.forwardRef(
       if (selectedKeys.length === 0 && !searchValue) {
         return null;
       }
-      return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 1 }));
+      return /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: `${prefixCls}-clear`,
+          role: "button",
+          "aria-label": "clear",
+          tabIndex: 0,
+          onClick: handleClear,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              handleClear(e);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 12, strokeWidth: 1 })
+      );
     };
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
@@ -282,6 +297,10 @@ var Selector = import_react.default.forwardRef(
         tabIndex: disabled || searchable ? -1 : 0,
         className: cls,
         style,
+        role: "combobox",
+        "aria-expanded": open || false,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled || void 0,
         onKeyDown: (event) => {
           if (disabled)
             return;

package/dist/cjs/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/dist/cjs/Table/theader/filter.js

@@ -159,7 +159,7 @@ var HeaderFilter = import_react.default.memo((props) => {
       import_Button.default,
       {
         icon: items ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ListFilter, { size: 14, strokeWidth: 1.5 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 14, strokeWidth: 1.5 }),
-        variant: selectNodes.length ? "filled" : void 0,
+        variant: selectNodes.length || searchValue ? "filled" : void 0,
         type: "text",
         size: "small"
       }

package/dist/cjs/Tag/tag.js

@@ -129,19 +129,34 @@ var Tag = (0, import_react.forwardRef)(
         style: styles == null ? void 0 : styles.close,
         type: "text",
         size: "small",
+        "aria-label": "close",
         onClick: onClose
       },
       typeof closable === "boolean" ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14, strokeWidth: 1 }) : closable
     ) : null;
     const closeNode = renderClose();
-    return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, rest), { className: cls, onClick: handleClick, ref }), icon && /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: (0, import_clsx.default)(`${prefixCls}-icon`, classNames == null ? void 0 : classNames.icon),
-        style: styles == null ? void 0 : styles.icon
-      },
-      icon
-    ), icon || closeNode ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(classNames == null ? void 0 : classNames.content), style: styles == null ? void 0 : styles.content }, children) : children, closeNode);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues(__spreadProps(__spreadValues({}, rest), {
+        className: cls,
+        onClick: handleClick,
+        ref
+      }), checkable ? {
+        role: "checkbox",
+        "aria-checked": checked || false,
+        tabIndex: 0
+      } : void 0),
+      icon && /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: (0, import_clsx.default)(`${prefixCls}-icon`, classNames == null ? void 0 : classNames.icon),
+          style: styles == null ? void 0 : styles.icon
+        },
+        icon
+      ),
+      icon || closeNode ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(classNames == null ? void 0 : classNames.content), style: styles == null ? void 0 : styles.content }, children) : children,
+      closeNode
+    );
   }
 );
 Tag.displayName = "Tag";

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { DataAttributeProps } from '../utils/types';
 export type SemanticType = '';
 export type DragPosition = 'before' | 'after' | 'inside';
 export type { MoveInfo } from './utils/tree-tools';
@@ -69,7 +70,7 @@ export interface TreeNodeProps<T> {
     node: TreeNode<T>;
     style?: React.CSSProperties;
 }
-export interface TreeProps<T> {
+export interface TreeProps<T> extends DataAttributeProps {
     /**
      * Custom class name prefix
      */

package/dist/cjs/Tree/tree-node.js

@@ -191,7 +191,12 @@ var Node = (props) => {
         [`${prefixCls}-node-drag-over-after`]: dropPosition === "after",
         [`${prefixCls}-node-drag-over-inside`]: dropPosition === "inside"
       }),
-      style: nodeStyle
+      style: nodeStyle,
+      role: "treeitem",
+      "aria-expanded": isLeaf ? void 0 : expanded,
+      "aria-selected": selected,
+      "aria-level": depth + 1,
+      "aria-disabled": disabled || void 0
     }, dragProps),
     renderEmptyNodes(depth),
     renderExpandedIcon(),