@rainbow-oh/yee-c 0.8.0 → 0.8.2

package/src/Steps/step.tsx

@@ -43,6 +43,15 @@ const Step: React.FC<StepProps> = (props) => {
     status ??
     (index < current ? 'finish' : index === current ? 'process' : 'wait');
 
+  const statusLabel =
+    mergedStatus === 'finish'
+      ? 'completed'
+      : mergedStatus === 'process'
+        ? 'in progress'
+        : mergedStatus === 'error'
+          ? 'error'
+          : 'pending';
+
   const renderIcon = useMemo(() => {
     if (dot) return <span className={`${prefixCls}-item-dot`}></span>;
 
@@ -89,7 +98,10 @@ const Step: React.FC<StepProps> = (props) => {
   return (
     <>
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`} />
+        <div
+          className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`}
+          aria-hidden="true"
+        />
       )}
       <div
         className={cls}
@@ -97,11 +109,14 @@ const Step: React.FC<StepProps> = (props) => {
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         tabIndex={disabled ? -1 : onChange ? 0 : undefined}
-        role={onChange ? 'button' : undefined}
+        role={onChange ? 'button' : 'listitem'}
         aria-disabled={disabled}
         aria-current={index === current ? 'step' : undefined}
+        aria-label={`Step ${index + 1}${typeof title === 'string' ? `: ${title}` : ''}, ${statusLabel}`}
       >
-        <div className={`${prefixCls}-item-icon`}>{renderIcon}</div>
+        <div className={`${prefixCls}-item-icon`} aria-hidden="true">
+          {renderIcon}
+        </div>
         <div className={`${prefixCls}-item-content`}>
           <div className={`${prefixCls}-item-title`}>
             <span title={typeof title === 'string' ? title : undefined}>
@@ -117,12 +132,15 @@ const Step: React.FC<StepProps> = (props) => {
         </div>
       </div>
       {type === 'navigation' && (
-        <div className={`${prefixCls}-item-navi-arrow`}>
+        <div className={`${prefixCls}-item-navi-arrow`} aria-hidden="true">
           <ChevronRight />
         </div>
       )}
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-head ${ribbonStatus}`} />
+        <div
+          className={`${prefixCls}-item-ribbon-head ${ribbonStatus}`}
+          aria-hidden="true"
+        />
       )}
     </>
   );

package/src/Steps/steps.tsx

@@ -71,7 +71,14 @@ const Steps = forwardRef<HTMLDivElement, StepsProps>((baseprops, ref) => {
   };
 
   return (
-    <div {...rest} className={cls} style={style} ref={ref}>
+    <div
+      {...rest}
+      className={cls}
+      style={style}
+      ref={ref}
+      role="list"
+      aria-label="Steps"
+    >
       <StepsContext.Provider value={contextValue}>
         {renderSteps()}
       </StepsContext.Provider>

package/src/Table/demo/components-override.tsx

@@ -7,21 +7,41 @@
  *
  * Table 本身不依赖任何拖拽库；本 demo 不引入 dnd，仅证明替换点生效。
  */
-import { Table } from '@rainbow-oh/yee-c';
 import type { TableComponents, TableRowRendererProps } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 // 替换 <tbody>：保持渲染 <tbody>，外部库可在此包 SortableContext。
-const CustomTbody = (props: { className?: string; children?: React.ReactNode }) => (
+const CustomTbody = (props: {
+  className?: string;
+  children?: React.ReactNode;
+}) => (
   <tbody className={props.className} data-custom-tbody>
     {props.children}
   </tbody>
 );
 
 // 整行接管：消费方渲染整 <tr> + 单元格，可在此放拖拽手柄等任意内容。
-const CustomRow = ({ record, index, columns, rowKey }: TableRowRendererProps) => (
-  <tr data-row-key={rowKey} style={{ background: index % 2 === 0 ? '#f8fafc' : undefined }}>
-    <td style={{ width: 40, textAlign: 'center', color: '#2563eb', fontWeight: 700 }}>{index + 1}</td>
+const CustomRow = ({
+  record,
+  index,
+  columns,
+  rowKey,
+}: TableRowRendererProps) => (
+  <tr
+    data-row-key={rowKey}
+    style={{ background: index % 2 === 0 ? '#f8fafc' : undefined }}
+  >
+    <td
+      style={{
+        width: 40,
+        textAlign: 'center',
+        color: '#2563eb',
+        fontWeight: 700,
+      }}
+    >
+      {index + 1}
+    </td>
     {columns.map((col) => (
       <td key={String(col.key)}>{record[col.dataIndex || '']}</td>
     ))}
@@ -36,7 +56,12 @@ export default () => {
   ];
 
   const dataSource = [
-    { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
     { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
     { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
   ];
@@ -45,5 +70,7 @@ export default () => {
     body: { tbody: CustomTbody, row: CustomRow },
   };
 
-  return <Table columns={columns} dataSource={dataSource} components={components} />;
+  return (
+    <Table columns={columns} dataSource={dataSource} components={components} />
+  );
 };

package/src/Table/demo/grouping.tsx

@@ -20,7 +20,13 @@ export default () => {
       title: 'Info',
       key: 'info',
       children: [
-        { title: 'Age', dataIndex: 'age', key: 'age', width: 100, sorter: true },
+        {
+          title: 'Age',
+          dataIndex: 'age',
+          key: 'age',
+          width: 100,
+          sorter: true,
+        },
         {
           title: 'Address',
           dataIndex: 'address',
@@ -52,9 +58,7 @@ export default () => {
       key: 'action',
       fixed: 'right',
       width: 100,
-      render: (record) => (
-        <a onClick={() => console.log(record)}>Edit</a>
-      ),
+      render: (record) => <a onClick={() => console.log(record)}>Edit</a>,
     },
   ];
 

package/src/Table/hooks/useColumns.ts

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import useDeepCompareMemo from '../../hooks/useDeepCompareMemo';
 import deepClone from '../../utils/deepClone';
 import { handleColumns } from '../util';
 import {
@@ -15,6 +14,18 @@ import type {
   WrapedColumnProps,
 } from '../interface';
 
+const getColumnsFromChild = (
+  childs: React.ReactElement<ColumnProps>[],
+): Array<ColumnProps> | null => {
+  const cols: ColumnProps[] = [];
+  React.Children.forEach(childs, (child) => {
+    if (child) {
+      cols.push({ ...(child.props as ColumnProps) });
+    }
+  });
+  return cols.length ? cols : null;
+};
+
 export default function useColumns({
   children,
   columns,
@@ -28,21 +39,6 @@ export default function useColumns({
   rowSelection?: RowSelectionType;
   expandable?: ExpandableType;
 }) {
-  const shouldRenderSelection = !!rowSelection;
-  const shouldRenderExpand = !!expandable;
-
-  const getColumnsFromChild = (
-    childs: React.ReactElement<ColumnProps>[],
-  ): Array<ColumnProps> | null => {
-    const cols: ColumnProps[] = [];
-    React.Children.forEach(childs, (child) => {
-      if (child) {
-        cols.push({ ...(child.props as ColumnProps) });
-      }
-    });
-    return cols.length ? cols : null;
-  };
-
   const childColumns: Array<ColumnProps> | null = useMemo(() => {
     return children
       ? getColumnsFromChild(children as React.ReactElement<ColumnProps>[])
@@ -52,7 +48,7 @@ export default function useColumns({
   // Build the column tree (with selection/expand injected at the top level),
   // then derive both the flat leaf columns (body/colgroup/summary/sorter) and
   // the 2D header rows (thead multi-level rendering).
-  const { wrapedColumns, headerRows } = useDeepCompareMemo(() => {
+  const { wrapedColumns, headerRows } = useMemo(() => {
     const base = (deepClone(childColumns || columns || []) ||
       []) as WrapedColumnProps[];
     const tree = injectSelectionExpand(base, rowSelection, expandable);
@@ -60,7 +56,7 @@ export default function useColumns({
     const wraped = handleColumns(leaves);
     const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
+  }, [childColumns, columns, rowSelection, expandable]);
 
   return {
     wrapedColumns,

package/src/Table/index.ts

@@ -5,13 +5,13 @@ import Head from './theader';
 
 export type {
   ColumnProps,
+  HeaderCell,
   PaginationType,
   RowSelectionType,
-  TableProps,
-  TableComponents,
   TableBodyComponents,
+  TableComponents,
+  TableProps,
   TableRowRendererProps,
-  HeaderCell,
   onChangeParams,
 } from './interface';
 

package/src/Table/style/index.less

@@ -92,13 +92,11 @@
       width: 100%;
 
       &-scroll-left @{pls}-cell-fixed-left-last {
-        box-shadow: 6px 0 6px -4px
-          var(--yee-table-fixed-left-after-bs-color);
+        box-shadow: 6px 0 6px -4px var(--yee-table-fixed-left-after-bs-color);
       }
 
       &-scroll-right @{pls}-cell-fixed-right-first {
-        box-shadow: -6px 0 6px -4px
-          var(--yee-table-fixed-right-after-bs-color);
+        box-shadow: -6px 0 6px -4px var(--yee-table-fixed-right-after-bs-color);
       }
     }
 

package/src/Table/table.tsx

@@ -146,8 +146,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     const next = {
       left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
       right:
-        hasHorizontalScroll &&
-        scrollContainer.scrollLeft < maxScrollLeft - 1,
+        hasHorizontalScroll && scrollContainer.scrollLeft < maxScrollLeft - 1,
     };
 
     setHorizontalScroll((current) =>
@@ -312,8 +311,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
         ref={contentWrapperRef}
         className={clsx(`${prefixCls}-content-wrapper`, {
           [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
-          [`${prefixCls}-content-wrapper-scroll-right`]:
-            horizontalScroll.right,
+          [`${prefixCls}-content-wrapper-scroll-right`]: horizontalScroll.right,
         })}
         onScroll={updateHorizontalScroll}
       >

package/src/Table/tbody/row.tsx

@@ -82,9 +82,7 @@ const TableRow: React.FC<TableRowProps> = (props) => {
 
     if (type === 'checkbox') {
       return (
-        <Checkbox
-          {...(commonProps as React.ComponentProps<typeof Checkbox>)}
-        />
+        <Checkbox {...(commonProps as React.ComponentProps<typeof Checkbox>)} />
       );
     }
     return <Radio {...(commonProps as React.ComponentProps<typeof Radio>)} />;

package/src/Table/theader/index.tsx

@@ -13,16 +13,17 @@ export interface TableHeadProps {
 }
 
 const TableHead: React.FC<any> = (props) => {
-  const { headerRows = [], onCheckAll, checkedAll, onHeaderRow, ...rest } =
-    props;
+  const {
+    headerRows = [],
+    onCheckAll,
+    checkedAll,
+    onHeaderRow,
+    ...rest
+  } = props;
 
   const { prefixCls } = useContext(TableCtx);
 
-  const renderCell = (
-    cell: HeaderCell,
-    rowIndex: number,
-    colIndex: number,
-  ) => {
+  const renderCell = (cell: HeaderCell, rowIndex: number, colIndex: number) => {
     const { column, colSpan, rowSpan } = cell;
     const { key, type, visible } = column;
     const cellKey =
@@ -73,9 +74,7 @@ const TableHead: React.FC<any> = (props) => {
         const rowProps = onHeaderRow ? onHeaderRow(rowColumns) : {};
         return (
           <tr {...rowProps} key={`thead-row-${rowIndex}`}>
-            {row.map((cell, colIndex) =>
-              renderCell(cell, rowIndex, colIndex),
-            )}
+            {row.map((cell, colIndex) => renderCell(cell, rowIndex, colIndex))}
           </tr>
         );
       })}

package/src/Tabs/tab-content.tsx

@@ -67,9 +67,11 @@ const TabContent: React.FC<TabContentProps> = ({
             className={`${prefixCls}-tab-content`}
             style={{ display: activeKey === key ? 'block' : 'none' }}
             key={key}
+            id={`tabpanel-${key}`}
             role="tabpanel"
             aria-labelledby={`tab-${key}`}
             aria-hidden={activeKey !== key}
+            tabIndex={activeKey === key ? 0 : -1}
           >
             {children}
           </div>

package/src/Tabs/tab-header/index.tsx

@@ -170,6 +170,8 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
             className={clsx(`${prefixCls}-nav-list`, classNames?.list)}
             style={styles?.list}
             ref={navList}
+            role="tablist"
+            aria-orientation={direction}
           >
             {items?.map((item: TabItemType, index: number) => (
               <TabHeaderTitle

package/src/Tabs/tab-header/tab-header-title.tsx

@@ -166,10 +166,12 @@ const TabHeaderTitle: React.FC<TabsItemProps> = (props) => {
       {...rest}
       ref={tabRef}
       role="tab"
+      id={`tab-${$key}`}
       aria-selected={activeKey === $key}
       aria-disabled={disabled}
+      aria-controls={`tabpanel-${$key}`}
       className={cls}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={disabled ? -1 : activeKey === $key ? 0 : -1}
       onClick={handleTabClick}
       onKeyDown={handleKeyDown}
     >

package/src/Tour/demo/placement.tsx

@@ -46,7 +46,8 @@ export default () => {
           {
             target: () => targetRef.current,
             title: `placement: ${p}`,
-            description: '气泡卡片相对目标元素的位置；靠近视口边缘时会自动翻转。',
+            description:
+              '气泡卡片相对目标元素的位置；靠近视口边缘时会自动翻转。',
           },
         ]}
       />

package/src/Tour/index.ts

@@ -2,9 +2,9 @@ import InternalTour from './tour';
 
 export type {
   TourProps,
+  TourSemanticDOM,
   TourStep,
   TourTarget,
-  TourSemanticDOM,
 } from './interface';
 
 export default InternalTour;

package/src/Tree/style/index.less

@@ -25,11 +25,7 @@
     }
 
     &-drag-over-inside {
-      background: color-mix(
-        in srgb,
-        var(--yee-primary-color) 12%,
-        transparent
-      );
+      background: color-mix(in srgb, var(--yee-primary-color) 12%, transparent);
     }
 
     &-switcher {

package/src/Tree/tree.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
 import React, {
   ChangeEvent,
   createContext,
@@ -7,7 +8,6 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
 import { GlobalContext } from '../Config-Provider';
 import useEvent from '../hooks/useEvent';
 import useMergedState from '../hooks/useMergedState';
@@ -228,9 +228,15 @@ const Tree = <T extends Record<string, unknown> = any>(
   // useStableUidArray ensures stable references to prevent infinite re-render loops.
 
   const stableExpandedValue = useStableUidArray(expandedKeys, flatItems);
-  const stableExpandedDefault = useStableUidArray(defaultExpandedKeys, flatItems);
+  const stableExpandedDefault = useStableUidArray(
+    defaultExpandedKeys,
+    flatItems,
+  );
   const stableSelectedValue = useStableUidArray(selectedKeys, flatItems);
-  const stableSelectedDefault = useStableUidArray(defaultSelectedKeys, flatItems);
+  const stableSelectedDefault = useStableUidArray(
+    defaultSelectedKeys,
+    flatItems,
+  );
   const stableCheckedValue = useStableUidArray(checkedKeys, flatItems);
   const stableCheckedDefault = useStableUidArray(defaultCheckedKeys, flatItems);
 
@@ -248,13 +254,10 @@ const Tree = <T extends Record<string, unknown> = any>(
   );
 
   // --- Selected ---
-  const [selectedUidArray, setSelectedUidArray] = useMergedState<string[]>(
-    [],
-    {
-      value: stableSelectedValue,
-      defaultValue: stableSelectedDefault,
-    },
-  );
+  const [selectedUidArray, setSelectedUidArray] = useMergedState<string[]>([], {
+    value: stableSelectedValue,
+    defaultValue: stableSelectedDefault,
+  });
   const selectedUidSet = useMemo(
     () => arrayToSet(selectedUidArray),
     [selectedUidArray],
@@ -678,7 +681,9 @@ const Tree = <T extends Record<string, unknown> = any>(
         <AnimatePresence initial={false}>
           {segments.map((segment) => {
             if (segment.type === 'node') {
-              return <TreeNodeComp node={segment.node} key={segment.node.uid} />;
+              return (
+                <TreeNodeComp node={segment.node} key={segment.node.uid} />
+              );
             }
             // Keep the wrapper mounted throughout native drag operations.
             // Replacing this tree after dragStart removes the browser's drag

package/src/Tree/utils/tree-tools.ts

@@ -114,7 +114,10 @@ export function moveTreeNode<T extends Record<string, unknown>>(
   if (!dragNode) return root;
 
   // Phase 2: insert per position.
-  const insert = (nodes: T[], depth: number): { inserted: boolean; nodes: T[] } => {
+  const insert = (
+    nodes: T[],
+    depth: number,
+  ): { inserted: boolean; nodes: T[] } => {
     const next: T[] = [];
     let inserted = false;
     for (const n of nodes) {

package/src/hooks/useDelayState.ts

@@ -4,10 +4,12 @@ export default function useDelayState<T>(state: T, delay = 0): T {
   const [delayState, setDelayState] = useState<T>();
 
   useEffect(() => {
-    setTimeout(() => {
+    const timer = window.setTimeout(() => {
       setDelayState(state);
     }, delay * 1000);
-  }, [state]);
+
+    return () => window.clearTimeout(timer);
+  }, [delay, state]);
 
   return delayState as T;
 }

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/hooks/useFocusManage.ts

@@ -1,20 +1,36 @@
-import { useEffect } from 'react';
-import { popFocus, pushFocus } from '../utils/focusStack';
-import useDelayState from './useDelayState';
-
-export default function useFocusManage(ele: HTMLElement, open: boolean) {
-  const delayOpen = useDelayState(open);
-
+import { useEffect, useRef } from 'react';
+import { type FocusStackEntry, popFocus, pushFocus } from '../utils/focusStack';
+export default function useFocusManage(
+  element: HTMLElement | null,
+  open: boolean,
+) {
+  const entryRef = useRef<FocusStackEntry | null>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const openCycleRef = useRef(false);
+  const releaseEntry = () => {
+    if (entryRef.current) {
+      popFocus(entryRef.current);
+      entryRef.current = null;
+    }
+  };
+  const endOpenCycle = () => {
+    releaseEntry();
+    previousFocusRef.current = null;
+    openCycleRef.current = false;
+  };
+  useEffect(() => {
+    if (open && !openCycleRef.current) {
+      openCycleRef.current = true;
+      previousFocusRef.current = document.activeElement as HTMLElement | null;
+    } else if (!open && openCycleRef.current) {
+      endOpenCycle();
+    }
+  }, [open]);
   useEffect(() => {
-    if (!ele) return;
-    if (delayOpen) {
-      pushFocus(ele);
-    } else {
-      popFocus();
+    if (!open || !openCycleRef.current || !element || entryRef.current) {
+      return;
     }
-
-    return () => {
-      popFocus();
-    };
-  }, [ele, delayOpen]);
+    entryRef.current = pushFocus(element, previousFocusRef.current);
+  }, [element, open]);
+  useEffect(() => releaseEntry, []);
 }

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

@@ -220,4 +220,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/style/size.css

@@ -224,6 +224,8 @@
   /* --Dialog-- */
   --yee-dialog-z-index: var(--yee-z-index-overlay);
   --yee-dialog-mask-z-index: var(--yee-z-index-mask);
+  --yee-dialog-title-font-size: 18px;
+  --yee-dialog-title-font-weight: 600;
   --yee-dialog-content-wrapper-z-index: var(--yee-z-index-overlay);
   --yee-dialog-header-margin-bottom: 12px;
   --yee-dialog-content-margin-top: 10%;

package/src/utils/debounce.ts

@@ -1,8 +1,6 @@
 type AnyFn = (...args: any[]) => any;
 
-export type Debounced<T extends AnyFn> = ((
-  ...args: Parameters<T>
-) => void) & {
+export type Debounced<T extends AnyFn> = ((...args: Parameters<T>) => void) & {
   /** Cancel any pending invocation. */
   cancel: () => void;
 };