@rainbow-oh/yee-c 0.8.14 → 0.8.16

package/package.json

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

package/src/Progress/circle.tsx

@@ -111,7 +111,7 @@ const Circle = React.forwardRef<HTMLDivElement, CircleProps>((props, ref) => {
       style={{ width, height: width }}
       ref={ref}
     >
-      <svg className={`${prefixCls}-circle`} viewBox="0 0 120 120">
+      <svg className={`${prefixCls}-circle`} viewBox="0 0 120 120" aria-hidden="true">
         <circle
           className={`${prefixCls}-circle-trail`}
           cx="60"

package/src/Progress/line.tsx

@@ -36,7 +36,7 @@ const Line = React.forwardRef<HTMLDivElement, LineProps>((props, ref) => {
 
   return (
     <div className={`${prefixCls}-outer`} ref={ref}>
-      <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }}>
+      <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }} aria-hidden="true">
         <div
           className={`${prefixCls}-bg`}
           style={{ width: percent + '%', ...progressColor }}

package/src/Progress/progress.tsx

@@ -106,6 +106,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuenow={percent}
         aria-valuemin={0}
         aria-valuemax={100}
+        aria-valuetext={`${percent}%`}
+        aria-label={status === 'error' ? `Progress: ${percent}%, error` : `Progress: ${percent}%`}
         ref={ref}
         {...dataAttrs}
       >

package/src/Progress/steps.tsx

@@ -56,7 +56,9 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>((props, ref) => {
 
   return (
     <div className={`${prefixCls}-steps`} ref={ref}>
-      {renderSteps()}
+      <div aria-hidden="true" style={{ display: 'contents' }}>
+        {renderSteps()}
+      </div>
       {showInfo && <span className={`${prefixCls}-text`}>{children}</span>}
     </div>
   );

package/src/Search/search.tsx

@@ -4,6 +4,7 @@ import React, {
   startTransition,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -55,6 +56,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
     const [open, setOpen] = useState(false);
 
     const popupRef = useRef<HTMLDivElement>(undefined);
+    const listboxId = useId();
 
     const { focusedKey, onKeyDown } = useSelectKeyboard({
       open,
@@ -130,8 +132,17 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
               className={clsx(`${prefixCls}-clear-icon`, classNames?.clear)}
               style={styles?.clear}
               onClick={handleClear}
+              role="button"
+              aria-label="Clear search"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleClear(e as unknown as React.MouseEvent<HTMLSpanElement>);
+                }
+              }}
             >
-              <X size={14} />
+              <X size={14} aria-hidden="true" />
             </span>
           )}
           {suffix}
@@ -174,8 +185,10 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       );
     };
 
+    const hasPopup = Array.isArray(options) || Array.isArray(suggestions);
+
     const popup = (
-      <div className={`${prefixCls}-popup`} tabIndex={0}>
+      <div className={`${prefixCls}-popup`} tabIndex={0} id={listboxId} role="listbox">
         {Array.isArray(options) ? (
           <List
             focusedKey={focusedKey}
@@ -196,7 +209,15 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
 
     return (
       <Trigger popup={popup} open={open} onOpenChange={setOpen}>
-        <div className={getRootClassName()} style={style}>
+        <div
+          className={getRootClassName()}
+          style={style}
+          role="combobox"
+          aria-expanded={hasPopup ? open : undefined}
+          aria-haspopup={hasPopup ? 'listbox' : undefined}
+          aria-owns={hasPopup && open ? listboxId : undefined}
+          aria-disabled={disabled || undefined}
+        >
           {renderPrefix()}
           <input
             {...rest}
@@ -208,8 +229,16 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
             placeholder={placeholder}
             onChange={handleChange}
             onKeyDown={onKeyDown}
+            role="searchbox"
+            aria-autocomplete={hasPopup ? 'list' : undefined}
+            aria-controls={hasPopup && open ? listboxId : undefined}
+            aria-activedescendant={
+              hasPopup && open && focusedKey !== null
+                ? String(focusedKey)
+                : undefined
+            }
           />
-          {loading ? <Spin variant="ring" size="small" /> : renderSuffix()}
+          {loading ? <Spin variant="ring" size="small" aria-label="Loading" /> : renderSuffix()}
         </div>
       </Trigger>
     );

package/src/Select/interface.ts

@@ -1,3 +1,4 @@
+import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
 import type { DataAttributeProps } from '../utils/types';
 
@@ -25,7 +26,7 @@ export type Option = {
 };
 
 export interface SelectProps
-  extends DataAttributeProps, Pick<SelectorProps, 'size'> {
+  extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
   /**
    * Custom class name prefix
    * */

package/src/Spin/demo/types.tsx

@@ -5,19 +5,34 @@ export default () => {
   return (
     <Space direction="vertical">
       <Space>
-        <Spin variant="dot" color="error"/>
+        <Spin variant="dot" />
         <span>dot</span>
       </Space>
 
       <Space>
-        <Spin variant="ring" color="error"/>
+        <Spin variant="ring" />
         <span>ring</span>
       </Space>
 
       <Space>
-        <Spin variant="spokes" color="error"/>
+        <Spin variant="spokes" />
         <span>spokes</span>
       </Space>
+
+      <Space>
+        <Spin variant="bounce" />
+        <span>bounce</span>
+      </Space>
+
+      <Space>
+        <Spin variant="pulse" />
+        <span>pulse</span>
+      </Space>
+
+      <Space>
+        <Spin variant="wheel" />
+        <span>wheel</span>
+      </Space>
     </Space>
   );
 };

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

@@ -43,7 +43,7 @@ Used for page and block loading status.
 | styles | `Partial<Record<'tip' \| 'indicator', React.CSSProperties>>` | Semantic structure styles | - |
 | tip | `React.ReactNode` | Loading tip text | - |
 | delay | `number` | Delay in milliseconds to show loading effect | - |
-| variant | `'dot' \| 'ring' \| 'spokes'` | Indicator variant, `ring` for rotating circle, `spokes` for radiating lines | `'dot'` |
+| variant | `'dot' \| 'ring' \| 'spokes' \| 'bounce' \| 'pulse' \| 'wheel'` | Indicator variant, `ring` for rotating circle, `spokes` for radiating lines, `bounce` for bouncing dots, `pulse` for pulsing circles, `wheel` for spokes with hollow center | `'dot'` |
 | indicator | `React.ReactNode` | Loading indicator | - |
 | mask | `boolean` | Whether to show mask | - |
 | children | `React.ReactNode` | Children elements | - |
@@ -54,4 +54,7 @@ Used for page and block loading status.
 | --- | --- |
 | dot | dot circle |
 | ring | rotating circle |
-| spokes | Spokes type |
+| spokes | Spokes type |
+| bounce | Bouncing dots |
+| pulse | Pulsing circles |
+| wheel | Spokes with hollow center |

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

@@ -43,7 +43,7 @@ toc: 'content'
 | styles | `Partial<Record<'tip' \| 'indicator', React.CSSProperties>>` | 语义化结构样式 | - |
 | tip | `React.ReactNode` | 加载状态的提示词 | - |
 | delay | `number` | 延迟显示加载效果的时间（毫秒） | - |
-| variant | `'dot' \| 'ring' \| 'spokes'` | 加载器样式变体，`ring` 为圆环转圈，`spokes` 为辐条旋转 | `'dot'` |
+| variant | `'dot' \| 'ring' \| 'spokes' \| 'bounce' \| 'pulse' \| 'wheel'` | 加载器样式变体，`ring` 为圆环转圈，`spokes` 为辐条旋转，`bounce` 为弹跳圆点，`pulse` 为脉冲圆圈，`wheel` 为带中心空圆的辐条 | `'dot'` |
 | indicator | `React.ReactNode` | 加载器指示符 | - |
 | mask | `boolean` | 是否显示遮罩 | - |
 | children | `React.ReactNode` | 子元素 | - |
@@ -54,4 +54,7 @@ toc: 'content'
 | --- | --- |
 | dot | 原点旋转 |
 | ring | 圆环转圈 |
-| spokes | 辐条类型 |
+| spokes | 辐条类型 |
+| bounce | 弹跳圆点 |
+| pulse | 脉冲圆圈 |
+| wheel | 中空辐条（辐条离中心有距离，中间形成空圆） |

package/src/Spin/indicator.tsx

@@ -188,8 +188,163 @@ const DotSpinner: React.FC<SpinProps> = (props) => {
   );
 };
 
+/**
+ * Bounce spinner - three dots that bounce up and down sequentially
+ */
+const BounceSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+  const dotSizeMap = { small: 4, default: 6, large: 10 };
+  const dotSize = dotSizeMap[size];
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-bounce`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <div className={`${prefixCls}-bounce`}>
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className={`${prefixCls}-bounce-dot`}
+            style={{
+              width: dotSize,
+              height: dotSize,
+              animationDelay: `${i * 0.15}s`,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Pulse spinner - a circle that pulses (scales up and fades out) repeatedly
+ */
+const PulseSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-pulse`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <span
+        className={`${prefixCls}-pulse-circle`}
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className={`${prefixCls}-pulse-circle ${prefixCls}-pulse-circle-delay`}
+        style={{ backgroundColor: color }}
+      />
+    </div>
+  );
+};
+
+/**
+ * Wheel spinner - similar to spokes but each line is offset from center,
+ * creating a visible hollow circle in the middle
+ */
+const WheelSpinner: React.FC<SpinProps> = (props) => {
+  const {
+    prefixCls = 'yee-spin',
+    size = 'default',
+    classNames,
+    styles,
+    width,
+    height,
+    color,
+  } = props;
+
+  const containerSize = sizeMap[size];
+  const count = 10;
+  const innerRadius = 0.38; // start at 38% from center (larger hollow area)
+  const spokeLength = containerSize * 0.22;
+
+  return (
+    <div
+      className={clsx(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-wheel`,
+        classNames?.indicator,
+      )}
+      style={{
+        width: width || containerSize,
+        height: height || containerSize,
+        ...styles?.indicator,
+      }}
+    >
+      <div className={`${prefixCls}-wheel-spokes`}>
+        {Array.from({ length: count }, (_, i) => {
+          const angle = (i * 360) / count;
+          const rad = (angle * Math.PI) / 180;
+          // Position each spoke: starts at innerRadius from center
+          const cx = containerSize / 2;
+          const cy = containerSize / 2;
+          const x = cx + innerRadius * containerSize * Math.sin(rad);
+          const y = cy - innerRadius * containerSize * Math.cos(rad);
+
+          return (
+            <div
+              key={i}
+              className={`${prefixCls}-wheel-spoke`}
+              style={{
+                top: y,
+                left: x,
+                height: spokeLength,
+                marginLeft: -1,
+                transform: `rotate(${angle}deg)`,
+                transformOrigin: 'top center',
+                animationDelay: `${(i * 1.2) / count}s`,
+                backgroundColor: color,
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 interface IndicatorProps extends SpinProps {
-  variant?: 'dot' | 'ring' | 'spokes';
+  variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
 }
 
 const Indicator: React.FC<IndicatorProps> = ({ variant = 'dot', ...props }) => {
@@ -199,6 +354,15 @@ const Indicator: React.FC<IndicatorProps> = ({ variant = 'dot', ...props }) => {
   if (variant === 'spokes') {
     return <SpokesSpinner {...props} />;
   }
+  if (variant === 'bounce') {
+    return <BounceSpinner {...props} />;
+  }
+  if (variant === 'pulse') {
+    return <PulseSpinner {...props} />;
+  }
+  if (variant === 'wheel') {
+    return <WheelSpinner {...props} />;
+  }
   return <DotSpinner {...props} />;
 };
 

package/src/Spin/interface.ts

@@ -77,7 +77,7 @@ export type SpinProps = DataAttributeProps & {
   /**
    * Indicator variant
    * */
-  variant?: 'dot' | 'ring' | 'spokes';
+  variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
   /**
    * Loading indicator
    */

package/src/Spin/style/index.less

@@ -69,6 +69,64 @@
         animation: yee-spin-spokes-fade 1.2s linear infinite;
       }
     }
+
+    &-bounce {
+      @{pls}-bounce {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 3px;
+      }
+
+      @{pls}-bounce-dot {
+        display: inline-block;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 50%;
+        animation: yee-spin-bounce 0.6s ease-in-out infinite alternate;
+      }
+    }
+
+    &-pulse {
+      @{pls}-pulse-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: var(--m-indicator-dot-bg-color);
+        opacity: 0.6;
+        animation: yee-spin-pulse 1.5s ease-in-out infinite;
+
+        &-delay {
+          animation-delay: 0.5s;
+        }
+      }
+    }
+
+    &-wheel {
+      @{pls}-wheel-hub {
+        display: none;
+      }
+
+      @{pls}-wheel-spokes {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      @{pls}-wheel-spoke {
+        position: absolute;
+        left: 50%;
+        width: 2px;
+        margin-left: -1px;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 1px;
+        animation: yee-spin-spokes-fade 1.2s linear infinite;
+      }
+    }
   }
 
   &-tip {
@@ -168,3 +226,31 @@
     opacity: 0.15;
   }
 }
+
+@keyframes yee-spin-bounce {
+  0% {
+    transform: translateY(25%);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: translateY(-25%);
+    opacity: 1;
+  }
+}
+
+@keyframes yee-spin-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/src/Table/demo/fixed.tsx

@@ -0,0 +1,92 @@
+import type { ColumnProps } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const columns: ColumnProps[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left',
+    width: 140,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    fixed: 'left',
+    width: 100,
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+    width: 240,
+  },
+  {
+    title: 'Company',
+    dataIndex: 'company',
+    key: 'company',
+    width: 180,
+  },
+  {
+    title: 'Department',
+    dataIndex: 'department',
+    key: 'department',
+    width: 180,
+  },
+  {
+    title: 'Email',
+    dataIndex: 'email',
+    key: 'email',
+    width: 240,
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    fixed: 'right',
+    width: 100,
+    render: (record) => <a onClick={() => console.log(record)}>View</a>,
+  },
+];
+
+const dataSource = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    company: 'Acme Inc.',
+    department: 'Engineering',
+    email: 'john.brown@example.com',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    company: 'Globex',
+    department: 'Marketing',
+    email: 'jim.green@example.com',
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 28,
+    address: 'Sidney No. 1 Lake Park',
+    company: 'Initech',
+    department: 'Product',
+    email: 'joe.black@example.com',
+  },
+];
+
+export default () => (
+  <Table
+    columns={columns}
+    dataSource={dataSource}
+    rowKey="key"
+    pagination={false}
+    scroll={{ x: 1180 }}
+    tableLayout="fixed"
+  />
+);

package/src/Table/hooks/useColumns.ts

@@ -31,6 +31,7 @@ export default function useColumns({
   columns,
   rowSelection,
   expandable,
+  measuredColumnWidths,
 }: {
   children?:
     | React.ReactElement<ColumnProps>
@@ -38,6 +39,7 @@ export default function useColumns({
   columns: ColumnProps[];
   rowSelection?: RowSelectionType;
   expandable?: ExpandableType;
+  measuredColumnWidths?: number[];
 }) {
   const childColumns: Array<ColumnProps> | null = useMemo(() => {
     return children
@@ -53,10 +55,10 @@ export default function useColumns({
       []) as WrapedColumnProps[];
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
-    const wraped = handleColumns(leaves);
+    const wraped = handleColumns(leaves, measuredColumnWidths);
     const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable]);
+  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
 
   return {
     wrapedColumns,

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

@@ -23,6 +23,7 @@ A table displays rows of data.
 <code src="./demo/pagination.tsx" title="Pagination" description="Table with pagination"></code>
 <code src="./demo/column-filter.tsx" title="column filter" description="Table column filter"></code>
 <code src="./demo/grouping.tsx" title="Grouping" description="Multi-level header"></code>
+<code src="./demo/fixed.tsx" title="Fixed Columns" description="Fix columns on both sides and scroll horizontally to see the effect"></code>
 <code src="./demo/components-override.tsx" title="components override" description="tbody / row rendering that can be taken over by external libs (e.g. dnd-kit)"></code>
 ## API
 

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

@@ -24,6 +24,7 @@ toc: 'content'
 <code src="./demo/pagination.tsx" title="分页" description="带分页的表格"></code>
 <code src="./demo/merge-cell.tsx" title="合并单元格" description="合并单元格的表格"></code>
 <code src="./demo/grouping.tsx" title="表头分组" description="多级表头"></code>
+<code src="./demo/fixed.tsx" title="固定列" description="固定表格左右列，横向滚动可查看效果"></code>
 <code src="./demo/summary.tsx" title="统计" description="表格的统计行"></code>
 <code src="./demo/filter.tsx" title="筛选" description="表格的筛选功能"></code>
 <code src="./demo/column-filter.tsx" title="列筛选" description="表格的列筛选功能"></code>