refactor(types): derive SemanticName from semantic maps (#56389)

* refactor(types): derive SemanticName from semantic maps

* update type

components/alert/Alert.tsx

@@ -20,14 +20,7 @@ export interface AlertRef {
   nativeElement: HTMLDivElement;
 }
 
-export type AlertSemanticName =
-  | 'root'
-  | 'icon'
-  | 'section'
-  | 'title'
-  | 'description'
-  | 'actions'
-  | 'close';
+export type AlertSemanticName = keyof AlertSemanticClassNames & keyof AlertSemanticStyles;
 
 export type AlertSemanticClassNames = {
   root?: string;

components/anchor/Anchor.tsx

@@ -52,7 +52,7 @@ interface Section {
   top: number;
 }
 
-export type SemanticName = 'root' | 'item' | 'itemTitle' | 'indicator';
+export type SemanticName = keyof AnchorSemanticClassNames & keyof AnchorSemanticStyles;
 
 export type AnchorSemanticClassNames = {
   root?: string;

components/auto-complete/AutoComplete.tsx

@@ -20,7 +20,8 @@ import type {
 } from '../select';
 import Select from '../select';
 
-export type AutoCompleteSemanticName = 'root' | 'prefix' | 'input' | 'placeholder' | 'content';
+export type AutoCompleteSemanticName = keyof AutoCompleteSemanticClassNames &
+  keyof AutoCompleteSemanticStyles;
 
 export type AutoCompleteSemanticClassNames = {
   root?: string;

components/breadcrumb/Breadcrumb.tsx

@@ -52,7 +52,8 @@ export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
 export type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
-export type BreadcrumbSemanticName = 'root' | 'item' | 'separator';
+export type BreadcrumbSemanticName = keyof BreadcrumbSemanticClassNames &
+  keyof BreadcrumbSemanticStyles;
 
 export type BreadcrumbSemanticClassNames = {
   root?: string;

components/button/Button.tsx

@@ -29,7 +29,7 @@ import Compact from './style/compact';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
-export type ButtonSemanticName = 'root' | 'icon' | 'content';
+export type ButtonSemanticName = keyof ButtonSemanticClassNames & keyof ButtonSemanticStyles;
 
 export type ButtonSemanticClassNames = {
   root?: string;

components/card/CardMeta.tsx

@@ -5,7 +5,7 @@ import { useMergeSemantic } from '../_util/hooks';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import { useComponentConfig } from '../config-provider/context';
 
-export type SemanticName = 'root' | 'section' | 'avatar' | 'title' | 'description';
+export type SemanticName = keyof CardMetaSemanticClassNames & keyof CardMetaSemanticStyles;
 
 export type CardMetaSemanticClassNames = {
   root?: string;

components/collapse/Collapse.tsx

@@ -20,7 +20,7 @@ import useStyle from './style';
 
 export type ExpandIconPlacement = 'start' | 'end';
 
-export type CollapseSemanticName = 'root' | 'header' | 'title' | 'body' | 'icon';
+export type CollapseSemanticName = keyof CollapseSemanticClassNames & keyof CollapseSemanticStyles;
 
 export type CollapseSemanticClassNames = {
   root?: string;

components/empty/index.tsx

@@ -17,7 +17,7 @@ export interface TransferLocale {
   description: string;
 }
 
-export type EmptySemanticName = 'root' | 'image' | 'description' | 'footer';
+export type EmptySemanticName = keyof EmptySemanticClassNames & keyof EmptySemanticStyles;
 
 export type EmptySemanticClassNames = {
   root?: string;

components/form/Form.tsx

@@ -37,7 +37,7 @@ export type FormItemLayout = 'horizontal' | 'vertical';
 
 export type { ScrollFocusOptions };
 
-export type FormSemanticName = 'root' | 'label' | 'content';
+export type FormSemanticName = keyof FormSemanticClassNames & keyof FormSemanticStyles;
 
 export type FormSemanticClassNames = {
   root?: string;

components/image/index.tsx

@@ -47,7 +47,7 @@ export interface CompositionImage<P> extends React.FC<P> {
   PreviewGroup: typeof PreviewGroup;
 }
 
-export type ImageSemanticName = 'root' | 'image' | 'cover';
+export type ImageSemanticName = keyof ImageSemanticClassNames & keyof ImageSemanticStyles;
 
 export type ImageSemanticClassNames = {
   root?: string;

components/masonry/Masonry.tsx

@@ -28,7 +28,7 @@ export type Gap = number | undefined;
 
 export type Key = string | number;
 
-export type SemanticName = 'root' | 'item';
+export type SemanticName = keyof MasonrySemanticClassNames & keyof MasonrySemanticStyles;
 
 type MasonrySemanticClassNames = {
   root?: string;

components/menu/menu.tsx

@@ -34,7 +34,7 @@ const MENU_COMPONENTS: GetProp<RcMenuProps, '_internalComponents'> = {
   divider: Divider,
 };
 
-export type SemanticName = 'root' | 'itemTitle' | 'list' | 'item' | 'itemIcon' | 'itemContent';
+export type SemanticName = keyof MenuSemanticClassNames & keyof MenuSemanticStyles;
 
 export type MenuSemanticClassNames = {
   root?: string;
@@ -54,7 +54,7 @@ export type MenuSemanticStyles = {
   itemContent?: React.CSSProperties;
 };
 
-export type SubMenuSemanticName = 'item' | 'itemTitle' | 'list' | 'itemContent' | 'itemIcon';
+export type SubMenuSemanticName = keyof SubMenuSemanticClassNames & keyof SubMenuSemanticStyles;
 
 export type SubMenuSemanticClassNames = {
   item?: string;

components/message/interface.ts

@@ -4,7 +4,7 @@ import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks'
 
 export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
 
-export type SemanticName = 'root' | 'icon' | 'content';
+export type SemanticName = keyof MessageSemanticClassNames & keyof MessageSemanticStyles;
 
 export type MessageSemanticClassNames = {
   root?: string;

components/notification/interface.ts

@@ -19,7 +19,8 @@ export type NotificationPlacement = (typeof NotificationPlacements)[number];
 
 export type IconType = 'success' | 'info' | 'error' | 'warning';
 
-export type NotificationSemantic = 'root' | 'title' | 'description' | 'actions' | 'icon';
+export type NotificationSemanticName = keyof NotificationSemanticClassNames &
+  keyof NotificationSemanticStyles;
 
 export type NotificationSemanticClassNames = {
   root?: string;

components/pagination/Pagination.tsx

@@ -25,7 +25,7 @@ import useStyle from './style';
 import BorderedStyle from './style/bordered';
 import useShowSizeChanger from './useShowSizeChanger';
 
-export type SemanticName = 'root' | 'item';
+export type SemanticName = keyof PaginationSemanticClassNames & keyof PaginationSemanticStyles;
 
 export type PaginationSemanticName = SemanticName;
 

components/popover/index.tsx

@@ -15,7 +15,6 @@ import type {
   AbstractTooltipProps,
   TooltipRef,
   TooltipSemanticClassNames,
-  SemanticName as TooltipSemanticName,
   TooltipSemanticStyles,
 } from '../tooltip';
 import Tooltip from '../tooltip';
@@ -24,7 +23,7 @@ import PurePanel, { Overlay } from './PurePanel';
 // CSSINJS
 import useStyle from './style';
 
-export type PopoverSemanticName = TooltipSemanticName | 'title' | 'content';
+export type PopoverSemanticName = keyof PopoverSemanticClassNames & keyof PopoverSemanticStyles;
 
 export type PopoverSemanticClassNames = TooltipSemanticClassNames & {
   title?: string;

components/progress/progress.tsx

@@ -17,7 +17,7 @@ import Steps from './Steps';
 import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 
-export type SemanticName = 'root' | 'body' | 'rail' | 'track' | 'indicator';
+export type SemanticName = keyof ProgressSemanticClassNames & keyof ProgressSemanticStyles;
 
 export type ProgressSemanticClassNames = {
   root?: string;

components/qr-code/interface.ts

@@ -20,7 +20,7 @@ export type StatusRenderInfo = {
   onRefresh?: () => void;
 };
 
-export type QRCodeSemanticName = 'root' | 'cover';
+export type QRCodeSemanticName = keyof QRCodeSemanticClassNames & keyof QRCodeSemanticStyles;
 
 export type QRCodeSemanticClassNames = {
   root?: string;

components/segmented/index.tsx

@@ -20,7 +20,7 @@ import useStyle from './style';
 
 export type { SegmentedValue } from '@rc-component/segmented';
 
-export type SemanticName = 'root' | 'icon' | 'label' | 'item';
+export type SemanticName = keyof SegmentedSemanticClassNames & keyof SegmentedSemanticStyles;
 
 export type SegmentedSemanticClassNames = {
   root?: string;

components/select/index.tsx

@@ -71,6 +71,8 @@ export interface InternalSelectProps<
   styles?: SelectSemanticStyles & { popup?: PopupSemanticStyles };
 }
 
+export type SelectSemanticName = keyof SelectSemanticClassNames & keyof SelectSemanticStyles;
+
 export type SelectSemanticClassNames = {
   root?: string;
   prefix?: string;

components/skeleton/Element.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
 
-export type ElementSemanticName = 'root' | 'content';
+export type ElementSemanticName = keyof ElementSemanticClassNames & keyof ElementSemanticStyles;
 
 export type ElementSemanticClassNames = {
   root?: string;

components/skeleton/Skeleton.tsx

@@ -20,7 +20,7 @@ import Title from './Title';
 /* This only for skeleton internal. */
 type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
 
-export type SemanticName = 'root' | 'header' | 'section' | 'avatar' | 'title' | 'paragraph';
+export type SemanticName = keyof SkeletonSemanticClassNames & keyof SkeletonSemanticStyles;
 
 export type SkeletonSemanticClassNames = {
   root?: string;

components/slider/index.tsx

@@ -19,7 +19,7 @@ import useRafLock from './useRafLock';
 
 export type SliderMarks = RcSliderProps['marks'];
 
-export type SemanticName = 'root' | 'tracks' | 'track' | 'rail' | 'handle';
+export type SemanticName = keyof SliderSemanticClassNames & keyof SliderSemanticStyles;
 
 export type SliderSemanticClassNames = {
   root?: string;

components/splitter/interface.ts

@@ -1,7 +1,7 @@
 import type { Orientation, SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import type { ShowCollapsibleIconMode } from './SplitBar';
 
-export type SplitterSemanticName = 'root' | 'panel';
+export type SplitterSemanticName = keyof SplitterSemanticClassNames & keyof SplitterSemanticStyles;
 
 export type SplitterSemanticClassNames = {
   root?: string;

components/statistic/Statistic.tsx

@@ -12,7 +12,7 @@ import StatisticNumber from './Number';
 import useStyle from './style';
 import type { FormatConfig, valueType } from './utils';
 
-export type SemanticName = 'root' | 'content' | 'title' | 'header' | 'prefix' | 'suffix';
+export type SemanticName = keyof StatisticSemanticClassNames & keyof StatisticSemanticStyles;
 
 export type StatisticSemanticClassNames = {
   root?: string;

components/table/InternalTable.tsx

@@ -68,7 +68,7 @@ export type { ColumnsType, TablePaginationConfig };
 
 const EMPTY_LIST: AnyObject[] = [];
 
-export type TableSemanticName = 'root' | 'section' | 'title' | 'footer' | 'content';
+export type TableSemanticName = keyof TableSemanticClassNames & keyof TableSemanticStyles;
 
 export type TableSemanticClassNames = {
   root?: string;

components/tabs/index.tsx

@@ -30,7 +30,7 @@ export type TabPlacement = 'top' | 'end' | 'bottom' | 'start';
 
 export type { TabPaneProps };
 
-export type TabsSemanticName = 'root' | 'item' | 'indicator' | 'content' | 'header';
+export type TabsSemanticName = keyof TabsSemanticClassNames & keyof TabsSemanticStyles;
 
 export type TabsSemanticClassNames = {
   root?: string;

components/tag/CheckableTagGroup.tsx

@@ -30,7 +30,7 @@ interface CheckableTagGroupMultipleProps<CheckableTagValue> {
   onChange?: (value: CheckableTagValue[]) => void;
 }
 
-export type SemanticName = 'root' | 'item';
+export type SemanticName = keyof TagGroupSemanticClassNames & keyof TagGroupSemanticStyles;
 
 export type TagGroupSemanticClassNames = {
   root?: string;

components/tag/index.tsx

@@ -22,7 +22,7 @@ import StatusCmp from './style/statusCmp';
 export type { CheckableTagProps } from './CheckableTag';
 export type { CheckableTagGroupProps } from './CheckableTagGroup';
 
-export type TagSemanticName = 'root' | 'icon' | 'content';
+export type TagSemanticName = keyof TagSemanticClassNames & keyof TagSemanticStyles;
 
 export type TagSemanticClassNames = {
   root?: string;

components/time-picker/index.tsx

@@ -32,7 +32,8 @@ export type TimePickerSemanticStyles = {
   suffix?: React.CSSProperties;
 };
 
-export type PanelSemanticName = 'root' | 'content' | 'item' | 'footer' | 'container';
+export type PanelSemanticName = keyof TimePickerPanelSemanticClassNames &
+  keyof TimePickerPanelSemanticStyles;
 
 export type TimePickerPanelSemanticClassNames = {
   root?: string;

components/tooltip/index.tsx

@@ -86,7 +86,7 @@ interface LegacyTooltipProps
   afterOpenChange?: RcTooltipProps['afterVisibleChange'];
 }
 
-export type SemanticName = 'root' | 'container' | 'arrow';
+export type SemanticName = keyof TooltipSemanticClassNames & keyof TooltipSemanticStyles;
 
 export type TooltipSemanticClassNames = {
   root?: string;

components/tree/Tree.tsx

@@ -112,7 +112,7 @@ interface DraggableConfig {
   nodeDraggable?: DraggableFn;
 }
 
-export type TreeSemanticName = 'root' | 'item' | 'itemIcon' | 'itemTitle';
+export type TreeSemanticName = keyof TreeSemanticClassNames & keyof TreeSemanticStyles;
 
 export type TreeSemanticClassNames = {
   root?: string;

components/upload/interface.ts

@@ -85,9 +85,10 @@ export type ItemRender<T = any> = (
 ) => React.ReactNode;
 
 type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
+
 type BeforeUploadValueType = void | boolean | string | Blob | File;
 
-export type SemanticName = 'root' | 'list' | 'item';
+export type SemanticName = keyof UploadSemanticClassNames & keyof UploadSemanticStyles;
 
 export type UploadSemanticClassNames = {
   root?: string;