source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Drawer support focusable (#56463)

Browse Source 
* feat: add focusable support to drawer component

* test: add test case

* docs: add focusable prop documentation for drawer component

* test: update test case
This commit is contained in:
二货爱吃白萝卜
2026-01-04 16:39:07 +08:00
committed by GitHub
parent 50dc6acbb2
commit 1ec7cd744d
10 changed files with 70 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@@ -13928,12 +13928,6 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
<div
class="config-drawer-mask config-drawer-mask-motion-appear config-drawer-mask-motion-appear-start config-drawer-mask-motion config-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="config-drawer-content-wrapper config-drawer-panel-motion-right-appear config-drawer-panel-motion-right-appear-start config-drawer-panel-motion-right"
style="width: 378px;"
@@ -13982,12 +13976,6 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -13999,12 +13987,6 @@ exports[`ConfigProvider components Drawer configProvider componentDisabled 1`] =
<div
class="config-drawer-mask config-drawer-mask-motion-appear config-drawer-mask-motion-appear-start config-drawer-mask-motion config-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="config-drawer-content-wrapper config-drawer-panel-motion-right-appear config-drawer-panel-motion-right-appear-start config-drawer-panel-motion-right"
style="width: 378px;"
@@ -14053,12 +14035,6 @@ exports[`ConfigProvider components Drawer configProvider componentDisabled 1`] =
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -14070,12 +14046,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize large 1`]
<div
class="config-drawer-mask config-drawer-mask-motion-appear config-drawer-mask-motion-appear-start config-drawer-mask-motion config-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="config-drawer-content-wrapper config-drawer-panel-motion-right-appear config-drawer-panel-motion-right-appear-start config-drawer-panel-motion-right"
style="width: 378px;"
@@ -14124,12 +14094,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize large 1`]
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -14141,12 +14105,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize middle 1`
<div
class="config-drawer-mask config-drawer-mask-motion-appear config-drawer-mask-motion-appear-start config-drawer-mask-motion config-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="config-drawer-content-wrapper config-drawer-panel-motion-right-appear config-drawer-panel-motion-right-appear-start config-drawer-panel-motion-right"
style="width: 378px;"
@@ -14195,12 +14153,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize middle 1`
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -14212,12 +14164,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize small 1`]
<div
class="config-drawer-mask config-drawer-mask-motion-appear config-drawer-mask-motion-appear-start config-drawer-mask-motion config-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="config-drawer-content-wrapper config-drawer-panel-motion-right-appear config-drawer-panel-motion-right-appear-start config-drawer-panel-motion-right"
style="width: 378px;"
@@ -14266,12 +14212,6 @@ exports[`ConfigProvider components Drawer configProvider componentSize small 1`]
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -14283,12 +14223,6 @@ exports[`ConfigProvider components Drawer normal 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-motion-appear ant-drawer-mask-motion-appear-start ant-drawer-mask-motion ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-start ant-drawer-panel-motion-right"
style="width: 378px;"
@@ -14337,12 +14271,6 @@ exports[`ConfigProvider components Drawer normal 1`] = `
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -14354,12 +14282,6 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
<div
class="prefix-Drawer-mask prefix-Drawer-mask-motion-appear prefix-Drawer-mask-motion-appear-start prefix-Drawer-mask-motion prefix-Drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="prefix-Drawer-content-wrapper prefix-Drawer-panel-motion-right-appear prefix-Drawer-panel-motion-right-appear-start prefix-Drawer-panel-motion-right"
style="width: 378px;"
@@ -14408,12 +14330,6 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
/>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;

21
components/drawer/__tests__/Drawer.test.tsx
View File

@@ -507,6 +507,27 @@ describe('Drawer', () => {
expect(container.querySelector('#test')).toBeTruthy();
});
it('focusable default config should pass to classNames', () => {
const classNames = jest.fn(() => ({}));
render(
<Drawer open getContainer={false} classNames={classNames}>
Here is content of Drawer
</Drawer>,
);
expect(classNames).toHaveBeenCalledWith(
expect.objectContaining({
props: expect.objectContaining({
focusable: {
trap: false,
focusTriggerAfterClose: true,
},
}),
}),
);
});
describe('Drawer mask blur className', () => {
const testCases: [
mask?: MaskType,

168
components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View File

@@ -8,12 +8,6 @@ exports[`Drawer Drawer loading have a spinner 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -82,12 +76,6 @@ exports[`Drawer Drawer loading have a spinner 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -99,12 +87,6 @@ exports[`Drawer Drawer mask blur className should support closable placement wit
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -154,12 +136,6 @@ exports[`Drawer Drawer mask blur className should support closable placement wit
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -171,12 +147,6 @@ exports[`Drawer Drawer mask blur className should support closable placement wit
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -227,12 +197,6 @@ exports[`Drawer Drawer mask blur className should support closable placement wit
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -244,12 +208,6 @@ exports[`Drawer className is test_drawer 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -300,12 +258,6 @@ exports[`Drawer className is test_drawer 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -317,12 +269,6 @@ exports[`Drawer closable is false 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -339,12 +285,6 @@ exports[`Drawer closable is false 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -361,12 +301,6 @@ exports[`Drawer getContainer return undefined 2`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 400px;"
@@ -417,12 +351,6 @@ exports[`Drawer getContainer return undefined 2`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -435,12 +363,6 @@ exports[`Drawer have a footer 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -496,12 +418,6 @@ exports[`Drawer have a footer 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -513,12 +429,6 @@ exports[`Drawer have a title 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -576,12 +486,6 @@ exports[`Drawer have a title 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -593,12 +497,6 @@ exports[`Drawer render correctly 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 400px;"
@@ -649,12 +547,6 @@ exports[`Drawer render correctly 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -666,12 +558,6 @@ exports[`Drawer render top drawer 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="height: 400px;"
@@ -722,12 +608,6 @@ exports[`Drawer render top drawer 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -743,12 +623,6 @@ exports[`Drawer style migrate match between styles and deprecated style prop 1`]
class="ant-drawer-mask ant-drawer-mask-motion-enter ant-drawer-mask-motion-enter-start ant-drawer-mask-motion ant-drawer-mask-blur"
style="font-size: 15px;"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-enter ant-drawer-panel-motion-right-enter-start ant-drawer-panel-motion-right"
style="width: 378px; font-size: 14px;"
@@ -810,12 +684,6 @@ exports[`Drawer style migrate match between styles and deprecated style prop 1`]
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -830,12 +698,6 @@ exports[`Drawer style migrate match between styles and deprecated style prop 2`]
class="ant-drawer-mask ant-drawer-mask-motion-enter ant-drawer-mask-motion-enter-start ant-drawer-mask-motion ant-drawer-mask-blur"
style="font-size: 15px;"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-enter ant-drawer-panel-motion-right-enter-start ant-drawer-panel-motion-right"
style="width: 378px; font-size: 14px;"
@@ -897,12 +759,6 @@ exports[`Drawer style migrate match between styles and deprecated style prop 2`]
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -916,12 +772,6 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -975,12 +825,6 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;
@@ -992,12 +836,6 @@ exports[`Drawer support closeIcon 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 400px;"
@@ -1031,11 +869,5 @@ exports[`Drawer support closeIcon 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;

12
components/drawer/__tests__/__snapshots__/DrawerEvent.test.tsx.snap
View File

@@ -8,12 +8,6 @@ exports[`Drawer render correctly 1`] = `
<div
class="ant-drawer-mask ant-drawer-mask-motion-leave ant-drawer-mask-motion-leave-start ant-drawer-mask-motion ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
style="width: 378px;"
@@ -64,11 +58,5 @@ exports[`Drawer render correctly 1`] = `
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
`;

288
components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
View File

@@ -17,12 +17,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -88,12 +82,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -137,12 +125,6 @@ Array [
<div
class="ant-drawer-mask acss-c0hvaj ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -217,12 +199,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
<div
class="ant-drawer ant-drawer-right css-var-test-id ant-drawer-open ant-drawer-inline"
@@ -231,12 +207,6 @@ Array [
<div
class="ant-drawer-mask acss-c0hvaj ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -311,12 +281,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -340,12 +304,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -411,12 +369,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -506,12 +458,6 @@ exports[`renders components/drawer/demo/config-provider.tsx extend context corre
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -577,12 +523,6 @@ exports[`renders components/drawer/demo/config-provider.tsx extend context corre
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -712,12 +652,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 500px;"
@@ -815,12 +749,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -870,12 +798,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 720px;"
@@ -2863,12 +2785,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -2892,12 +2808,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -2975,12 +2885,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -3014,12 +2918,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3085,12 +2983,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
<div
@@ -3115,12 +3007,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
<div
class="ant-drawer-mask"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3186,12 +3072,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
<div
@@ -3213,12 +3093,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
class="ant-drawer ant-drawer-right no-mask css-var-test-id ant-drawer-open ant-drawer-inline"
tabindex="-1"
>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3284,12 +3158,6 @@ exports[`renders components/drawer/demo/mask.tsx extend context correctly 1`] =
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
</div>
@@ -3314,12 +3182,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 520px; transform: translateX(-180px);"
@@ -3363,12 +3225,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 320px;"
@@ -3400,22 +3256,10 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -3436,12 +3280,6 @@ Array [
class="ant-drawer ant-drawer-right no-mask css-var-test-id ant-drawer-open ant-drawer-inline"
tabindex="-1"
>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3507,12 +3345,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -3642,12 +3474,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3687,12 +3513,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -3723,12 +3543,6 @@ exports[`renders components/drawer/demo/render-in-current.tsx extend context cor
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -3762,12 +3576,6 @@ exports[`renders components/drawer/demo/render-in-current.tsx extend context cor
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -3964,12 +3772,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 256px;"
@@ -4035,12 +3837,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -4174,12 +3970,6 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px; transform: translateX(-180px);"
@@ -4242,12 +4032,6 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -4305,22 +4089,10 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
<div
class="ant-drawer ant-drawer-right css-var-test-id ant-drawer-open ant-drawer-inline"
@@ -4329,12 +4101,6 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -4392,12 +4158,6 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -4567,12 +4327,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 378px;"
@@ -4670,12 +4424,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;
@@ -4710,12 +4458,6 @@ exports[`renders components/drawer/demo/style-class.tsx extend context correctly
class="ant-drawer-mask ant-drawer-mask-blur"
style="background-image: linear-gradient(to top, #18181b 0, rgba(21, 21, 22, 0.2) 100%);"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 500px;"
@@ -4807,12 +4549,6 @@ exports[`renders components/drawer/demo/style-class.tsx extend context correctly
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
<div
class="ant-drawer ant-drawer-right css-var-test-id ant-drawer-open ant-drawer-inline"
@@ -4821,12 +4557,6 @@ exports[`renders components/drawer/demo/style-class.tsx extend context correctly
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 500px;"
@@ -4947,12 +4677,6 @@ exports[`renders components/drawer/demo/style-class.tsx extend context correctly
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>
</div>
`;
@@ -5076,12 +4800,6 @@ Array [
<div
class="ant-drawer-mask ant-drawer-mask-blur"
/>
<div
aria-hidden="true"
data-sentinel="start"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
<div
class="ant-drawer-content-wrapper"
style="width: 640px;"
@@ -5380,12 +5098,6 @@ Array [
</div>
</div>
</div>
<div
aria-hidden="true"
data-sentinel="end"
style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
tabindex="0"
/>
</div>,
]
`;

1
components/drawer/index.en-US.md
View File

@@ -64,6 +64,7 @@ v5 uses `rootClassName` & `rootStyle` to configure the outermost element style,
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
| footer | The footer for Drawer | ReactNode | - | |
| forceRender | Pre-render Drawer component forcibly | boolean | false | |
| focusable | Configuration for focus management in the Drawer | `{ trap?: boolean, focusTriggerAfterClose?: boolean }` | - | 6.2.0 |
| getContainer | mounted node and display window for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
| headerStyle | Style of the drawer header part | CSSProperties | - | |
| ~~height~~ | Placement is `top` or `bottom`, height of the Drawer dialog, please use `size` instead | string \| number | 378 | |

30
components/drawer/index.tsx
View File

@@ -19,6 +19,8 @@ import { usePanelRef } from '../watermark/context';
import type { DrawerClassNamesType, DrawerPanelProps, DrawerStylesType } from './DrawerPanel';
import DrawerPanel from './DrawerPanel';
import useStyle from './style';
import type { FocusableConfig, OmitFocusType } from './useFocusable';
import useFocusable from './useFocusable';
const _SizeTypes = ['default', 'large'] as const;
@@ -38,7 +40,13 @@ export interface DrawerResizableConfig {
export interface DrawerProps
extends Omit<
RcDrawerProps,
'maskStyle' | 'destroyOnClose' | 'mask' | 'resizable' | 'classNames' | 'styles'
| 'maskStyle'
| 'destroyOnClose'
| 'mask'
| 'resizable'
| 'classNames'
| 'styles'
| OmitFocusType
>,
Omit<DrawerPanelProps, 'prefixCls' | 'ariaId'> {
size?: sizeType | number | string;
@@ -52,6 +60,8 @@ export interface DrawerProps
*/
destroyOnHidden?: boolean;
mask?: MaskType;
focusable?: Omit<FocusableConfig, 'autoFocusButton'>;
}
const defaultPushState: PushState = { distance: 180 };
@@ -80,6 +90,9 @@ const Drawer: React.FC<DrawerProps> & {
resizable,
'aria-labelledby': ariaLabelledby,
// Focus
focusable,
// Deprecated
maskStyle,
drawerStyle,
@@ -190,14 +203,17 @@ const Drawer: React.FC<DrawerProps> & {
const innerPanelRef = usePanelRef();
const mergedPanelRef = composeRef(panelRef, innerPanelRef) as React.Ref<HTMLDivElement>;
// ============================ zIndex ============================
// =========================== zIndex ===========================
const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
// ============================ Mask ============================
const [mergedMask, maskBlurClassName] = useMergedMask(drawerMask, contextMask, prefixCls);
// ========================== Focusable =========================
const mergedFocusable = useFocusable(focusable, getContainer !== false && mergedMask);
// =========================== Render ===========================
const { classNames, styles, rootStyle } = rest;
const [mergedMask, maskBlurClassName] = useMergedMask(drawerMask, contextMask, prefixCls);
const mergedProps: DrawerProps = {
...props,
zIndex,
@@ -205,6 +221,7 @@ const Drawer: React.FC<DrawerProps> & {
mask: mergedMask,
defaultSize,
push,
focusable: mergedFocusable,
};
const [mergedClassNames, mergedStyles] = useMergeSemantic<
@@ -263,6 +280,9 @@ const Drawer: React.FC<DrawerProps> & {
{...(resizable ? { resizable } : {})}
aria-labelledby={ariaLabelledby ?? ariaId}
destroyOnHidden={destroyOnHidden ?? destroyOnClose}
// Focusable
focusTriggerAfterClose={mergedFocusable.focusTriggerAfterClose}
focusTrap={mergedFocusable.trap}
>
<DrawerPanel
prefixCls={prefixCls}

1
components/drawer/index.zh-CN.md
View File

@@ -64,6 +64,7 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
| footer | 抽屉的页脚 | ReactNode | - | |
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
| focusable | 抽屉内焦点管理的配置 | `{ trap?: boolean, focusTriggerAfterClose?: boolean }` | - | 6.2.0 |
| getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
| ~~height~~ | 高度，在 `placement` 为 `top` 或 `bottom` 时使用，请使用 `size` 替换 | string \| number | 378 | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |

21
components/drawer/useFocusable.ts Normal file
View File

@@ -0,0 +1,21 @@
import { useMemo } from 'react';
export type OmitFocusType = 'autoFocusButton' | 'focusTriggerAfterClose' | 'focusTrap';
export interface FocusableConfig {
autoFocusButton?: 'ok' | 'cancel' | false;
focusTriggerAfterClose?: boolean;
trap?: boolean;
}
export default function useFocusable(focusable?: FocusableConfig, defaultTrap?: boolean) {
return useMemo(() => {
const ret = {
trap: defaultTrap ?? true,
focusTriggerAfterClose: true,
...focusable,
};
return ret;
}, [focusable, defaultTrap]);
}

2
package.json
View File

@@ -120,7 +120,7 @@
"@rc-component/collapse": "~1.1.2",
"@rc-component/color-picker": "~3.0.3",
"@rc-component/dialog": "~1.7.0",
"@rc-component/drawer": "~1.3.0",
"@rc-component/drawer": "~1.4.0",
"@rc-component/dropdown": "~1.0.2",
"@rc-component/form": "~1.6.0",
"@rc-component/image": "~1.6.0",