dbeaver/pro#5232 [CB] Trap Focus In the Right Panel

webapp/common-react/@dbeaver/ui-kit/src/Dialog/Dialog.css

@@ -0,0 +1,213 @@
+@import './_base.css';
+
+@layer base {
+  .dbv-kit-dialog__backdrop {
+    background-color: transparent;
+    opacity: 0;
+    transition-property: opacity, background-color;
+    transition-timing-function: ease-in-out;
+    transition-duration: 100ms;
+
+    &[data-enter] {
+      opacity: 1;
+      background-color: var(--dbv-kit-dialog-backdrop-background);
+    }
+
+    &:not([data-enter]) {
+      opacity: 0;
+    }
+
+    &[data-animated='false'] {
+      transition: none !important;
+      opacity: 1;
+      background-color: var(--dbv-kit-dialog-backdrop-background);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none !important;
+      opacity: 1;
+      background-color: var(--dbv-kit-dialog-backdrop-background);
+    }
+  }
+
+  .dbv-kit-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background-color: var(--dbv-kit-dialog-content-background);
+    color: var(--dbv-kit-dialog-content-foreground);
+    border: none;
+    border-radius: var(--dbv-kit-dialog-content-border-radius);
+    box-shadow: var(--dbv-kit-dialog-content-shadow);
+    outline: 0;
+    overflow: hidden;
+    margin: 0;
+    max-width: var(--dbv-kit-dialog-large-width);
+
+    @media (prefers-reduced-motion: no-preference) {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+      transition-property: opacity, transform;
+      transition-timing-function: ease-in-out;
+      transition-duration: 150ms;
+
+      &:not([data-enter]) {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.95);
+      }
+      &[data-enter] {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+
+      &[data-animated='false'] {
+        transition: none !important;
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none !important;
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    &[data-size='small'] {
+      min-width: var(--dbv-kit-dialog-small-width);
+      min-height: var(--dbv-kit-dialog-small-height);
+      max-height: max(var(--app-height, 100vh) - 48px, var(--dbv-kit-dialog-small-height));
+    }
+
+    &[data-size='medium'] {
+      min-width: var(--dbv-kit-dialog-medium-width);
+      min-height: var(--dbv-kit-dialog-medium-height);
+      max-height: max(var(--app-height, 100vh) - 48px, var(--dbv-kit-dialog-medium-height));
+    }
+
+    &[data-size='large'] {
+      min-width: var(--dbv-kit-dialog-large-width);
+      min-height: var(--dbv-kit-dialog-large-height);
+      max-height: max(var(--app-height, 100vh) - 48px, var(--dbv-kit-dialog-large-height));
+    }
+
+    &[data-size='free'] {
+      min-width: auto;
+      min-height: auto;
+      max-width: calc(100vw - 48px);
+      max-height: calc(100vh - 48px);
+    }
+
+    /* Slide variant (side panel from right) */
+    &[data-variant='slide'] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transform: translateX(100%);
+      width: 100%;
+      max-width: none;
+      height: 100%;
+      max-height: 100%;
+      min-width: 0;
+      min-height: 0;
+      border-radius: 0;
+
+      @media (prefers-reduced-motion: no-preference) {
+        opacity: 1;
+        transition-property: transform;
+        transition-timing-function: var(--dbv-kit-dialog-slide-transition-timing);
+        transition-duration: var(--dbv-kit-dialog-slide-transition-duration);
+
+        &[data-enter] {
+          transform: translateX(0);
+        }
+
+        &:not([data-enter]) {
+          transform: translateX(100%);
+        }
+
+        &[data-animated='false'] {
+          transition: none !important;
+          transform: translateX(0);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none !important;
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+
+  .dbv-kit-dialog__header {
+    flex-shrink: 0;
+    padding: var(--dbv-kit-dialog-header-padding);
+    border-bottom: var(--dbv-kit-dialog-header-border-bottom);
+  }
+
+  .dbv-kit-dialog__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--dbv-kit-dialog-body-padding);
+  }
+
+  .dbv-kit-dialog__footer {
+    flex-shrink: 0;
+    padding: var(--dbv-kit-dialog-footer-padding);
+    border-top: var(--dbv-kit-dialog-footer-border-top);
+    display: flex;
+    gap: var(--dbv-kit-dialog-footer-gap);
+    justify-content: flex-end;
+  }
+
+  .dbv-kit-dialog__disclosure {
+    background-color: var(--dbv-kit-dialog-disclosure-background);
+    color: var(--dbv-kit-dialog-disclosure-foreground);
+  }
+
+  .dbv-kit-dialog__heading {
+    margin: var(--dbv-kit-dialog-heading-margin);
+    font-size: var(--dbv-kit-dialog-heading-font-size);
+    font-weight: var(--dbv-kit-dialog-heading-font-weight);
+    line-height: var(--dbv-kit-dialog-heading-line-height);
+    color: var(--dbv-kit-dialog-heading-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dbv-kit-dialog__description {
+    margin: var(--dbv-kit-dialog-description-margin);
+    font-size: var(--dbv-kit-dialog-description-font-size);
+    color: var(--dbv-kit-dialog-description-color);
+  }
+
+  .dbv-kit-dialog__dismiss {
+    background-color: var(--dbv-kit-dialog-dismiss-background);
+    color: var(--dbv-kit-dialog-dismiss-foreground);
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.875rem;
+    transition: background-color 150ms var(--tw-ease-in-out);
+
+    &:hover:not([aria-disabled='true']) {
+      background-color: var(--dbv-kit-dialog-dismiss-hover-background);
+    }
+
+    &[aria-disabled='true'] {
+      opacity: var(--dbv-kit-control-disabled-opacity, 0.5);
+      cursor: not-allowed;
+    }
+  }
+}

webapp/common-react/@dbeaver/ui-kit/src/Dialog/Dialog.tsx

@@ -0,0 +1,92 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import {
+  Dialog as AriakitDialog,
+  DialogDescription as AriakitDialogDescription,
+  DialogDisclosure as AriakitDialogDisclosure,
+  DialogDismiss as AriakitDialogDismiss,
+  DialogHeading as AriakitDialogHeading,
+  DialogProvider,
+  type DialogDescriptionProps,
+  type DialogDismissProps,
+  type DialogDisclosureProps,
+  type DialogHeadingProps,
+  type DialogProps,
+  type DialogProviderProps,
+  type DialogStore,
+  type DialogStoreProps,
+  type DialogStoreState,
+  useDialogContext,
+  useDialogStore,
+} from '@ariakit/react';
+import clsx from 'clsx';
+import type { ComponentPropsWithoutRef, JSX } from 'react';
+
+import './Dialog.css';
+
+interface ExtendedDialogProps extends DialogProps {
+  animated?: boolean;
+}
+
+function Dialog({ className, backdrop, animated = true, ...props }: ExtendedDialogProps): JSX.Element {
+  const backdropElement = backdrop === true ? <div className="dbv-kit-dialog__backdrop" data-animated={animated} /> : backdrop;
+
+  return <AriakitDialog className={clsx('dbv-kit-dialog', className)} backdrop={backdropElement} data-animated={animated} {...props} />;
+}
+
+function DialogDisclosure({ className, ...props }: DialogDisclosureProps): JSX.Element {
+  return <AriakitDialogDisclosure className={clsx('dbv-kit-dialog__disclosure', className)} {...props} />;
+}
+
+function DialogHeader({ className, ...props }: ComponentPropsWithoutRef<'header'>): JSX.Element {
+  return <header className={clsx('dbv-kit-dialog__header', className)} {...props} />;
+}
+
+function DialogBody({ className, ...props }: ComponentPropsWithoutRef<'div'>): JSX.Element {
+  return <div className={clsx('dbv-kit-dialog__body', className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: ComponentPropsWithoutRef<'footer'>): JSX.Element {
+  return <footer className={clsx('dbv-kit-dialog__footer', className)} {...props} />;
+}
+
+function DialogHeading({ className, ...props }: DialogHeadingProps): JSX.Element {
+  return <AriakitDialogHeading className={clsx('dbv-kit-dialog__heading', className)} {...props} />;
+}
+
+function DialogDescription({ className, ...props }: DialogDescriptionProps): JSX.Element {
+  return <AriakitDialogDescription className={clsx('dbv-kit-dialog__description', className)} {...props} />;
+}
+
+function DialogDismiss({ className, ...props }: DialogDismissProps): JSX.Element {
+  return <AriakitDialogDismiss className={clsx('dbv-kit-dialog__dismiss', className)} {...props} />;
+}
+
+export {
+  Dialog,
+  DialogDisclosure,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogHeading,
+  DialogDescription,
+  DialogDismiss,
+  DialogProvider,
+  useDialogStore,
+  useDialogContext,
+  type ExtendedDialogProps as DialogProps,
+  type DialogProviderProps,
+  type DialogDisclosureProps,
+  type DialogHeadingProps,
+  type DialogDescriptionProps,
+  type DialogDismissProps,
+  type DialogStore,
+  type DialogStoreProps,
+  type DialogStoreState,
+};

webapp/common-react/@dbeaver/ui-kit/src/Dialog/_base.css

@@ -0,0 +1,66 @@
+@layer base {
+  :root {
+    /* Dialog container */
+    --dbv-kit-dialog-content-background: #ffffff;
+    --dbv-kit-dialog-content-foreground: #353535;
+    --dbv-kit-dialog-content-border-radius: 0.25rem;
+    --dbv-kit-dialog-content-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f;
+
+    /* Dialog layout */
+    --dbv-kit-dialog-header-padding: 1rem 1.5rem;
+    --dbv-kit-dialog-header-border-bottom: none;
+    --dbv-kit-dialog-body-padding: 1.5rem;
+    --dbv-kit-dialog-footer-padding: 1rem 1.5rem;
+    --dbv-kit-dialog-footer-border-top: none;
+    --dbv-kit-dialog-footer-gap: 0.75rem;
+
+    /* Dialog sizes */
+    --dbv-kit-dialog-small-width: 404px;
+    --dbv-kit-dialog-small-height: 262px;
+    --dbv-kit-dialog-medium-width: 576px;
+    --dbv-kit-dialog-medium-height: 374px;
+    --dbv-kit-dialog-large-width: 720px;
+    --dbv-kit-dialog-large-height: 468px;
+    --dbv-kit-dialog-max-width: 720px;
+
+    /* Slide variant (side panel) */
+    --dbv-kit-dialog-slide-transition-duration: 300ms;
+    --dbv-kit-dialog-slide-transition-timing: ease-in-out;
+
+    /* Backdrop */
+    --dbv-kit-dialog-backdrop-background: #0000007a;
+
+    /* Heading */
+    --dbv-kit-dialog-heading-margin: 0;
+    --dbv-kit-dialog-heading-font-size: 1.25rem;
+    --dbv-kit-dialog-heading-font-weight: 400;
+    --dbv-kit-dialog-heading-line-height: 2rem;
+    --dbv-kit-dialog-heading-color: var(--dbv-kit-dialog-content-foreground);
+
+    /* Description */
+    --dbv-kit-dialog-description-margin: 0;
+    --dbv-kit-dialog-description-font-size: 0.875rem;
+    --dbv-kit-dialog-description-color: inherit;
+
+    /* Disclosure */
+    --dbv-kit-dialog-disclosure-background: transparent;
+    --dbv-kit-dialog-disclosure-foreground: inherit;
+
+    /* Dismiss */
+    --dbv-kit-dialog-dismiss-background: #f2f2f2;
+    --dbv-kit-dialog-dismiss-foreground: #353535;
+    --dbv-kit-dialog-dismiss-hover-background: #e5e5e5;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --dbv-kit-dialog-content-background: hsl(240deg, 10%, 16%);
+      --dbv-kit-dialog-content-foreground: #ffffff;
+      --dbv-kit-dialog-header-border-bottom: none;
+      --dbv-kit-dialog-footer-border-top: none;
+      --dbv-kit-dialog-dismiss-background: hsl(240deg, 10%, 18%);
+      --dbv-kit-dialog-dismiss-foreground: #cbcbcb;
+      --dbv-kit-dialog-dismiss-hover-background: hsl(240deg, 10%, 22%);
+    }
+  }
+}

webapp/common-react/@dbeaver/ui-kit/src/index.ts

@@ -21,12 +21,12 @@
   type FocusTrapRegionProps,
 } from '@ariakit/react';
 
 export { Button, ButtonBase, type ButtonProps, ButtonIcon, type ButtonIconProps } from './Button/Button.js';
 export { IconButton, IconButtonBase, type IconButtonProps } from './IconButton/IconButton.js';
 export { Checkbox, CheckboxBase, type CheckboxProps } from './Checkbox/Checkbox.js';
 export { ColorPicker } from './ColorPicker/ColorPicker.js';
 export { ColorPickerBase, type ColorPickerProps } from './ColorPicker/ColorPickerBase.js';
 export { Input, InputBase, type InputProps } from './Input/Input.js';
 export {
   Select,
   useSelectContext,
@@ -36,10 +36,10 @@
   type SelectLabelProps,
   type SelectPopoverProps,
   type SelectItemProps,
 } from './Select/Select.js';
 export * from './Combobox/Combobox.js';
 export * from './Command/Command.js';
 export { Popover } from './Popover/Popover.js';
 export { SelectField, type SelectFieldProps, type SelectItem } from './Select/SelectField.js';
 export { Spinner, type SpinnerProps } from './Spinner/Spinner.js';
 export { Radio, RadioGroup, useRadioContext, useRadioStore, type RadioProviderProps, type RadioProps, type RadioGroupProps } from './Radio/index.js';
@@ -48,3 +48,4 @@
 export * from './ComponentProvider.js';
 export * from './Menu/Menu.js';
 export * from './Disclosure/Disclosure.js';
+export * from './Dialog/Dialog.js';