@rainbow-oh/yee-c 0.8.1 → 0.8.3

package/src/Select/option.tsx

@@ -7,8 +7,14 @@ import { OptionsCtx } from './options';
 
 const Option = (props: OptionProps) => {
   const { label, value, disabled, title, dataTestId, style } = props;
-  const { prefixCls, selectedKeys, focusedKey, multiple, looseMatch, onSelect } =
-    useContext(OptionsCtx);
+  const {
+    prefixCls,
+    selectedKeys,
+    focusedKey,
+    multiple,
+    looseMatch,
+    onSelect,
+  } = useContext(OptionsCtx);
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     if (!disabled) {

package/src/Select/options.tsx

@@ -117,13 +117,20 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
         const containerRect = container.getBoundingClientRect();
         const targetRect = targetElement.getBoundingClientRect();
         if (targetRect.bottom > containerRect.bottom) {
-          container.scrollTop +=
-            targetRect.bottom - containerRect.bottom;
+          container.scrollTop += targetRect.bottom - containerRect.bottom;
         } else if (targetRect.top < containerRect.top) {
           container.scrollTop -= containerRect.top - targetRect.top;
         }
       }
-    }, [focusedKey, virtual, options, scrollToIndex, rootRef, multiColumn, columns]);
+    }, [
+      focusedKey,
+      virtual,
+      options,
+      scrollToIndex,
+      rootRef,
+      multiColumn,
+      columns,
+    ]);
 
     const isEmpty = options.length === 0;
     const ctxValue = {
@@ -257,7 +264,7 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
         style={{
           ...popupStyle,
           ...(multiColumn
-            ? { '--yee-select-columns': columns } as React.CSSProperties
+            ? ({ '--yee-select-columns': columns } as React.CSSProperties)
             : undefined),
         }}
         ref={rootRef}

package/src/Select/select.tsx

@@ -97,9 +97,7 @@ const Select = (baseprops: SelectProps) => {
     virtualApiRef.current?.scrollToIndex(index);
   }, []);
 
-  const getOptions = (
-    keys: string | number | Array<string | number>,
-  ) => {
+  const getOptions = (keys: string | number | Array<string | number>) => {
     if (keys === '' || keys === null) {
       return undefined;
     }
@@ -133,7 +131,9 @@ const Select = (baseprops: SelectProps) => {
       setOpen(false);
     } else {
       if (keysIncludes(mergedValue, key, looseMatch)) {
-        keys = mergedValue.filter((k: string | number) => !matchValue(k, key, looseMatch));
+        keys = mergedValue.filter(
+          (k: string | number) => !matchValue(k, key, looseMatch),
+        );
       } else {
         keys = [...mergedValue, key];
       }

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/Steps/step.tsx

@@ -98,7 +98,10 @@ const Step: React.FC<StepProps> = (props) => {
   return (
     <>
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`} aria-hidden="true" />
+        <div
+          className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`}
+          aria-hidden="true"
+        />
       )}
       <div
         className={cls}
@@ -111,7 +114,9 @@ const Step: React.FC<StepProps> = (props) => {
         aria-current={index === current ? 'step' : undefined}
         aria-label={`Step ${index + 1}${typeof title === 'string' ? `: ${title}` : ''}, ${statusLabel}`}
       >
-        <div className={`${prefixCls}-item-icon`} aria-hidden="true">{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}>
@@ -132,7 +137,10 @@ const Step: React.FC<StepProps> = (props) => {
         </div>
       )}
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-head ${ribbonStatus}`} aria-hidden="true" />
+        <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} role="list" aria-label="Steps">
+    <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/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/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/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/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/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/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/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);