Skip to content

Commit 8871512

Browse files
tenphitenphi
authored
fix(Dialog): blur and text selecting inside a dialog (#582)
1 parent fd4f57a commit 8871512

File tree

9 files changed

+1141
-973
lines changed

9 files changed

+1141
-973
lines changed

‎.changeset/fast-planets-eat.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cube-dev/ui-kit': patch
3+
---
4+
5+
Add SchemeIcon and CodeIcon.

‎.changeset/giant-hairs-smile.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cube-dev/ui-kit': patch
3+
---
4+
5+
Fix the bug that prevented blur and text selection inside a dialog.

‎.size-limit.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ module.exports = [
1919
}),
2020
);
2121
},
22-
limit: '235kB',
22+
limit: '250kB',
2323
},
2424
{
2525
name: 'Tree shaking (just a Button)',

‎package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,26 +60,26 @@
6060
"dependencies": {
6161
"@ant-design/icons": "^5.5.1",
6262
"@internationalized/date": "^3.5.6",
63-
"@react-aria/focus": "^3.18.4",
64-
"@react-aria/i18n": "^3.12.3",
65-
"@react-aria/interactions": "^3.22.4",
66-
"@react-aria/selection": "^3.20.1",
67-
"@react-aria/ssr": "^3.9.6",
68-
"@react-aria/utils": "^3.25.3",
69-
"@react-spectrum/utils": "^3.11.11",
70-
"@react-stately/utils": "^3.10.4",
71-
"@react-types/shared": "^3.25.0",
63+
"@react-aria/focus": "^3.19.1",
64+
"@react-aria/i18n": "^3.12.5",
65+
"@react-aria/interactions": "^3.23.0",
66+
"@react-aria/selection": "^3.22.0",
67+
"@react-aria/ssr": "^3.9.7",
68+
"@react-aria/utils": "^3.27.0",
69+
"@react-spectrum/utils": "^3.12.1",
70+
"@react-stately/utils": "^3.10.5",
71+
"@react-types/shared": "^3.27.0",
7272
"@vitejs/plugin-react": "^4.3.2",
7373
"clipboard-copy": "^4.0.1",
7474
"clsx": "^1.1.1",
7575
"diff": "^7.0.0",
7676
"email-validator": "^2.0.4",
7777
"prismjs": "^1.27.0",
78-
"react-aria": "^3.35.1",
79-
"react-focus-lock": "^2.11.2",
78+
"react-aria": "^3.37.0",
79+
"react-focus-lock": "^2.13.5",
8080
"react-is": "^18.3.1",
8181
"react-keyed-flatten-children": "^1.3.0",
82-
"react-stately": "^3.33.0",
82+
"react-stately": "^3.35.0",
8383
"react-transition-group": "^4.4.5",
8484
"react-types": "^0.1.0",
8585
"tiny-invariant": "^1.3.3",

‎pnpm-lock.yaml

Lines changed: 1054 additions & 955 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/overlays/Dialog/Dialog.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DismissButton, FocusScope, useFocusManager } from 'react-aria';
33
import { forwardRef, ReactElement, useEffect, useMemo, useState } from 'react';
44
import { useDialog, useMessageFormatter, AriaDialogProps } from 'react-aria';
55
import { DOMRef } from '@react-types/shared';
6+
import FocusLock from 'react-focus-lock';
67

78
import {
89
BASE_STYLES,
@@ -43,8 +44,9 @@ const DialogElement = tasty({
4344
'[data-type="panel"]': 'auto',
4445
},
4546
height: {
46-
'': 'max 90vh',
47-
'[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
47+
'': 'auto 90vh',
48+
'[data-type="fullscreen"]': '90vh 90vh',
49+
'[data-type="fullscreenTakeover"] | [data-type="panel"]': '100vh 100vh',
4850
'[data-type="panel"]': 'auto',
4951
},
5052
gap: 0,
@@ -150,9 +152,12 @@ export const Dialog = forwardRef(function Dialog(
150152
}, [props, ref]);
151153

152154
return (
153-
<FocusScope restoreFocus contain={isEntered && context.type !== 'panel'}>
154-
{content}
155-
</FocusScope>
155+
// This component is actually traps the focus inside the dialog.
156+
<FocusLock returnFocus disabled={!isEntered || context.type === 'panel'}>
157+
{/* FocusScope has a bug that prevents selection and blurring in the dialog. */}
158+
{/* But we need it to make the autofocus work. */}
159+
<FocusScope restoreFocus>{content}</FocusScope>
160+
</FocusLock>
156161
);
157162
});
158163

‎src/icons/CodeIcon.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { wrapIcon } from './wrap-icon';
2+
3+
export const CodeIcon = wrapIcon(
4+
'CodeIcon',
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="16"
8+
height="16"
9+
fill="none"
10+
viewBox="0 0 16 16"
11+
>
12+
<g clipPath="url(#a)">
13+
<path
14+
fill="currentColor"
15+
fillRule="evenodd"
16+
d="M10.136 1.136A.65.65 0 0 0 8.864.864l-3 14a.65.65 0 0 0 1.272.272zM4.46 4.54a.65.65 0 0 1 0 .92L1.92 8l2.54 2.54a.65.65 0 0 1-.92.92l-3-3a.65.65 0 0 1 0-.92l3-3a.65.65 0 0 1 .92 0m7.08 0a.65.65 0 0 0 0 .92L14.08 8l-2.54 2.54a.65.65 0 1 0 .92.92l3-3a.65.65 0 0 0 0-.92l-3-3a.65.65 0 0 0-.92 0"
17+
clipRule="evenodd"
18+
/>
19+
</g>
20+
<defs>
21+
<clipPath id="a">
22+
<path fill="#fff" d="M0 0h16v16H0z" />
23+
</clipPath>
24+
</defs>
25+
</svg>,
26+
);

‎src/icons/SchemeIcon.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { wrapIcon } from './wrap-icon';
2+
3+
export const SchemeIcon = wrapIcon(
4+
'SchemeIcon',
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="16"
8+
height="16"
9+
fill="none"
10+
viewBox="0 0 16 16"
11+
>
12+
<g clipPath="url(#a)">
13+
<path
14+
fill="currentColor"
15+
fillRule="evenodd"
16+
d="M10 1.998a1.2 1.2 0 0 1 1.2-1.2H14a1.2 1.2 0 0 1 1.2 1.2V6A1.2 1.2 0 0 1 14 7.2h-2.8A1.2 1.2 0 0 1 10 6v-.98H8.2v6.056H10V9.998a1.2 1.2 0 0 1 1.2-1.2H14a1.2 1.2 0 0 1 1.2 1.2V14a1.2 1.2 0 0 1-1.2 1.2h-2.8A1.2 1.2 0 0 1 10 14v-1.724H8.2a1.2 1.2 0 0 1-1.2-1.2V8.6H5.2V10A1.2 1.2 0 0 1 4 11.2H1.2A1.2 1.2 0 0 1 0 10V5.998a1.2 1.2 0 0 1 1.2-1.2H4a1.2 1.2 0 0 1 1.2 1.2V7.4H7V5.02a1.2 1.2 0 0 1 1.2-1.2H10zm4 0h-2.8V6H14zm-10 4H1.2V10H4zm7.2 4H14V14h-2.8z"
17+
clipRule="evenodd"
18+
/>
19+
</g>
20+
<defs>
21+
<clipPath id="a">
22+
<path fill="#fff" d="M0 0h16v16H0z" />
23+
</clipPath>
24+
</defs>
25+
</svg>,
26+
);

‎src/icons/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export { ClearIcon } from './ClearIcon';
1717
export { CloseCircleFilledIcon } from './CloseCircleFilledIcon';
1818
export { CloseCircleIcon } from './CloseCircleIcon';
1919
export { CloseIcon } from './CloseIcon';
20+
export { CodeIcon } from './CodeIcon';
2021
export { CopyIcon } from './CopyIcon';
2122
export { CountIcon } from './CountIcon';
2223
export { CubeIcon } from './CubeIcon';
@@ -57,6 +58,7 @@ export { PlusIcon } from './PlusIcon';
5758
export { ReloadIcon } from './ReloadIcon';
5859
export { ReturnIcon } from './ReturnIcon';
5960
export { RightIcon } from './RightIcon';
61+
export { SchemeIcon } from './SchemeIcon';
6062
export { SearchIcon } from './SearchIcon';
6163
export { SettingsIcon } from './SettingsIcon';
6264
export { ShieldFilledIcon } from './ShieldFilledIcon';

0 commit comments

Comments
 (0)