@aloudata/aloudata-design 3.0.26 → 3.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/Button/index.js +4 -10
  2. package/dist/Button/index.js.map +1 -1
  3. package/dist/Checkbox/index.js +2 -8
  4. package/dist/Checkbox/index.js.map +1 -1
  5. package/dist/Collapse/index.js +22 -68
  6. package/dist/Collapse/index.js.map +1 -1
  7. package/dist/Input/components/Input/index.js +5 -11
  8. package/dist/Input/components/Input/index.js.map +1 -1
  9. package/dist/Input/components/TextArea/index.js +1 -7
  10. package/dist/Input/components/TextArea/index.js.map +1 -1
  11. package/dist/InputNumber/index.js +2 -8
  12. package/dist/InputNumber/index.js.map +1 -1
  13. package/dist/Pagination/PageSizeChanger.d.ts +0 -1
  14. package/dist/Pagination/PageSizeChanger.js +2 -3
  15. package/dist/Pagination/PageSizeChanger.js.map +1 -1
  16. package/dist/Pagination/index.js +19 -33
  17. package/dist/Pagination/index.js.map +1 -1
  18. package/dist/Pagination/types.d.ts +0 -3
  19. package/dist/Radio/components/Radio/index.js +1 -1
  20. package/dist/Radio/components/Radio/index.js.map +1 -1
  21. package/dist/Select/BaseSelect.js +12 -12
  22. package/dist/Select/BaseSelect.js.map +1 -1
  23. package/dist/Steps/index.js +14 -66
  24. package/dist/Steps/index.js.map +1 -1
  25. package/dist/Switch/index.js +1 -8
  26. package/dist/Switch/index.js.map +1 -1
  27. package/dist/Table/components/Cell.js +3 -8
  28. package/dist/Table/components/Cell.js.map +1 -1
  29. package/dist/Table/components/ExpandCell.js +2 -6
  30. package/dist/Table/components/ExpandCell.js.map +1 -1
  31. package/dist/Table/components/Footer/index.js +1 -2
  32. package/dist/Table/components/Footer/index.js.map +1 -1
  33. package/dist/Table/components/Header.js +18 -26
  34. package/dist/Table/components/Header.js.map +1 -1
  35. package/dist/Table/hooks/useRowSelection.js +7 -14
  36. package/dist/Table/hooks/useRowSelection.js.map +1 -1
  37. package/dist/Table/index.js +2 -8
  38. package/dist/Table/index.js.map +1 -1
  39. package/dist/Tabs/index.d.ts +1 -1
  40. package/dist/Tabs/index.js +11 -91
  41. package/dist/Tabs/index.js.map +1 -1
  42. package/dist/aloudata-design.css +1 -1
  43. package/dist/locale/default.d.ts +0 -6
  44. package/dist/locale/en_US.d.ts +0 -6
  45. package/dist/locale/en_US.js +0 -6
  46. package/dist/locale/en_US.js.map +1 -1
  47. package/dist/locale/zh_CN.d.ts +0 -6
  48. package/dist/locale/zh_CN.js +0 -6
  49. package/dist/locale/zh_CN.js.map +1 -1
  50. package/dist/theme/contract/tokenOutputContract.d.ts +1 -1
  51. package/dist/theme/contract/tokenOutputContract.js +0 -4
  52. package/dist/theme/contract/tokenOutputContract.js.map +1 -1
  53. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.d.ts +1 -1
  54. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js +0 -3
  55. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js.map +1 -1
  56. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.d.ts +1 -1
  57. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js +0 -3
  58. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js.map +1 -1
  59. package/dist/theme/runtime/themeToCssVars.js +0 -3
  60. package/dist/theme/runtime/themeToCssVars.js.map +1 -1
  61. package/package.json +1 -1
  62. package/dist/theme/contract/controlStateColorArtifact.d.ts +0 -73
  63. package/dist/theme/contract/controlStateColorArtifact.js +0 -2
  64. package/dist/theme/contract/focusRingArtifact.d.ts +0 -51
  65. package/dist/theme/contract/focusRingArtifact.js +0 -2
@@ -1,5 +1,4 @@
1
1
  import { cn } from "../lib/utils.js";
2
- import { ELangType, LocaleContext } from "../locale/default.js";
3
2
  import { CustomDot } from "./components/CustomDot/index.js";
4
3
  import { Step } from "./components/Step/index.js";
5
4
  import React from "react";
@@ -10,31 +9,8 @@ function getStepStatus(index, current, globalStatus) {
10
9
  if (index === current) return globalStatus || "process";
11
10
  return "wait";
12
11
  }
13
- var stepsA11yText = {
14
- [ELangType.ZH_CN]: {
15
- workflowProgress: "工作流进度",
16
- status: {
17
- finish: "已完成",
18
- process: "进行中",
19
- wait: "未开始",
20
- error: "错误"
21
- }
22
- },
23
- [ELangType.EN]: {
24
- workflowProgress: "Workflow progress",
25
- status: {
26
- finish: "Completed",
27
- process: "In progress",
28
- wait: "Not started",
29
- error: "Error"
30
- }
31
- }
32
- };
33
12
  function Steps({ className, current: controlledCurrent, direction = "horizontal", defaultCurrent = 0, status, items, children }) {
34
13
  const current = controlledCurrent ?? defaultCurrent;
35
- const accessibleIdPrefix = React.useId();
36
- const { locale } = React.useContext(LocaleContext);
37
- const a11yText = locale === ELangType.EN ? stepsA11yText[ELangType.EN] : stepsA11yText[ELangType.ZH_CN];
38
14
  const resolvedItems = items || React.Children.toArray(children).filter(React.isValidElement).map((child) => ({
39
15
  title: child.props.title,
40
16
  description: child.props.description,
@@ -44,21 +20,11 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
44
20
  }));
45
21
  return /* @__PURE__ */ jsx("div", {
46
22
  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),
47
- role: "list",
48
- "aria-label": a11yText.workflowProgress,
49
23
  children: resolvedItems.map((item, index) => {
50
24
  const stepStatus = item.status || getStepStatus(index, current, status);
51
25
  const isLast = index === resolvedItems.length - 1;
52
- const titleId = `${accessibleIdPrefix}-step-${index}-title`;
53
- const statusId = `${accessibleIdPrefix}-step-${index}-status`;
54
26
  return /* @__PURE__ */ jsx("div", {
55
27
  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"),
56
- role: "listitem",
57
- "aria-current": index === current ? "step" : void 0,
58
- "aria-labelledby": titleId,
59
- "aria-describedby": statusId,
60
- "aria-posinset": index + 1,
61
- "aria-setsize": resolvedItems.length,
62
28
  children: direction === "horizontal" ? /* @__PURE__ */ jsxs("div", {
63
29
  className: "ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center",
64
30
  children: [/* @__PURE__ */ jsxs("div", {
@@ -85,22 +51,13 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
85
51
  ]
86
52
  }), /* @__PURE__ */ jsxs("div", {
87
53
  className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
88
- children: [
89
- /* @__PURE__ */ jsx("div", {
90
- id: titleId,
91
- 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)]"),
92
- children: item.title
93
- }),
94
- /* @__PURE__ */ jsx("span", {
95
- id: statusId,
96
- className: "tw-sr-only",
97
- children: a11yText.status[stepStatus]
98
- }),
99
- item.description && /* @__PURE__ */ jsx("div", {
100
- 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)]"),
101
- children: item.description
102
- })
103
- ]
54
+ children: [/* @__PURE__ */ jsx("div", {
55
+ 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)]"),
56
+ children: item.title
57
+ }), item.description && /* @__PURE__ */ jsx("div", {
58
+ 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)]"),
59
+ children: item.description
60
+ })]
104
61
  })]
105
62
  }) : /* @__PURE__ */ jsxs("div", {
106
63
  className: "ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3",
@@ -124,22 +81,13 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
124
81
  })]
125
82
  }), /* @__PURE__ */ jsxs("div", {
126
83
  className: "ald-steps-item-content ant-steps-item-content",
127
- children: [
128
- /* @__PURE__ */ jsx("div", {
129
- id: titleId,
130
- 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)]"),
131
- children: item.title
132
- }),
133
- /* @__PURE__ */ jsx("span", {
134
- id: statusId,
135
- className: "tw-sr-only",
136
- children: a11yText.status[stepStatus]
137
- }),
138
- item.description && /* @__PURE__ */ jsx("div", {
139
- 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)]"),
140
- children: item.description
141
- })
142
- ]
84
+ children: [/* @__PURE__ */ jsx("div", {
85
+ 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)]"),
86
+ children: item.title
87
+ }), item.description && /* @__PURE__ */ jsx("div", {
88
+ 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)]"),
89
+ children: item.description
90
+ })]
143
91
  })]
144
92
  })
145
93
  }, index);
@@ -1 +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 { 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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"}
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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"}
@@ -49,17 +49,10 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
49
49
  type: "button",
50
50
  role: "switch",
51
51
  "aria-checked": !!userChecked,
52
- "aria-busy": loading || void 0,
53
52
  "data-testid": dataTestid,
54
53
  "aria-label": ariaLabel,
55
54
  disabled: currentDisabled,
56
- 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 && [
57
- "focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
58
- "forced-colors:focus-visible:tw-outline",
59
- "forced-colors:focus-visible:tw-outline-2",
60
- "forced-colors:focus-visible:tw-outline-offset-2",
61
- "forced-colors:focus-visible:tw-outline-[Highlight]"
62
- ], currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
55
+ 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(--semantic-neutral-500)]", currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
63
56
  style: {
64
57
  width: trackW,
65
58
  height: trackH
@@ -1 +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 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"}
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(--semantic-neutral-500)]',\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,uCACJ,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"}
@@ -10,18 +10,13 @@ function Cell(props) {
10
10
  const { render, dataIndex, align, ellipsis } = column.columnDef.meta;
11
11
  const colValue = _.get(row.original, dataIndex || "");
12
12
  const node = render ? render(colValue, row.original, row.index) : colValue;
13
- const isDefaultTextValue = typeof render !== "function" && (typeof colValue === "string" || typeof colValue === "number");
14
- const content = isDefaultTextValue ? /* @__PURE__ */ jsx("span", {
15
- className: "tw-text-typography-body-dense",
16
- children: node
17
- }) : node;
18
13
  return /* @__PURE__ */ jsx("div", {
19
- className: cn(prefixCls("td-default"), prefixCls(`align-${align}`), { [prefixCls("td-legacy-content")]: !isDefaultTextValue }),
14
+ className: cn(prefixCls("td-default"), prefixCls(`align-${align}`)),
20
15
  children: ellipsis ? /* @__PURE__ */ jsx("div", {
21
16
  className: prefixCls("td-ellipsis-content"),
22
17
  title: typeof node === "string" ? node : void 0,
23
- children: content
24
- }) : content
18
+ children: node
19
+ }) : node
25
20
  });
26
21
  }
27
22
  function CellWithErrorBoundary(props) {
@@ -1 +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 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"}
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"}
@@ -20,13 +20,9 @@ function ExpandCell(props) {
20
20
  const expandable = getExpandableConfig(propsExpandable);
21
21
  const defaultExpandIconRender = (params) => {
22
22
  const { record, onExpand, isExpanded: isExpandedIcon } = params;
23
- return /* @__PURE__ */ jsx("button", {
24
- type: "button",
23
+ return /* @__PURE__ */ jsx("span", {
25
24
  className: prefixCls("expand-btn-inner"),
26
- "aria-label": `${isExpandedIcon ? "Collapse" : "Expand"} row ${key}`,
27
- "aria-expanded": isExpandedIcon,
28
- onClick: (event) => {
29
- event.stopPropagation();
25
+ onClick: () => {
30
26
  if (isLeaf) return;
31
27
  onExpand(record, !isExpanded);
32
28
  },
@@ -1 +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 <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"}
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"}
@@ -1,4 +1,3 @@
1
- import { cn } from "../../../lib/utils.js";
2
1
  import { LocaleContext, getTranslator } from "../../../locale/default.js";
3
2
  import TextLink from "../../../TextLink/index.js";
4
3
  import Pagination from "../../../Pagination/index.js";
@@ -24,7 +23,7 @@ function TableFooter(props) {
24
23
  children: getCheckboxAllNode?.(t.Table.selectAll)
25
24
  }),
26
25
  /* @__PURE__ */ jsxs("div", {
27
- className: cn(prefixCls("footer-row-selection-selected"), "tw-text-typography-body-dense"),
26
+ className: prefixCls("footer-row-selection-selected"),
28
27
  children: [
29
28
  t.Table.selected,
30
29
  /* @__PURE__ */ jsx(TextLink, {
@@ -1 +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 { 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"}
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"}
@@ -9,8 +9,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
  function Header(props) {
10
10
  const { column } = props;
11
11
  const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column.columnDef.meta;
12
- const isSortable = sortOrder !== void 0 && !!dataIndex && typeof onSort === "function";
13
- const ariaSort = sortOrder === "ascend" ? "ascending" : sortOrder === "descend" ? "descending" : "none";
14
12
  let sortIcon = /* @__PURE__ */ jsx(Memo$1, {
15
13
  size: 20,
16
14
  color: "var(--action-neutral-normal)"
@@ -24,7 +22,7 @@ function Header(props) {
24
22
  color: "var(--action-primary-normal)"
25
23
  });
26
24
  const onClickTh = useCallback((e) => {
27
- if (!isSortable || !dataIndex) return;
25
+ if (sortOrder === void 0 || !dataIndex || typeof onSort !== "function") return;
28
26
  e.stopPropagation();
29
27
  let newSortOrder;
30
28
  if (sortOrder === "ascend") newSortOrder = "descend";
@@ -33,35 +31,29 @@ function Header(props) {
33
31
  onSort(dataIndex, newSortOrder);
34
32
  }, [
35
33
  dataIndex,
36
- isSortable,
37
34
  onSort,
38
35
  sortOrder
39
36
  ]);
40
- const content = isSortable ? /* @__PURE__ */ jsxs("span", {
41
- className: prefixCls("sort-th-inner"),
42
- children: [/* @__PURE__ */ jsx("span", {
43
- className: prefixCls("sort-title"),
44
- children: title
45
- }), /* @__PURE__ */ jsx("span", {
46
- className: prefixCls("sort-btn"),
47
- "aria-hidden": "true",
48
- children: sortIcon
49
- })]
50
- }) : title;
37
+ let content = title;
38
+ if (typeof content === "string") {
39
+ if (sortOrder !== void 0) content = /* @__PURE__ */ jsxs("span", {
40
+ className: prefixCls("sort-th-inner"),
41
+ children: [/* @__PURE__ */ jsx("span", {
42
+ className: prefixCls("sort-title"),
43
+ children: title
44
+ }), /* @__PURE__ */ jsx("span", {
45
+ className: prefixCls("sort-btn"),
46
+ children: sortIcon
47
+ })]
48
+ });
49
+ }
51
50
  return typeof title === "string" ? /* @__PURE__ */ jsx("div", {
52
- role: isSortable ? "columnheader" : void 0,
53
- "aria-sort": isSortable ? ariaSort : void 0,
54
- className: cn(prefixCls("th-default"), "tw-text-typography-label", prefixCls(`align-${align}`), {
51
+ className: cn(prefixCls("th-default"), prefixCls(`align-${align}`), {
55
52
  [prefixCls("td-ellipsis-content")]: ellipsis,
56
- [prefixCls("th-sortable")]: isSortable
53
+ [prefixCls("th-sortable")]: sortOrder !== void 0
57
54
  }),
58
- children: isSortable ? /* @__PURE__ */ jsx("button", {
59
- type: "button",
60
- className: prefixCls("sort-trigger"),
61
- "aria-label": `Sort by ${title}`,
62
- onClick: onClickTh,
63
- children: content
64
- }) : content
55
+ onClick: onClickTh,
56
+ children: content
65
57
  }, dataIndex) : /* @__PURE__ */ jsx(Fragment, { children: title });
66
58
  }
67
59
  //#endregion
@@ -1 +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 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"}
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"}
@@ -1,7 +1,7 @@
1
1
  import Checkbox from "../../Checkbox/index.js";
2
2
  import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper.js";
3
3
  import { useCallback, useMemo, useState } from "react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { jsx } from "react/jsx-runtime";
5
5
  //#region src/Table/hooks/useRowSelection.tsx
6
6
  function useRowSelection(props) {
7
7
  const { columns, rowSelection, rowKey, data, isExpandable, flattenData } = props;
@@ -38,7 +38,7 @@ function useRowSelection(props) {
38
38
  const unSelectAll = useCallback(() => {
39
39
  changeSelectedRowKeys([]);
40
40
  }, [changeSelectedRowKeys]);
41
- const onChangeAllCheckbox = useCallback(() => {
41
+ const onClickAllCheckbox = useCallback(() => {
42
42
  if (checkboxAllStatus === "all") unSelectAll();
43
43
  else selectAll();
44
44
  }, [
@@ -68,7 +68,7 @@ function useRowSelection(props) {
68
68
  isExpandable,
69
69
  getDescendantKeys
70
70
  ]);
71
- const onChangeCheckbox = useCallback((key, isChecked) => () => {
71
+ const onClickCheckbox = useCallback((key, isChecked) => () => {
72
72
  changeSelectedRowKeys(calculateCascadeSelection(key, isChecked, selectedRowKeys, rowSelection?.checkStrictly, isExpandable, getDescendantKeys, getAncestorKeys));
73
73
  }, [
74
74
  selectedRowKeys,
@@ -81,13 +81,10 @@ function useRowSelection(props) {
81
81
  const getCheckboxAllNode = (children) => /* @__PURE__ */ jsx("div", {
82
82
  className: prefixCls("row-selection-all"),
83
83
  children: /* @__PURE__ */ jsx(Checkbox, {
84
- onChange: onChangeAllCheckbox,
84
+ onClick: onClickAllCheckbox,
85
85
  checked: checkboxAllStatus === "all",
86
86
  indeterminate: checkboxAllStatus === "indeterminate",
87
- children: children || /* @__PURE__ */ jsx("span", {
88
- className: "tw-sr-only",
89
- children: "Select all rows"
90
- })
87
+ children
91
88
  })
92
89
  });
93
90
  if (!rowSelection) return {
@@ -117,14 +114,10 @@ function useRowSelection(props) {
117
114
  return /* @__PURE__ */ jsx("div", {
118
115
  className: prefixCls("row-selection-item"),
119
116
  children: /* @__PURE__ */ jsx(Checkbox, {
120
- onChange: onChangeCheckbox(key, nodeStatus.checked || nodeStatus.indeterminate),
117
+ onClick: onClickCheckbox(key, nodeStatus.checked || nodeStatus.indeterminate),
121
118
  checked: nodeStatus.checked,
122
119
  indeterminate: nodeStatus.indeterminate,
123
- ...checkboxProps,
124
- children: /* @__PURE__ */ jsxs("span", {
125
- className: "tw-sr-only",
126
- children: ["Select row ", key]
127
- })
120
+ ...checkboxProps
128
121
  })
129
122
  });
130
123
  },