diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml index 2c6910ea67..faff893438 100644 --- a/.github/workflows/preview-deploy.yml +++ b/.github/workflows/preview-deploy.yml @@ -74,6 +74,7 @@ jobs: # Download site artifact - name: download site artifact + if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }} uses: dawidd6/action-download-artifact@v2 with: workflow: ${{ github.event.workflow_run.workflow_id }} @@ -81,7 +82,6 @@ jobs: name: site - name: upload surge service - if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }} id: deploy continue-on-error: true run: | diff --git a/.github/workflows/upgrade-deps.yml b/.github/workflows/upgrade-deps.yml new file mode 100644 index 0000000000..d6169a8c6b --- /dev/null +++ b/.github/workflows/upgrade-deps.yml @@ -0,0 +1,60 @@ +name: Upgrade Dependencies + +on: + schedule: + - cron: "0 18 * * *" # every day at 18:00 UTC + # - timezone: Asia/Shanghai # not supported yet https://github.com/orgs/community/discussions/13454 + +jobs: + upgrade-deps: + runs-on: ubuntu-latest + if: github.ref == 'refs/heads/master' + permissions: + pull-requests: write # for peter-evans/create-pull-request to create PRs + contents: write # for git push + steps: + - name: checkout + uses: actions/checkout@v4 + with: + sparse-checkout: | + .github + .ncurc.js + package.json + + - name: setup node + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: upgrade deps + id: upgrade + run: | + if [ ! -d .tmp ] ; then + mkdir .tmp + fi + $(npx npm-check-updates -u > .tmp/upgrade-deps-logs.txt) 2>&1 || true + if [ -s .tmp/upgrade-deps-logs.txt ]; then + cat .tmp/upgrade-deps-logs.txt + echo "logs<> $GITHUB_OUTPUT + cat .tmp/upgrade-deps-logs.txt >> $GITHUB_OUTPUT + echo "EOF" >> $GITHUB_OUTPUT + fi + + - name: create pull request + id: cpr + uses: peter-evans/create-pull-request@v5 + with: + token: ${{ secrets.GITHUB_TOKEN }} # Cannot be default!!! + assignees: 'afc163, zombieJ, xrkffgg, MadCcc' + title: "chore: upgrade deps" + commit-message: "chore: upgrade deps" + body: | + Upgrade dependencies + + ``` + ${{ steps.upgrade.outputs.logs }} + ``` + branch: auto-upgrade-deps + delete-branch: true + add-paths: | + package.json diff --git a/.ncurc.js b/.ncurc.js new file mode 100644 index 0000000000..a521db4d80 --- /dev/null +++ b/.ncurc.js @@ -0,0 +1,29 @@ +// doc: https://github.com/raineorshine/npm-check-updates/tree/v16.14.6#readme +const path = require('path'); + +const rcOrg = ['@rc-component/', 'rc-']; +const check = ['@ant-design/', ...rcOrg]; + +// rules: https://github.com/ant-design/ant-design/pull/45593#issuecomment-1784891887 +module.exports = { + packageFile: path.resolve(__dirname, './package.json'), + upgrade: false, // use `npx npm-check-updates -u` to upgrade + packageManager: 'npm', + dep: ['prod'], // check only prod dependencies + // https://github.com/raineorshine/npm-check-updates#filter + filter: (name) => check.some((prefix) => name.startsWith(prefix)), + // https://github.com/raineorshine/npm-check-updates#target + target: (name, semver) => { + const { operator } = semver[0] ?? {}; + + // rc-component + if (rcOrg.some((prefix) => name.startsWith(prefix))) { + // `^` always upgrade latest, otherwise follow semver. + if (operator === '^') { + return 'latest'; + } + } + + return 'semver'; + }, +}; diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dfdafd7ce5..d7c5f4b6c2 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,48 @@ tag: vVERSION --- +## 5.11.0 + +`2023-11-03` + +- Slider + - 🆕 Slider will show tooltip when focus handler. [#45653](https://github.com/ant-design/ant-design/pull/45653) + - 💄 Slider handler should be movable after click tracker. [#45651](https://github.com/ant-design/ant-design/pull/45651) +- InputNumber + - 🆕 InputNumber support `changeOnBlur` prop to disable trigger `onChange` event when blur. [#45395](https://github.com/ant-design/ant-design/pull/45395) + - 🐞 Fix InputNumber in Form with `hasFeedback` that will lose focus when feedback icon appear. [#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc) + - 🐞 Fix InputNumber dynamic modify `formatter` not working. [#45325](https://github.com/ant-design/ant-design/pull/45325) +- Table + - 🆕 Table `columnTitle` support render function. [#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill) + - 🛠 Refactor Table `ref` to support `scrollTo` to scroll to target `key` or `index` or `top`. [#45245](https://github.com/ant-design/ant-design/pull/45245) +- Tabs + - 🆕 Tabs `items` support tab pane level `destroyInactiveTabPane`. [#45359](https://github.com/ant-design/ant-design/pull/45359) + - 🐞 Fix Tabs overflow blinking when Tab bar has decimal width. [#45370](https://github.com/ant-design/ant-design/pull/45370) +- ConfigProvider + - 🆕 ConfigProvider support RangePicker `className` and `style` properties. [#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198) + - 🆕 ConfigProvider support Dropdown `className` and `style` properties. [#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 ColorPicker `preset` prop support `defaultOpen` to control whether preset colors is open by default. [#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144) +- 🆕 Select support `optionRender` prop. [#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue) +- 🆕 Pagination support combine `simple` and `showSizeChanger`. [#45538](https://github.com/ant-design/ant-design/pull/45538) +- 🆕 Spin support `fullscreen` to display as backdrop. [#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 Form `validateFields` support `dirty` for validating touched and validated fields. [#45389](https://github.com/ant-design/ant-design/pull/45389) +- 🆕 Watermark support `inherit` prop to disable watermark pass to Drawer and Modal. [#45319](https://github.com/ant-design/ant-design/pull/45319) +- 🆕 App support `component` for customization. [#45292](https://github.com/ant-design/ant-design/pull/45292) +- 🆕 Input and Input.TextArea support `count` custom character count (for example, fix emoji character length to `1`); `count.max` supports out-of-range styles; restore emoji to native count to solve the problem of `maxLength` and `value` mismatch. [#45140](https://github.com/ant-design/ant-design/pull/45140) +- 🐞 Fix Dropdown not trigger `onOpenChange` when click menu item to close the popup. [#45378](https://github.com/ant-design/ant-design/pull/45378) +- 💄 Modal static function support `styles`. [#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK) +- 💄 Optimize z-index logic of popup components, and make them don't block each other by default. [#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Menu. [#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of DatePicker and TimePicker. [#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Drawer. [#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Cascader, TreeSelect and AutoComplete. [#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Dropdown. [#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Tour. [#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Tooltip. [#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Popover. [#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Popconfirm. [#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang) + - Optimize z-index logic of Modal and Select. [#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang) + ## 5.10.3 `2023-10-30` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index cb605d6f39..c6afbfee3a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,48 @@ tag: vVERSION --- +## 5.11.0 + +`2023-11-03` + +- Slider + - 🆕 Slider 聚焦滑块时现在会显示 Tooltip。[#45653](https://github.com/ant-design/ant-design/pull/45653) + - 💄 优化 Slider 交互体验，点击轨道后可直接拖拽滑块。[#45651](https://github.com/ant-design/ant-design/pull/45651) +- InputNumber + - 🆕 InputNumber 添加 `changeOnBlur` 属性以支持在失去焦点时不触发 `onChange` 事件。[#45395](https://github.com/ant-design/ant-design/pull/45395) + - 🐞 修复 InputNumber 组件在 Form 组件中使用并且启用 `hasFeedback` 时，反馈图标出现会使 InputNumber 失去焦点的问题。[#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc) + - 🐞 修复 InputNumber 动态改变 `formatter` 不生效的问题。[#45325](https://github.com/ant-design/ant-design/pull/45325) +- Table + - 🆕 Table 组件 `columnTitle` 支持传入 render 方法。[#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill) + - 🛠 重构 Table `ref` 支持 `scrollTo` 以滚动到目标 `key` 或 `index` 或 `top`。[#45245](https://github.com/ant-design/ant-design/pull/45245) +- Tabs + - 🆕 Tabs `items` 支持单个标签页设置 `destroyInactiveTabPane`。[#45359](https://github.com/ant-design/ant-design/pull/45359) + - 🐞 修复 Tabs 的标签宽度存在小数时，滚动会出现抖动的问题。[#45370](https://github.com/ant-design/ant-design/pull/45370) +- ConfigProvider + - 🆕 ConfigProvider 支持 RangePicker 组件的 `className` 和 `style` 属性。[#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198) + - 🆕 ConfigProvider 支持 Dropdown 组件的 `className` 和 `style` 属性。[#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 ColorPicker 组件 `preset` 新增 `defaultOpen` 属性，可控制预设颜色默认是否展开。[#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144) +- 🆕 Select 组件支持 `optionRender` 方法。[#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue) +- 🆕 Pagination 组件支持组合 `simple` 和 `showSizeChanger` 使用。[#45538](https://github.com/ant-design/ant-design/pull/45538) +- 🆕 Spin 组件新增 `fullscreen` 属性，支持全屏展示。[#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 Form `validateFields` 支持 `dirty` 参数以校验被修改过和校验过的字段。[#45389](https://github.com/ant-design/ant-design/pull/45389) +- 🆕 Watermark 支持 `inherit` 配置，关闭水印传导至弹出 Drawer 与 Modal。[#45319](https://github.com/ant-design/ant-design/pull/45319) +- 🆕 App 支持 `component` 以自定义渲染元素。[#45292](https://github.com/ant-design/ant-design/pull/45292) +- 🆕 Input 与 Input.TextArea 支持 `count` 自定义字符计数（例如固定 emoji 字符长度为 `1`）；`count.max` 支持超出范围样式；将 emoji 计数还原为原生计数以解决 `maxLength` 与 `value` 不匹配的问题。[#45140](https://github.com/ant-design/ant-design/pull/45140) +- 🐞 修复 Dropdown 在点击菜单项关闭弹出框时不会触发 `onOpenChange` 的问题。[#45378](https://github.com/ant-design/ant-design/pull/45378) +- 💄 Modal 静态方法支持 `styles` 属性。[#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK) +- 💄 优化弹层组件的 `z-index` 逻辑，使其在默认情况下不会互相遮挡。[#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Menu 组件 `z-index` 逻辑。[#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang) + - 优化 DatePicker、TimePicker 组件 `z-index` 逻辑。[#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Drawer 组件 `z-index` 逻辑。[#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Cascader、TreeSelect、AutoComplete 组件 `z-index` 逻辑。[#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Dropdown 组件 `z-index` 逻辑。[#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Tour 组件 `z-index` 逻辑。[#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Tooltip 组件 `z-index` 逻辑。[#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Popover 组件 `z-index` 逻辑。[#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Popconfirm 组件 `z-index` 逻辑。[#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang) + - 优化 Modal、Select 组件 `z-index` 逻辑。[#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang) + ## 5.10.3 `2023-10-30` diff --git a/README.md b/README.md index 187d6774f4..cae1958768 100644 --- a/README.md +++ b/README.md @@ -148,11 +148,11 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together. +Let's build a better antd together. -We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :) +We welcome all contributions. Please read our [Contributing Guide](https://ant.design/docs/react/contributing) first. You can submit any ideas as [Pull Requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :) -If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). +If you are a collaborator, please follow our [Pull Request Principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with our [Pull Request Template](https://github.com/ant-design/ant-design/wiki/PR-principle#pull-request-template). [![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index 7d2d5ebb11..aafcac03ea 100644 --- a/components/app/__tests__/index.test.tsx +++ b/components/app/__tests__/index.test.tsx @@ -222,13 +222,15 @@ describe('App', () => { }); it('to false', () => { + const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render(

, ); - + expect(warnSpy).not.toHaveBeenCalled(); expect(container.querySelector('.ant-app')).toBeFalsy(); + warnSpy.mockRestore(); }); }); }); diff --git a/components/app/index.tsx b/components/app/index.tsx index cb1eb7a98f..0369252528 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from 'react'; import React, { useContext } from 'react'; import classNames from 'classnames'; -import type { CustomComponent } from '../_util/type'; +import type { AnyObject, CustomComponent } from '../_util/type'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import useMessage from '../message/useMessage'; @@ -12,18 +12,18 @@ import type { AppConfig, useAppProps } from './context'; import AppContext, { AppConfigContext } from './context'; import useStyle from './style'; -export interface AppProps extends AppConfig { +export interface AppProps

extends AppConfig { style?: React.CSSProperties; className?: string; rootClassName?: string; prefixCls?: string; children?: ReactNode; - component?: false | CustomComponent; + component?: CustomComponent

| false; } const useApp = () => React.useContext(AppContext); -const App: React.FC & { useApp: typeof useApp } = (props) => { +const App: React.FC & { useApp: () => useAppProps } = (props) => { const { prefixCls: customizePrefixCls, children, @@ -66,7 +66,7 @@ const App: React.FC & { useApp: typeof useApp } = (props) => { // ============================ Render ============================ const Component = component === false ? React.Fragment : component; - const rootProps = { + const rootProps: AppProps = { className: customClassName, style, }; @@ -74,7 +74,7 @@ const App: React.FC & { useApp: typeof useApp } = (props) => { return wrapSSR( - + {ModalContextHolder} {messageContextHolder} {notificationContextHolder} diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index 913309a1a9..161b4b6926 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -248,7 +248,7 @@ describe('ColorPicker', () => { { label: 'Recent', colors: ['#f00d', '#0f0d', '#00fd'], - defaultCollapsed: true, + defaultOpen: false, }, ]} />, diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index 12fa5cd21f..adbc137f18 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/components/color-picker/components/ColorPresets.tsx @@ -48,9 +48,8 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, const activeKeys = useMemo( () => presetsValue.reduce((acc, preset) => { - if (!preset.defaultCollapsed) { - acc.push(genCollapsePanelKey(preset)); - } + const { defaultOpen = true } = preset; + if (defaultOpen) acc.push(genCollapsePanelKey(preset)); return acc; }, []), [presetsValue], diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index f2a6f61037..a9ca6338a4 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props) | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 | | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | | | open | Whether to show popup | boolean | - | | -| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` | +| presets | Preset colors | `{ label: ReactNode, colors: Array, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` | | placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | | | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 23a6dfd3a9..867481239f 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -54,7 +54,7 @@ group: | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 | | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | | | open | 是否显示弹出窗口 | boolean | - | | -| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultCollapsed?: boolean }[]` | - | `defaultCollapsed: 5.11.0` | +| presets | 预设的颜色 | `{ label: ReactNode, colors: Array, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` | | placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | | | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 | | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 | diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts index 2b300f3b0d..f56f5eb693 100644 --- a/components/color-picker/interface.ts +++ b/components/color-picker/interface.ts @@ -14,8 +14,9 @@ export interface PresetsItem { /** * Whether the initial state is collapsed * @since 5.11.0 + * @default true */ - defaultCollapsed?: boolean; + defaultOpen?: boolean; } export type TriggerType = 'click' | 'hover'; diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index da076b1a67..a3256a3f5c 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -42,7 +42,7 @@ Common props ref：[Common props](/docs/react/common-props) ### Dropdown | Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false | | | autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | 5.2.0 | | autoFocus | Focus element in `overlay` when opened | boolean | false | 4.21.0 | @@ -56,7 +56,7 @@ Common props ref：[Common props](/docs/react/common-props) | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | | | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 | -| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 | +| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 | ### Dropdown.Button diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 579cc9451a..60f5853a2b 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -46,7 +46,7 @@ demo: ### Dropdown | 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | | | autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 | | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 | @@ -60,7 +60,7 @@ demo: | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` | | | trigger | 触发下拉的行为，移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | - | 4.23.0 | -| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | `info.source`: 5.11.0 | +| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 | ### Dropdown.Button diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index d9233d884a..04f1265766 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -51,7 +51,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El ### PreviewType -| 参数 | 说明 | 类型 | 默认值 | 版本 | +| Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | visible | Whether the preview dialog is visible or not | boolean | - | - | | src | Custom preview src | string | - | 4.10.0 | @@ -72,7 +72,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El ## PreviewGroup -| 参数 | 说明 | 类型 | 默认值 | 版本 | +| Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#previewgrouptype) | true | 4.6.0 [PreviewGroupType](#previewgrouptype):4.7.0 | | items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 | @@ -80,7 +80,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El ### PreviewGroupType -| 参数 | 说明 | 类型 | 默认值 | 版本 | +| Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | visible | Whether the preview dialog is visible or not | boolean | - | - | | getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 | @@ -99,7 +99,7 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El | imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 | | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 | -| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 | +| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current Property 5.3.0 | ## Interface diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx index 32daa2707b..efd0f9789a 100644 --- a/components/notification/PurePanel.tsx +++ b/components/notification/PurePanel.tsx @@ -11,6 +11,7 @@ import * as React from 'react'; import { ConfigContext } from '../config-provider'; import type { IconType } from './interface'; import useStyle from './style'; +import PurePanelStyle from './style/pure-panel'; export const TypeIcon = { info: , @@ -99,6 +100,7 @@ const PurePanel: React.FC = (props) => { return (

+ { expect(document.querySelectorAll('[role="status"]').length).toBe(1); }); + it('should hide close btn when closeIcon setting to null or false', async () => { notification.config({ closeIcon: undefined, @@ -348,4 +349,22 @@ describe('notification', () => { expect(document.querySelectorAll('.with-null .ant-notification-notice-close').length).toBe(0); expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0); }); + + it('style.width could be overrided', async () => { + act(() => { + notification.open({ + message: 'Notification Title', + duration: 0, + style: { + width: 600, + }, + className: 'with-style', + }); + }); + await awaitPromise(); + expect(document.querySelector('.with-style')).toHaveStyle({ width: '600px' }); + expect( + document.querySelector('.ant-notification-notice-wrapper:has(.width-style)'), + ).toHaveStyle({ width: '' }); + }); }); diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 2e4599b8ae..9cb156fba1 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -1,7 +1,7 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; import { resetComponent } from '../../style'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; +import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genNotificationPlacementStyle from './placement'; import genStackStyle from './stack'; @@ -33,7 +33,7 @@ export interface NotificationToken extends FullToken<'Notification'> { notificationStackLayer: number; } -const genNotificationStyle: GenerateStyle = (token) => { +export const genNoticeStyle = (token: NotificationToken): CSSObject => { const { iconCls, componentCls, // .ant-notification @@ -49,8 +49,6 @@ const genNotificationStyle: GenerateStyle = (token) => { notificationBg, notificationPadding, notificationMarginEdge, - motionDurationMid, - motionEaseInOut, fontSize, lineHeight, width, @@ -60,25 +58,8 @@ const genNotificationStyle: GenerateStyle = (token) => { const noticeCls = `${componentCls}-notice`; - const fadeOut = new Keyframes('antNotificationFadeOut', { - '0%': { - maxHeight: token.animationMaxHeight, - marginBottom: notificationMarginBottom, - }, - - '100%': { - maxHeight: 0, - marginBottom: 0, - paddingTop: 0, - paddingBottom: 0, - opacity: 0, - }, - }); - - const noticeStyle: CSSObject = { + return { position: 'relative', - width, - maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`, marginBottom: notificationMarginBottom, marginInlineStart: 'auto', background: notificationBg, @@ -87,6 +68,8 @@ const genNotificationStyle: GenerateStyle = (token) => { [noticeCls]: { padding: notificationPadding, + width, + maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`, overflow: 'hidden', lineHeight, wordWrap: 'break-word', @@ -172,6 +155,33 @@ const genNotificationStyle: GenerateStyle = (token) => { marginTop: token.marginSM, }, }; +}; + +const genNotificationStyle: GenerateStyle = (token) => { + const { + componentCls, // .ant-notification + notificationMarginBottom, + notificationMarginEdge, + motionDurationMid, + motionEaseInOut, + } = token; + + const noticeCls = `${componentCls}-notice`; + + const fadeOut = new Keyframes('antNotificationFadeOut', { + '0%': { + maxHeight: token.animationMaxHeight, + marginBottom: notificationMarginBottom, + }, + + '100%': { + maxHeight: 0, + marginBottom: 0, + paddingTop: 0, + paddingBottom: 0, + opacity: 0, + }, + }); return [ // ============================ Holder ============================ @@ -236,39 +246,42 @@ const genNotificationStyle: GenerateStyle = (token) => { { [componentCls]: { [`${noticeCls}-wrapper`]: { - ...noticeStyle, + ...genNoticeStyle(token), }, }, }, - - // ============================= Pure ============================= - { - [`${noticeCls}-pure-panel`]: { - ...noticeStyle, - margin: 0, - }, - }, ]; }; // ============================== Export ============================== +export const prepareComponentToken = (token: AliasToken) => ({ + zIndexPopup: token.zIndexPopupBase + 50, + width: 384, +}); + +export const prepareNotificationToken = (token: AliasToken) => { + const notificationPaddingVertical = token.paddingMD; + const notificationPaddingHorizontal = token.paddingLG; + const notificationToken = mergeToken(token, { + notificationBg: token.colorBgElevated, + notificationPaddingVertical, + notificationPaddingHorizontal, + notificationIconSize: token.fontSizeLG * token.lineHeightLG, + notificationCloseButtonSize: token.controlHeightLG * 0.55, + notificationMarginBottom: token.margin, + notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, + notificationMarginEdge: token.marginLG, + animationMaxHeight: 150, + notificationStackLayer: 3, + }); + + return notificationToken; +}; + export default genComponentStyleHook( 'Notification', (token) => { - const notificationPaddingVertical = token.paddingMD; - const notificationPaddingHorizontal = token.paddingLG; - const notificationToken = mergeToken(token, { - notificationBg: token.colorBgElevated, - notificationPaddingVertical, - notificationPaddingHorizontal, - notificationIconSize: token.fontSizeLG * token.lineHeightLG, - notificationCloseButtonSize: token.controlHeightLG * 0.55, - notificationMarginBottom: token.margin, - notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, - notificationMarginEdge: token.marginLG, - animationMaxHeight: 150, - notificationStackLayer: 3, - }); + const notificationToken = prepareNotificationToken(token); return [ genNotificationStyle(notificationToken), @@ -276,8 +289,5 @@ export default genComponentStyleHook( genStackStyle(notificationToken), ]; }, - (token) => ({ - zIndexPopup: token.zIndexPopupBase + 50, - width: 384, - }), + prepareComponentToken, ); diff --git a/components/notification/style/pure-panel.ts b/components/notification/style/pure-panel.ts new file mode 100644 index 0000000000..6358709f90 --- /dev/null +++ b/components/notification/style/pure-panel.ts @@ -0,0 +1,20 @@ +import { genSubStyleComponent } from '../../theme/internal'; +import { prepareComponentToken, genNoticeStyle, prepareNotificationToken } from '.'; + +export default genSubStyleComponent( + ['Notification', 'PurePanel'], + (token) => { + const noticeCls = `${token.componentCls}-notice`; + const notificationToken = prepareNotificationToken(token); + + return { + [`${noticeCls}-pure-panel`]: { + ...genNoticeStyle(notificationToken), + width: notificationToken.width, + maxWidth: `calc(100vw - ${notificationToken.notificationMarginEdge * 2}px)`, + margin: 0, + }, + }; + }, + prepareComponentToken, +); diff --git a/components/notification/style/stack.ts b/components/notification/style/stack.ts index 4fb5b55b95..b2834354ca 100644 --- a/components/notification/style/stack.ts +++ b/components/notification/style/stack.ts @@ -88,7 +88,6 @@ const genStackStyle: GenerateStyle = (token) => { [`& > ${componentCls}-notice-wrapper`]: { '&:not(:nth-last-child(-n + 1))': { opacity: 1, - width: token.width, overflow: 'unset', color: 'inherit', pointerEvents: 'auto', diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap index 6a2ca21163..abbe2a629f 100644 --- a/components/slider/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/slider/__tests__/__snapshots__/index.test.tsx.snap @@ -79,7 +79,7 @@ exports[`Slider should render in RTL direction 1`] = ` exports[`Slider should show tooltip when hovering slider handler 1`] = `
{ jest.useRealTimers(); }); - it('should show tooltip when hovering slider handler', () => { + it('should show tooltip when hovering slider handler', async () => { const { container } = render(); fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!); + await waitFakeTimer(); expect(document.querySelector('.ant-tooltip')).toMatchSnapshot(); fireEvent.mouseLeave(container.querySelector('.ant-slider-handle')!); - + await waitFakeTimer(); expect(document.querySelector('.ant-tooltip')).toMatchSnapshot(); }); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 1d55c56f7d..c1ed02cca3 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -25,15 +25,14 @@ export type HandleGeneratorFn = (config: { info: HandleGeneratorInfo; }) => React.ReactElement; -export type Formatter = (value?: number) => React.ReactNode; -const defaultFormatter: Formatter = (val) => (typeof val === 'number' ? val.toString() : ''); +export type Formatter = ((value?: number) => React.ReactNode) | null; export interface SliderTooltipProps extends AbstractTooltipProps { prefixCls?: string; open?: boolean; placement?: TooltipPlacement; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; - formatter?: null | Formatter; + formatter?: Formatter; autoAdjustOverflow?: boolean; } @@ -58,12 +57,14 @@ export interface SliderBaseProps { styles?: RcSliderProps['styles']; classNames?: RcSliderProps['classNames']; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; // Deprecated /** @deprecated `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead. */ tooltipPrefixCls?: string; /** @deprecated `tipFormatter` is deprecated. Please use `tooltip.formatter` instead. */ - tipFormatter?: null | ((value?: number) => React.ReactNode); + tipFormatter?: Formatter; /** @deprecated `tooltipVisible` is deprecated. Please use `tooltip.open` instead. */ tooltipVisible?: boolean; /** @@ -109,6 +110,16 @@ interface SliderRange { export type Opens = { [index: number]: boolean }; +function getTipFormatter(tipFormatter?: Formatter, legacyTipFormatter?: Formatter) { + if (tipFormatter || tipFormatter === null) { + return tipFormatter; + } + if (legacyTipFormatter || legacyTipFormatter === null) { + return legacyTipFormatter; + } + return (val?: number) => (typeof val === 'number' ? val.toString() : ''); +} + const Slider = React.forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, @@ -204,14 +215,7 @@ const Slider = React.forwardRef formatter: tipFormatter, } = tooltipProps; - let mergedTipFormatter; - if (tipFormatter || tipFormatter === null) { - mergedTipFormatter = tipFormatter; - } else if (legacyTipFormatter || legacyTipFormatter === null) { - mergedTipFormatter = legacyTipFormatter; - } else { - mergedTipFormatter = defaultFormatter; - } + const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter); const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false; const open = @@ -221,17 +225,20 @@ const Slider = React.forwardRef ...node.props, onMouseEnter: () => toggleTooltipOpen(index, true), onMouseLeave: () => toggleTooltipOpen(index, false), + onFocus: (e: React.FocusEvent) => { + toggleTooltipOpen(index, true); + restProps.onFocus?.(e); + }, + onBlur: (e: React.FocusEvent) => { + toggleTooltipOpen(index, false); + restProps.onBlur?.(e); + }, }; - const tooltipPrefixCls = getPrefixCls( - 'tooltip', - customizeTooltipPrefixCls ?? legacyTooltipPrefixCls, - ); - return ( = (token) => { }, [`${componentCls}-track-draggable`]: { - // base on https://github.com/ant-design/ant-design/pull/42825/files#diff-9b9560a611e7ed0e6ef24ca9f1faff1e8c816d3f35ed6a1f73c36d2b42790aba - // zIndex: 1, boxSizing: 'content-box', backgroundClip: 'content-box', border: 'solid rgba(0,0,0,0)', @@ -145,10 +143,6 @@ const genBaseStyle: GenerateStyle = (token) => { height: token.handleSize, outline: 'none', - [`${componentCls}-dragging`]: { - zIndex: 1, - }, - // 扩大选区 '&::before': { content: '""', diff --git a/components/upload/style/dragger.ts b/components/upload/style/dragger.ts index f4ca5e65b3..40e54e6f31 100644 --- a/components/upload/style/dragger.ts +++ b/components/upload/style/dragger.ts @@ -33,7 +33,10 @@ const genDraggerStyle: GenerateStyle = (token) => { verticalAlign: 'middle', }, - [`&:not(${componentCls}-disabled):hover`]: { + [` + &:not(${componentCls}-disabled):hover, + &-hover:not(${componentCls}-disabled) + `]: { borderColor: token.colorPrimaryHover, }, diff --git a/package.json b/package.json index eac29ef8fa..a021c6e739 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.10.3", + "version": "5.11.0", "description": "An enterprise-class UI design language and React components implementation", "keywords": [ "ant", @@ -133,7 +133,7 @@ "rc-drawer": "~6.5.2", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.40.0", - "rc-image": "~7.3.1", + "rc-image": "~7.3.2", "rc-input": "~1.3.5", "rc-input-number": "~8.4.0", "rc-mentions": "~2.9.1", @@ -147,14 +147,14 @@ "rc-resize-observer": "^1.4.0", "rc-segmented": "~2.2.2", "rc-select": "~14.10.0", - "rc-slider": "~10.3.1", + "rc-slider": "~10.4.0", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", - "rc-table": "~7.35.1", + "rc-table": "~7.35.2", "rc-tabs": "~12.13.1", "rc-textarea": "~1.5.1", "rc-tooltip": "~6.1.2", - "rc-tree": "~5.8.0", + "rc-tree": "~5.8.2", "rc-tree-select": "~5.15.0", "rc-upload": "~4.3.5", "rc-util": "^5.38.0", @@ -325,7 +325,7 @@ "dumi": "^2.3.0-alpha.4" } }, - "packageManager": "npm@10.2.1", + "packageManager": "npm@10.2.3", "size-limit": [ { "path": "./dist/antd.min.js", diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap index f3c661c864..6892bd0da9 100644 --- a/scripts/__snapshots__/check-site.ts.snap +++ b/scripts/__snapshots__/check-site.ts.snap @@ -84,9 +84,9 @@ exports[`site test Component components/drawer en Page 1`] = `1`; exports[`site test Component components/drawer zh Page 1`] = `1`; -exports[`site test Component components/dropdown en Page 1`] = `1`; +exports[`site test Component components/dropdown en Page 1`] = `2`; -exports[`site test Component components/dropdown zh Page 1`] = `1`; +exports[`site test Component components/dropdown zh Page 1`] = `2`; exports[`site test Component components/empty en Page 1`] = `1`;