@aloudata/aloudata-design 3.0.23 → 3.0.25

package/dist/Steps/index.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { ELangType, LocaleContext } from "../locale/default.js";
 import { CustomDot } from "./components/CustomDot/index.js";
 import { Step } from "./components/Step/index.js";
 import React from "react";
@@ -9,8 +10,31 @@ function getStepStatus(index, current, globalStatus) {
 	if (index === current) return globalStatus || "process";
 	return "wait";
 }
+var stepsA11yText = {
+	[ELangType.ZH_CN]: {
+		workflowProgress: "工作流进度",
+		status: {
+			finish: "已完成",
+			process: "进行中",
+			wait: "未开始",
+			error: "错误"
+		}
+	},
+	[ELangType.EN]: {
+		workflowProgress: "Workflow progress",
+		status: {
+			finish: "Completed",
+			process: "In progress",
+			wait: "Not started",
+			error: "Error"
+		}
+	}
+};
 function Steps({ className, current: controlledCurrent, direction = "horizontal", defaultCurrent = 0, status, items, children }) {
 	const current = controlledCurrent ?? defaultCurrent;
+	const accessibleIdPrefix = React.useId();
+	const { locale } = React.useContext(LocaleContext);
+	const a11yText = locale === ELangType.EN ? stepsA11yText[ELangType.EN] : stepsA11yText[ELangType.ZH_CN];
 	const resolvedItems = items || React.Children.toArray(children).filter(React.isValidElement).map((child) => ({
 		title: child.props.title,
 		description: child.props.description,
@@ -20,11 +44,21 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 	}));
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex", direction === "vertical" ? "ant-steps-vertical" : "ant-steps-horizontal", direction === "vertical" ? "tw-flex-col" : "tw-flex-row tw-items-start", className),
+		role: "list",
+		"aria-label": a11yText.workflowProgress,
 		children: resolvedItems.map((item, index) => {
 			const stepStatus = item.status || getStepStatus(index, current, status);
 			const isLast = index === resolvedItems.length - 1;
+			const titleId = `${accessibleIdPrefix}-step-${index}-title`;
+			const statusId = `${accessibleIdPrefix}-step-${index}-status`;
 			return /* @__PURE__ */ jsx("div", {
 				className: cn("ald-steps-item ant-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, `ant-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50", item.disabled && "ant-steps-item-disabled"),
+				role: "listitem",
+				"aria-current": index === current ? "step" : void 0,
+				"aria-labelledby": titleId,
+				"aria-describedby": statusId,
+				"aria-posinset": index + 1,
+				"aria-setsize": resolvedItems.length,
 				children: direction === "horizontal" ? /* @__PURE__ */ jsxs("div", {
 					className: "ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -51,13 +85,22 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 						]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
-							children: item.title
-						}), item.description && /* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
-							children: item.description
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								id: titleId,
+								className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
+								children: item.title
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: statusId,
+								className: "tw-sr-only",
+								children: a11yText.status[stepStatus]
+							}),
+							item.description && /* @__PURE__ */ jsx("div", {
+								className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
+								children: item.description
+							})
+						]
 					})]
 				}) : /* @__PURE__ */ jsxs("div", {
 					className: "ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3",
@@ -81,13 +124,22 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ald-steps-item-content ant-steps-item-content",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
-							children: item.title
-						}), item.description && /* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
-							children: item.description
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								id: titleId,
+								className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
+								children: item.title
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: statusId,
+								className: "tw-sr-only",
+								children: a11yText.status[stepStatus]
+							}),
+							item.description && /* @__PURE__ */ jsx("div", {
+								className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
+								children: item.description
+							})
+						]
 					})]
 				})
 			}, index);

package/dist/Steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n        direction === 'vertical'\n          ? 'ant-steps-vertical'\n          : 'ant-steps-horizontal',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item ant-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              `ant-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n              item.disabled && 'ant-steps-item-disabled',\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'ant-steps-item-tail tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n                    <span className=\"ant-steps-icon\">\n                      <span className=\"ant-steps-icon-dot\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        index === 0 && 'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--content-tertiary)]'\n                          : 'tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ) : (\n              <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n                <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-tail ant-steps-item-tail',\n                        index < current\n                          ? 'ald-steps-item-tail-finish'\n                          : 'ald-steps-item-tail-wait',\n                        'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ width: 1.5, bottom: -24 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n                    <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n                      <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ELangType, LocaleContext } from '../locale/default';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\n/* eslint-disable i18n/no-chinese-character -- Steps accessibility copy stays local to this bounded component migration. */\nconst stepsA11yText = {\n  [ELangType.ZH_CN]: {\n    workflowProgress: '工作流进度',\n    status: {\n      finish: '已完成',\n      process: '进行中',\n      wait: '未开始',\n      error: '错误',\n    },\n  },\n  [ELangType.EN]: {\n    workflowProgress: 'Workflow progress',\n    status: {\n      finish: 'Completed',\n      process: 'In progress',\n      wait: 'Not started',\n      error: 'Error',\n    },\n  },\n};\n/* eslint-enable i18n/no-chinese-character */\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  const accessibleIdPrefix = React.useId();\n  const { locale } = React.useContext(LocaleContext);\n  const a11yText =\n    locale === ELangType.EN\n      ? stepsA11yText[ELangType.EN]\n      : stepsA11yText[ELangType.ZH_CN];\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n        direction === 'vertical'\n          ? 'ant-steps-vertical'\n          : 'ant-steps-horizontal',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n      role=\"list\"\n      aria-label={a11yText.workflowProgress}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n        const titleId = `${accessibleIdPrefix}-step-${index}-title`;\n        const statusId = `${accessibleIdPrefix}-step-${index}-status`;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item ant-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              `ant-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n              item.disabled && 'ant-steps-item-disabled',\n            )}\n            role=\"listitem\"\n            aria-current={index === current ? 'step' : undefined}\n            aria-labelledby={titleId}\n            aria-describedby={statusId}\n            aria-posinset={index + 1}\n            aria-setsize={resolvedItems.length}\n          >\n            {direction === 'horizontal' ? (\n              <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'ant-steps-item-tail tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n                    <span className=\"ant-steps-icon\">\n                      <span className=\"ant-steps-icon-dot\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        index === 0 && 'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    id={titleId}\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  <span id={statusId} className=\"tw-sr-only\">\n                    {a11yText.status[stepStatus]}\n                  </span>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--content-tertiary)]'\n                          : 'tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ) : (\n              <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n                <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-tail ant-steps-item-tail',\n                        index < current\n                          ? 'ald-steps-item-tail-finish'\n                          : 'ald-steps-item-tail-wait',\n                        'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ width: 1.5, bottom: -24 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n                    <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n                      <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    id={titleId}\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  <span id={statusId} className=\"tw-sr-only\">\n                    {a11yText.status[stepStatus]}\n                  </span>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}

package/dist/Switch/index.js

@@ -49,10 +49,17 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 			type: "button",
 			role: "switch",
 			"aria-checked": !!userChecked,
+			"aria-busy": loading || void 0,
 			"data-testid": dataTestid,
 			"aria-label": ariaLabel,
 			disabled: currentDisabled,
-			className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]" : "tw-bg-[var(--action-neutral-subtle-normal)] hover:tw-bg-[var(--action-neutral-subtle-hover)]", currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
+			className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--control-state-selected)]" : "tw-bg-[var(--control-state-unselected)]", !currentDisabled && [
+				"focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
+				"forced-colors:focus-visible:tw-outline",
+				"forced-colors:focus-visible:tw-outline-2",
+				"forced-colors:focus-visible:tw-outline-offset-2",
+				"forced-colors:focus-visible:tw-outline-[Highlight]"
+			], currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
 			style: {
 				width: trackW,
 				height: trackH

package/dist/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n  checked: boolean,\n  event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n  className?: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  size?: SwitchSize;\n  onClick?: SwitchChangeEventHandler;\n  onChange?: SwitchChangeEventHandler;\n  children?: React.ReactNode;\n  /** 透传到内部 switch 按钮元素的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到内部 switch 按钮元素的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n  SwitchSize,\n  {\n    trackW: number;\n    trackH: number;\n    thumbSize: number;\n  }\n> = {\n  large: {\n    trackW: 36,\n    trackH: 20,\n    thumbSize: 16,\n  },\n  middle: {\n    trackW: 28,\n    trackH: 16,\n    thumbSize: 12,\n  },\n  small: {\n    trackW: 22,\n    trackH: 12,\n    thumbSize: 8,\n  },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n  className = '',\n  disabled: customDisabled,\n  loading = false,\n  size: customSize,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  children,\n  'data-testid': dataTestid,\n  'aria-label': ariaLabel,\n}) => {\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n\n  const [userChecked, setUserChecked] = useState(\n    typeof checked === 'undefined' ? defaultChecked : checked,\n  );\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const currentDisabled = loading ? true : mergedDisabled;\n\n  useEffect(() => {\n    if (typeof checked === 'boolean') {\n      setUserChecked(checked);\n    }\n  }, [checked]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (currentDisabled) return;\n    const newChecked = !userChecked;\n    if (checked === undefined) {\n      setUserChecked(newChecked);\n    }\n    onChange?.(newChecked, e);\n    onClick?.(newChecked, e);\n  };\n\n  const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n  const thumbOffset = 2;\n  const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n  return (\n    <span\n      className={cn(\n        className,\n        'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n        `ald-switch-${size}`,\n        currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n        {\n          'ald-switch-disabled': currentDisabled,\n          'ald-switch-checked': userChecked,\n        },\n      )}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={!!userChecked}\n        data-testid={dataTestid}\n        aria-label={ariaLabel}\n        disabled={currentDisabled}\n        className={cn(\n          'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n          userChecked\n            ? 'tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]'\n            : 'tw-bg-[var(--action-neutral-subtle-normal)] hover:tw-bg-[var(--action-neutral-subtle-hover)]',\n          currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n        )}\n        style={{ width: trackW, height: trackH }}\n        onClick={handleClick}\n      >\n        <span\n          className={cn(\n            'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n          )}\n          style={{\n            width: thumbSize,\n            height: thumbSize,\n            marginLeft: thumbOffset,\n            transform: userChecked\n              ? `translateX(${thumbTranslate}px)`\n              : 'translateX(0)',\n          }}\n        />\n      </button>\n      {children && (\n        <span\n          className={cn(\n            'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n            size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n            size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n            size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n            currentDisabled && 'tw-opacity-50',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,mFACA,gGACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n  checked: boolean,\n  event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n  className?: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  size?: SwitchSize;\n  onClick?: SwitchChangeEventHandler;\n  onChange?: SwitchChangeEventHandler;\n  children?: React.ReactNode;\n  /** 透传到内部 switch 按钮元素的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到内部 switch 按钮元素的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n  SwitchSize,\n  {\n    trackW: number;\n    trackH: number;\n    thumbSize: number;\n  }\n> = {\n  large: {\n    trackW: 36,\n    trackH: 20,\n    thumbSize: 16,\n  },\n  middle: {\n    trackW: 28,\n    trackH: 16,\n    thumbSize: 12,\n  },\n  small: {\n    trackW: 22,\n    trackH: 12,\n    thumbSize: 8,\n  },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n  className = '',\n  disabled: customDisabled,\n  loading = false,\n  size: customSize,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  children,\n  'data-testid': dataTestid,\n  'aria-label': ariaLabel,\n}) => {\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n\n  const [userChecked, setUserChecked] = useState(\n    typeof checked === 'undefined' ? defaultChecked : checked,\n  );\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const currentDisabled = loading ? true : mergedDisabled;\n\n  useEffect(() => {\n    if (typeof checked === 'boolean') {\n      setUserChecked(checked);\n    }\n  }, [checked]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (currentDisabled) return;\n    const newChecked = !userChecked;\n    if (checked === undefined) {\n      setUserChecked(newChecked);\n    }\n    onChange?.(newChecked, e);\n    onClick?.(newChecked, e);\n  };\n\n  const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n  const thumbOffset = 2;\n  const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n  return (\n    <span\n      className={cn(\n        className,\n        'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n        `ald-switch-${size}`,\n        currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n        {\n          'ald-switch-disabled': currentDisabled,\n          'ald-switch-checked': userChecked,\n        },\n      )}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={!!userChecked}\n        aria-busy={loading || undefined}\n        data-testid={dataTestid}\n        aria-label={ariaLabel}\n        disabled={currentDisabled}\n        className={cn(\n          'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n          userChecked\n            ? 'tw-bg-[var(--control-state-selected)]'\n            : 'tw-bg-[var(--control-state-unselected)]',\n          // Focus is an independent layer on the interactive button. The\n          // selected/unselected Control State Color contract remains intact.\n          !currentDisabled && [\n            'focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]',\n            'forced-colors:focus-visible:tw-outline',\n            'forced-colors:focus-visible:tw-outline-2',\n            'forced-colors:focus-visible:tw-outline-offset-2',\n            'forced-colors:focus-visible:tw-outline-[Highlight]',\n          ],\n          currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n        )}\n        style={{ width: trackW, height: trackH }}\n        onClick={handleClick}\n      >\n        <span\n          className={cn(\n            'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n          )}\n          style={{\n            width: thumbSize,\n            height: thumbSize,\n            marginLeft: thumbOffset,\n            transform: userChecked\n              ? `translateX(${thumbTranslate}px)`\n              : 'translateX(0)',\n          }}\n        />\n      </button>\n      {children && (\n        <span\n          className={cn(\n            'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n            size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n            size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n            size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n            currentDisabled && 'tw-opacity-50',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,aAAW,WAAW;GACtB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,0CACA,2CAGJ,CAAC,mBAAmB;IAClB;IACA;IACA;IACA;IACA;IACD,EACD,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}

package/dist/Table/components/Cell.js

@@ -10,13 +10,18 @@ function Cell(props) {
 	const { render, dataIndex, align, ellipsis } = column.columnDef.meta;
 	const colValue = _.get(row.original, dataIndex || "");
 	const node = render ? render(colValue, row.original, row.index) : colValue;
+	const isDefaultTextValue = typeof render !== "function" && (typeof colValue === "string" || typeof colValue === "number");
+	const content = isDefaultTextValue ? /* @__PURE__ */ jsx("span", {
+		className: "tw-text-typography-body-dense",
+		children: node
+	}) : node;
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(prefixCls("td-default"), prefixCls(`align-${align}`)),
+		className: cn(prefixCls("td-default"), prefixCls(`align-${align}`), { [prefixCls("td-legacy-content")]: !isDefaultTextValue }),
 		children: ellipsis ? /* @__PURE__ */ jsx("div", {
 			className: prefixCls("td-ellipsis-content"),
 			title: typeof node === "string" ? node : void 0,
-			children: node
-		}) : node
+			children: content
+		}) : content
 	});
 }
 function CellWithErrorBoundary(props) {

package/dist/Table/components/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n  const { column, row } = props;\n  const meta = column.columnDef.meta as ITableColumn<unknown>;\n  const { render, dataIndex, align, ellipsis } = meta;\n\n  const colValue = _.get(row.original, dataIndex || '');\n  const node = render ? render(colValue, row.original, row.index) : colValue;\n\n  return (\n    <div className={cn(prefixCls('td-default'), prefixCls(`align-${align}`))}>\n      {ellipsis ? (\n        <div\n          className={prefixCls('td-ellipsis-content')}\n          title={typeof node === 'string' ? node : undefined}\n        >\n          {node}\n        </div>\n      ) : (\n        node\n      )}\n    </div>\n  );\n}\n\nexport default function CellWithErrorBoundary<T>(props: IProps<T>) {\n  const { column } = props;\n  const meta = column.columnDef.meta as ITableColumn<unknown> & {\n    onError: ITableProps<object>['onError'];\n  };\n  const { dataIndex, onError } = meta;\n  const reportError = useCallback(\n    (err: Error, stack: string) => {\n      if (onError) {\n        onError({\n          error: err,\n          stack,\n          extra: {\n            place: 'bodyCell',\n            dataIndex,\n          },\n        });\n      }\n    },\n    [onError, dataIndex],\n  );\n\n  return (\n    <ErrorBoundary onError={reportError}>\n      <Cell {...props} />\n    </ErrorBoundary>\n  );\n}\n\nexport interface IProps<T> {\n  row: Row<T>;\n  column: Column<T>;\n}\n"],"mappings":";;;;;;;AAQA,SAAS,KAAQ,OAAkB;CACjC,MAAM,EAAE,QAAQ,QAAQ;CAExB,MAAM,EAAE,QAAQ,WAAW,OAAO,aADrB,OAAO,UAAU;CAG9B,MAAM,WAAW,EAAE,IAAI,IAAI,UAAU,aAAa,GAAG;CACrD,MAAM,OAAO,SAAS,OAAO,UAAU,IAAI,UAAU,IAAI,MAAM,GAAG;AAElE,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,CAAC;YACrE,WACC,oBAAC,OAAD;GACE,WAAW,UAAU,sBAAsB;GAC3C,OAAO,OAAO,SAAS,WAAW,OAAO;aAExC;GACG,CAAA,GAEN;EAEE,CAAA;;AAIV,SAAwB,sBAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CAInB,MAAM,EAAE,WAAW,YAHN,OAAO,UAAU;AAoB9B,QACE,oBAAC,eAAD;EAAe,SAjBG,aACjB,KAAY,UAAkB;AAC7B,OAAI,QACF,SAAQ;IACN,OAAO;IACP;IACA,OAAO;KACL,OAAO;KACP;KACD;IACF,CAAC;KAGN,CAAC,SAAS,UAAU,CACrB;YAIG,oBAAC,MAAD,EAAM,GAAI,OAAS,CAAA;EACL,CAAA"}
+{"version":3,"file":"Cell.js","names":[],"sources":["../../../src/Table/components/Cell.tsx"],"sourcesContent":["import { Column, Row } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { useCallback } from 'react';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\nimport ErrorBoundary from './ErrorBoundary';\n\nfunction Cell<T>(props: IProps<T>) {\n  const { column, row } = props;\n  const meta = column.columnDef.meta as ITableColumn<unknown>;\n  const { render, dataIndex, align, ellipsis } = meta;\n\n  const colValue = _.get(row.original, dataIndex || '');\n  const node = render ? render(colValue, row.original, row.index) : colValue;\n  const isDefaultTextValue =\n    typeof render !== 'function' &&\n    (typeof colValue === 'string' || typeof colValue === 'number');\n  const content = isDefaultTextValue ? (\n    <span className=\"tw-text-typography-body-dense\">{node}</span>\n  ) : (\n    node\n  );\n\n  return (\n    <div\n      className={cn(prefixCls('td-default'), prefixCls(`align-${align}`), {\n        [prefixCls('td-legacy-content')]: !isDefaultTextValue,\n      })}\n    >\n      {ellipsis ? (\n        <div\n          className={prefixCls('td-ellipsis-content')}\n          title={typeof node === 'string' ? node : undefined}\n        >\n          {content}\n        </div>\n      ) : (\n        content\n      )}\n    </div>\n  );\n}\n\nexport default function CellWithErrorBoundary<T>(props: IProps<T>) {\n  const { column } = props;\n  const meta = column.columnDef.meta as ITableColumn<unknown> & {\n    onError: ITableProps<object>['onError'];\n  };\n  const { dataIndex, onError } = meta;\n  const reportError = useCallback(\n    (err: Error, stack: string) => {\n      if (onError) {\n        onError({\n          error: err,\n          stack,\n          extra: {\n            place: 'bodyCell',\n            dataIndex,\n          },\n        });\n      }\n    },\n    [onError, dataIndex],\n  );\n\n  return (\n    <ErrorBoundary onError={reportError}>\n      <Cell {...props} />\n    </ErrorBoundary>\n  );\n}\n\nexport interface IProps<T> {\n  row: Row<T>;\n  column: Column<T>;\n}\n"],"mappings":";;;;;;;AAQA,SAAS,KAAQ,OAAkB;CACjC,MAAM,EAAE,QAAQ,QAAQ;CAExB,MAAM,EAAE,QAAQ,WAAW,OAAO,aADrB,OAAO,UAAU;CAG9B,MAAM,WAAW,EAAE,IAAI,IAAI,UAAU,aAAa,GAAG;CACrD,MAAM,OAAO,SAAS,OAAO,UAAU,IAAI,UAAU,IAAI,MAAM,GAAG;CAClE,MAAM,qBACJ,OAAO,WAAW,eACjB,OAAO,aAAa,YAAY,OAAO,aAAa;CACvD,MAAM,UAAU,qBACd,oBAAC,QAAD;EAAM,WAAU;YAAiC;EAAY,CAAA,GAE7D;AAGF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE,GACjE,UAAU,oBAAoB,GAAG,CAAC,oBACpC,CAAC;YAED,WACC,oBAAC,OAAD;GACE,WAAW,UAAU,sBAAsB;GAC3C,OAAO,OAAO,SAAS,WAAW,OAAO;aAExC;GACG,CAAA,GAEN;EAEE,CAAA;;AAIV,SAAwB,sBAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CAInB,MAAM,EAAE,WAAW,YAHN,OAAO,UAAU;AAoB9B,QACE,oBAAC,eAAD;EAAe,SAjBG,aACjB,KAAY,UAAkB;AAC7B,OAAI,QACF,SAAQ;IACN,OAAO;IACP;IACA,OAAO;KACL,OAAO;KACP;KACD;IACF,CAAC;KAGN,CAAC,SAAS,UAAU,CACrB;YAIG,oBAAC,MAAD,EAAM,GAAI,OAAS,CAAA;EACL,CAAA"}

package/dist/Table/components/ExpandCell.js

@@ -20,9 +20,13 @@ function ExpandCell(props) {
 	const expandable = getExpandableConfig(propsExpandable);
 	const defaultExpandIconRender = (params) => {
 		const { record, onExpand, isExpanded: isExpandedIcon } = params;
-		return /* @__PURE__ */ jsx("span", {
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			className: prefixCls("expand-btn-inner"),
-			onClick: () => {
+			"aria-label": `${isExpandedIcon ? "Collapse" : "Expand"} row ${key}`,
+			"aria-expanded": isExpandedIcon,
+			onClick: (event) => {
+				event.stopPropagation();
 				if (isLeaf) return;
 				onExpand(record, !isExpanded);
 			},

package/dist/Table/components/ExpandCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCell.js","names":[],"sources":["../../../src/Table/components/ExpandCell.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { ArrowDownLightLine, ArrowRightLightLine } from '../../Icon';\nimport { getRowKey, prefixCls } from '../helper';\nimport { IExpandableInfo, getExpandableConfig } from '../hooks/useExpandable';\nimport { IExpandIconProps, ITableExpandable, TRowKey } from '../types';\n\nexport default function ExpandCell<TDataItem extends object>(\n  props: IProps<TDataItem>,\n) {\n  const {\n    children,\n    expandableInfo,\n    data,\n    rowKey,\n    expandable: propsExpandable,\n  } = props;\n  if (!expandableInfo.isExpandable || !rowKey) {\n    // 配置了折叠展开时，会在前面的流程中强制检查 rowKey 字段是否存在\n    return <>{children}</>;\n  }\n  const { expandItemMap, onExpand } = expandableInfo;\n  const key = getRowKey(data, rowKey);\n  const expandItem = expandItemMap[key];\n\n  if (!expandItem) {\n    console.error('expandItem in not found', key, expandItemMap);\n    return <>{children}</>;\n  }\n  const { level, isExpanded, isLeaf } = expandItem;\n\n  const expandable = getExpandableConfig(propsExpandable);\n  const defaultExpandIconRender = (params: IExpandIconProps<TDataItem>) => {\n    const { record, onExpand, isExpanded: isExpandedIcon } = params;\n    return (\n      <span\n        className={prefixCls('expand-btn-inner')}\n        onClick={() => {\n          if (isLeaf) {\n            return;\n          }\n          onExpand(record, !isExpanded);\n        }}\n      >\n        {isExpandedIcon ? <ArrowDownLightLine /> : <ArrowRightLightLine />}\n      </span>\n    );\n  };\n  const expandIcon = expandable.expandIcon || defaultExpandIconRender;\n\n  const iconNode = isLeaf\n    ? null\n    : expandIcon({\n        record: data,\n        onExpand,\n        isExpanded: !!isExpanded,\n      });\n\n  return (\n    <div className={prefixCls('expandable-td')}>\n      <div className={prefixCls('indent-list')}>\n        {_.map(_.range(level), (i) => {\n          return <div className={prefixCls('indent-item')} key={i} />;\n        })}\n      </div>\n      <div className={prefixCls('expand-btn')}>{iconNode}</div>\n      <div className={prefixCls('expand-content')}>{children}</div>\n    </div>\n  );\n}\n\ninterface IProps<TDataItem extends object> {\n  expandableInfo: IExpandableInfo<TDataItem>;\n  data: TDataItem;\n  children: React.ReactNode;\n  rowKey?: TRowKey<TDataItem>;\n  expandable?: ITableExpandable<TDataItem> | boolean;\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,WACtB,OACA;CACA,MAAM,EACJ,UACA,gBACA,MACA,QACA,YAAY,oBACV;AACJ,KAAI,CAAC,eAAe,gBAAgB,CAAC,OAEnC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAExB,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,MAAM,UAAU,MAAM,OAAO;CACnC,MAAM,aAAa,cAAc;AAEjC,KAAI,CAAC,YAAY;AACf,UAAQ,MAAM,2BAA2B,KAAK,cAAc;AAC5D,SAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;CAExB,MAAM,EAAE,OAAO,YAAY,WAAW;CAEtC,MAAM,aAAa,oBAAoB,gBAAgB;CACvD,MAAM,2BAA2B,WAAwC;EACvE,MAAM,EAAE,QAAQ,UAAU,YAAY,mBAAmB;AACzD,SACE,oBAAC,QAAD;GACE,WAAW,UAAU,mBAAmB;GACxC,eAAe;AACb,QAAI,OACF;AAEF,aAAS,QAAQ,CAAC,WAAW;;aAG9B,iBAAiB,oBAAC,MAAD,EAAsB,CAAA,GAAG,oBAAC,QAAD,EAAuB,CAAA;GAC7D,CAAA;;CAGX,MAAM,aAAa,WAAW,cAAc;CAE5C,MAAM,WAAW,SACb,OACA,WAAW;EACT,QAAQ;EACR;EACA,YAAY,CAAC,CAAC;EACf,CAAC;AAEN,QACE,qBAAC,OAAD;EAAK,WAAW,UAAU,gBAAgB;YAA1C;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,cAAc;cACrC,EAAE,IAAI,EAAE,MAAM,MAAM,GAAG,MAAM;AAC5B,YAAO,oBAAC,OAAD,EAAK,WAAW,UAAU,cAAc,EAAY,EAAL,EAAK;MAC3D;IACE,CAAA;GACN,oBAAC,OAAD;IAAK,WAAW,UAAU,aAAa;cAAG;IAAe,CAAA;GACzD,oBAAC,OAAD;IAAK,WAAW,UAAU,iBAAiB;IAAG;IAAe,CAAA;GACzD"}
+{"version":3,"file":"ExpandCell.js","names":[],"sources":["../../../src/Table/components/ExpandCell.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React from 'react';\nimport { ArrowDownLightLine, ArrowRightLightLine } from '../../Icon';\nimport { getRowKey, prefixCls } from '../helper';\nimport { IExpandableInfo, getExpandableConfig } from '../hooks/useExpandable';\nimport { IExpandIconProps, ITableExpandable, TRowKey } from '../types';\n\nexport default function ExpandCell<TDataItem extends object>(\n  props: IProps<TDataItem>,\n) {\n  const {\n    children,\n    expandableInfo,\n    data,\n    rowKey,\n    expandable: propsExpandable,\n  } = props;\n  if (!expandableInfo.isExpandable || !rowKey) {\n    // 配置了折叠展开时，会在前面的流程中强制检查 rowKey 字段是否存在\n    return <>{children}</>;\n  }\n  const { expandItemMap, onExpand } = expandableInfo;\n  const key = getRowKey(data, rowKey);\n  const expandItem = expandItemMap[key];\n\n  if (!expandItem) {\n    console.error('expandItem in not found', key, expandItemMap);\n    return <>{children}</>;\n  }\n  const { level, isExpanded, isLeaf } = expandItem;\n\n  const expandable = getExpandableConfig(propsExpandable);\n  const defaultExpandIconRender = (params: IExpandIconProps<TDataItem>) => {\n    const { record, onExpand, isExpanded: isExpandedIcon } = params;\n    return (\n      <button\n        type=\"button\"\n        className={prefixCls('expand-btn-inner')}\n        aria-label={`${isExpandedIcon ? 'Collapse' : 'Expand'} row ${key}`}\n        aria-expanded={isExpandedIcon}\n        onClick={(event) => {\n          event.stopPropagation();\n          if (isLeaf) {\n            return;\n          }\n          onExpand(record, !isExpanded);\n        }}\n      >\n        {isExpandedIcon ? <ArrowDownLightLine /> : <ArrowRightLightLine />}\n      </button>\n    );\n  };\n  const expandIcon = expandable.expandIcon || defaultExpandIconRender;\n\n  const iconNode = isLeaf\n    ? null\n    : expandIcon({\n        record: data,\n        onExpand,\n        isExpanded: !!isExpanded,\n      });\n\n  return (\n    <div className={prefixCls('expandable-td')}>\n      <div className={prefixCls('indent-list')}>\n        {_.map(_.range(level), (i) => {\n          return <div className={prefixCls('indent-item')} key={i} />;\n        })}\n      </div>\n      <div className={prefixCls('expand-btn')}>{iconNode}</div>\n      <div className={prefixCls('expand-content')}>{children}</div>\n    </div>\n  );\n}\n\ninterface IProps<TDataItem extends object> {\n  expandableInfo: IExpandableInfo<TDataItem>;\n  data: TDataItem;\n  children: React.ReactNode;\n  rowKey?: TRowKey<TDataItem>;\n  expandable?: ITableExpandable<TDataItem> | boolean;\n}\n"],"mappings":";;;;;;;;AAOA,SAAwB,WACtB,OACA;CACA,MAAM,EACJ,UACA,gBACA,MACA,QACA,YAAY,oBACV;AACJ,KAAI,CAAC,eAAe,gBAAgB,CAAC,OAEnC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAExB,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,MAAM,UAAU,MAAM,OAAO;CACnC,MAAM,aAAa,cAAc;AAEjC,KAAI,CAAC,YAAY;AACf,UAAQ,MAAM,2BAA2B,KAAK,cAAc;AAC5D,SAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;;CAExB,MAAM,EAAE,OAAO,YAAY,WAAW;CAEtC,MAAM,aAAa,oBAAoB,gBAAgB;CACvD,MAAM,2BAA2B,WAAwC;EACvE,MAAM,EAAE,QAAQ,UAAU,YAAY,mBAAmB;AACzD,SACE,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,UAAU,mBAAmB;GACxC,cAAY,GAAG,iBAAiB,aAAa,SAAS,OAAO;GAC7D,iBAAe;GACf,UAAU,UAAU;AAClB,UAAM,iBAAiB;AACvB,QAAI,OACF;AAEF,aAAS,QAAQ,CAAC,WAAW;;aAG9B,iBAAiB,oBAAC,MAAD,EAAsB,CAAA,GAAG,oBAAC,QAAD,EAAuB,CAAA;GAC3D,CAAA;;CAGb,MAAM,aAAa,WAAW,cAAc;CAE5C,MAAM,WAAW,SACb,OACA,WAAW;EACT,QAAQ;EACR;EACA,YAAY,CAAC,CAAC;EACf,CAAC;AAEN,QACE,qBAAC,OAAD;EAAK,WAAW,UAAU,gBAAgB;YAA1C;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,cAAc;cACrC,EAAE,IAAI,EAAE,MAAM,MAAM,GAAG,MAAM;AAC5B,YAAO,oBAAC,OAAD,EAAK,WAAW,UAAU,cAAc,EAAY,EAAL,EAAK;MAC3D;IACE,CAAA;GACN,oBAAC,OAAD;IAAK,WAAW,UAAU,aAAa;cAAG;IAAe,CAAA;GACzD,oBAAC,OAAD;IAAK,WAAW,UAAU,iBAAiB;IAAG;IAAe,CAAA;GACzD"}

package/dist/Table/components/Footer/index.js

@@ -1,3 +1,4 @@
+import { cn } from "../../../lib/utils.js";
 import { LocaleContext, getTranslator } from "../../../locale/default.js";
 import TextLink from "../../../TextLink/index.js";
 import Pagination from "../../../Pagination/index.js";
@@ -23,7 +24,7 @@ function TableFooter(props) {
 				children: getCheckboxAllNode?.(t.Table.selectAll)
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: prefixCls("footer-row-selection-selected"),
+				className: cn(prefixCls("footer-row-selection-selected"), "tw-text-typography-body-dense"),
 				children: [
 					t.Table.selected,
 					/* @__PURE__ */ jsx(TextLink, {

package/dist/Table/components/Footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n  props: IProps<TDataItem>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    pagination,\n    scroll = {},\n    scrollToFirstRow,\n    isShowPagination,\n    rowSelectionInfo,\n  } = props;\n\n  // 选择行\n  const {\n    getCheckboxAllNode,\n    selectedRowKeys,\n    selectedRowKeysInCurrPage,\n    items,\n    isShowRowSelectionInFooter,\n    onChange: changeSelectedRowKeys,\n  } = rowSelectionInfo;\n\n  const btnItems = [\n    {\n      key: '$UN_SELECT_ALL$',\n      label: t.Table.cancelSelect,\n      onClick: () => rowSelectionInfo.unSelectAll(),\n    },\n    ...items,\n  ];\n\n  const rowSelectionNode = isShowRowSelectionInFooter && (\n    <div className={prefixCls('footer-row-selection')}>\n      <div className={prefixCls('footer-row-selection-btn')}>\n        {getCheckboxAllNode?.(t.Table.selectAll)}\n      </div>\n      <div className={prefixCls('footer-row-selection-selected')}>\n        {t.Table.selected}\n        <TextLink className={prefixCls('footer-row-selection-selected-num')}>\n          {selectedRowKeys.length}\n        </TextLink>\n        {t.Table.item}\n      </div>\n      {btnItems.map((btnItem) => {\n        return (\n          <div\n            key={btnItem.key}\n            className={prefixCls('footer-row-selection-item')}\n            onClick={(e) => {\n              btnItem.onClick(e);\n            }}\n          >\n            <TextLink>{btnItem.label}</TextLink>\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  // 翻页器\n  const onChangePage = useCallback(\n    (page: number) => {\n      const { onChange = () => {} } = pagination || {};\n      const { scrollToFirstRowOnChange = true } = scroll;\n      if (scrollToFirstRowOnChange) {\n        scrollToFirstRow();\n      }\n      onChange(page);\n      // 翻页后，清空已选行\n      changeSelectedRowKeys([]);\n    },\n    [scrollToFirstRow, scroll, pagination, changeSelectedRowKeys],\n  );\n\n  const pager = isShowPagination && pagination && (\n    <div className={prefixCls('pager')}>\n      <Pagination hideOnSinglePage {...pagination} onChange={onChangePage} />\n    </div>\n  );\n\n  const isShowRowSelection =\n    rowSelectionInfo.isRowSelectionEnabled &&\n    selectedRowKeysInCurrPage.length > 0;\n\n  const isShowFooter = isShowPagination || isShowRowSelection;\n\n  return isShowFooter ? (\n    <div className={prefixCls('footer')}>\n      {rowSelectionNode}\n      {pager}\n    </div>\n  ) : null;\n}\n\ninterface IProps<TDataItem extends object> {\n  isShowPagination: boolean;\n  rowSelectionInfo: IRowSelectionInfo<TDataItem>;\n  pagination?: IPaginationProps;\n  scroll?: ITableProps<TDataItem>['scroll'];\n  scrollToFirstRow: () => void;\n}\n"],"mappings":";;;;;;;AASA,SAAwB,YACtB,OACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,YACA,SAAS,EAAE,EACX,kBACA,kBACA,qBACE;CAGJ,MAAM,EACJ,oBACA,iBACA,2BACA,OACA,4BACA,UAAU,0BACR;CAEJ,MAAM,WAAW,CACf;EACE,KAAK;EACL,OAAO,EAAE,MAAM;EACf,eAAe,iBAAiB,aAAa;EAC9C,EACD,GAAG,MACJ;CAED,MAAM,mBAAmB,8BACvB,qBAAC,OAAD;EAAK,WAAW,UAAU,uBAAuB;YAAjD;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,2BAA2B;cAClD,qBAAqB,EAAE,MAAM,UAAU;IACpC,CAAA;GACN,qBAAC,OAAD;IAAK,WAAW,UAAU,gCAAgC;cAA1D;KACG,EAAE,MAAM;KACT,oBAAC,UAAD;MAAU,WAAW,UAAU,oCAAoC;gBAChE,gBAAgB;MACR,CAAA;KACV,EAAE,MAAM;KACL;;GACL,SAAS,KAAK,YAAY;AACzB,WACE,oBAAC,OAAD;KAEE,WAAW,UAAU,4BAA4B;KACjD,UAAU,MAAM;AACd,cAAQ,QAAQ,EAAE;;eAGpB,oBAAC,UAAD,EAAA,UAAW,QAAQ,OAAiB,CAAA;KAChC,EAPC,QAAQ,IAOT;KAER;GACE;;CAIR,MAAM,eAAe,aAClB,SAAiB;EAChB,MAAM,EAAE,iBAAiB,OAAO,cAAc,EAAE;EAChD,MAAM,EAAE,2BAA2B,SAAS;AAC5C,MAAI,yBACF,mBAAkB;AAEpB,WAAS,KAAK;AAEd,wBAAsB,EAAE,CAAC;IAE3B;EAAC;EAAkB;EAAQ;EAAY;EAAsB,CAC9D;CAED,MAAM,QAAQ,oBAAoB,cAChC,oBAAC,OAAD;EAAK,WAAW,UAAU,QAAQ;YAChC,oBAAC,YAAD;GAAY,kBAAA;GAAiB,GAAI;GAAY,UAAU;GAAgB,CAAA;EACnE,CAAA;CAGR,MAAM,qBACJ,iBAAiB,yBACjB,0BAA0B,SAAS;AAIrC,QAFqB,oBAAoB,qBAGvC,qBAAC,OAAD;EAAK,WAAW,UAAU,SAAS;YAAnC,CACG,kBACA,MACG;MACJ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Table/components/Footer/index.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Pagination } from '../../..';\nimport { IPaginationProps } from '../../../Pagination/types';\nimport TextLink from '../../../TextLink';\nimport { cn } from '../../../lib/utils';\nimport { LocaleContext, getTranslator } from '../../../locale/default';\nimport { prefixCls } from '../../helper';\nimport { IRowSelectionInfo } from '../../hooks/useRowSelection';\nimport { ITableProps } from '../../types';\n\nexport default function TableFooter<TDataItem extends object>(\n  props: IProps<TDataItem>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    pagination,\n    scroll = {},\n    scrollToFirstRow,\n    isShowPagination,\n    rowSelectionInfo,\n  } = props;\n\n  // 选择行\n  const {\n    getCheckboxAllNode,\n    selectedRowKeys,\n    selectedRowKeysInCurrPage,\n    items,\n    isShowRowSelectionInFooter,\n    onChange: changeSelectedRowKeys,\n  } = rowSelectionInfo;\n\n  const btnItems = [\n    {\n      key: '$UN_SELECT_ALL$',\n      label: t.Table.cancelSelect,\n      onClick: () => rowSelectionInfo.unSelectAll(),\n    },\n    ...items,\n  ];\n\n  const rowSelectionNode = isShowRowSelectionInFooter && (\n    <div className={prefixCls('footer-row-selection')}>\n      <div className={prefixCls('footer-row-selection-btn')}>\n        {getCheckboxAllNode?.(t.Table.selectAll)}\n      </div>\n      <div\n        className={cn(\n          prefixCls('footer-row-selection-selected'),\n          'tw-text-typography-body-dense',\n        )}\n      >\n        {t.Table.selected}\n        <TextLink className={prefixCls('footer-row-selection-selected-num')}>\n          {selectedRowKeys.length}\n        </TextLink>\n        {t.Table.item}\n      </div>\n      {btnItems.map((btnItem) => {\n        return (\n          <div\n            key={btnItem.key}\n            className={prefixCls('footer-row-selection-item')}\n            onClick={(e) => {\n              btnItem.onClick(e);\n            }}\n          >\n            <TextLink>{btnItem.label}</TextLink>\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  // 翻页器\n  const onChangePage = useCallback(\n    (page: number) => {\n      const { onChange = () => {} } = pagination || {};\n      const { scrollToFirstRowOnChange = true } = scroll;\n      if (scrollToFirstRowOnChange) {\n        scrollToFirstRow();\n      }\n      onChange(page);\n      // 翻页后，清空已选行\n      changeSelectedRowKeys([]);\n    },\n    [scrollToFirstRow, scroll, pagination, changeSelectedRowKeys],\n  );\n\n  const pager = isShowPagination && pagination && (\n    <div className={prefixCls('pager')}>\n      <Pagination hideOnSinglePage {...pagination} onChange={onChangePage} />\n    </div>\n  );\n\n  const isShowRowSelection =\n    rowSelectionInfo.isRowSelectionEnabled &&\n    selectedRowKeysInCurrPage.length > 0;\n\n  const isShowFooter = isShowPagination || isShowRowSelection;\n\n  return isShowFooter ? (\n    <div className={prefixCls('footer')}>\n      {rowSelectionNode}\n      {pager}\n    </div>\n  ) : null;\n}\n\ninterface IProps<TDataItem extends object> {\n  isShowPagination: boolean;\n  rowSelectionInfo: IRowSelectionInfo<TDataItem>;\n  pagination?: IPaginationProps;\n  scroll?: ITableProps<TDataItem>['scroll'];\n  scrollToFirstRow: () => void;\n}\n"],"mappings":";;;;;;;;AAUA,SAAwB,YACtB,OACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,YACA,SAAS,EAAE,EACX,kBACA,kBACA,qBACE;CAGJ,MAAM,EACJ,oBACA,iBACA,2BACA,OACA,4BACA,UAAU,0BACR;CAEJ,MAAM,WAAW,CACf;EACE,KAAK;EACL,OAAO,EAAE,MAAM;EACf,eAAe,iBAAiB,aAAa;EAC9C,EACD,GAAG,MACJ;CAED,MAAM,mBAAmB,8BACvB,qBAAC,OAAD;EAAK,WAAW,UAAU,uBAAuB;YAAjD;GACE,oBAAC,OAAD;IAAK,WAAW,UAAU,2BAA2B;cAClD,qBAAqB,EAAE,MAAM,UAAU;IACpC,CAAA;GACN,qBAAC,OAAD;IACE,WAAW,GACT,UAAU,gCAAgC,EAC1C,gCACD;cAJH;KAMG,EAAE,MAAM;KACT,oBAAC,UAAD;MAAU,WAAW,UAAU,oCAAoC;gBAChE,gBAAgB;MACR,CAAA;KACV,EAAE,MAAM;KACL;;GACL,SAAS,KAAK,YAAY;AACzB,WACE,oBAAC,OAAD;KAEE,WAAW,UAAU,4BAA4B;KACjD,UAAU,MAAM;AACd,cAAQ,QAAQ,EAAE;;eAGpB,oBAAC,UAAD,EAAA,UAAW,QAAQ,OAAiB,CAAA;KAChC,EAPC,QAAQ,IAOT;KAER;GACE;;CAIR,MAAM,eAAe,aAClB,SAAiB;EAChB,MAAM,EAAE,iBAAiB,OAAO,cAAc,EAAE;EAChD,MAAM,EAAE,2BAA2B,SAAS;AAC5C,MAAI,yBACF,mBAAkB;AAEpB,WAAS,KAAK;AAEd,wBAAsB,EAAE,CAAC;IAE3B;EAAC;EAAkB;EAAQ;EAAY;EAAsB,CAC9D;CAED,MAAM,QAAQ,oBAAoB,cAChC,oBAAC,OAAD;EAAK,WAAW,UAAU,QAAQ;YAChC,oBAAC,YAAD;GAAY,kBAAA;GAAiB,GAAI;GAAY,UAAU;GAAgB,CAAA;EACnE,CAAA;CAGR,MAAM,qBACJ,iBAAiB,yBACjB,0BAA0B,SAAS;AAIrC,QAFqB,oBAAoB,qBAGvC,qBAAC,OAAD;EAAK,WAAW,UAAU,SAAS;YAAnC,CACG,kBACA,MACG;MACJ"}

package/dist/Table/components/Header.js

@@ -9,6 +9,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Header(props) {
 	const { column } = props;
 	const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column.columnDef.meta;
+	const isSortable = sortOrder !== void 0 && !!dataIndex && typeof onSort === "function";
+	const ariaSort = sortOrder === "ascend" ? "ascending" : sortOrder === "descend" ? "descending" : "none";
 	let sortIcon = /* @__PURE__ */ jsx(Memo$1, {
 		size: 20,
 		color: "var(--action-neutral-normal)"
@@ -22,7 +24,7 @@ function Header(props) {
 		color: "var(--action-primary-normal)"
 	});
 	const onClickTh = useCallback((e) => {
-		if (sortOrder === void 0 || !dataIndex || typeof onSort !== "function") return;
+		if (!isSortable || !dataIndex) return;
 		e.stopPropagation();
 		let newSortOrder;
 		if (sortOrder === "ascend") newSortOrder = "descend";
@@ -31,29 +33,35 @@ function Header(props) {
 		onSort(dataIndex, newSortOrder);
 	}, [
 		dataIndex,
+		isSortable,
 		onSort,
 		sortOrder
 	]);
-	let content = title;
-	if (typeof content === "string") {
-		if (sortOrder !== void 0) content = /* @__PURE__ */ jsxs("span", {
-			className: prefixCls("sort-th-inner"),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: prefixCls("sort-title"),
-				children: title
-			}), /* @__PURE__ */ jsx("span", {
-				className: prefixCls("sort-btn"),
-				children: sortIcon
-			})]
-		});
-	}
+	const content = isSortable ? /* @__PURE__ */ jsxs("span", {
+		className: prefixCls("sort-th-inner"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: prefixCls("sort-title"),
+			children: title
+		}), /* @__PURE__ */ jsx("span", {
+			className: prefixCls("sort-btn"),
+			"aria-hidden": "true",
+			children: sortIcon
+		})]
+	}) : title;
 	return typeof title === "string" ? /* @__PURE__ */ jsx("div", {
-		className: cn(prefixCls("th-default"), prefixCls(`align-${align}`), {
+		role: isSortable ? "columnheader" : void 0,
+		"aria-sort": isSortable ? ariaSort : void 0,
+		className: cn(prefixCls("th-default"), "tw-text-typography-label", prefixCls(`align-${align}`), {
 			[prefixCls("td-ellipsis-content")]: ellipsis,
-			[prefixCls("th-sortable")]: sortOrder !== void 0
+			[prefixCls("th-sortable")]: isSortable
 		}),
-		onClick: onClickTh,
-		children: content
+		children: isSortable ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: prefixCls("sort-trigger"),
+			"aria-label": `Sort by ${title}`,
+			onClick: onClickTh,
+			children: content
+		}) : content
 	}, dataIndex) : /* @__PURE__ */ jsx(Fragment, { children: title });
 }
 //#endregion

package/dist/Table/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n  const { column } = props;\n  const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n    .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n  let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n  if (sortOrder === 'ascend') {\n    sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n  } else if (sortOrder === 'descend') {\n    sortIcon = (\n      <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n    );\n  }\n\n  const onClickTh = useCallback<MouseEventHandler>(\n    (e) => {\n      if (\n        sortOrder === undefined ||\n        !dataIndex ||\n        typeof onSort !== 'function'\n      ) {\n        return;\n      }\n      e.stopPropagation();\n\n      let newSortOrder: typeof sortOrder;\n      if (sortOrder === 'ascend') {\n        newSortOrder = 'descend';\n      } else if (sortOrder === 'descend') {\n        newSortOrder = null;\n      } else {\n        newSortOrder = 'ascend';\n      }\n      onSort(dataIndex, newSortOrder);\n    },\n    [dataIndex, onSort, sortOrder],\n  );\n\n  let content = title;\n  if (typeof content === 'string') {\n    if (sortOrder !== undefined) {\n      content = (\n        <span className={prefixCls('sort-th-inner')}>\n          <span className={prefixCls('sort-title')}>{title}</span>\n          <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n        </span>\n      );\n    }\n  }\n\n  return typeof title === 'string' ? (\n    <div\n      key={dataIndex}\n      className={cn(prefixCls('th-default'), prefixCls(`align-${align}`), {\n        [prefixCls('td-ellipsis-content')]: ellipsis,\n        [prefixCls('th-sortable')]: sortOrder !== undefined,\n      })}\n      onClick={onClickTh}\n    >\n      {content}\n    </div>\n  ) : (\n    <>{title}</>\n  );\n}\n\nexport interface IProps<T> {\n  column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CAEb,IAAI,WAAW,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAkC,CAAA;AAC5E,KAAI,cAAc,SAChB,YAAW,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAkC,CAAA;UAClE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAkC,CAAA;CAIrE,MAAM,YAAY,aACf,MAAM;AACL,MACE,cAAc,UACd,CAAC,aACD,OAAO,WAAW,WAElB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAQ;EAAU,CAC/B;CAED,IAAI,UAAU;AACd,KAAI,OAAO,YAAY,UACrB;MAAI,cAAc,OAChB,WACE,qBAAC,QAAD;GAAM,WAAW,UAAU,gBAAgB;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAW,UAAU,aAAa;cAAG;IAAa,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAW,UAAU,WAAW;cAAG;IAAgB,CAAA,CACpD;;;AAKb,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE;IACjE,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG,cAAc;GAC3C,CAAC;EACF,SAAS;YAER;EACG,EARC,UAQD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
+{"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n  const { column } = props;\n  const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n    .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n  const isSortable =\n    sortOrder !== undefined && !!dataIndex && typeof onSort === 'function';\n  const ariaSort =\n    sortOrder === 'ascend'\n      ? 'ascending'\n      : sortOrder === 'descend'\n      ? 'descending'\n      : 'none';\n\n  let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n  if (sortOrder === 'ascend') {\n    sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n  } else if (sortOrder === 'descend') {\n    sortIcon = (\n      <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n    );\n  }\n\n  const onClickTh = useCallback<MouseEventHandler>(\n    (e) => {\n      if (!isSortable || !dataIndex) {\n        return;\n      }\n      e.stopPropagation();\n\n      let newSortOrder: typeof sortOrder;\n      if (sortOrder === 'ascend') {\n        newSortOrder = 'descend';\n      } else if (sortOrder === 'descend') {\n        newSortOrder = null;\n      } else {\n        newSortOrder = 'ascend';\n      }\n      onSort(dataIndex, newSortOrder);\n    },\n    [dataIndex, isSortable, onSort, sortOrder],\n  );\n\n  const content = isSortable ? (\n    <span className={prefixCls('sort-th-inner')}>\n      <span className={prefixCls('sort-title')}>{title}</span>\n      <span className={prefixCls('sort-btn')} aria-hidden=\"true\">\n        {sortIcon}\n      </span>\n    </span>\n  ) : (\n    title\n  );\n\n  return typeof title === 'string' ? (\n    <div\n      key={dataIndex}\n      role={isSortable ? 'columnheader' : undefined}\n      aria-sort={isSortable ? ariaSort : undefined}\n      className={cn(\n        prefixCls('th-default'),\n        'tw-text-typography-label',\n        prefixCls(`align-${align}`),\n        {\n          [prefixCls('td-ellipsis-content')]: ellipsis,\n          [prefixCls('th-sortable')]: isSortable,\n        },\n      )}\n    >\n      {isSortable ? (\n        <button\n          type=\"button\"\n          className={prefixCls('sort-trigger')}\n          aria-label={`Sort by ${title}`}\n          onClick={onClickTh}\n        >\n          {content}\n        </button>\n      ) : (\n        content\n      )}\n    </div>\n  ) : (\n    <>{title}</>\n  );\n}\n\nexport interface IProps<T> {\n  column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CACb,MAAM,aACJ,cAAc,UAAa,CAAC,CAAC,aAAa,OAAO,WAAW;CAC9D,MAAM,WACJ,cAAc,WACV,cACA,cAAc,YACd,eACA;CAEN,IAAI,WAAW,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAkC,CAAA;AAC5E,KAAI,cAAc,SAChB,YAAW,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAkC,CAAA;UAClE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAkC,CAAA;CAIrE,MAAM,YAAY,aACf,MAAM;AACL,MAAI,CAAC,cAAc,CAAC,UAClB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAY;EAAQ;EAAU,CAC3C;CAED,MAAM,UAAU,aACd,qBAAC,QAAD;EAAM,WAAW,UAAU,gBAAgB;YAA3C,CACE,oBAAC,QAAD;GAAM,WAAW,UAAU,aAAa;aAAG;GAAa,CAAA,EACxD,oBAAC,QAAD;GAAM,WAAW,UAAU,WAAW;GAAE,eAAY;aACjD;GACI,CAAA,CACF;MAEP;AAGF,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,MAAM,aAAa,iBAAiB;EACpC,aAAW,aAAa,WAAW;EACnC,WAAW,GACT,UAAU,aAAa,EACvB,4BACA,UAAU,SAAS,QAAQ,EAC3B;IACG,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG;GAC7B,CACF;YAEA,aACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,UAAU,eAAe;GACpC,cAAY,WAAW;GACvB,SAAS;aAER;GACM,CAAA,GAET;EAEE,EAzBC,UAyBD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}

package/dist/Table/hooks/useRowSelection.js

@@ -1,7 +1,7 @@
 import Checkbox from "../../Checkbox/index.js";
 import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper.js";
 import { useCallback, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Table/hooks/useRowSelection.tsx
 function useRowSelection(props) {
 	const { columns, rowSelection, rowKey, data, isExpandable, flattenData } = props;
@@ -38,7 +38,7 @@ function useRowSelection(props) {
 	const unSelectAll = useCallback(() => {
 		changeSelectedRowKeys([]);
 	}, [changeSelectedRowKeys]);
-	const onClickAllCheckbox = useCallback(() => {
+	const onChangeAllCheckbox = useCallback(() => {
 		if (checkboxAllStatus === "all") unSelectAll();
 		else selectAll();
 	}, [
@@ -68,7 +68,7 @@ function useRowSelection(props) {
 		isExpandable,
 		getDescendantKeys
 	]);
-	const onClickCheckbox = useCallback((key, isChecked) => () => {
+	const onChangeCheckbox = useCallback((key, isChecked) => () => {
 		changeSelectedRowKeys(calculateCascadeSelection(key, isChecked, selectedRowKeys, rowSelection?.checkStrictly, isExpandable, getDescendantKeys, getAncestorKeys));
 	}, [
 		selectedRowKeys,
@@ -81,10 +81,13 @@ function useRowSelection(props) {
 	const getCheckboxAllNode = (children) => /* @__PURE__ */ jsx("div", {
 		className: prefixCls("row-selection-all"),
 		children: /* @__PURE__ */ jsx(Checkbox, {
-			onClick: onClickAllCheckbox,
+			onChange: onChangeAllCheckbox,
 			checked: checkboxAllStatus === "all",
 			indeterminate: checkboxAllStatus === "indeterminate",
-			children
+			children: children || /* @__PURE__ */ jsx("span", {
+				className: "tw-sr-only",
+				children: "Select all rows"
+			})
 		})
 	});
 	if (!rowSelection) return {
@@ -114,10 +117,14 @@ function useRowSelection(props) {
 			return /* @__PURE__ */ jsx("div", {
 				className: prefixCls("row-selection-item"),
 				children: /* @__PURE__ */ jsx(Checkbox, {
-					onClick: onClickCheckbox(key, nodeStatus.checked || nodeStatus.indeterminate),
+					onChange: onChangeCheckbox(key, nodeStatus.checked || nodeStatus.indeterminate),
 					checked: nodeStatus.checked,
 					indeterminate: nodeStatus.indeterminate,
-					...checkboxProps
+					...checkboxProps,
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "tw-sr-only",
+						children: ["Select row ", key]
+					})
 				})
 			});
 		},