diff --git a/.dumi/hooks/useLocale.ts b/.dumi/hooks/useLocale.ts index 328e204946..9bc0dc4d48 100644 --- a/.dumi/hooks/useLocale.ts +++ b/.dumi/hooks/useLocale.ts @@ -9,6 +9,6 @@ export default function useLocale( localeMap?: LocaleMap, ): [Record, 'cn' | 'en'] { const { id } = useDumiLocale(); - const localeType = id === 'zh-CN' ? 'cn' : ('en' as const); - return [localeMap?.[localeType]!, localeType]; + const localeType = id === 'zh-CN' ? 'cn' : 'en'; + return [localeMap?.[localeType], localeType]; } diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index 27fb5518e9..fae6731cff 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -40,20 +40,40 @@ function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) { return null; } - const data = tokens.map((name) => { - const meta = tokenMeta[name]; + const data = tokens + .sort((token1, token2) => { + const hasColor1 = token1.toLowerCase().includes('color'); + const hasColor2 = token2.toLowerCase().includes('color'); - return { - name, - desc: lang === 'cn' ? meta.desc : meta.descEn, - type: meta.type, - value: (defaultToken as any)[name], - }; - }); + if (hasColor1 && !hasColor2) { + return -1; + } + + if (!hasColor1 && hasColor2) { + return 1; + } + + return token1 < token2 ? -1 : 1; + }) + .map((name) => { + const meta = tokenMeta[name]; + + if (!meta) { + return null; + } + + return { + name, + desc: lang === 'cn' ? meta.desc : meta.descEn, + type: meta.type, + value: (defaultToken as any)[name], + }; + }) + .filter((info) => info); return ( // Reuse `.markdown` style -
+

{title}

 @@ -82,12 +102,32 @@ export interface ComponentTokenTableProps { } function ComponentTokenTable({ component }: ComponentTokenTableProps) { - const { global: globalTokens = [], component: componentTokens = [] } = tokenData[component] || {}; + const [mergedGlobalTokens] = React.useMemo(() => { + const globalTokenSet = new Set(); + let componentTokens: Record = {}; + + component.split(',').forEach((comp) => { + const { global: globalTokens = [], component: singleComponentTokens = [] } = + tokenData[comp] || {}; + + globalTokens.forEach((token: string) => { + globalTokenSet.add(token); + }); + + componentTokens = { + ...componentTokens, + ...singleComponentTokens, + }; + }); + + return [Array.from(globalTokenSet), componentTokens]; + }, [component]); return ( <> - - + {/* Component Token 先不展示 */} + {/* */} + ); } diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index f37f8ed871..2f6c06568c 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -102,7 +102,7 @@ const CodePreviewer: React.FC = (props) => { style, compact, background, - filePath, + filename, version, clientOnly, } = props; @@ -333,10 +333,10 @@ createRoot(document.getElementById('container')).render(); ...dependencies, react: '^18.0.0', 'react-dom': '^18.0.0', - 'react-scripts': '^4.0.0', + 'react-scripts': '^5.0.0', }, devDependencies: { - typescript: '^4.0.5', + typescript: '^5.0.2', }, scripts: { start: 'react-scripts start', @@ -399,7 +399,7 @@ createRoot(document.getElementById('container')).render(); {localizedTitle} - } filename={filePath} /> + } filename={filename} />
{introChildren}
diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index b02bcf5865..1266a87094 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -38,7 +38,6 @@ const GlobalDemoStyles: React.FC = () => { } .code-box-demo { - overflow: auto; background-color: ${token.colorBgContainer}; border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0; } diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 9114587856..7bdc0e8859 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -45,7 +45,7 @@ const useStyle = () => { border-bottom: none; & > ${antCls}-menu-item, & > ${antCls}-menu-submenu { - min-width: (40px + 12px * 2); + min-width: ${40 + 12 * 2}px; height: ${headerHeight}px; padding-right: 12px; padding-left: 12px; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 28fbb17143..394a563827 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -209,7 +209,11 @@ const Header: React.FC = () => { .replace(/\/$/, ''); return; } - window.location.href = currentUrl.replace(window.location.origin, url); + + // Mirror url must have `/`, we add this for compatible + const urlObj = new URL(currentUrl.replace(window.location.origin, url)); + urlObj.pathname = `${urlObj.pathname.replace(/\/$/, '')}/`; + window.location.href = urlObj.href; }, []); const onLangChange = useCallback(() => { diff --git a/.github/workflows/chatgpt-cr.yml b/.github/workflows/chatgpt-cr.yml index 0b605d08f8..c849485054 100644 --- a/.github/workflows/chatgpt-cr.yml +++ b/.github/workflows/chatgpt-cr.yml @@ -11,6 +11,7 @@ on: jobs: test: runs-on: ubuntu-latest + if: github.event.pull_request.head.ref != 'feature' && github.event.pull_request.head.ref != 'master' && github.event.pull_request.head.ref != 'next' && github.event.pull_request.head.ref != 'master-merge-feature' && github.event.pull_request.head.ref != 'feature-merge-master' && github.event.pull_request.head.ref != 'next-merge-master' && github.event.pull_request.head.ref != 'next-merge-feature' steps: - uses: anc95/ChatGPT-CodeReview@main env: diff --git a/.github/workflows/issues-similarity-analysis.yml b/.github/workflows/issues-similarity-analysis.yml deleted file mode 100644 index 4da16e7f2f..0000000000 --- a/.github/workflows/issues-similarity-analysis.yml +++ /dev/null @@ -1,22 +0,0 @@ -name: Issues Similarity Analysis - -on: - issues: - types: [opened, edited] - -permissions: - contents: read - -jobs: - similarity-analysis: - permissions: - issues: write # for actions-cool/issues-similarity-analysis to create issue comments - runs-on: ubuntu-latest - steps: - - name: analysis - uses: actions-cool/issues-similarity-analysis@v1 - with: - filter-threshold: 0.5 - title-excludes: '' - comment-title: '### You may look for issues:' - comment-body: '${index}. ${similarity} #${number}' diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 420a5ab00b..c7df39318f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,31 @@ timeline: true --- +## 5.3.3 + +`2023-3-28` + +- Menu + - 🐞 Fix Menu `items` not accept `key` issue. [#41434](https://github.com/ant-design/ant-design/pull/41434) [@Yuiai01](https://github.com/Yuiai01) + - 🐞 Fix submenu themes being overwritten when using `getPopupContainer` to select the main Menu. [#41465](https://github.com/ant-design/ant-design/pull/41465) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fix Table filter do not persist filter status when filter dropdown is visible. [#41445](https://github.com/ant-design/ant-design/pull/41445) [@ablakey](https://github.com/ablakey) +- 🐞 Fix Modal using `useModal` is not transparent and prefers user settings. [#41422](https://github.com/ant-design/ant-design/pull/41422) [@luo3house](https://github.com/luo3house) +- Form + - 🐞 Fix the problem that the Form validation state does not change in sequence. [#41412](https://github.com/ant-design/ant-design/pull/41412) [@kiner-tang](https://github.com/kiner-tang) + - 💄 Fix Form component layout exceptions when set props `layout="inline"`. [#41140](https://github.com/ant-design/ant-design/pull/41140) [@itkui](https://github.com/itkui) +- 💄 Fix ConfigProvider `nonce` not working on CSS-in-JS style. [#41482](https://github.com/ant-design/ant-design/pull/41482) +- 💄 Fix Pagination when `size=small`, pagination button active, previous page next page button hover and active styles are lost. [#41462](https://github.com/ant-design/ant-design/pull/41462) [#41458](https://github.com/ant-design/ant-design/pull/41458) +- 💄 Fix the style problem that the bottom border of the Tabs component overlaps with other borders. [#41381](https://github.com/ant-design/ant-design/pull/41381) +- 💄 Fix Dropdown.Button down icon size issue. [#41501](https://github.com/ant-design/ant-design/pull/41501) +- TypeScript + - 🐞 Fix the incorrect type definition of Breadcrumb.Item `menu`. [#41373](https://github.com/ant-design/ant-design/pull/41373) + - 🤖 Optimize Grid Col type. [#41453](https://github.com/ant-design/ant-design/pull/41453) [@vaakian](https://github.com/vaakian) + - 🤖 Optimize Table `resetPagination` type. [#41415](https://github.com/ant-design/ant-design/pull/41415) + - 🤖 Optimize TreeSelect `InternalTreeSelect` type. [#41386](https://github.com/ant-design/ant-design/pull/41386) [@Andarist](https://github.com/Andarist) +- Locales + - 🇮🇷 Improve DatePicker `fa_IR` translation. [#41455](https://github.com/ant-design/ant-design/pull/41455) [@ds1371dani](https://github.com/ds1371dani) + - 🇸🇪 Add the missing content of `sv_SE` language. [#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok) + ## 5.3.2 `2023-03-20` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ccb6ae5523..387aede5b4 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,31 @@ timeline: true --- +## 5.3.3 + +`2023-3-28` + +- Menu + - 🐞 修复 Menu `items` 没有使用传入的 `key` 的问题。[#41434](https://github.com/ant-design/ant-design/pull/41434) [@Yuiai01](https://github.com/Yuiai01) + - 🐞 修复 Menu 使用 `getPopupContainer` 选择主菜单时子菜单主题被覆盖。[#41465](https://github.com/ant-design/ant-design/pull/41465) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 Table 过滤器未保持状态当筛选下拉框展示时。[#41445](https://github.com/ant-design/ant-design/pull/41445) [@ablakey](https://github.com/ablakey) +- 🐞 修复 Modal 使用 `useModal` 未透传并优先选择用户设定。[#41422](https://github.com/ant-design/ant-design/pull/41422) [@luo3house](https://github.com/luo3house) +- Form + - 🐞 修复 Form 验证状态不按照顺序改变的问题。[#41412](https://github.com/ant-design/ant-design/pull/41412) [@kiner-tang](https://github.com/kiner-tang) + - 💄 修复 Form 组件 `layout="inline"` 时组件标题与表单项布局异常换行问题。[#41140](https://github.com/ant-design/ant-design/pull/41140) [@itkui](https://github.com/itkui) +- 💄 修复 ConfigProvider `nonce` 对 CSS-in-JS 样式不生效的问题。[#41482](https://github.com/ant-design/ant-design/pull/41482) +- 💄 修复 Pagination `size=small` 时，分页按钮 active、上一页下一页按钮 hover 和 active 样式丢失。[#41462](https://github.com/ant-design/ant-design/pull/41462) [#41458](https://github.com/ant-design/ant-design/pull/41458) +- 💄 修复 Tabs 组件下边框与其他边框叠加的样式问题。[#41381](https://github.com/ant-design/ant-design/pull/41381) +- 💄 修复 Dropdown.Button down 图标尺寸问题。[#41501](https://github.com/ant-design/ant-design/pull/41501) +- TypeScript + - 🐞 修复 Breadcrumb.Item `menu` 类型定义不正确的问题。[#41373](https://github.com/ant-design/ant-design/pull/41373) + - 🤖 优化 Grid Col 类型提示。[#41453](https://github.com/ant-design/ant-design/pull/41453) [@vaakian](https://github.com/vaakian) + - 🤖 优化 Table `resetPagination` 类型提示。[#41415](https://github.com/ant-design/ant-design/pull/41415) + - 🤖 优化 TreeSelect `InternalTreeSelect` 类型提示。[#41386](https://github.com/ant-design/ant-design/pull/41386) [@Andarist](https://github.com/Andarist) +- 国际化 + - 🇮🇷 完善 DatePicker `fa_IR` 翻译。[#41455](https://github.com/ant-design/ant-design/pull/41455) [@ds1371dani](https://github.com/ds1371dani) + - 🇸🇪 完善 `sv_SE` 语言缺失内容。[#41424](https://github.com/ant-design/ant-design/pull/41424) [@dhalenok](https://github.com/dhalenok) + ## 5.3.2 `2023-03-20` diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 7541f966c6..3469aa1326 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -68,3 +68,7 @@ We recommend using the items form instead. | href | The target of hyperlink | string | | | | target | Specifies where to display the linked URL | string | | | | title | The content of hyperlink | ReactNode | | | + +## Design Token + + diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index e0f1c2a85a..0ca1258018 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -69,3 +69,7 @@ group: | href | 锚点链接 | string | - | | | target | 该属性指定在何处显示链接的资源 | string | - | | | title | 文字内容 | ReactNode | - | | + +## Design Token + + diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 4022cac320..1b387573bd 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -1,8 +1,8 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { genPresetColor, resetComponent } from '../../style'; +import { genComponentStyleHook, mergeToken, genPresetColor } from '../../theme/internal'; +import { resetComponent } from '../../style'; interface BadgeToken extends FullToken<'Badge'> { badgeFontHeight: number; diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 1ec40badf5..3fc4bbacf9 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,9 +1,9 @@ import DownOutlined from '@ant-design/icons/DownOutlined'; import * as React from 'react'; +import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; import type { DropdownProps } from '../dropdown/dropdown'; import Dropdown from '../dropdown/dropdown'; -import warning from '../_util/warning'; import BreadcrumbSeparator from './BreadcrumbSeparator'; export interface SeparatorType { @@ -11,8 +11,9 @@ export interface SeparatorType { key?: React.Key; } -type MenuType = DropdownProps['menu']; +type MenuType = NonNullable; interface MenuItem { + key?: React.Key; title?: React.ReactNode; label?: React.ReactNode; path?: string; @@ -68,10 +69,10 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => { }; if (menu) { - const { items, ...menuProps } = menu! || {}; + const { items, ...menuProps } = menu || {}; mergeDropDownProps.menu = { ...menuProps, - items: items?.map(({ title, label, path, ...itemProps }, index) => { + items: items?.map(({ key, title, label, path, ...itemProps }, index) => { let mergedLabel: React.ReactNode = label ?? title; if (path) { @@ -80,7 +81,7 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => { return { ...itemProps, - key: index, + key: key ?? index, label: mergedLabel as string, }; }), diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx index 64d5412ec5..bf07b881b9 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx +++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx @@ -291,6 +291,21 @@ describe('Breadcrumb', () => { expect(asFragment().firstChild).toMatchSnapshot(); }); + it('should support Breadcrumb.Item customized menu items key', () => { + const key = 'test-key'; + const { container } = render( + + + test-item + + , + ); + + const item = container.querySelector('.ant-dropdown-menu-item'); + + expect(item?.getAttribute('data-menu-id')?.endsWith(key)).toBeTruthy(); + }); + it('should support string `0` and number `0`', () => { const { container } = render( { const item = await wrapper.findByText('test'); expect(item).toHaveClass(testClassName); }); + + it('Breadcrumb.Item menu type', () => { + expect().toBeTruthy(); + }); }); diff --git a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap index 07c3b3c7ad..d996b4f930 100644 --- a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -317,7 +317,7 @@ exports[`renders components/breadcrumb/demo/overlay.tsx extend context correctly >
  • { mode="vertical" theme="dark" items={items} + getPopupContainer={(node) => node.parentNode as HTMLElement} /> ); diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index cbf077f6d1..6818bde654 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -142,3 +142,7 @@ Menu will render fully item in flex layout and then collapse it. You need tell f ``` + +## Design Token + + diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 397bc35b98..525777fdb6 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -142,3 +142,7 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于 ``` + +## Design Token + + diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index 520d32d8d8..5827030bd7 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -442,10 +442,15 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul return []; } - const { colorBgElevated, colorPrimary, colorError, colorErrorHover, colorTextLightSolid } = - token; - - const { controlHeightLG, fontSize } = token; + const { + colorBgElevated, + colorPrimary, + colorError, + colorErrorHover, + colorTextLightSolid, + controlHeightLG, + fontSize, + } = token; const menuArrowSize = (fontSize / 7) * 5; diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx index cd375a182b..deaca02cf8 100644 --- a/components/menu/style/theme.tsx +++ b/components/menu/style/theme.tsx @@ -46,7 +46,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation } = token; return { - [`${componentCls}-${themeSuffix}`]: { + [`${componentCls}-${themeSuffix}, ${componentCls}-${themeSuffix} > ${componentCls}`]: { color: colorItemText, background: colorItemBg, diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx index c4b5ff77da..0867fe06ad 100644 --- a/components/modal/__tests__/hook.test.tsx +++ b/components/modal/__tests__/hook.test.tsx @@ -350,4 +350,21 @@ describe('Modal.hook', () => { expect(document.body.querySelector('.bamboo')?.textContent).toEqual('好的'); }); + + it('it should call forwarded afterClose', () => { + const afterClose = jest.fn(); + const Demo = () => { + const [modal, contextHolder] = Modal.useModal(); + React.useEffect(() => { + modal.confirm({ title: 'Confirm', afterClose }); + }, []); + return contextHolder; + }; + + render(); + const btns = document.body.querySelectorAll('.ant-btn'); + fireEvent.click(btns[btns.length - 1]); + + expect(afterClose).toHaveBeenCalledTimes(1); + }); }); diff --git a/components/modal/useModal/HookModal.tsx b/components/modal/useModal/HookModal.tsx index f2528b58d6..d1e699fdc5 100644 --- a/components/modal/useModal/HookModal.tsx +++ b/components/modal/useModal/HookModal.tsx @@ -16,7 +16,7 @@ export interface HookModalRef { } const HookModal: React.ForwardRefRenderFunction = ( - { afterClose, config }, + { afterClose: hookAfterClose, config }, ref, ) => { const [open, setOpen] = React.useState(true); @@ -26,6 +26,11 @@ const HookModal: React.ForwardRefRenderFunction = const prefixCls = getPrefixCls('modal'); const rootPrefixCls = getPrefixCls(); + const afterClose = () => { + hookAfterClose(); + innerConfig.afterClose?.(); + }; + const close = (...args: any[]) => { setOpen(false); const triggerCancel = args.some((param) => param && param.triggerCancel); @@ -59,7 +64,7 @@ const HookModal: React.ForwardRefRenderFunction = okText={ innerConfig.okText || (mergedOkCancel ? contextLocale?.okText : contextLocale?.justOkText) } - direction={direction} + direction={innerConfig.direction || direction} cancelText={innerConfig.cancelText || contextLocale?.cancelText} /> ); diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 611acc09db..2b90f531fe 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -55,49 +55,51 @@ const Pagination: React.FC = ({ const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger; - const getIconsProps = () => { + const iconsProps = React.useMemo>(() => { const ellipsis = •••; - let prevIcon = ( + const prevIcon = ( ); - let nextIcon = ( + const nextIcon = ( ); - let jumpPrevIcon = ( + const jumpPrevIcon = ( - {/* You can use transition effects in the container :) */}
    - + {direction === 'rtl' ? ( + + ) : ( + + )} {ellipsis}
    ); - let jumpNextIcon = ( + const jumpNextIcon = ( - {/* You can use transition effects in the container :) */}
    - + {direction === 'rtl' ? ( + + ) : ( + + )} {ellipsis}
    ); - // change arrows direction in right-to-left direction - if (direction === 'rtl') { - [prevIcon, nextIcon] = [nextIcon, prevIcon]; - [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon]; - } return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon }; - }; + }, [direction, prefixCls]); const [contextLocale] = useLocale('Pagination', enUS); const locale = { ...contextLocale, ...customLocale }; const isSmall = size === 'small' || !!(xs && !size && responsive); + const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls); const extendedClassName = classNames( { @@ -111,7 +113,7 @@ const Pagination: React.FC = ({ return wrapSSR( diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index ab5d7691e2..97596f88fa 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -56,3 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA | total | 数据总数 | number | 0 | | | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | | | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | | + +## Design Token + + diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index 50e4c94422..c1e6078f9b 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -5,9 +5,9 @@ import { initInputToken, type InputToken, } from '../../input/style'; +import { genFocusOutline, genFocusStyle, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { genFocusOutline, genFocusStyle, resetComponent } from '../../style'; interface PaginationToken extends InputToken> { paginationItemSize: number; @@ -57,7 +57,16 @@ const genPaginationDisabledStyle: GenerateStyle = (t [`&${componentCls}-disabled`]: { cursor: 'not-allowed', - + [`&${componentCls}-mini`]: { + [` + &:hover ${componentCls}-item:not(${componentCls}-item-active), + &:active ${componentCls}-item:not(${componentCls}-item-active), + &:hover ${componentCls}-item-link, + &:active ${componentCls}-item-link + `]: { + backgroundColor: 'transparent', + }, + }, [`${componentCls}-item`]: { cursor: 'not-allowed', @@ -134,6 +143,12 @@ const genPaginationMiniStyle: GenerateStyle = (token [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: { backgroundColor: 'transparent', borderColor: 'transparent', + '&:hover': { + backgroundColor: token.colorBgTextHover, + }, + '&:active': { + backgroundColor: token.colorBgTextActive, + }, }, [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: { @@ -141,6 +156,15 @@ const genPaginationMiniStyle: GenerateStyle = (token height: token.paginationItemSizeSM, margin: 0, lineHeight: `${token.paginationItemSizeSM}px`, + [`&:hover ${componentCls}-item-link`]: { + backgroundColor: token.colorBgTextHover, + }, + [`&:active ${componentCls}-item-link`]: { + backgroundColor: token.colorBgTextActive, + }, + [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: { + backgroundColor: 'transparent', + }, }, [` diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index d5e288b5ec..0201c48cee 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -137,6 +137,10 @@ Select component to select value from options. | key | Group key | string | - | | | label | Group label | string \| React.Element | - | | +## Design Token + + + ## FAQ ### Why sometime search will show 2 same option when in `tags` mode? diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 08fc49219b..cbede500a9 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -138,6 +138,10 @@ demo: | key | Key | string | - | | | label | 组名 | string \| React.Element | - | | +## Design Token + + + ## FAQ ### `mode="tags"` 模式下为何搜索有时会出现两个相同选项？ diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index 04d1d4216e..2672dc9d56 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -79,3 +79,7 @@ A single step in the step bar. | status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | | | subTitle | Subtitle of the step | ReactNode | - | | | title | Title of the step | ReactNode | - | | + +## Design Token + + diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 823a040b0c..48b9c223f1 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -80,3 +80,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA | status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | | | subTitle | 子标题 | ReactNode | - | | | title | 标题 | ReactNode | - | | + +## Design Token + + diff --git a/components/style/index.ts b/components/style/index.ts index f5d2444193..43a975d37d 100644 --- a/components/style/index.ts +++ b/components/style/index.ts @@ -3,7 +3,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { AliasToken, DerivativeToken } from '../theme/internal'; export { operationUnit } from './operationUnit'; -export { genPresetColor } from './presetColor'; export { roundedArrow } from './roundedArrow'; export const textEllipsis: CSSObject = { diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx index 4e97ad8bb1..9107ee8ec2 100644 --- a/components/table/InternalTable.tsx +++ b/components/table/InternalTable.tsx @@ -65,7 +65,7 @@ interface ChangeEventInfo { filterStates: FilterState[]; sorterStates: SortState[]; - resetPagination: Function; + resetPagination: (current?: number, pageSize?: number) => void; } /** Same as `TableProps` but we need record parent render times */ @@ -238,16 +238,16 @@ function InternalTable( }; if (reset) { - changeEventInfo.resetPagination!(); + changeEventInfo.resetPagination?.(); // Reset event param - if (changeInfo.pagination!.current) { - changeInfo.pagination!.current = 1; + if (changeInfo.pagination?.current) { + changeInfo.pagination.current = 1; } // Trigger pagination events if (pagination && pagination.onChange) { - pagination.onChange(1, changeInfo.pagination!.pageSize!); + pagination.onChange(1, changeInfo.pagination?.pageSize!); } } @@ -491,10 +491,10 @@ function InternalTable( bottomPaginationNode = renderPagination(defaultPosition); } if (topPos) { - topPaginationNode = renderPagination(topPos!.toLowerCase().replace('top', '')); + topPaginationNode = renderPagination(topPos.toLowerCase().replace('top', '')); } if (bottomPos) { - bottomPaginationNode = renderPagination(bottomPos!.toLowerCase().replace('bottom', '')); + bottomPaginationNode = renderPagination(bottomPos.toLowerCase().replace('bottom', '')); } } else { bottomPaginationNode = renderPagination(defaultPosition); diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 8f5a4f10d0..e2e732c500 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -25,9 +25,9 @@ function Table( const ForwardTable = React.forwardRef(Table) as any as RefTable & { SELECTION_COLUMN: typeof SELECTION_COLUMN; EXPAND_COLUMN: typeof EXPAND_COLUMN; - SELECTION_ALL: 'SELECT_ALL'; - SELECTION_INVERT: 'SELECT_INVERT'; - SELECTION_NONE: 'SELECT_NONE'; + SELECTION_ALL: typeof SELECTION_ALL; + SELECTION_INVERT: typeof SELECTION_INVERT; + SELECTION_NONE: typeof SELECTION_NONE; Column: typeof Column; ColumnGroup: typeof ColumnGroup; Summary: typeof Summary; diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index c130173540..8e04928cbc 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -2777,4 +2777,47 @@ describe('Table.filter', () => { expect(renderedNames(container)).toEqual(['Jack']); }); + + it('changes to table data should not reset the filter dropdown state being changed by a user', () => { + const tableProps = { + key: 'stabletable', + rowKey: 'name', + dataSource: [], + columns: [ + { + title: 'Name', + dataIndex: 'name', + filteredValue: [], // User is controlling filteredValue. It begins with no items checked. + filters: [{ text: 'J', value: 'J' }], + onFilter: (value: any, record: any) => record.name.includes(value), + }, + ], + }; + + const { container, rerender } = render(createTable(tableProps)); + + // User opens filter Dropdown. + fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!); + + // There is one checkbox and it begins unchecked. + expect(container.querySelector('input[type="checkbox"]')!.checked).toEqual( + false, + ); + + // User checks it. + fireEvent.click(container.querySelector('input[type="checkbox"]')!); + + // The checkbox is now checked. + expect(container.querySelector('input[type="checkbox"]')!.checked).toEqual( + true, + ); + + // Table data changes while the dropdown is open and a user is setting filters. + rerender(createTable({ ...tableProps, dataSource: [{ name: 'Foo' }] })); + + // The checkbox is still checked. + expect(container.querySelector('input[type="checkbox"]')!.checked).toEqual( + true, + ); + }); }); diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index b05dbf63df..ae58ffe464 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -215,7 +215,10 @@ function useFilter({ FilterState[], Record, ] { - const mergedColumns = getMergedColumns(rawMergedColumns || []); + const mergedColumns = React.useMemo( + () => getMergedColumns(rawMergedColumns || []), + [rawMergedColumns], + ); const [filterStates, setFilterStates] = React.useState[]>(() => collectFilterStates(mergedColumns, true), diff --git a/components/table/hooks/usePagination.ts b/components/table/hooks/usePagination.ts index 1557717ec3..a30b7ddd1e 100644 --- a/components/table/hooks/usePagination.ts +++ b/components/table/hooks/usePagination.ts @@ -31,7 +31,7 @@ function usePagination( total: number, onChange: (current: number, pageSize: number) => void, pagination?: TablePaginationConfig | false, -): readonly [TablePaginationConfig, () => void] { +): readonly [TablePaginationConfig, (current?: number, pageSize?: number) => void] { const { total: paginationTotal = 0, ...paginationObj } = pagination && typeof pagination === 'object' ? pagination : {}; diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index 107325bd67..97577814b2 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -29,7 +29,7 @@ const genCardStyle: GenerateStyle = (token: TabsToken): CSSObject => tabsCardHorizontalPadding, tabsCardHeadBackground, tabsCardGutter, - colorSplit, + colorBorderSecondary, } = token; return { [`${componentCls}-card`]: { @@ -38,7 +38,7 @@ const genCardStyle: GenerateStyle = (token: TabsToken): CSSObject => margin: 0, padding: tabsCardHorizontalPadding, background: tabsCardHeadBackground, - border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, + border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, }, @@ -226,7 +226,7 @@ const genDropdownStyle: GenerateStyle = (token: TabsToken): CSSObject }; const genPositionStyle: GenerateStyle = (token: TabsToken): CSSObject => { - const { componentCls, margin, colorSplit } = token; + const { componentCls, margin, colorBorderSecondary } = token; return { // ========================== Top & Bottom ========================== [`${componentCls}-top, ${componentCls}-bottom`]: { @@ -245,7 +245,7 @@ const genPositionStyle: GenerateStyle = (token: TabsToken): CSSObject _skip_check_: true, value: 0, }, - borderBottom: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, + borderBottom: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, content: "''", }, @@ -714,7 +714,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => tabsCardGutter, tabsHoverColor, tabsActiveColor, - colorSplit, + colorBorderSecondary, } = token; return { @@ -799,7 +799,7 @@ const genTabsStyle: GenerateStyle = (token: TabsToken): CSSObject => }, padding: `0 ${token.paddingXS}px`, background: 'transparent', - border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, + border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`, outline: 'none', cursor: 'pointer', diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index b21e965cab..a32820545b 100644 --- a/components/tag/style/index.ts +++ b/components/tag/style/index.ts @@ -1,9 +1,9 @@ import type { CSSInterpolation } from '@ant-design/cssinjs'; import type React from 'react'; import capitalize from '../../_util/capitalize'; -import { genPresetColor, resetComponent } from '../../style'; +import { resetComponent } from '../../style'; import type { FullToken } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; export interface ComponentToken {} diff --git a/components/theme/interface/maps/colors.ts b/components/theme/interface/maps/colors.ts index 2608468ff4..0cbdc9d972 100644 --- a/components/theme/interface/maps/colors.ts +++ b/components/theme/interface/maps/colors.ts @@ -21,18 +21,21 @@ export interface ColorNeutralMapToken { /** * @nameZH 二级文本色 * @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。 + * @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc. */ colorTextSecondary: string; /** * @nameZH 三级文本色 * @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。 + * @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc. */ colorTextTertiary: string; /** * @nameZH 四级文本色 * @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。 + * @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc. */ colorTextQuaternary: string; @@ -59,24 +62,28 @@ export interface ColorNeutralMapToken { /** * @nameZH 一级填充色 * @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。 + * @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider. */ colorFill: string; /** * @nameZH 二级填充色 * @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 + * @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc. */ colorFillSecondary: string; /** * @nameZH 三级填充色 * @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。 + * @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color. */ colorFillTertiary: string; /** * @nameZH 四级填充色 * @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。 + * @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc. */ colorFillQuaternary: string; @@ -85,6 +92,7 @@ export interface ColorNeutralMapToken { /** * @nameZH 布局背景色 * @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的 + * @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong. */ colorBgLayout: string; @@ -98,12 +106,14 @@ export interface ColorNeutralMapToken { /** * @nameZH 浮层容器背景色 * @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。 + * @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. */ colorBgElevated: string; /** * @nameZH 引起注意的背景色 * @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。 + * @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip. */ colorBgSpotlight: string; } diff --git a/components/theme/interface/maps/style.ts b/components/theme/interface/maps/style.ts index e3d99daa67..e4faf7dac8 100644 --- a/components/theme/interface/maps/style.ts +++ b/components/theme/interface/maps/style.ts @@ -36,6 +36,8 @@ export interface StyleMapToken { * @nameZH 外部圆角 * @nameEN Outer Border Radius * @default 4 + * @desc 外部圆角 + * @descEN Outer border radius */ borderRadiusOuter: number; } diff --git a/components/theme/interface/seeds.ts b/components/theme/interface/seeds.ts index 62bf275571..9202a52d37 100644 --- a/components/theme/interface/seeds.ts +++ b/components/theme/interface/seeds.ts @@ -69,6 +69,7 @@ export interface SeedToken extends PresetColorType { * @nameZH 字体 * @nameEN Font family for default text * @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 + * @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. */ fontFamily: string; @@ -76,6 +77,7 @@ export interface SeedToken extends PresetColorType { * @nameZH 代码字体 * @nameEN Font family for code text * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素 + * @descEN Code font, used for code, pre and kbd elements in Typography */ fontFamilyCode: string; @@ -138,6 +140,8 @@ export interface SeedToken extends PresetColorType { /** * @nameZH 组件箭头尺寸 + * @desc 组件箭头的尺寸 + * @descEN The size of the component arrow */ sizePopupArrow: number; @@ -251,6 +255,7 @@ export interface SeedToken extends PresetColorType { * @nameZH 线框风格 * @nameEN Wireframe Style * @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项 + * @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item * @default false */ wireframe: boolean; diff --git a/components/theme/internal.ts b/components/theme/internal.ts index 24f378a518..d83f38ea9b 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -18,6 +18,7 @@ import formatToken from './util/alias'; import type { FullToken } from './util/genComponentStyleHook'; import genComponentStyleHook from './util/genComponentStyleHook'; import statisticToken, { merge as mergeToken, statistic } from './util/statistic'; +import genPresetColor from './util/genPresetColor'; const defaultTheme = createTheme(defaultDerivative); @@ -31,6 +32,7 @@ export { // hooks useStyleRegister, genComponentStyleHook, + genPresetColor, }; export type { SeedToken, diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index db2bd218bb..eafea9527d 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -2,11 +2,11 @@ import type { CSSInterpolation } from '@ant-design/cssinjs'; import { useStyleRegister } from '@ant-design/cssinjs'; import { useContext } from 'react'; -import { genCommonStyle, genLinkStyle } from '../../style'; import { ConfigContext } from '../../config-provider/context'; +import { genCommonStyle, genLinkStyle } from '../../style'; +import type { ComponentTokenMap, GlobalToken } from '../interface'; import type { UseComponentStyleResult } from '../internal'; import { mergeToken, statisticToken, useToken } from '../internal'; -import type { ComponentTokenMap, GlobalToken } from '../interface'; export type OverrideTokenWithoutDerivative = ComponentTokenMap; export type OverrideComponent = keyof OverrideTokenWithoutDerivative; @@ -44,11 +44,19 @@ export default function genComponentStyleHook { const [theme, token, hashId] = useToken(); - const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); + const { getPrefixCls, iconPrefixCls, csp } = useContext(ConfigContext); const rootPrefixCls = getPrefixCls(); + // Shared config + const sharedConfig: Omit[0], 'path'> = { + theme, + token, + hashId, + nonce: () => csp?.nonce!, + }; + // Generate style for all a tags in antd component. - useStyleRegister({ theme, token, hashId, path: ['Shared', rootPrefixCls] }, () => [ + useStyleRegister({ ...sharedConfig, path: ['Shared', rootPrefixCls] }, () => [ { // Link '&': genLinkStyle(token), @@ -56,40 +64,37 @@ export default function genComponentStyleHook { - const { token: proxyToken, flush } = statisticToken(token); + useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => { + const { token: proxyToken, flush } = statisticToken(token); - const defaultComponentToken = - typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken; - const mergedComponentToken = { ...defaultComponentToken, ...token[component] }; + const defaultComponentToken = + typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken; + const mergedComponentToken = { ...defaultComponentToken, ...token[component] }; - const componentCls = `.${prefixCls}`; - const mergedToken = mergeToken< - TokenWithCommonCls> - >( - proxyToken, - { - componentCls, - prefixCls, - iconCls: `.${iconPrefixCls}`, - antCls: `.${rootPrefixCls}`, - }, - mergedComponentToken, - ); - - const styleInterpolation = styleFn(mergedToken as unknown as FullToken, { - hashId, + const componentCls = `.${prefixCls}`; + const mergedToken = mergeToken< + TokenWithCommonCls> + >( + proxyToken, + { + componentCls, prefixCls, - rootPrefixCls, - iconPrefixCls, - overrideComponentToken: token[component], - }); - flush(component, mergedComponentToken); - return [genCommonStyle(token, prefixCls), styleInterpolation]; - }, - ), + iconCls: `.${iconPrefixCls}`, + antCls: `.${rootPrefixCls}`, + }, + mergedComponentToken, + ); + + const styleInterpolation = styleFn(mergedToken as unknown as FullToken, { + hashId, + prefixCls, + rootPrefixCls, + iconPrefixCls, + overrideComponentToken: token[component], + }); + flush(component, mergedComponentToken); + return [genCommonStyle(token, prefixCls), styleInterpolation]; + }), hashId, ]; }; diff --git a/components/style/presetColor.tsx b/components/theme/util/genPresetColor.tsx similarity index 76% rename from components/style/presetColor.tsx rename to components/theme/util/genPresetColor.tsx index 67b1beacd8..eb6a3e22e7 100644 --- a/components/style/presetColor.tsx +++ b/components/theme/util/genPresetColor.tsx @@ -1,8 +1,8 @@ /* eslint-disable import/prefer-default-export */ import type { CSSObject } from '@ant-design/cssinjs'; -import type { AliasToken, PresetColorKey } from '../theme/internal'; -import { PresetColors } from '../theme/internal'; -import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook'; +import type { AliasToken, PresetColorKey } from '../internal'; +import { PresetColors } from '../interface'; +import type { TokenWithCommonCls } from './genComponentStyleHook'; interface CalcColor { /** token[`${colorKey}-1`] */ @@ -17,7 +17,7 @@ interface CalcColor { type GenCSS = (colorKey: PresetColorKey, calcColor: CalcColor) => CSSObject; -export function genPresetColor>( +export default function genPresetColor>( token: Token, genCss: GenCSS, ): CSSObject { diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts index d3ee215892..c3387b0725 100644 --- a/components/tooltip/style/index.ts +++ b/components/tooltip/style/index.ts @@ -1,8 +1,8 @@ -import { genPresetColor, resetComponent } from '../../style'; +import { resetComponent } from '../../style'; import { initZoomMotion } from '../../style/motion'; import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow'; import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken, genPresetColor } from '../../theme/internal'; export interface ComponentToken { zIndexPopup: number; diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 059cc17c35..90bd4e76ca 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -66,7 +66,10 @@ export interface TreeSelectProps< rootClassName?: string; } -const InternalTreeSelect = ( +const InternalTreeSelect = < + ValueType = any, + OptionType extends BaseOptionType | DefaultOptionType = BaseOptionType, +>( { prefixCls: customizePrefixCls, size: customizeSize, @@ -92,7 +95,7 @@ const InternalTreeSelect = , + }: TreeSelectProps, ref: React.Ref, ) => { const { diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index e70d6151a2..57c7911187 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -152,6 +152,10 @@ Basic text writing, including headings, body text, lists, and more. | onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 | | onExpand | Called when expand content | function(event) | - | | +## Design Token + + + ## FAQ ### How to use Typography.Link in react-router? diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 37ee9dc04d..0d3991730c 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -153,6 +153,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | | onExpand | 点击展开时的回调 | function(event) | - | | +## Design Token + + + ## FAQ ### Typography.Link 如何与 react-router 库集成？ diff --git a/package.json b/package.json index 5d98bb1782..5a469eeec0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.3.2", + "version": "5.3.3", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", "keywords": [ @@ -108,7 +108,7 @@ ], "dependencies": { "@ant-design/colors": "^7.0.0", - "@ant-design/cssinjs": "^1.5.6", + "@ant-design/cssinjs": "^1.7.1", "@ant-design/icons": "^5.0.0", "@ant-design/react-slick": "~1.0.0", "@babel/runtime": "^7.18.3", @@ -131,7 +131,7 @@ "rc-input": "~1.0.4", "rc-input-number": "~7.4.0", "rc-mentions": "~2.2.0", - "rc-menu": "~9.8.2", + "rc-menu": "~9.8.3", "rc-motion": "^2.6.1", "rc-notification": "~5.0.0", "rc-pagination": "~3.3.1", diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index bfe1efa621..948ae3426c 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -8,8 +8,6 @@ declare module '*.svg' { export default src; } -declare module 'rc-pagination/*'; - declare module 'rc-util*'; declare module 'jsonml.js/*';