@aloudata/aloudata-design 3.1.0 → 3.1.1

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 (186) hide show
  1. package/dist/AProgress/index.js +10 -0
  2. package/dist/AProgress/index.js.map +1 -1
  3. package/dist/Alert/index.js +3 -1
  4. package/dist/Alert/index.js.map +1 -1
  5. package/dist/Badge/index.js +37 -11
  6. package/dist/Badge/index.js.map +1 -1
  7. package/dist/Breadcrumb/index.js +12 -2
  8. package/dist/Breadcrumb/index.js.map +1 -1
  9. package/dist/Button/index.d.ts +1 -1
  10. package/dist/Button/index.js +20 -6
  11. package/dist/Button/index.js.map +1 -1
  12. package/dist/Card/index.js +1 -1
  13. package/dist/Card/index.js.map +1 -1
  14. package/dist/Carousel/index.js +9 -1
  15. package/dist/Carousel/index.js.map +1 -1
  16. package/dist/Checkbox/index.js +17 -2
  17. package/dist/Checkbox/index.js.map +1 -1
  18. package/dist/Checkbox/type.d.ts +10 -2
  19. package/dist/ColorPicker/index.js +112 -46
  20. package/dist/ColorPicker/index.js.map +1 -1
  21. package/dist/DataPreviewTable/components/Body/Cell.d.ts +2 -0
  22. package/dist/DataPreviewTable/components/Body/Cell.js +9 -1
  23. package/dist/DataPreviewTable/components/Body/Cell.js.map +1 -1
  24. package/dist/DataPreviewTable/components/Body/index.d.ts +1 -0
  25. package/dist/DataPreviewTable/components/Body/index.js +35 -23
  26. package/dist/DataPreviewTable/components/Body/index.js.map +1 -1
  27. package/dist/DataPreviewTable/components/Header/index.d.ts +1 -0
  28. package/dist/DataPreviewTable/components/Header/index.js +36 -28
  29. package/dist/DataPreviewTable/components/Header/index.js.map +1 -1
  30. package/dist/DataPreviewTable/index.js +19 -2
  31. package/dist/DataPreviewTable/index.js.map +1 -1
  32. package/dist/Drawer/index.d.ts +4 -0
  33. package/dist/Drawer/index.js +91 -78
  34. package/dist/Drawer/index.js.map +1 -1
  35. package/dist/Dropdown/index.d.ts +1 -1
  36. package/dist/Dropdown/index.js +64 -13
  37. package/dist/Dropdown/index.js.map +1 -1
  38. package/dist/Form/FormItemContext.d.ts +1 -1
  39. package/dist/Form/FormItemContext.js.map +1 -1
  40. package/dist/Form/index.js +50 -7
  41. package/dist/Form/index.js.map +1 -1
  42. package/dist/IconButton/index.d.ts +2 -2
  43. package/dist/IconButton/index.js +9 -3
  44. package/dist/IconButton/index.js.map +1 -1
  45. package/dist/Input/components/Input/index.js +18 -8
  46. package/dist/Input/components/Input/index.js.map +1 -1
  47. package/dist/Input/components/TextArea/index.js +18 -7
  48. package/dist/Input/components/TextArea/index.js.map +1 -1
  49. package/dist/Input/privateSemanticOwner.d.ts +2 -0
  50. package/dist/Input/privateSemanticOwner.js +1 -0
  51. package/dist/InputNumber/index.js +16 -9
  52. package/dist/InputNumber/index.js.map +1 -1
  53. package/dist/InputNumber/type.d.ts +2 -2
  54. package/dist/LogicTree/components/LogicItem/index.d.ts +2 -1
  55. package/dist/LogicTree/components/LogicItem/index.js +13 -2
  56. package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
  57. package/dist/LogicTree/index.js +2 -0
  58. package/dist/LogicTree/index.js.map +1 -1
  59. package/dist/MemberPicker/components/MemberSelection.d.ts +1 -0
  60. package/dist/MemberPicker/components/MemberSelection.js +83 -94
  61. package/dist/MemberPicker/components/MemberSelection.js.map +1 -1
  62. package/dist/MemberPicker/components/MultipleOption.js +12 -0
  63. package/dist/MemberPicker/components/MultipleOption.js.map +1 -1
  64. package/dist/MemberPicker/components/Panel.d.ts +1 -0
  65. package/dist/MemberPicker/components/Panel.js +4 -1
  66. package/dist/MemberPicker/components/Panel.js.map +1 -1
  67. package/dist/MemberPicker/components/SelectedMemberTags.js +14 -6
  68. package/dist/MemberPicker/components/SelectedMemberTags.js.map +1 -1
  69. package/dist/MemberPicker/components/SingleOption.js +12 -0
  70. package/dist/MemberPicker/components/SingleOption.js.map +1 -1
  71. package/dist/MemberPicker/components/UserGroupSelection.d.ts +2 -1
  72. package/dist/MemberPicker/components/UserGroupSelection.js +61 -48
  73. package/dist/MemberPicker/components/UserGroupSelection.js.map +1 -1
  74. package/dist/MemberPicker/index.js +134 -108
  75. package/dist/MemberPicker/index.js.map +1 -1
  76. package/dist/Menu/index.d.ts +8 -0
  77. package/dist/Menu/index.js +33 -3
  78. package/dist/Menu/index.js.map +1 -1
  79. package/dist/Modal/index.d.ts +4 -0
  80. package/dist/Modal/index.js +55 -66
  81. package/dist/Modal/index.js.map +1 -1
  82. package/dist/OverflowCount/index.js +10 -0
  83. package/dist/OverflowCount/index.js.map +1 -1
  84. package/dist/Pagination/index.js +1 -0
  85. package/dist/Pagination/index.js.map +1 -1
  86. package/dist/Popconfirm/index.js +9 -1
  87. package/dist/Popconfirm/index.js.map +1 -1
  88. package/dist/Popover/index.js +52 -1
  89. package/dist/Popover/index.js.map +1 -1
  90. package/dist/Progress/index.js +4 -0
  91. package/dist/Progress/index.js.map +1 -1
  92. package/dist/Radio/components/Group/index.d.ts +5 -1
  93. package/dist/Radio/components/Group/index.js +7 -2
  94. package/dist/Radio/components/Group/index.js.map +1 -1
  95. package/dist/Radio/components/Radio/index.js +26 -0
  96. package/dist/Radio/components/Radio/index.js.map +1 -1
  97. package/dist/Radio/interface/radio.d.ts +7 -0
  98. package/dist/Radio/interface/radioGroup.d.ts +2 -0
  99. package/dist/RenameInput/index.js +11 -0
  100. package/dist/RenameInput/index.js.map +1 -1
  101. package/dist/Select/BaseSelect.d.ts +3 -0
  102. package/dist/Select/BaseSelect.js +229 -32
  103. package/dist/Select/BaseSelect.js.map +1 -1
  104. package/dist/Select/SelectTrigger.d.ts +2 -0
  105. package/dist/Select/SelectTrigger.js +13 -5
  106. package/dist/Select/SelectTrigger.js.map +1 -1
  107. package/dist/Select/components/OptionCollection.d.ts +41 -0
  108. package/dist/Select/components/OptionCollection.js +124 -0
  109. package/dist/Select/components/OptionCollection.js.map +1 -0
  110. package/dist/Select/index.js +45 -3
  111. package/dist/Select/index.js.map +1 -1
  112. package/dist/Select/interface.d.ts +1 -1
  113. package/dist/Skeleton/index.js +1 -1
  114. package/dist/Skeleton/index.js.map +1 -1
  115. package/dist/Spin/index.d.ts +1 -1
  116. package/dist/Spin/index.js +22 -7
  117. package/dist/Spin/index.js.map +1 -1
  118. package/dist/Switch/index.d.ts +5 -0
  119. package/dist/Switch/index.js +15 -5
  120. package/dist/Switch/index.js.map +1 -1
  121. package/dist/Table/components/Header.js +0 -1
  122. package/dist/Table/components/Header.js.map +1 -1
  123. package/dist/Table/index.js +42 -27
  124. package/dist/Table/index.js.map +1 -1
  125. package/dist/Tabs/index.js +1 -0
  126. package/dist/Tabs/index.js.map +1 -1
  127. package/dist/Tag/index.js +20 -1
  128. package/dist/Tag/index.js.map +1 -1
  129. package/dist/Tooltip/index.js +34 -5
  130. package/dist/Tooltip/index.js.map +1 -1
  131. package/dist/Tour/index.js +13 -1
  132. package/dist/Tour/index.js.map +1 -1
  133. package/dist/Tree/Tree2.js +2 -0
  134. package/dist/Tree/Tree2.js.map +1 -1
  135. package/dist/_utils/dialogAccessibility.d.ts +17 -0
  136. package/dist/_utils/dialogAccessibility.js +110 -0
  137. package/dist/_utils/dialogAccessibility.js.map +1 -0
  138. package/dist/_utils/formControlSemanticOwner.d.ts +3 -0
  139. package/dist/_utils/formControlSemanticOwner.js +17 -0
  140. package/dist/_utils/formControlSemanticOwner.js.map +1 -0
  141. package/dist/_utils/overlayCoordinator.js +1 -11
  142. package/dist/_utils/overlayCoordinator.js.map +1 -1
  143. package/dist/aloudata-design.css +1 -1
  144. package/dist/theme/contract/baselineResolvedTokenValueManifest.d.ts +1 -1
  145. package/dist/theme/contract/darkResolvedTokenValueManifest.d.ts +1 -1
  146. package/dist/theme/generator/acceptedColorValues.d.ts +2 -1
  147. package/dist/theme/generator/baselineTokenValueDelivery.d.ts +9 -1
  148. package/dist/theme/generator/minimalAcceptedColorValues.d.ts +2 -2
  149. package/dist/theme/generator/neutralSourceResolver.d.ts +28 -0
  150. package/dist/theme/generator/neutralSourceResolver.js +2 -0
  151. package/dist/theme/generator/neutralSourceValues.d.ts +27 -0
  152. package/dist/theme/generator/neutralSourceValues.js +2 -0
  153. package/dist/theme/index.d.ts +2 -0
  154. package/dist/theme/index.js +1 -0
  155. package/dist/theme/neutralSourceContract.d.ts +3 -0
  156. package/dist/theme/neutralSourceContract.js +11 -0
  157. package/dist/theme/neutralSourceContract.js.map +1 -0
  158. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.d.ts +1 -1
  159. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js +45 -45
  160. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js.map +1 -1
  161. package/dist/theme/runtime/colorValueMode/generated/slateDarkDeclarations.d.ts +3 -0
  162. package/dist/theme/runtime/colorValueMode/generated/slateDarkDeclarations.js +2 -0
  163. package/dist/theme/runtime/colorValueMode/generated/slateLightDeclarations.d.ts +3 -0
  164. package/dist/theme/runtime/colorValueMode/generated/slateLightDeclarations.js +2 -0
  165. package/dist/theme/runtime/colorValueMode/generated/stoneDarkDeclarations.d.ts +3 -0
  166. package/dist/theme/runtime/colorValueMode/generated/stoneDarkDeclarations.js +2 -0
  167. package/dist/theme/runtime/colorValueMode/generated/stoneLightDeclarations.d.ts +3 -0
  168. package/dist/theme/runtime/colorValueMode/generated/stoneLightDeclarations.js +2 -0
  169. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.d.ts +1 -1
  170. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js +41 -41
  171. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js.map +1 -1
  172. package/dist/theme/runtime/colorValueMode/index.js +2 -12
  173. package/dist/theme/runtime/colorValueMode/index.js.map +1 -1
  174. package/dist/theme/runtime/colorValueMode/legacyNeutralCompatibility.d.ts +2 -0
  175. package/dist/theme/runtime/colorValueMode/legacyNeutralCompatibility.js +48 -0
  176. package/dist/theme/runtime/colorValueMode/legacyNeutralCompatibility.js.map +1 -0
  177. package/dist/theme/runtime/colorValueMode/registry.d.ts +1 -1
  178. package/dist/theme/runtime/colorValueMode/registry.js +2 -1
  179. package/dist/theme/runtime/colorValueMode/registry.js.map +1 -1
  180. package/dist/theme/runtime/initAldTheme.js +1 -3
  181. package/dist/theme/runtime/initAldTheme.js.map +1 -1
  182. package/dist/theme/runtime/neutralSource/index.d.ts +6 -0
  183. package/dist/theme/runtime/neutralSource/index.js +11 -0
  184. package/dist/theme/runtime/neutralSource/index.js.map +1 -0
  185. package/dist/theme/runtime/neutralSource.d.ts +2 -0
  186. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SkeletonProps {\n active?: boolean;\n loading?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n avatar?:\n | boolean\n | {\n size?: number | 'small' | 'default' | 'large';\n shape?: 'circle' | 'square';\n };\n title?: boolean | { width?: number | string };\n paragraph?:\n | boolean\n | { rows?: number; width?: number | string | (number | string)[] };\n round?: boolean;\n}\n\n// --- Shared types for sub-components ---\n\ntype SkeletonElementSize = 'small' | 'default' | 'large';\n\ninterface SkeletonElementBaseProps {\n active?: boolean;\n size?: SkeletonElementSize;\n className?: string;\n style?: React.CSSProperties;\n}\n\ninterface SkeletonButtonProps extends SkeletonElementBaseProps {\n shape?: 'circle' | 'round' | 'square';\n block?: boolean;\n}\n\ninterface SkeletonAvatarProps extends SkeletonElementBaseProps {\n shape?: 'circle' | 'square';\n}\n\ninterface SkeletonInputProps extends SkeletonElementBaseProps {\n block?: boolean;\n}\n\ninterface SkeletonImageProps {\n active?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\n// --- Size maps ---\n\nconst BUTTON_SIZE_MAP: Record<\n SkeletonElementSize,\n { width: number; height: number }\n> = {\n small: { width: 64, height: 24 },\n default: { width: 80, height: 32 },\n large: { width: 96, height: 40 },\n};\n\nconst AVATAR_SIZE_MAP: Record<SkeletonElementSize, number> = {\n small: 24,\n default: 32,\n large: 40,\n};\n\nconst INPUT_SIZE_MAP: Record<SkeletonElementSize, number> = {\n small: 24,\n default: 32,\n large: 40,\n};\n\nconst SKELETON_BACKGROUND_COLOR =\n 'var(--alias-colors-bg-skeleton-subtle, var(--background-neutral-subtle, #e5e7eb))';\n\n// --- Sub-components ---\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n active,\n size = 'default',\n shape = 'square',\n block,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const dims = BUTTON_SIZE_MAP[size];\n\n const borderRadius =\n shape === 'circle'\n ? '50%'\n : shape === 'round'\n ? `${dims.height / 2}px`\n : '4px';\n\n return (\n <span\n className={cn(\n 'ald-skeleton-button tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n block && 'tw-block tw-w-full',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width:\n shape === 'circle' ? dims.height : block ? undefined : dims.width,\n height: dims.height,\n borderRadius,\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n active,\n size = 'default',\n shape = 'circle',\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const dim = typeof size === 'number' ? size : AVATAR_SIZE_MAP[size];\n\n return (\n <span\n className={cn(\n 'ald-skeleton-avatar tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: dim,\n height: dim,\n borderRadius: shape === 'circle' ? '50%' : '4px',\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n active,\n size = 'default',\n block,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const height = INPUT_SIZE_MAP[size];\n\n return (\n <span\n className={cn(\n 'ald-skeleton-input tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n block && 'tw-block tw-w-full',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: block ? undefined : 200,\n height,\n borderRadius: 4,\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonImage: React.FC<SkeletonImageProps> = ({\n active,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n\n return (\n <span\n className={cn(\n 'ald-skeleton-image tw-flex tw-items-center tw-justify-center tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: 96,\n height: 96,\n borderRadius: 4,\n ...style,\n }}\n >\n <svg\n viewBox=\"0 0 1098 1024\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n fill=\"currentColor\"\n style={{ opacity: 0.2 }}\n >\n <path d=\"M365.714 329.143q0 45.714-32.036 77.75t-77.75 32.036-77.75-32.036-32.036-77.75 32.036-77.75 77.75-32.036 77.75 32.036 32.036 77.75zM950.857 548.571v256H146.286V694.857l182.857-182.857 91.429 91.429 292.571-292.571zM1005.714 146.286H91.429q-7.46 0-12.873 5.413T73.143 164.571v694.857q0 7.46 5.413 12.873t12.873 5.413h914.286q7.46 0 12.873-5.413t5.413-12.873V164.571q0-7.46-5.413-12.873t-12.873-5.413zm91.429 18.286v694.857q0 37.714-26.857 64.571t-64.571 26.857H91.429q-37.714 0-64.571-26.857T0 859.429V164.571q0-37.714 26.857-64.571T91.429 73.143h914.286q37.714 0 64.571 26.857t26.857 64.571z\" />\n </svg>\n </span>\n );\n};\n\n// --- Main Skeleton component ---\n\nfunction Skeleton(props: SkeletonProps) {\n const {\n active = false,\n loading = true,\n className,\n style,\n children,\n avatar,\n title = true,\n paragraph = true,\n round,\n } = props;\n\n if (!loading) {\n return <>{children}</>;\n }\n\n const animClass = active ? 'tw-animate-pulse' : '';\n const rows =\n typeof paragraph === 'object' ? paragraph.rows || 3 : paragraph ? 3 : 0;\n\n return (\n <div\n className={cn('ald-skeleton tw-flex tw-gap-4', className)}\n style={style}\n >\n {avatar && (\n <div\n className={cn(\n 'ald-skeleton-avatar tw-shrink-0 tw-rounded-full tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n typeof avatar === 'object' && avatar.shape === 'square'\n ? 'tw-rounded-r-50'\n : 'tw-rounded-full',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: 40,\n height: 40,\n }}\n />\n )}\n <div className=\"ald-skeleton-content tw-flex-1\">\n {title && (\n <div\n className={cn(\n 'ald-skeleton-title tw-mb-4 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: typeof title === 'object' ? title.width : '38%',\n }}\n />\n )}\n {paragraph &&\n Array.from({ length: rows }).map((_, i) => (\n <div\n key={i}\n className={cn(\n 'ald-skeleton-paragraph tw-mb-3 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: i === rows - 1 ? '61%' : '100%',\n }}\n />\n ))}\n </div>\n </div>\n );\n}\n\nfunction SkeletonNode({\n active,\n className,\n style,\n children,\n}: {\n active?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}) {\n return (\n <div\n className={cn(\n 'ald-skeleton-node tw-inline-flex tw-items-center tw-justify-center tw-rounded-r-25 tw-bg-[var(--background-neutral-subtle)]',\n active && 'tw-animate-pulse',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n ...style,\n }}\n >\n {children}\n </div>\n );\n}\n\n// Attach sub-components\nSkeleton.Button = SkeletonButton;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Input = SkeletonInput;\nSkeleton.Image = SkeletonImage;\nSkeleton.Node = SkeletonNode;\n\nexport default Skeleton;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SkeletonProps {\n active?: boolean;\n loading?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n avatar?:\n | boolean\n | {\n size?: number | 'small' | 'default' | 'large';\n shape?: 'circle' | 'square';\n };\n title?: boolean | { width?: number | string };\n paragraph?:\n | boolean\n | { rows?: number; width?: number | string | (number | string)[] };\n round?: boolean;\n}\n\n// --- Shared types for sub-components ---\n\ntype SkeletonElementSize = 'small' | 'default' | 'large';\n\ninterface SkeletonElementBaseProps {\n active?: boolean;\n size?: SkeletonElementSize;\n className?: string;\n style?: React.CSSProperties;\n}\n\ninterface SkeletonButtonProps extends SkeletonElementBaseProps {\n shape?: 'circle' | 'round' | 'square';\n block?: boolean;\n}\n\ninterface SkeletonAvatarProps extends SkeletonElementBaseProps {\n shape?: 'circle' | 'square';\n}\n\ninterface SkeletonInputProps extends SkeletonElementBaseProps {\n block?: boolean;\n}\n\ninterface SkeletonImageProps {\n active?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\n// --- Size maps ---\n\nconst BUTTON_SIZE_MAP: Record<\n SkeletonElementSize,\n { width: number; height: number }\n> = {\n small: { width: 64, height: 24 },\n default: { width: 80, height: 32 },\n large: { width: 96, height: 40 },\n};\n\nconst AVATAR_SIZE_MAP: Record<SkeletonElementSize, number> = {\n small: 24,\n default: 32,\n large: 40,\n};\n\nconst INPUT_SIZE_MAP: Record<SkeletonElementSize, number> = {\n small: 24,\n default: 32,\n large: 40,\n};\n\nconst SKELETON_BACKGROUND_COLOR = 'var(--background-neutral-surface)';\n\n// --- Sub-components ---\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n active,\n size = 'default',\n shape = 'square',\n block,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const dims = BUTTON_SIZE_MAP[size];\n\n const borderRadius =\n shape === 'circle'\n ? '50%'\n : shape === 'round'\n ? `${dims.height / 2}px`\n : '4px';\n\n return (\n <span\n className={cn(\n 'ald-skeleton-button tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n block && 'tw-block tw-w-full',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width:\n shape === 'circle' ? dims.height : block ? undefined : dims.width,\n height: dims.height,\n borderRadius,\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n active,\n size = 'default',\n shape = 'circle',\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const dim = typeof size === 'number' ? size : AVATAR_SIZE_MAP[size];\n\n return (\n <span\n className={cn(\n 'ald-skeleton-avatar tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: dim,\n height: dim,\n borderRadius: shape === 'circle' ? '50%' : '4px',\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n active,\n size = 'default',\n block,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n const height = INPUT_SIZE_MAP[size];\n\n return (\n <span\n className={cn(\n 'ald-skeleton-input tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n block && 'tw-block tw-w-full',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: block ? undefined : 200,\n height,\n borderRadius: 4,\n ...style,\n }}\n />\n );\n};\n\nconst SkeletonImage: React.FC<SkeletonImageProps> = ({\n active,\n className,\n style,\n}) => {\n const animClass = active ? 'tw-animate-pulse' : '';\n\n return (\n <span\n className={cn(\n 'ald-skeleton-image tw-flex tw-items-center tw-justify-center tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: 96,\n height: 96,\n borderRadius: 4,\n ...style,\n }}\n >\n <svg\n viewBox=\"0 0 1098 1024\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n fill=\"currentColor\"\n style={{ opacity: 0.2 }}\n >\n <path d=\"M365.714 329.143q0 45.714-32.036 77.75t-77.75 32.036-77.75-32.036-32.036-77.75 32.036-77.75 77.75-32.036 77.75 32.036 32.036 77.75zM950.857 548.571v256H146.286V694.857l182.857-182.857 91.429 91.429 292.571-292.571zM1005.714 146.286H91.429q-7.46 0-12.873 5.413T73.143 164.571v694.857q0 7.46 5.413 12.873t12.873 5.413h914.286q7.46 0 12.873-5.413t5.413-12.873V164.571q0-7.46-5.413-12.873t-12.873-5.413zm91.429 18.286v694.857q0 37.714-26.857 64.571t-64.571 26.857H91.429q-37.714 0-64.571-26.857T0 859.429V164.571q0-37.714 26.857-64.571T91.429 73.143h914.286q37.714 0 64.571 26.857t26.857 64.571z\" />\n </svg>\n </span>\n );\n};\n\n// --- Main Skeleton component ---\n\nfunction Skeleton(props: SkeletonProps) {\n const {\n active = false,\n loading = true,\n className,\n style,\n children,\n avatar,\n title = true,\n paragraph = true,\n round,\n } = props;\n\n if (!loading) {\n return <>{children}</>;\n }\n\n const animClass = active ? 'tw-animate-pulse' : '';\n const rows =\n typeof paragraph === 'object' ? paragraph.rows || 3 : paragraph ? 3 : 0;\n\n return (\n <div\n className={cn('ald-skeleton tw-flex tw-gap-4', className)}\n style={style}\n >\n {avatar && (\n <div\n className={cn(\n 'ald-skeleton-avatar tw-shrink-0 tw-rounded-full tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n typeof avatar === 'object' && avatar.shape === 'square'\n ? 'tw-rounded-r-50'\n : 'tw-rounded-full',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: 40,\n height: 40,\n }}\n />\n )}\n <div className=\"ald-skeleton-content tw-flex-1\">\n {title && (\n <div\n className={cn(\n 'ald-skeleton-title tw-mb-4 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: typeof title === 'object' ? title.width : '38%',\n }}\n />\n )}\n {paragraph &&\n Array.from({ length: rows }).map((_, i) => (\n <div\n key={i}\n className={cn(\n 'ald-skeleton-paragraph tw-mb-3 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n animClass,\n round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n width: i === rows - 1 ? '61%' : '100%',\n }}\n />\n ))}\n </div>\n </div>\n );\n}\n\nfunction SkeletonNode({\n active,\n className,\n style,\n children,\n}: {\n active?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}) {\n return (\n <div\n className={cn(\n 'ald-skeleton-node tw-inline-flex tw-items-center tw-justify-center tw-rounded-r-25 tw-bg-[var(--background-neutral-subtle)]',\n active && 'tw-animate-pulse',\n className,\n )}\n style={{\n backgroundColor: SKELETON_BACKGROUND_COLOR,\n ...style,\n }}\n >\n {children}\n </div>\n );\n}\n\n// Attach sub-components\nSkeleton.Button = SkeletonButton;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Input = SkeletonInput;\nSkeleton.Image = SkeletonImage;\nSkeleton.Node = SkeletonNode;\n\nexport default Skeleton;\n"],"mappings":";;;;AAsDA,IAAM,kBAGF;CACF,OAAO;EAAE,OAAO;EAAI,QAAQ;EAAI;CAChC,SAAS;EAAE,OAAO;EAAI,QAAQ;EAAI;CAClC,OAAO;EAAE,OAAO;EAAI,QAAQ;EAAI;CACjC;AAED,IAAM,kBAAuD;CAC3D,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,IAAM,iBAAsD;CAC1D,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,IAAM,4BAA4B;AAIlC,IAAM,kBAAiD,EACrD,QACA,OAAO,WACP,QAAQ,UACR,OACA,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,OAAO,gBAAgB;CAE7B,MAAM,eACJ,UAAU,WACN,QACA,UAAU,UACV,GAAG,KAAK,SAAS,EAAE,MACnB;AAEN,QACE,oBAAC,QAAD;EACE,WAAW,GACT,gFACA,WACA,SAAS,sBACT,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OACE,UAAU,WAAW,KAAK,SAAS,QAAQ,SAAY,KAAK;GAC9D,QAAQ,KAAK;GACb;GACA,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,kBAAiD,EACrD,QACA,OAAO,WACP,QAAQ,UACR,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,gBAAgB;AAE9D,QACE,oBAAC,QAAD;EACE,WAAW,GACT,gFACA,WACA,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO;GACP,QAAQ;GACR,cAAc,UAAU,WAAW,QAAQ;GAC3C,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,iBAA+C,EACnD,QACA,OAAO,WACP,OACA,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,SAAS,eAAe;AAE9B,QACE,oBAAC,QAAD;EACE,WAAW,GACT,+EACA,WACA,SAAS,sBACT,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO,QAAQ,SAAY;GAC3B;GACA,cAAc;GACd,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,iBAA+C,EACnD,QACA,WACA,YACI;AAGJ,QACE,oBAAC,QAAD;EACE,WAAW,GACT,yGALY,SAAS,qBAAqB,IAO1C,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO;GACP,QAAQ;GACR,cAAc;GACd,GAAG;GACJ;YAED,oBAAC,OAAD;GACE,SAAQ;GACR,OAAM;GACN,OAAM;GACN,QAAO;GACP,MAAK;GACL,OAAO,EAAE,SAAS,IAAK;aAEvB,oBAAC,QAAD,EAAM,GAAE,mlBAAolB,CAAA;GACxlB,CAAA;EACD,CAAA;;AAMX,SAAS,SAAS,OAAsB;CACtC,MAAM,EACJ,SAAS,OACT,UAAU,MACV,WACA,OACA,UACA,QACA,QAAQ,MACR,YAAY,MACZ,UACE;AAEJ,KAAI,CAAC,QACH,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAGxB,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,OACJ,OAAO,cAAc,WAAW,UAAU,QAAQ,IAAI,YAAY,IAAI;AAExE,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,UAAU;EAClD;YAFT,CAIG,UACC,oBAAC,OAAD;GACE,WAAW,GACT,4FACA,WACA,OAAO,WAAW,YAAY,OAAO,UAAU,WAC3C,oBACA,kBACL;GACD,OAAO;IACL,iBAAiB;IACjB,OAAO;IACP,QAAQ;IACT;GACD,CAAA,EAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IACE,WAAW,GACT,8EACA,WACA,QAAQ,oBAAoB,kBAC7B;IACD,OAAO;KACL,iBAAiB;KACjB,OAAO,OAAO,UAAU,WAAW,MAAM,QAAQ;KAClD;IACD,CAAA,EAEH,aACC,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG,MACnC,oBAAC,OAAD;IAEE,WAAW,GACT,kFACA,WACA,QAAQ,oBAAoB,kBAC7B;IACD,OAAO;KACL,iBAAiB;KACjB,OAAO,MAAM,OAAO,IAAI,QAAQ;KACjC;IACD,EAVK,EAUL,CACF,CACA;KACF;;;AAIV,SAAS,aAAa,EACpB,QACA,WACA,OACA,YAMC;AACD,QACE,oBAAC,OAAD;EACE,WAAW,GACT,+HACA,UAAU,oBACV,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,GAAG;GACJ;EAEA;EACG,CAAA;;AAKV,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,OAAO"}
@@ -10,5 +10,5 @@ export interface SpinProps {
10
10
  className?: string;
11
11
  style?: React.CSSProperties;
12
12
  }
13
- declare function CustomSpin(props: SpinProps): import("react/jsx-runtime").JSX.Element | null;
13
+ declare function CustomSpin(props: SpinProps): import("react/jsx-runtime").JSX.Element;
14
14
  export default CustomSpin;
@@ -2,15 +2,22 @@ import { cn } from "../lib/utils.js";
2
2
  import { cloneElement as cloneElement$1, isFragment, isReactComponent } from "../_utils/reactNode.js";
3
3
  import Icon from "./CustomIcon/index.js";
4
4
  import React, { isValidElement } from "react";
5
+ import { jsx } from "react/jsx-runtime";
5
6
  //#region src/Spin/index.tsx
6
7
  function CustomSpin(props) {
7
8
  const { size, tip, direction = "vertical", children, spinning, wrapperClassName, className, style } = props;
8
- if (!children) return Icon({
9
- size,
10
- tip,
11
- direction,
12
- spinning,
13
- className
9
+ if (!children) return /* @__PURE__ */ jsx("span", {
10
+ role: "status",
11
+ "aria-live": "polite",
12
+ "aria-busy": spinning,
13
+ "aria-label": typeof tip === "string" ? tip : "Loading",
14
+ children: Icon({
15
+ size,
16
+ tip,
17
+ direction,
18
+ spinning,
19
+ className
20
+ })
14
21
  });
15
22
  if (!isValidElement(children)) return children;
16
23
  if (isFragment(children) || isReactComponent(children)) return React.createElement("div", {
@@ -18,7 +25,11 @@ function CustomSpin(props) {
18
25
  ...style,
19
26
  position: "relative"
20
27
  },
21
- className: cn(wrapperClassName)
28
+ className: cn(wrapperClassName),
29
+ role: "status",
30
+ "aria-live": "polite",
31
+ "aria-busy": spinning,
32
+ "aria-label": typeof tip === "string" ? tip : "Loading"
22
33
  }, [children, Icon({
23
34
  size,
24
35
  tip,
@@ -33,6 +44,10 @@ function CustomSpin(props) {
33
44
  ...children.props.style
34
45
  },
35
46
  className: cn(wrapperClassName, children.props.className),
47
+ role: "status",
48
+ "aria-live": "polite",
49
+ "aria-busy": spinning,
50
+ "aria-label": typeof tip === "string" ? tip : "Loading",
36
51
  children: [children.props.children, Icon({
37
52
  size,
38
53
  tip,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Spin/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, { ReactElement, isValidElement } from 'react';\nimport {\n cloneElement,\n isFragment,\n isReactComponent,\n} from '../_utils/reactNode';\nimport CustomIcon from './CustomIcon';\n\nexport type TDirection = 'vertical' | 'horizontal';\n\nexport interface SpinProps {\n size?: 'small' | 'large' | 'middle';\n direction?: TDirection;\n children?: React.ReactElement;\n tip?: React.ReactNode;\n spinning?: boolean;\n wrapperClassName?: string;\n className?: string;\n style?: React.CSSProperties;\n}\nfunction CustomSpin(props: SpinProps) {\n const {\n size,\n tip,\n direction = 'vertical',\n children,\n spinning,\n wrapperClassName,\n className,\n style,\n } = props;\n if (!children) {\n return CustomIcon({ size, tip, direction, spinning, className });\n }\n if (!isValidElement(children)) {\n return children;\n }\n if (isFragment(children) || isReactComponent(children)) {\n return React.createElement(\n 'div',\n {\n style: { ...style, position: 'relative' },\n className: cn(wrapperClassName),\n },\n [\n children,\n CustomIcon({\n size,\n tip,\n direction,\n inContainer: true,\n spinning,\n className,\n }),\n ],\n );\n } else {\n return cloneElement(children, {\n style: {\n position: 'relative',\n ...(children as ReactElement).props.style,\n },\n className: cn(\n wrapperClassName,\n (children as ReactElement).props.className,\n ),\n children: [\n (children as ReactElement).props.children,\n CustomIcon({\n size,\n tip,\n direction,\n spinning,\n inContainer: true,\n className,\n }),\n ],\n });\n }\n}\nexport default CustomSpin;\n"],"mappings":";;;;;AAqBA,SAAS,WAAW,OAAkB;CACpC,MAAM,EACJ,MACA,KACA,YAAY,YACZ,UACA,UACA,kBACA,WACA,UACE;AACJ,KAAI,CAAC,SACH,QAAO,KAAW;EAAE;EAAM;EAAK;EAAW;EAAU;EAAW,CAAC;AAElE,KAAI,CAAC,eAAe,SAAS,CAC3B,QAAO;AAET,KAAI,WAAW,SAAS,IAAI,iBAAiB,SAAS,CACpD,QAAO,MAAM,cACX,OACA;EACE,OAAO;GAAE,GAAG;GAAO,UAAU;GAAY;EACzC,WAAW,GAAG,iBAAiB;EAChC,EACD,CACE,UACA,KAAW;EACT;EACA;EACA;EACA,aAAa;EACb;EACA;EACD,CAAC,CACH,CACF;KAED,QAAO,eAAa,UAAU;EAC5B,OAAO;GACL,UAAU;GACV,GAAI,SAA0B,MAAM;GACrC;EACD,WAAW,GACT,kBACC,SAA0B,MAAM,UAClC;EACD,UAAU,CACP,SAA0B,MAAM,UACjC,KAAW;GACT;GACA;GACA;GACA;GACA,aAAa;GACb;GACD,CAAC,CACH;EACF,CAAC"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Spin/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, { ReactElement, isValidElement } from 'react';\nimport {\n cloneElement,\n isFragment,\n isReactComponent,\n} from '../_utils/reactNode';\nimport CustomIcon from './CustomIcon';\n\nexport type TDirection = 'vertical' | 'horizontal';\n\nexport interface SpinProps {\n size?: 'small' | 'large' | 'middle';\n direction?: TDirection;\n children?: React.ReactElement;\n tip?: React.ReactNode;\n spinning?: boolean;\n wrapperClassName?: string;\n className?: string;\n style?: React.CSSProperties;\n}\nfunction CustomSpin(props: SpinProps) {\n const {\n size,\n tip,\n direction = 'vertical',\n children,\n spinning,\n wrapperClassName,\n className,\n style,\n } = props;\n if (!children) {\n return (\n <span\n role=\"status\"\n aria-live=\"polite\"\n aria-busy={spinning}\n aria-label={typeof tip === 'string' ? tip : 'Loading'}\n >\n {CustomIcon({ size, tip, direction, spinning, className })}\n </span>\n );\n }\n if (!isValidElement(children)) {\n return children;\n }\n if (isFragment(children) || isReactComponent(children)) {\n return React.createElement(\n 'div',\n {\n style: { ...style, position: 'relative' },\n className: cn(wrapperClassName),\n role: 'status',\n 'aria-live': 'polite',\n 'aria-busy': spinning,\n 'aria-label': typeof tip === 'string' ? tip : 'Loading',\n },\n [\n children,\n CustomIcon({\n size,\n tip,\n direction,\n inContainer: true,\n spinning,\n className,\n }),\n ],\n );\n } else {\n return cloneElement(children, {\n style: {\n position: 'relative',\n ...(children as ReactElement).props.style,\n },\n className: cn(\n wrapperClassName,\n (children as ReactElement).props.className,\n ),\n role: 'status',\n 'aria-live': 'polite',\n 'aria-busy': spinning,\n 'aria-label': typeof tip === 'string' ? tip : 'Loading',\n children: [\n (children as ReactElement).props.children,\n CustomIcon({\n size,\n tip,\n direction,\n spinning,\n inContainer: true,\n className,\n }),\n ],\n });\n }\n}\nexport default CustomSpin;\n"],"mappings":";;;;;;AAqBA,SAAS,WAAW,OAAkB;CACpC,MAAM,EACJ,MACA,KACA,YAAY,YACZ,UACA,UACA,kBACA,WACA,UACE;AACJ,KAAI,CAAC,SACH,QACE,oBAAC,QAAD;EACE,MAAK;EACL,aAAU;EACV,aAAW;EACX,cAAY,OAAO,QAAQ,WAAW,MAAM;YAE3C,KAAW;GAAE;GAAM;GAAK;GAAW;GAAU;GAAW,CAAC;EACrD,CAAA;AAGX,KAAI,CAAC,eAAe,SAAS,CAC3B,QAAO;AAET,KAAI,WAAW,SAAS,IAAI,iBAAiB,SAAS,CACpD,QAAO,MAAM,cACX,OACA;EACE,OAAO;GAAE,GAAG;GAAO,UAAU;GAAY;EACzC,WAAW,GAAG,iBAAiB;EAC/B,MAAM;EACN,aAAa;EACb,aAAa;EACb,cAAc,OAAO,QAAQ,WAAW,MAAM;EAC/C,EACD,CACE,UACA,KAAW;EACT;EACA;EACA;EACA,aAAa;EACb;EACA;EACD,CAAC,CACH,CACF;KAED,QAAO,eAAa,UAAU;EAC5B,OAAO;GACL,UAAU;GACV,GAAI,SAA0B,MAAM;GACrC;EACD,WAAW,GACT,kBACC,SAA0B,MAAM,UAClC;EACD,MAAM;EACN,aAAa;EACb,aAAa;EACb,cAAc,OAAO,QAAQ,WAAW,MAAM;EAC9C,UAAU,CACP,SAA0B,MAAM,UACjC,KAAW;GACT;GACA;GACA;GACA;GACA,aAAa;GACb;GACD,CAAC,CACH;EACF,CAAC"}
@@ -16,6 +16,11 @@ export interface ISwitchProps {
16
16
  'data-testid'?: string;
17
17
  /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */
18
18
  'aria-label'?: string;
19
+ 'aria-labelledby'?: string;
20
+ 'aria-describedby'?: string;
21
+ 'aria-invalid'?: React.AriaAttributes['aria-invalid'];
22
+ 'aria-required'?: React.AriaAttributes['aria-required'];
23
+ 'aria-busy'?: React.AriaAttributes['aria-busy'];
19
24
  }
20
25
  declare const Switch: React.FC<ISwitchProps>;
21
26
  export default Switch;
@@ -1,7 +1,8 @@
1
1
  import { cn } from "../lib/utils.js";
2
2
  import DisabledContext from "../ConfigProvider/DisabledContext.js";
3
3
  import SizeContext from "../ConfigProvider/sizeContext.js";
4
- import { useContext, useEffect, useState } from "react";
4
+ import { getSemanticOwnerAriaProps } from "../_utils/formControlSemanticOwner.js";
5
+ import React, { useContext, useEffect, useState } from "react";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  //#region src/Switch/index.tsx
7
8
  var switchSizeConfig = {
@@ -21,10 +22,11 @@ var switchSizeConfig = {
21
22
  thumbSize: 8
22
23
  }
23
24
  };
24
- var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children, "data-testid": dataTestid, "aria-label": ariaLabel }) => {
25
+ var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children, "data-testid": dataTestid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-busy": ariaBusy }) => {
25
26
  const contentSize = useContext(SizeContext);
26
27
  const size = customSize || contentSize || "middle";
27
28
  const [userChecked, setUserChecked] = useState(typeof checked === "undefined" ? defaultChecked : checked);
29
+ const switchLabelId = React.useId();
28
30
  const disabled = useContext(DisabledContext);
29
31
  const currentDisabled = loading ? true : customDisabled ?? disabled;
30
32
  useEffect(() => {
@@ -40,6 +42,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
40
42
  const { trackW, trackH, thumbSize } = switchSizeConfig[size];
41
43
  const thumbOffset = 2;
42
44
  const thumbTranslate = trackW - thumbSize - thumbOffset * 2;
45
+ const generatedLabelledBy = ariaLabelledBy || (!ariaLabel && children != null ? switchLabelId : void 0);
43
46
  return /* @__PURE__ */ jsxs("span", {
44
47
  className: cn(className, "ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]", `ald-switch-${size}`, currentDisabled && "tw-pointer-events-none tw-cursor-default", {
45
48
  "ald-switch-disabled": currentDisabled,
@@ -49,9 +52,15 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
49
52
  type: "button",
50
53
  role: "switch",
51
54
  "aria-checked": !!userChecked,
52
- "aria-busy": loading || void 0,
53
55
  "data-testid": dataTestid,
54
- "aria-label": ariaLabel,
56
+ ...getSemanticOwnerAriaProps({
57
+ "aria-label": ariaLabel,
58
+ "aria-labelledby": generatedLabelledBy,
59
+ "aria-describedby": ariaDescribedBy,
60
+ "aria-invalid": ariaInvalid,
61
+ "aria-required": ariaRequired,
62
+ "aria-busy": loading || ariaBusy || void 0
63
+ }),
55
64
  disabled: currentDisabled,
56
65
  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
66
  "focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
@@ -66,7 +75,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
66
75
  },
67
76
  onClick: handleClick,
68
77
  children: /* @__PURE__ */ jsx("span", {
69
- className: cn("tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200"),
78
+ className: cn("tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-sm)] tw-transition-transform tw-duration-200"),
70
79
  style: {
71
80
  width: thumbSize,
72
81
  height: thumbSize,
@@ -75,6 +84,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
75
84
  }
76
85
  })
77
86
  }), children && /* @__PURE__ */ jsx("span", {
87
+ id: generatedLabelledBy === switchLabelId ? switchLabelId : void 0,
78
88
  className: cn("ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]", size === "large" && "tw-h-5 tw-text-base tw-leading-5", size === "middle" && "tw-h-4 tw-text-sm tw-leading-4", size === "small" && "tw-h-3 tw-text-xs tw-leading-3", currentDisabled && "tw-opacity-50"),
79
89
  children
80
90
  })]
@@ -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 { getSemanticOwnerAriaProps } from '../_utils/formControlSemanticOwner';\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 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n 'aria-invalid'?: React.AriaAttributes['aria-invalid'];\n 'aria-required'?: React.AriaAttributes['aria-required'];\n 'aria-busy'?: React.AriaAttributes['aria-busy'];\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 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-busy': ariaBusy,\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 const switchLabelId = React.useId();\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 const generatedLabelledBy =\n ariaLabelledBy ||\n (!ariaLabel && children != null ? switchLabelId : undefined);\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 {...getSemanticOwnerAriaProps({\n 'aria-label': ariaLabel,\n 'aria-labelledby': generatedLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-busy': loading || ariaBusy || undefined,\n })}\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-[var(--elevation-bottom-bottom-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 id={generatedLabelledBy === switchLabelId ? switchLabelId : undefined}\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":";;;;;;;AAkCA,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,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,iBAAiB,cACjB,aAAa,eACT;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CACD,MAAM,gBAAgB,MAAM,OAAO;CAEnC,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;CAC1D,MAAM,sBACJ,mBACC,CAAC,aAAa,YAAY,OAAO,gBAAgB;AAEpD,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,GAAI,0BAA0B;IAC5B,cAAc;IACd,mBAAmB;IACnB,oBAAoB;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,aAAa,WAAW,YAAY;IACrC,CAAC;GACF,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,mJACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,IAAI,wBAAwB,gBAAgB,gBAAgB;GAC5D,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
@@ -49,7 +49,6 @@ function Header(props) {
49
49
  })]
50
50
  }) : title;
51
51
  return typeof title === "string" ? /* @__PURE__ */ jsx("div", {
52
- role: isSortable ? "columnheader" : void 0,
53
52
  "aria-sort": isSortable ? ariaSort : void 0,
54
53
  className: cn(prefixCls("th-default"), "tw-text-typography-label", prefixCls(`align-${align}`), {
55
54
  [prefixCls("td-ellipsis-content")]: ellipsis,
@@ -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 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 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,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,EAxBC,UAwBD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
@@ -118,6 +118,9 @@ function Table(props, ref) {
118
118
  const showResizer = columnSizing && !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);
119
119
  const { className: fixedClassName, style: fixedStyle } = getColumnFixedInfo(index, true);
120
120
  return /* @__PURE__ */ jsxs("div", {
121
+ role: "columnheader",
122
+ "aria-label": typeof header.column.columnDef.meta.title === "string" ? header.column.columnDef.meta.title : void 0,
123
+ "aria-sort": header.column.columnDef.meta.sortOrder === "ascend" ? "ascending" : header.column.columnDef.meta.sortOrder === "descend" ? "descending" : header.column.columnDef.meta.sortOrder !== void 0 ? "none" : void 0,
121
124
  className: cn(prefixCls("th"), fixedClassName),
122
125
  style: {
123
126
  width: header.getSize(),
@@ -150,6 +153,7 @@ function Table(props, ref) {
150
153
  virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
151
154
  }
152
155
  const headerContent = /* @__PURE__ */ jsx("div", {
156
+ role: "rowgroup",
153
157
  className: cn(prefixCls("header"), {
154
158
  [prefixCls("overflow-x")]: true,
155
159
  [prefixCls("sticky")]: isStickyWork,
@@ -204,6 +208,7 @@ function Table(props, ref) {
204
208
  } else content = _.map(allHeaderCells, (header, index) => renderHeaderCell(header, index));
205
209
  return /* @__PURE__ */ jsxs("div", {
206
210
  className: prefixCls("tr"),
211
+ role: "row",
207
212
  style: { width: totalColumnsWidth },
208
213
  children: [content, y !== void 0 && /* @__PURE__ */ jsx("div", {
209
214
  className: prefixCls("header-scroll-placeholder"),
@@ -234,6 +239,7 @@ function Table(props, ref) {
234
239
  const { className: fixedClassName, style: fixedStyle } = getColumnFixedInfo(colIndex);
235
240
  const tdContent = flexRender(cell.column.columnDef.cell, cell.getContext());
236
241
  return /* @__PURE__ */ jsx("div", {
242
+ role: "cell",
237
243
  className: cn(prefixCls("td"), fixedClassName),
238
244
  style: {
239
245
  width: cell.column.getSize(),
@@ -255,6 +261,7 @@ function Table(props, ref) {
255
261
  rowSelectionInfo.isRowSelectionEnabled
256
262
  ]);
257
263
  const bodyContent = /* @__PURE__ */ jsx("div", {
264
+ role: "rowgroup",
258
265
  className: prefixCls("body"),
259
266
  style: {
260
267
  width: totalColumnsWidth,
@@ -272,6 +279,8 @@ function Table(props, ref) {
272
279
  })
273
280
  })
274
281
  }), /* @__PURE__ */ jsx("div", {
282
+ role: "status",
283
+ "aria-live": "polite",
275
284
  "aria-invalid": "true",
276
285
  style: {
277
286
  position: "absolute",
@@ -339,6 +348,8 @@ function Table(props, ref) {
339
348
  const isRowSelected = rowSelectionInfo.isRowSelectionEnabled && rowSelectionInfo.selectedRowKeys.includes(rowId);
340
349
  const isRowSelectionDisabled = rowSelectionInfo.isRowSelectionEnabled && !!rowSelection?.getCheckboxProps?.(row.original).disabled;
341
350
  const rowNode = /* @__PURE__ */ jsx("div", {
351
+ role: "row",
352
+ "aria-rowindex": rowIndex + 2,
342
353
  "data-index": virtual ? rowData.index : rowIndex,
343
354
  className: cn(prefixCls("tr"), {
344
355
  [prefixCls("row-hover")]: rowDndInfo.draggingRowId ? void 0 : hoverRowId === rowId,
@@ -377,6 +388,7 @@ function Table(props, ref) {
377
388
  if (expandItem?.isExpanded !== true) return rowList;
378
389
  const customRow = /* @__PURE__ */ jsx("div", {
379
390
  className: cn(prefixCls("tr")),
391
+ role: "row",
380
392
  onClick: onClickRow(row.original, rowIndex),
381
393
  children: expandedRowRender(row.original, expandItem.level + 1)
382
394
  }, customExpandRowKey);
@@ -392,35 +404,38 @@ function Table(props, ref) {
392
404
  totalSize,
393
405
  isShowFooter
394
406
  ]);
395
- const tableContent = /* @__PURE__ */ jsx(CustomSpin, {
396
- spinning: !!loading,
397
- children: /* @__PURE__ */ jsxs("div", {
398
- className: prefixCls("content"),
399
- children: [
400
- headerContent,
401
- /* @__PURE__ */ jsx("div", {
402
- style: {
403
- height: tableContentHeight,
404
- position: virtual ? "relative" : void 0
405
- },
406
- className: cn(prefixCls("body-scroll"), {
407
- [prefixCls("scroll-y")]: y !== void 0,
408
- [prefixCls("scroll-hidden")]: isEmpty
409
- }),
410
- ref: bodyRef,
411
- onScroll: onBodyScroll,
412
- children: bodyContent
407
+ const tableContentBody = /* @__PURE__ */ jsxs("div", {
408
+ className: prefixCls("content"),
409
+ role: "table",
410
+ "aria-label": "Data table",
411
+ children: [
412
+ headerContent,
413
+ /* @__PURE__ */ jsx("div", {
414
+ style: {
415
+ height: tableContentHeight,
416
+ position: virtual ? "relative" : void 0
417
+ },
418
+ className: cn(prefixCls("body-scroll"), {
419
+ [prefixCls("scroll-y")]: y !== void 0,
420
+ [prefixCls("scroll-hidden")]: isEmpty
413
421
  }),
414
- isShowFooter && /* @__PURE__ */ jsx(TableFooter, {
415
- rowSelectionInfo,
416
- isShowPagination,
417
- pagination,
418
- scroll,
419
- scrollToFirstRow
420
- })
421
- ]
422
- })
422
+ ref: bodyRef,
423
+ onScroll: onBodyScroll,
424
+ children: bodyContent
425
+ }),
426
+ isShowFooter && /* @__PURE__ */ jsx(TableFooter, {
427
+ rowSelectionInfo,
428
+ isShowPagination,
429
+ pagination,
430
+ scroll,
431
+ scrollToFirstRow
432
+ })
433
+ ]
423
434
  });
435
+ const tableContent = loading ? /* @__PURE__ */ jsx(CustomSpin, {
436
+ spinning: true,
437
+ children: tableContentBody
438
+ }) : tableContentBody;
424
439
  const tableStyle = {};
425
440
  if (y) tableStyle.height = y;
426
441
  return /* @__PURE__ */ jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Table/index.tsx"],"sourcesContent":["import {\n Cell,\n Header,\n Row,\n flexRender,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { VirtualItem, useVirtualizer } from '@tanstack/react-virtual';\nimport { cn } from '../lib/utils';\nimport './table.css';\nimport _ from 'lodash';\nimport React, {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Empty, Spin } from '..';\nimport ExpandCell from './components/ExpandCell';\nimport Footer from './components/Footer';\nimport DndWrapper from './components/DndWrapper';\nimport { getRowKey, getTableColumns, prefixCls } from './helper';\nimport useExpandable, { getExpandableConfig } from './hooks/useExpandable';\nimport useFixed from './hooks/useFixed';\nimport useRowSelection from './hooks/useRowSelection';\nimport useScroll from './hooks/useScroll';\nimport { ITableProps, ITableRef } from './types';\nimport useRowDnd from './hooks/useRowDnd';\n\nconst HEADER_HEIGHT = 41;\nconst FOOTER_HEIGHT = 52;\n\nfunction TableResizeWrapper({\n children,\n onResize,\n}: {\n children: React.ReactNode;\n onResize: (width: number, height: number) => void;\n}) {\n const ref = useRef<HTMLDivElement>(null);\n const onResizeRef = useRef(onResize);\n onResizeRef.current = onResize;\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n let prevW = 0;\n let prevH = 0;\n const ro = new window.ResizeObserver(() => {\n const w = el.offsetWidth;\n const h = el.offsetHeight;\n if (w === prevW && h === prevH) return;\n prevW = w;\n prevH = h;\n onResizeRef.current(w, h);\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n return (\n <div ref={ref} style={{ height: '100%' }}>\n {children}\n </div>\n );\n}\n\nfunction Table<TDataItem extends object>(\n props: ITableProps<TDataItem>,\n ref: ForwardedRef<ITableRef>,\n) {\n const {\n data,\n bordered,\n rowKey,\n columnSizing,\n sticky,\n loading,\n pagination,\n scroll = {},\n empty: emptyComponent,\n virtual = false,\n rowClassName = () => '',\n onRowClick,\n onError,\n onSort,\n expandable,\n rowDnd,\n rowSelection,\n } = props;\n const [totalSize, setTotalSize] = useState<{\n width: number;\n height: number;\n } | null>(null);\n\n const [hoverRowId, setHoverRowId] = useState<string | null>(null);\n\n const { y } = scroll;\n const {\n containerWidth,\n onBodyScroll,\n headerRef,\n bodyRef,\n isPingLeft,\n isPingRight,\n scrollbarWidth,\n changeIsPing,\n } = useScroll({\n totalSize,\n scroll,\n });\n\n const scrollToFirstRow = useCallback(() => {\n if (!bodyRef.current) {\n return;\n }\n bodyRef.current.scrollTop = 0;\n }, [bodyRef]);\n\n useImperativeHandle(ref, () => ({\n scrollToFirstRow,\n }));\n\n const expandableInfo = useExpandable({\n expandable,\n data,\n rowKey,\n });\n const expandableConfig = getExpandableConfig(expandable);\n\n const rowSelectionInfo = useRowSelection({\n ...props,\n data: expandableInfo.data,\n isExpandable: expandableInfo.isExpandable,\n flattenData: expandableInfo.flattenData,\n });\n\n const rowDndInfo = useRowDnd({\n ...props,\n columns: rowSelectionInfo.columns,\n data: expandableInfo.data,\n });\n\n const tableColumns = useMemo(() => {\n return getTableColumns<TDataItem>({\n columns: rowDndInfo.columns,\n containerWidth: containerWidth || 0,\n onError,\n onSort,\n });\n }, [containerWidth, onError, onSort, rowDndInfo.columns]);\n\n const tableInstance = useReactTable<TDataItem>({\n columns: tableColumns,\n // 排除掉被折叠的行\n data: rowDndInfo.tableData,\n getCoreRowModel: getCoreRowModel(),\n getRowId: (row, index) => {\n return getRowKey(row, rowKey, index);\n },\n columnResizeMode: 'onChange',\n });\n\n const headerGroups = tableInstance.getHeaderGroups();\n\n const columnWidths = headerGroups[0].headers.map((header) =>\n header.getSize(),\n );\n const getColumnFixedInfo = useFixed<TDataItem>({\n columnWidths,\n tableColumns,\n y,\n scrollbarWidth,\n });\n\n // 渲染 header\n const { rows } = tableInstance.getRowModel();\n\n const isStickyWork = !!sticky && y === undefined;\n const headerStyle: CSSProperties = {};\n if (isStickyWork && _.get(sticky, 'offsetHeader')) {\n headerStyle.top = _.get(sticky, 'offsetHeader', 0);\n }\n\n const totalColumnsWidth = _.sum(columnWidths);\n\n useEffect(() => {\n // 总列宽改变时,重新计算是否需要显示固定列的阴影\n changeIsPing(totalColumnsWidth);\n }, [changeIsPing, totalColumnsWidth]);\n\n const renderHeaderCell = useCallback(\n (header: Header<TDataItem, unknown>, index: number) => {\n // 选择行的列不能拖动宽度\n const showResizer =\n columnSizing &&\n !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);\n const { className: fixedClassName, style: fixedStyle } =\n getColumnFixedInfo(index, true);\n return (\n <div\n className={cn(prefixCls('th'), fixedClassName)}\n style={{ width: header.getSize(), ...fixedStyle }}\n key={header.id}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {showResizer && (\n <div\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n className={cn(prefixCls('resizer'), {\n [prefixCls('self-resizing')]: header.column.getIsResizing(),\n })}\n />\n )}\n </div>\n );\n },\n [columnSizing, rowSelectionInfo, getColumnFixedInfo],\n );\n\n const visibleColumns = tableInstance.getVisibleLeafColumns();\n\n const columnVirtualizer = useVirtualizer({\n count: tableColumns.length,\n estimateSize: (index: number) => visibleColumns[index].getSize(),\n getScrollElement: () => bodyRef.current,\n horizontal: true,\n overscan: 5,\n });\n\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right\n let virtualPaddingLeft: number | undefined;\n let virtualPaddingRight: number | undefined;\n\n if (columnVirtualizer && virtualColumns?.length) {\n virtualPaddingLeft = virtualColumns[0]?.start ?? 0;\n virtualPaddingRight =\n columnVirtualizer.getTotalSize() -\n (virtualColumns[virtualColumns.length - 1]?.end ?? 0);\n }\n\n const headerContent = (\n <div\n className={cn(prefixCls('header'), {\n [prefixCls('overflow-x')]: true,\n [prefixCls('sticky')]: isStickyWork,\n [prefixCls('resizing')]:\n tableInstance.getState().columnSizingInfo.isResizingColumn,\n })}\n ref={headerRef}\n style={headerStyle}\n >\n {_.map(headerGroups, (headerGroup) => {\n const allHeaderCells = headerGroup.headers;\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n const middleVirtualColumns: VirtualItem[] = [];\n // 将固定列单独拎出来,固定列不受列虚拟化影响,必须要渲染\n const leftFixedColumns: {\n header: Header<TDataItem, unknown>;\n index: number;\n }[] = [];\n const rightFixedColumns: {\n header: Header<TDataItem, unknown>;\n index: number;\n }[] = [];\n let content: React.ReactNode | null = null;\n if (virtual) {\n _.forEach(allHeaderCells, (header, index) => {\n const fixedInfo = getColumnFixedInfo(index);\n if (fixedInfo.fixed === 'left') {\n leftFixedColumns.push({ header, index });\n }\n if (fixedInfo.fixed === 'right') {\n rightFixedColumns.push({ header, index });\n }\n });\n\n _.forEach(virtualColumns, (virtualColumn) => {\n const colIndex = virtualColumn.index;\n const fixedInfo = getColumnFixedInfo(colIndex);\n if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {\n middleVirtualColumns.push(virtualColumn);\n }\n });\n content = (\n <>\n {virtualPaddingLeft ? (\n //fake empty column to the left for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-left')}\n style={{ width: virtualPaddingLeft }}\n />\n ) : null}\n {leftFixedColumns.map(({ header, index }) => {\n return renderHeaderCell(header, index);\n })}\n {_.map(middleVirtualColumns, (virtualColumn) => {\n const header = allHeaderCells[virtualColumn.index];\n return renderHeaderCell(header, virtualColumn.index);\n })}\n {rightFixedColumns.map(({ header, index }) => {\n return renderHeaderCell(header, index);\n })}\n {virtualPaddingRight ? (\n //fake empty column to the right for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-right')}\n style={{ width: virtualPaddingRight }}\n />\n ) : null}\n </>\n );\n } else {\n content = _.map(allHeaderCells, (header, index) =>\n renderHeaderCell(header, index),\n );\n }\n\n return (\n <div\n className={prefixCls('tr')}\n key={headerGroup.id}\n style={{ width: totalColumnsWidth }}\n >\n {content}\n {y !== undefined && (\n <div\n className={prefixCls('header-scroll-placeholder')}\n style={{ flexBasis: scrollbarWidth }}\n />\n )}\n </div>\n );\n })}\n </div>\n );\n\n const onClickRow = useCallback(\n (rowData: TDataItem, rowIndex: number) => () => {\n if (typeof onRowClick !== 'function') {\n return;\n }\n if (window.getSelection()?.toString().length !== 0) {\n // 防止选择文本时触发 onRowClick\n return;\n }\n onRowClick(rowData, rowIndex);\n },\n [onRowClick],\n );\n\n const isShowPagination = !!(\n pagination &&\n (pagination.total > pagination.pageSize || pagination.showSizeChanger)\n );\n const isShowRowSelection = rowSelectionInfo.isShowRowSelectionInFooter;\n\n const isShowFooter = isShowPagination || isShowRowSelection;\n\n // 空态切换 size 的阈值\n const EMPTY_SMALL_SIZE_HEIGHT = 436;\n const isSmallEmpty = totalSize && totalSize.height < EMPTY_SMALL_SIZE_HEIGHT;\n\n const isEmpty = rows.length === 0 && !loading;\n\n const rowVirtualizer = useVirtualizer({\n count: rows.length,\n estimateSize: () => 48, // estimate row height for accurate scrollbar dragging\n // 没有测量出 bodyRef.current 的高度时,返回 null,避免虚拟化器从 DOM 获取异常高度\n getScrollElement: () => (totalSize ? bodyRef.current : null),\n // measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement:\n typeof window !== 'undefined' &&\n navigator.userAgent.indexOf('Firefox') === -1\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n });\n\n const tableRows = virtual ? rowVirtualizer.getVirtualItems() : rows;\n\n const renderBodyCell = useCallback(\n (row: Row<TDataItem>, cell: Cell<TDataItem, unknown>, colIndex: number) => {\n const { className: fixedClassName, style: fixedStyle } =\n getColumnFixedInfo(colIndex);\n const tdContent = flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n );\n return (\n <div\n className={cn(prefixCls('td'), fixedClassName)}\n key={cell.id}\n style={{ width: cell.column.getSize(), ...fixedStyle }}\n >\n {expandableInfo.isExpandable &&\n colIndex === (rowSelectionInfo.isRowSelectionEnabled ? 1 : 0) ? (\n <ExpandCell\n expandableInfo={expandableInfo}\n expandable={expandable}\n data={row.original}\n rowKey={rowKey}\n >\n {tdContent}\n </ExpandCell>\n ) : (\n tdContent\n )}\n </div>\n );\n },\n [\n expandableInfo,\n expandable,\n rowKey,\n getColumnFixedInfo,\n rowSelectionInfo.isRowSelectionEnabled,\n ],\n );\n\n // 渲染 body\n const bodyContent = (\n <div\n className={prefixCls('body')}\n style={{\n width: totalColumnsWidth,\n height: virtual\n ? totalSize\n ? rowVirtualizer.getTotalSize()\n : 0\n : 'auto',\n }}\n >\n {isEmpty ? (\n <div style={{ width: totalSize?.width }}>\n <div style={{ visibility: 'hidden' }}>\n {emptyComponent || (\n <div\n className={cn(prefixCls('empty'), {\n [prefixCls('empty-small')]: isSmallEmpty,\n })}\n >\n <Empty\n image={isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH}\n size={isSmallEmpty ? 'small' : undefined}\n />\n </div>\n )}\n </div>\n <div\n aria-invalid=\"true\"\n style={{\n position: 'absolute',\n top: 40,\n left: 0,\n right: 0,\n bottom: 0,\n }}\n >\n {emptyComponent || (\n <div\n className={cn(prefixCls('empty'), {\n [prefixCls('empty-small')]: isSmallEmpty,\n })}\n >\n <Empty\n image={isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH}\n size={isSmallEmpty ? 'small' : undefined}\n />\n </div>\n )}\n </div>\n </div>\n ) : (\n _.reduce<Row<TDataItem> | VirtualItem, React.ReactNode[]>(\n tableRows,\n (rowList, rowData, rowIndex) => {\n const row = virtual\n ? rows[rowData.index]\n : (rowData as Row<TDataItem>);\n const allRowCells = row.getVisibleCells();\n\n let content: React.ReactNode | null = null;\n // 将固定列单独拎出来,固定列不受列虚拟化影响,必须要渲染\n const leftFixedColumns: {\n cell: Cell<TDataItem, unknown>;\n index: number;\n }[] = [];\n const rightFixedColumns: {\n cell: Cell<TDataItem, unknown>;\n index: number;\n }[] = [];\n\n if (virtual) {\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n const middleVirtualColumns: VirtualItem[] = [];\n\n _.forEach(allRowCells, (cell, index) => {\n const fixedInfo = getColumnFixedInfo(index);\n if (fixedInfo.fixed === 'left') {\n leftFixedColumns.push({ cell, index });\n }\n if (fixedInfo.fixed === 'right') {\n rightFixedColumns.push({ cell, index });\n }\n });\n\n _.forEach(virtualColumns, (virtualColumn) => {\n const colIndex = virtualColumn.index;\n const fixedInfo = getColumnFixedInfo(colIndex);\n if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {\n middleVirtualColumns.push(virtualColumn);\n }\n });\n content = (\n <>\n {virtualPaddingLeft ? (\n //fake empty column to the left for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-left')}\n style={{ width: virtualPaddingLeft }}\n />\n ) : null}\n {leftFixedColumns.map(({ cell, index }) => {\n return renderBodyCell(row, cell, index);\n })}\n {middleVirtualColumns.map((virtualColumn) => {\n const colIndex = virtualColumn.index;\n const cell = allRowCells[colIndex];\n return renderBodyCell(row, cell, colIndex);\n })}\n {rightFixedColumns.map(({ cell, index }) => {\n return renderBodyCell(row, cell, index);\n })}\n {virtualPaddingRight ? (\n //fake empty column to the right for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-right')}\n style={{ width: virtualPaddingRight }}\n />\n ) : null}\n </>\n );\n } else {\n content = allRowCells.map((cell, index) =>\n renderBodyCell(row, cell, index),\n );\n }\n const rowId = row.id;\n const isRowSelected =\n rowSelectionInfo.isRowSelectionEnabled &&\n rowSelectionInfo.selectedRowKeys.includes(rowId);\n const isRowSelectionDisabled =\n rowSelectionInfo.isRowSelectionEnabled &&\n !!rowSelection?.getCheckboxProps?.(row.original).disabled;\n\n const rowNode = (\n <div\n key={rowId}\n data-index={virtual ? (rowData as VirtualItem).index : rowIndex}\n className={cn(\n prefixCls('tr'),\n {\n // 需要用 state 的原因是,存在固定列的情况,左右侧的固定列在 dom 结构上不在同一个 tr 上,所以不能用 css 的 :hover 来实现\n // 当拖拽行时,不显示 hover 状态\n [prefixCls('row-hover')]: rowDndInfo.draggingRowId\n ? undefined\n : hoverRowId === rowId,\n [prefixCls('row-dragging')]:\n rowDndInfo.draggingRowId === rowId,\n [prefixCls('row-selected')]: isRowSelected,\n [prefixCls('row-selection-disabled')]:\n isRowSelectionDisabled,\n [prefixCls('no-border-tr')]:\n isShowPagination && rowIndex === rows.length - 1,\n },\n rowClassName(row.original, rowIndex),\n )}\n ref={(node) => {\n // 只在虚拟滚动模式下才测量行高度,避免非虚拟模式下的不必要重渲染\n if (virtual) {\n rowVirtualizer.measureElement(node);\n }\n\n // 如果启用了行拖拽,则设置行引用\n if (rowDnd && node) {\n const rowRef = rowDndInfo.getRowRef(row.original, rowIndex);\n if (rowRef) {\n rowRef.current = node;\n }\n }\n }}\n onClick={onClickRow(row.original, rowIndex)}\n onMouseEnter={() => {\n if (!isRowSelectionDisabled) {\n setHoverRowId(rowId);\n }\n }}\n onMouseLeave={() => setHoverRowId(null)}\n style={\n virtual\n ? {\n position: 'absolute',\n transform: `translateY(${\n (rowData as VirtualItem).start\n }px)`,\n }\n : {}\n }\n >\n {content}\n </div>\n );\n rowList.push(rowNode);\n\n // 渲染额外展开的行\n const expandItem = expandableInfo.expandItemMap[rowId];\n const customExpandRowKey =\n expandableInfo.isExpandable && expandItem?.customExpandRowKey;\n const hasCustomExpandRowKey = !!customExpandRowKey;\n if (hasCustomExpandRowKey) {\n // 在该行的下面追加自定义展开行\n const expandedRowRender = expandableConfig.expandedRowRender;\n if (typeof expandedRowRender !== 'function') {\n console.error('expandedRowRender must be a function');\n return rowList;\n }\n if (expandItem?.isExpanded !== true) {\n return rowList;\n }\n const customRow = (\n <div\n key={customExpandRowKey}\n className={cn(prefixCls('tr'))}\n onClick={onClickRow(row.original, rowIndex)}\n >\n {expandedRowRender(row.original, expandItem.level + 1)}\n </div>\n );\n rowList.push(customRow);\n }\n return rowList;\n },\n [],\n )\n )}\n </div>\n );\n\n const tableContentHeight = useMemo(() => {\n return y && totalSize\n ? totalSize.height - HEADER_HEIGHT - (isShowFooter ? FOOTER_HEIGHT : 0)\n : 'auto';\n }, [y, totalSize, isShowFooter]);\n\n const tableContent = (\n <Spin spinning={!!loading}>\n <div className={prefixCls('content')}>\n {headerContent}\n <div\n style={{\n height: tableContentHeight,\n position: virtual ? 'relative' : undefined,\n }}\n className={cn(prefixCls('body-scroll'), {\n [prefixCls('scroll-y')]: y !== undefined,\n [prefixCls('scroll-hidden')]: isEmpty,\n })}\n ref={bodyRef}\n onScroll={onBodyScroll}\n >\n {bodyContent}\n </div>\n {isShowFooter && (\n <Footer\n rowSelectionInfo={rowSelectionInfo}\n isShowPagination={isShowPagination}\n pagination={pagination}\n scroll={scroll}\n scrollToFirstRow={scrollToFirstRow}\n />\n )}\n </div>\n </Spin>\n );\n\n const tableStyle: CSSProperties = {};\n if (y) {\n tableStyle.height = y;\n }\n\n return (\n <div\n className={cn(prefixCls('container'), {\n [prefixCls('bordered')]: bordered,\n })}\n style={tableStyle}\n >\n <TableResizeWrapper\n onResize={(w, h) =>\n setTotalSize((prev) => {\n if (prev && prev.width === w && prev.height === h) return prev;\n return { width: w, height: h };\n })\n }\n >\n <div\n className={cn(prefixCls('main'), {\n [prefixCls('overflow-hidden')]: !!y,\n [prefixCls('ping-left')]: isPingLeft,\n [prefixCls('ping-right')]: isPingRight,\n })}\n >\n {rowDnd ? <DndWrapper>{tableContent}</DndWrapper> : tableContent}\n </div>\n </TableResizeWrapper>\n </div>\n );\n}\n\nexport default forwardRef(Table) as <TDataItem extends object>(\n props: ITableProps<TDataItem> & {\n ref?: React.ForwardedRef<ITableRef>;\n },\n) => ReturnType<typeof Table>;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Table/index.tsx"],"sourcesContent":["import {\n Cell,\n Header,\n Row,\n flexRender,\n getCoreRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { VirtualItem, useVirtualizer } from '@tanstack/react-virtual';\nimport { cn } from '../lib/utils';\nimport './table.css';\nimport _ from 'lodash';\nimport React, {\n CSSProperties,\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Empty, Spin } from '..';\nimport ExpandCell from './components/ExpandCell';\nimport Footer from './components/Footer';\nimport DndWrapper from './components/DndWrapper';\nimport { getRowKey, getTableColumns, prefixCls } from './helper';\nimport useExpandable, { getExpandableConfig } from './hooks/useExpandable';\nimport useFixed from './hooks/useFixed';\nimport useRowSelection from './hooks/useRowSelection';\nimport useScroll from './hooks/useScroll';\nimport { ITableColumn, ITableProps, ITableRef } from './types';\nimport useRowDnd from './hooks/useRowDnd';\n\nconst HEADER_HEIGHT = 41;\nconst FOOTER_HEIGHT = 52;\n\nfunction TableResizeWrapper({\n children,\n onResize,\n}: {\n children: React.ReactNode;\n onResize: (width: number, height: number) => void;\n}) {\n const ref = useRef<HTMLDivElement>(null);\n const onResizeRef = useRef(onResize);\n onResizeRef.current = onResize;\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n let prevW = 0;\n let prevH = 0;\n const ro = new window.ResizeObserver(() => {\n const w = el.offsetWidth;\n const h = el.offsetHeight;\n if (w === prevW && h === prevH) return;\n prevW = w;\n prevH = h;\n onResizeRef.current(w, h);\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n return (\n <div ref={ref} style={{ height: '100%' }}>\n {children}\n </div>\n );\n}\n\nfunction Table<TDataItem extends object>(\n props: ITableProps<TDataItem>,\n ref: ForwardedRef<ITableRef>,\n) {\n const {\n data,\n bordered,\n rowKey,\n columnSizing,\n sticky,\n loading,\n pagination,\n scroll = {},\n empty: emptyComponent,\n virtual = false,\n rowClassName = () => '',\n onRowClick,\n onError,\n onSort,\n expandable,\n rowDnd,\n rowSelection,\n } = props;\n const [totalSize, setTotalSize] = useState<{\n width: number;\n height: number;\n } | null>(null);\n\n const [hoverRowId, setHoverRowId] = useState<string | null>(null);\n\n const { y } = scroll;\n const {\n containerWidth,\n onBodyScroll,\n headerRef,\n bodyRef,\n isPingLeft,\n isPingRight,\n scrollbarWidth,\n changeIsPing,\n } = useScroll({\n totalSize,\n scroll,\n });\n\n const scrollToFirstRow = useCallback(() => {\n if (!bodyRef.current) {\n return;\n }\n bodyRef.current.scrollTop = 0;\n }, [bodyRef]);\n\n useImperativeHandle(ref, () => ({\n scrollToFirstRow,\n }));\n\n const expandableInfo = useExpandable({\n expandable,\n data,\n rowKey,\n });\n const expandableConfig = getExpandableConfig(expandable);\n\n const rowSelectionInfo = useRowSelection({\n ...props,\n data: expandableInfo.data,\n isExpandable: expandableInfo.isExpandable,\n flattenData: expandableInfo.flattenData,\n });\n\n const rowDndInfo = useRowDnd({\n ...props,\n columns: rowSelectionInfo.columns,\n data: expandableInfo.data,\n });\n\n const tableColumns = useMemo(() => {\n return getTableColumns<TDataItem>({\n columns: rowDndInfo.columns,\n containerWidth: containerWidth || 0,\n onError,\n onSort,\n });\n }, [containerWidth, onError, onSort, rowDndInfo.columns]);\n\n const tableInstance = useReactTable<TDataItem>({\n columns: tableColumns,\n // 排除掉被折叠的行\n data: rowDndInfo.tableData,\n getCoreRowModel: getCoreRowModel(),\n getRowId: (row, index) => {\n return getRowKey(row, rowKey, index);\n },\n columnResizeMode: 'onChange',\n });\n\n const headerGroups = tableInstance.getHeaderGroups();\n\n const columnWidths = headerGroups[0].headers.map((header) =>\n header.getSize(),\n );\n const getColumnFixedInfo = useFixed<TDataItem>({\n columnWidths,\n tableColumns,\n y,\n scrollbarWidth,\n });\n\n // 渲染 header\n const { rows } = tableInstance.getRowModel();\n\n const isStickyWork = !!sticky && y === undefined;\n const headerStyle: CSSProperties = {};\n if (isStickyWork && _.get(sticky, 'offsetHeader')) {\n headerStyle.top = _.get(sticky, 'offsetHeader', 0);\n }\n\n const totalColumnsWidth = _.sum(columnWidths);\n\n useEffect(() => {\n // 总列宽改变时,重新计算是否需要显示固定列的阴影\n changeIsPing(totalColumnsWidth);\n }, [changeIsPing, totalColumnsWidth]);\n\n const renderHeaderCell = useCallback(\n (header: Header<TDataItem, unknown>, index: number) => {\n // 选择行的列不能拖动宽度\n const showResizer =\n columnSizing &&\n !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);\n const { className: fixedClassName, style: fixedStyle } =\n getColumnFixedInfo(index, true);\n return (\n <div\n role=\"columnheader\"\n aria-label={\n typeof (header.column.columnDef.meta as ITableColumn).title ===\n 'string'\n ? ((header.column.columnDef.meta as ITableColumn).title as string)\n : undefined\n }\n aria-sort={\n (header.column.columnDef.meta as ITableColumn).sortOrder ===\n 'ascend'\n ? 'ascending'\n : (header.column.columnDef.meta as ITableColumn).sortOrder ===\n 'descend'\n ? 'descending'\n : (header.column.columnDef.meta as ITableColumn).sortOrder !==\n undefined\n ? 'none'\n : undefined\n }\n className={cn(prefixCls('th'), fixedClassName)}\n style={{ width: header.getSize(), ...fixedStyle }}\n key={header.id}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {showResizer && (\n <div\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n className={cn(prefixCls('resizer'), {\n [prefixCls('self-resizing')]: header.column.getIsResizing(),\n })}\n />\n )}\n </div>\n );\n },\n [columnSizing, rowSelectionInfo, getColumnFixedInfo],\n );\n\n const visibleColumns = tableInstance.getVisibleLeafColumns();\n\n const columnVirtualizer = useVirtualizer({\n count: tableColumns.length,\n estimateSize: (index: number) => visibleColumns[index].getSize(),\n getScrollElement: () => bodyRef.current,\n horizontal: true,\n overscan: 5,\n });\n\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right\n let virtualPaddingLeft: number | undefined;\n let virtualPaddingRight: number | undefined;\n\n if (columnVirtualizer && virtualColumns?.length) {\n virtualPaddingLeft = virtualColumns[0]?.start ?? 0;\n virtualPaddingRight =\n columnVirtualizer.getTotalSize() -\n (virtualColumns[virtualColumns.length - 1]?.end ?? 0);\n }\n\n const headerContent = (\n <div\n role=\"rowgroup\"\n className={cn(prefixCls('header'), {\n [prefixCls('overflow-x')]: true,\n [prefixCls('sticky')]: isStickyWork,\n [prefixCls('resizing')]:\n tableInstance.getState().columnSizingInfo.isResizingColumn,\n })}\n ref={headerRef}\n style={headerStyle}\n >\n {_.map(headerGroups, (headerGroup) => {\n const allHeaderCells = headerGroup.headers;\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n const middleVirtualColumns: VirtualItem[] = [];\n // 将固定列单独拎出来,固定列不受列虚拟化影响,必须要渲染\n const leftFixedColumns: {\n header: Header<TDataItem, unknown>;\n index: number;\n }[] = [];\n const rightFixedColumns: {\n header: Header<TDataItem, unknown>;\n index: number;\n }[] = [];\n let content: React.ReactNode | null = null;\n if (virtual) {\n _.forEach(allHeaderCells, (header, index) => {\n const fixedInfo = getColumnFixedInfo(index);\n if (fixedInfo.fixed === 'left') {\n leftFixedColumns.push({ header, index });\n }\n if (fixedInfo.fixed === 'right') {\n rightFixedColumns.push({ header, index });\n }\n });\n\n _.forEach(virtualColumns, (virtualColumn) => {\n const colIndex = virtualColumn.index;\n const fixedInfo = getColumnFixedInfo(colIndex);\n if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {\n middleVirtualColumns.push(virtualColumn);\n }\n });\n content = (\n <>\n {virtualPaddingLeft ? (\n //fake empty column to the left for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-left')}\n style={{ width: virtualPaddingLeft }}\n />\n ) : null}\n {leftFixedColumns.map(({ header, index }) => {\n return renderHeaderCell(header, index);\n })}\n {_.map(middleVirtualColumns, (virtualColumn) => {\n const header = allHeaderCells[virtualColumn.index];\n return renderHeaderCell(header, virtualColumn.index);\n })}\n {rightFixedColumns.map(({ header, index }) => {\n return renderHeaderCell(header, index);\n })}\n {virtualPaddingRight ? (\n //fake empty column to the right for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-right')}\n style={{ width: virtualPaddingRight }}\n />\n ) : null}\n </>\n );\n } else {\n content = _.map(allHeaderCells, (header, index) =>\n renderHeaderCell(header, index),\n );\n }\n\n return (\n <div\n className={prefixCls('tr')}\n role=\"row\"\n key={headerGroup.id}\n style={{ width: totalColumnsWidth }}\n >\n {content}\n {y !== undefined && (\n <div\n className={prefixCls('header-scroll-placeholder')}\n style={{ flexBasis: scrollbarWidth }}\n />\n )}\n </div>\n );\n })}\n </div>\n );\n\n const onClickRow = useCallback(\n (rowData: TDataItem, rowIndex: number) => () => {\n if (typeof onRowClick !== 'function') {\n return;\n }\n if (window.getSelection()?.toString().length !== 0) {\n // 防止选择文本时触发 onRowClick\n return;\n }\n onRowClick(rowData, rowIndex);\n },\n [onRowClick],\n );\n\n const isShowPagination = !!(\n pagination &&\n (pagination.total > pagination.pageSize || pagination.showSizeChanger)\n );\n const isShowRowSelection = rowSelectionInfo.isShowRowSelectionInFooter;\n\n const isShowFooter = isShowPagination || isShowRowSelection;\n\n // 空态切换 size 的阈值\n const EMPTY_SMALL_SIZE_HEIGHT = 436;\n const isSmallEmpty = totalSize && totalSize.height < EMPTY_SMALL_SIZE_HEIGHT;\n\n const isEmpty = rows.length === 0 && !loading;\n\n const rowVirtualizer = useVirtualizer({\n count: rows.length,\n estimateSize: () => 48, // estimate row height for accurate scrollbar dragging\n // 没有测量出 bodyRef.current 的高度时,返回 null,避免虚拟化器从 DOM 获取异常高度\n getScrollElement: () => (totalSize ? bodyRef.current : null),\n // measure dynamic row height, except in firefox because it measures table border height incorrectly\n measureElement:\n typeof window !== 'undefined' &&\n navigator.userAgent.indexOf('Firefox') === -1\n ? (element) => element?.getBoundingClientRect().height\n : undefined,\n overscan: 5,\n });\n\n const tableRows = virtual ? rowVirtualizer.getVirtualItems() : rows;\n\n const renderBodyCell = useCallback(\n (row: Row<TDataItem>, cell: Cell<TDataItem, unknown>, colIndex: number) => {\n const { className: fixedClassName, style: fixedStyle } =\n getColumnFixedInfo(colIndex);\n const tdContent = flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n );\n return (\n <div\n role=\"cell\"\n className={cn(prefixCls('td'), fixedClassName)}\n key={cell.id}\n style={{ width: cell.column.getSize(), ...fixedStyle }}\n >\n {expandableInfo.isExpandable &&\n colIndex === (rowSelectionInfo.isRowSelectionEnabled ? 1 : 0) ? (\n <ExpandCell\n expandableInfo={expandableInfo}\n expandable={expandable}\n data={row.original}\n rowKey={rowKey}\n >\n {tdContent}\n </ExpandCell>\n ) : (\n tdContent\n )}\n </div>\n );\n },\n [\n expandableInfo,\n expandable,\n rowKey,\n getColumnFixedInfo,\n rowSelectionInfo.isRowSelectionEnabled,\n ],\n );\n\n // 渲染 body\n const bodyContent = (\n <div\n role=\"rowgroup\"\n className={prefixCls('body')}\n style={{\n width: totalColumnsWidth,\n height: virtual\n ? totalSize\n ? rowVirtualizer.getTotalSize()\n : 0\n : 'auto',\n }}\n >\n {isEmpty ? (\n <div style={{ width: totalSize?.width }}>\n <div style={{ visibility: 'hidden' }}>\n {emptyComponent || (\n <div\n className={cn(prefixCls('empty'), {\n [prefixCls('empty-small')]: isSmallEmpty,\n })}\n >\n <Empty\n image={isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH}\n size={isSmallEmpty ? 'small' : undefined}\n />\n </div>\n )}\n </div>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-invalid=\"true\"\n style={{\n position: 'absolute',\n top: 40,\n left: 0,\n right: 0,\n bottom: 0,\n }}\n >\n {emptyComponent || (\n <div\n className={cn(prefixCls('empty'), {\n [prefixCls('empty-small')]: isSmallEmpty,\n })}\n >\n <Empty\n image={isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH}\n size={isSmallEmpty ? 'small' : undefined}\n />\n </div>\n )}\n </div>\n </div>\n ) : (\n _.reduce<Row<TDataItem> | VirtualItem, React.ReactNode[]>(\n tableRows,\n (rowList, rowData, rowIndex) => {\n const row = virtual\n ? rows[rowData.index]\n : (rowData as Row<TDataItem>);\n const allRowCells = row.getVisibleCells();\n\n let content: React.ReactNode | null = null;\n // 将固定列单独拎出来,固定列不受列虚拟化影响,必须要渲染\n const leftFixedColumns: {\n cell: Cell<TDataItem, unknown>;\n index: number;\n }[] = [];\n const rightFixedColumns: {\n cell: Cell<TDataItem, unknown>;\n index: number;\n }[] = [];\n\n if (virtual) {\n const virtualColumns = columnVirtualizer.getVirtualItems();\n\n const middleVirtualColumns: VirtualItem[] = [];\n\n _.forEach(allRowCells, (cell, index) => {\n const fixedInfo = getColumnFixedInfo(index);\n if (fixedInfo.fixed === 'left') {\n leftFixedColumns.push({ cell, index });\n }\n if (fixedInfo.fixed === 'right') {\n rightFixedColumns.push({ cell, index });\n }\n });\n\n _.forEach(virtualColumns, (virtualColumn) => {\n const colIndex = virtualColumn.index;\n const fixedInfo = getColumnFixedInfo(colIndex);\n if (fixedInfo.fixed !== 'left' && fixedInfo.fixed !== 'right') {\n middleVirtualColumns.push(virtualColumn);\n }\n });\n content = (\n <>\n {virtualPaddingLeft ? (\n //fake empty column to the left for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-left')}\n style={{ width: virtualPaddingLeft }}\n />\n ) : null}\n {leftFixedColumns.map(({ cell, index }) => {\n return renderBodyCell(row, cell, index);\n })}\n {middleVirtualColumns.map((virtualColumn) => {\n const colIndex = virtualColumn.index;\n const cell = allRowCells[colIndex];\n return renderBodyCell(row, cell, colIndex);\n })}\n {rightFixedColumns.map(({ cell, index }) => {\n return renderBodyCell(row, cell, index);\n })}\n {virtualPaddingRight ? (\n //fake empty column to the right for virtualization scroll padding\n <div\n className={prefixCls('virtual-padding-right')}\n style={{ width: virtualPaddingRight }}\n />\n ) : null}\n </>\n );\n } else {\n content = allRowCells.map((cell, index) =>\n renderBodyCell(row, cell, index),\n );\n }\n const rowId = row.id;\n const isRowSelected =\n rowSelectionInfo.isRowSelectionEnabled &&\n rowSelectionInfo.selectedRowKeys.includes(rowId);\n const isRowSelectionDisabled =\n rowSelectionInfo.isRowSelectionEnabled &&\n !!rowSelection?.getCheckboxProps?.(row.original).disabled;\n\n const rowNode = (\n <div\n key={rowId}\n role=\"row\"\n aria-rowindex={rowIndex + 2}\n data-index={virtual ? (rowData as VirtualItem).index : rowIndex}\n className={cn(\n prefixCls('tr'),\n {\n // 需要用 state 的原因是,存在固定列的情况,左右侧的固定列在 dom 结构上不在同一个 tr 上,所以不能用 css 的 :hover 来实现\n // 当拖拽行时,不显示 hover 状态\n [prefixCls('row-hover')]: rowDndInfo.draggingRowId\n ? undefined\n : hoverRowId === rowId,\n [prefixCls('row-dragging')]:\n rowDndInfo.draggingRowId === rowId,\n [prefixCls('row-selected')]: isRowSelected,\n [prefixCls('row-selection-disabled')]:\n isRowSelectionDisabled,\n [prefixCls('no-border-tr')]:\n isShowPagination && rowIndex === rows.length - 1,\n },\n rowClassName(row.original, rowIndex),\n )}\n ref={(node) => {\n // 只在虚拟滚动模式下才测量行高度,避免非虚拟模式下的不必要重渲染\n if (virtual) {\n rowVirtualizer.measureElement(node);\n }\n\n // 如果启用了行拖拽,则设置行引用\n if (rowDnd && node) {\n const rowRef = rowDndInfo.getRowRef(row.original, rowIndex);\n if (rowRef) {\n rowRef.current = node;\n }\n }\n }}\n onClick={onClickRow(row.original, rowIndex)}\n onMouseEnter={() => {\n if (!isRowSelectionDisabled) {\n setHoverRowId(rowId);\n }\n }}\n onMouseLeave={() => setHoverRowId(null)}\n style={\n virtual\n ? {\n position: 'absolute',\n transform: `translateY(${\n (rowData as VirtualItem).start\n }px)`,\n }\n : {}\n }\n >\n {content}\n </div>\n );\n rowList.push(rowNode);\n\n // 渲染额外展开的行\n const expandItem = expandableInfo.expandItemMap[rowId];\n const customExpandRowKey =\n expandableInfo.isExpandable && expandItem?.customExpandRowKey;\n const hasCustomExpandRowKey = !!customExpandRowKey;\n if (hasCustomExpandRowKey) {\n // 在该行的下面追加自定义展开行\n const expandedRowRender = expandableConfig.expandedRowRender;\n if (typeof expandedRowRender !== 'function') {\n console.error('expandedRowRender must be a function');\n return rowList;\n }\n if (expandItem?.isExpanded !== true) {\n return rowList;\n }\n const customRow = (\n <div\n key={customExpandRowKey}\n className={cn(prefixCls('tr'))}\n role=\"row\"\n onClick={onClickRow(row.original, rowIndex)}\n >\n {expandedRowRender(row.original, expandItem.level + 1)}\n </div>\n );\n rowList.push(customRow);\n }\n return rowList;\n },\n [],\n )\n )}\n </div>\n );\n\n const tableContentHeight = useMemo(() => {\n return y && totalSize\n ? totalSize.height - HEADER_HEIGHT - (isShowFooter ? FOOTER_HEIGHT : 0)\n : 'auto';\n }, [y, totalSize, isShowFooter]);\n\n const tableContentBody = (\n <div className={prefixCls('content')} role=\"table\" aria-label=\"Data table\">\n {headerContent}\n <div\n style={{\n height: tableContentHeight,\n position: virtual ? 'relative' : undefined,\n }}\n className={cn(prefixCls('body-scroll'), {\n [prefixCls('scroll-y')]: y !== undefined,\n [prefixCls('scroll-hidden')]: isEmpty,\n })}\n ref={bodyRef}\n onScroll={onBodyScroll}\n >\n {bodyContent}\n </div>\n {isShowFooter && (\n <Footer\n rowSelectionInfo={rowSelectionInfo}\n isShowPagination={isShowPagination}\n pagination={pagination}\n scroll={scroll}\n scrollToFirstRow={scrollToFirstRow}\n />\n )}\n </div>\n );\n\n const tableContent = loading ? (\n <Spin spinning>{tableContentBody}</Spin>\n ) : (\n tableContentBody\n );\n\n const tableStyle: CSSProperties = {};\n if (y) {\n tableStyle.height = y;\n }\n\n return (\n <div\n className={cn(prefixCls('container'), {\n [prefixCls('bordered')]: bordered,\n })}\n style={tableStyle}\n >\n <TableResizeWrapper\n onResize={(w, h) =>\n setTotalSize((prev) => {\n if (prev && prev.width === w && prev.height === h) return prev;\n return { width: w, height: h };\n })\n }\n >\n <div\n className={cn(prefixCls('main'), {\n [prefixCls('overflow-hidden')]: !!y,\n [prefixCls('ping-left')]: isPingLeft,\n [prefixCls('ping-right')]: isPingRight,\n })}\n >\n {rowDnd ? <DndWrapper>{tableContent}</DndWrapper> : tableContent}\n </div>\n </TableResizeWrapper>\n </div>\n );\n}\n\nexport default forwardRef(Table) as <TDataItem extends object>(\n props: ITableProps<TDataItem> & {\n ref?: React.ForwardedRef<ITableRef>;\n },\n) => ReturnType<typeof Table>;\n"],"mappings":"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"}
@@ -276,6 +276,7 @@ function Tabs(props) {
276
276
  role: "tabpanel",
277
277
  id: getPanelId(item.key),
278
278
  "aria-labelledby": getTabId(item.key),
279
+ "aria-hidden": !isActive || void 0,
279
280
  children: item.children
280
281
  }, item.key);
281
282
  })