@efa-one/sdk 1.23.0 → 1.24.0

package/README.md

@@ -262,6 +262,13 @@ Excel export for such data. No backend or kernel change.
   permission lookups time out after 5 s. `isFromPlatformParent` also checks `event.origin`.
 - Peer range `i18next-http-backend >=4.0.2`; DataTable bulk bar says „Auswahl aufheben".
 
+**1.24.0 — wider dialogs.** No kernel or backend change.
+- `Dialog` defaults to `size="3xl"` (768 px) instead of `md` (448 px), exported as
+  `DEFAULT_DIALOG_SIZE`; on small screens it keeps 1 rem margin on each side.
+- `RecordDialog` takes `size` and uses the same default.
+- After the bump every dialog without `size` is 768 px wide. Give short confirmations
+  ("Wirklich löschen?") `size="sm"`.
+
 **Next minor (planned 1.23.0, not yet released) — exchange, cookie and S2S hardening.**
 Needs a kernel with efaware/efa_kernel#106 and #107 first (gateway exchange token
 `gw: 'app'`, provenance `jti`, cookie filter). Then:

package/frontend/ui/Dialog.d.ts

@@ -9,8 +9,11 @@ interface DialogProps {
     children: React.ReactNode;
     banner?: React.ReactNode;
     footer?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+    size?: DialogSize;
 }
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export declare const DEFAULT_DIALOG_SIZE: DialogSize;
+export declare function dialogWidthClass(size?: DialogSize): string;
 export declare function Dialog({ open, onOpenChange, trigger, title, description, children, banner, footer, size }: DialogProps): React.JSX.Element;
 export declare const DialogClose: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/frontend/ui/Dialog.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
+export const DEFAULT_DIALOG_SIZE = '3xl';
 const SIZE_CLASS = {
     sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg',
     xl: 'max-w-xl', '2xl': 'max-w-2xl', '3xl': 'max-w-3xl',
     '4xl': 'max-w-4xl', '5xl': 'max-w-5xl',
 };
-export function Dialog({ open, onOpenChange, trigger, title, description, children, banner, footer, size = 'md' }) {
-    return (_jsxs(RadixDialog.Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(RadixDialog.Trigger, { asChild: true, children: trigger }), _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: "fixed inset-0 bg-black/40 z-40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(RadixDialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full ${SIZE_CLASS[size]} flex flex-col max-h-[90vh] rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] shadow-lg focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`, children: [_jsxs("div", { className: "shrink-0 flex items-start justify-between p-5 border-b border-[var(--color-border)]", children: [_jsxs("div", { children: [_jsx(RadixDialog.Title, { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }), description && (_jsx(RadixDialog.Description, { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description }))] }), _jsx(RadixDialog.Close, { className: "ml-4 p-1 rounded-full text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-primary)] transition-colors", children: _jsx(X, { className: "w-4 h-4" }) })] }), banner && _jsx("div", { className: "shrink-0 px-5 pt-5", children: banner }), _jsx("div", { className: "min-h-0 overflow-y-auto p-5", children: children }), footer && (_jsx("div", { className: "shrink-0 flex items-center justify-end gap-2 px-5 pb-5", children: footer }))] })] })] }));
+export function dialogWidthClass(size = DEFAULT_DIALOG_SIZE) {
+    return `w-[calc(100%-2rem)] ${SIZE_CLASS[size]}`;
+}
+export function Dialog({ open, onOpenChange, trigger, title, description, children, banner, footer, size = DEFAULT_DIALOG_SIZE }) {
+    return (_jsxs(RadixDialog.Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(RadixDialog.Trigger, { asChild: true, children: trigger }), _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: "fixed inset-0 bg-black/40 z-40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(RadixDialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 ${dialogWidthClass(size)} flex flex-col max-h-[90vh] rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] shadow-lg focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`, children: [_jsxs("div", { className: "shrink-0 flex items-start justify-between p-5 border-b border-[var(--color-border)]", children: [_jsxs("div", { children: [_jsx(RadixDialog.Title, { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }), description && (_jsx(RadixDialog.Description, { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description }))] }), _jsx(RadixDialog.Close, { className: "ml-4 p-1 rounded-full text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-primary)] transition-colors", children: _jsx(X, { className: "w-4 h-4" }) })] }), banner && _jsx("div", { className: "shrink-0 px-5 pt-5", children: banner }), _jsx("div", { className: "min-h-0 overflow-y-auto p-5", children: children }), footer && (_jsx("div", { className: "shrink-0 flex items-center justify-end gap-2 px-5 pb-5", children: footer }))] })] })] }));
 }
 export const DialogClose = RadixDialog.Close;

package/frontend/ui/RecordDialog.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type DialogSize } from './Dialog.js';
 export type RecordDialogMode = 'read' | 'edit' | 'create';
 interface RecordDialogProps {
     open: {
@@ -19,6 +20,7 @@ interface RecordDialogProps {
     saveDisabled?: boolean;
     error?: string;
     onErrorDismiss?: () => void;
+    size?: DialogSize;
     labels?: {
         close?: string;
         cancel?: string;
@@ -27,5 +29,5 @@ interface RecordDialogProps {
         edit?: string;
     };
 }
-export declare function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, labels, }: RecordDialogProps): React.JSX.Element;
+export declare function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, size, labels, }: RecordDialogProps): React.JSX.Element;
 export {};

package/frontend/ui/RecordDialog.js

@@ -4,7 +4,7 @@ import { Pencil } from 'lucide-react';
 import { Dialog, DialogClose } from './Dialog.js';
 import { Button } from './Button.js';
 import { Alert } from './Alert.js';
-export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, labels, }) {
+export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, size, labels, }) {
     const [internalMode, setInternalMode] = useState('read');
     const mode = controlledMode ?? internalMode;
     useEffect(() => {
@@ -34,7 +34,7 @@ export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeC
     const createLabel = labels?.create ?? 'Erstellen';
     const editLabel = labels?.edit ?? 'Bearbeiten';
     return (_jsx(Dialog, { open: open !== null, onOpenChange: (o) => { if (!o)
-            handleClose(); }, title: title, banner: mode !== 'read' && error
+            handleClose(); }, title: title, size: size, banner: mode !== 'read' && error
             ? _jsx(Alert, { variant: "error", onDismiss: onErrorDismiss, children: error })
             : undefined, footer: mode === 'read' ? (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: closeLabel }) }), _jsxs(Button, { onClick: () => setMode('edit'), children: [_jsx(Pencil, { className: "w-4 h-4" }), editLabel] })] })) : (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: cancelLabel }) }), _jsx(Button, { onClick: handleSave, loading: !!saving, disabled: !!saveDisabled, children: mode === 'create' ? createLabel : saveLabel })] })), children: mode === 'read' ? (_jsxs("div", { children: [_jsx("div", { className: "flex justify-end mb-2 -mt-1", children: _jsx("button", { onClick: () => setMode('edit'), className: "p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-primary-text)] hover:bg-[var(--color-surface-raised)] transition-colors", title: editLabel, "aria-label": editLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }) }), readContent] })) : (_jsx("div", { className: "flex flex-col gap-4", children: editContent })) }));
 }

package/frontend/ui/index.d.ts

@@ -2,7 +2,7 @@ export { Button } from './Button.js';
 export { Input } from './Input.js';
 export { Badge } from './Badge.js';
 export { Alert, type AlertVariant } from './Alert.js';
-export { Dialog, DialogClose } from './Dialog.js';
+export { Dialog, DialogClose, DEFAULT_DIALOG_SIZE, type DialogSize } from './Dialog.js';
 export * as DropdownMenu from './DropdownMenu.js';
 export { Tooltip, TooltipProvider } from './Tooltip.js';
 export { EmptyState } from './EmptyState.js';

package/frontend/ui/index.js

@@ -2,7 +2,7 @@ export { Button } from './Button.js';
 export { Input } from './Input.js';
 export { Badge } from './Badge.js';
 export { Alert } from './Alert.js';
-export { Dialog, DialogClose } from './Dialog.js';
+export { Dialog, DialogClose, DEFAULT_DIALOG_SIZE } from './Dialog.js';
 export * as DropdownMenu from './DropdownMenu.js';
 export { Tooltip, TooltipProvider } from './Tooltip.js';
 export { EmptyState } from './EmptyState.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "Offizielles SDK für efa-one-Apps: Auth/Session, Service-Discovery, Gateway-Client, Audit/Reporting/Mail/Notifications, Permission- und Capability-Registrierung sowie das Frontend-IPC-/i18n-Toolkit.",
   "license": "Apache-2.0",
   "type": "commonjs",