fix(Dialog): blur and text selecting inside a dialog (#582)

Author: tenphi

.changeset/fast-planets-eat.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add SchemeIcon and CodeIcon.

.changeset/giant-hairs-smile.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix the bug that prevented blur and text selection inside a dialog.

.size-limit.js

@@ -19,7 +19,7 @@ module.exports = [
         }),
       );
     },
-    limit: '235kB',
+    limit: '250kB',
   },
   {
     name: 'Tree shaking (just a Button)',

package.json

@@ -60,26 +60,26 @@
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
     "@internationalized/date": "^3.5.6",
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/selection": "^3.20.1",
-    "@react-aria/ssr": "^3.9.6",
-    "@react-aria/utils": "^3.25.3",
-    "@react-spectrum/utils": "^3.11.11",
-    "@react-stately/utils": "^3.10.4",
-    "@react-types/shared": "^3.25.0",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/selection": "^3.22.0",
+    "@react-aria/ssr": "^3.9.7",
+    "@react-aria/utils": "^3.27.0",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-stately/utils": "^3.10.5",
+    "@react-types/shared": "^3.27.0",
     "@vitejs/plugin-react": "^4.3.2",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^7.0.0",
     "email-validator": "^2.0.4",
     "prismjs": "^1.27.0",
-    "react-aria": "^3.35.1",
-    "react-focus-lock": "^2.11.2",
+    "react-aria": "^3.37.0",
+    "react-focus-lock": "^2.13.5",
     "react-is": "^18.3.1",
     "react-keyed-flatten-children": "^1.3.0",
-    "react-stately": "^3.33.0",
+    "react-stately": "^3.35.0",
     "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
     "tiny-invariant": "^1.3.3",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ import { DismissButton, FocusScope, useFocusManager } from 'react-aria';
 import { forwardRef, ReactElement, useEffect, useMemo, useState } from 'react';
 import { useDialog, useMessageFormatter, AriaDialogProps } from 'react-aria';
 import { DOMRef } from '@react-types/shared';
+import FocusLock from 'react-focus-lock';
 
 import {
   BASE_STYLES,
@@ -43,8 +44,9 @@ const DialogElement = tasty({
       '[data-type="panel"]': 'auto',
     },
     height: {
-      '': 'max 90vh',
-      '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
+      '': 'auto 90vh',
+      '[data-type="fullscreen"]': '90vh 90vh',
+      '[data-type="fullscreenTakeover"] | [data-type="panel"]': '100vh 100vh',
       '[data-type="panel"]': 'auto',
     },
     gap: 0,
@@ -150,9 +152,12 @@ export const Dialog = forwardRef(function Dialog(
   }, [props, ref]);
 
   return (
-    <FocusScope restoreFocus contain={isEntered && context.type !== 'panel'}>
-      {content}
-    </FocusScope>
+    // This component is actually traps the focus inside the dialog.
+    <FocusLock returnFocus disabled={!isEntered || context.type === 'panel'}>
+      {/* FocusScope has a bug that prevents selection and blurring in the dialog. */}
+      {/* But we need it to make the autofocus work. */}
+      <FocusScope restoreFocus>{content}</FocusScope>
+    </FocusLock>
   );
 });
 

src/components/overlays/Dialog/Dialog.tsx

@@ -0,0 +1,26 @@
+import { wrapIcon } from './wrap-icon';
+
+export const CodeIcon = wrapIcon(
+  'CodeIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        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"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h16v16H0z" />
+      </clipPath>
+    </defs>
+  </svg>,
+);

src/icons/CodeIcon.tsx

@@ -0,0 +1,26 @@
+import { wrapIcon } from './wrap-icon';
+
+export const SchemeIcon = wrapIcon(
+  'SchemeIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        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"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h16v16H0z" />
+      </clipPath>
+    </defs>
+  </svg>,
+);

src/icons/SchemeIcon.tsx

@@ -17,6 +17,7 @@ export { ClearIcon } from './ClearIcon';
 export { CloseCircleFilledIcon } from './CloseCircleFilledIcon';
 export { CloseCircleIcon } from './CloseCircleIcon';
 export { CloseIcon } from './CloseIcon';
+export { CodeIcon } from './CodeIcon';
 export { CopyIcon } from './CopyIcon';
 export { CountIcon } from './CountIcon';
 export { CubeIcon } from './CubeIcon';
@@ -57,6 +58,7 @@ export { PlusIcon } from './PlusIcon';
 export { ReloadIcon } from './ReloadIcon';
 export { ReturnIcon } from './ReturnIcon';
 export { RightIcon } from './RightIcon';
+export { SchemeIcon } from './SchemeIcon';
 export { SearchIcon } from './SearchIcon';
 export { SettingsIcon } from './SettingsIcon';
 export { ShieldFilledIcon } from './ShieldFilledIcon';