@cratis/components 1.1.5 → 1.2.0

package/dist/cjs/CommandDialog/CommandDialog.js

@@ -6,23 +6,36 @@ var Dialog = require('../Dialogs/Dialog.js');
 var React = require('react');
 var commands = require('@cratis/arc.react/commands');
 
-const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabel, onConfirm, onCancel, onBeforeExecute, children }) => {
-    const { setCommandValues, setCommandResult, isValid } = commands.useCommandFormContext();
+const CommandDialogWrapper = ({ title, visible, width, style, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, children }) => {
+    const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = commands.useCommandFormContext();
     const commandInstance = commands.useCommandInstance();
+    const [isBusy, setIsBusy] = React.useState(false);
     const handleConfirm = async () => {
         if (onBeforeExecute) {
             const transformedValues = onBeforeExecute(commandInstance);
             setCommandValues(transformedValues);
         }
-        const result = await commandInstance.execute();
-        if (result.isSuccess) {
-            await onConfirm(result);
-            return false;
+        setIsBusy(true);
+        let result;
+        try {
+            result = await commandInstance.execute();
+        }
+        finally {
+            setIsBusy(false);
         }
-        else {
+        if (!result.isSuccess) {
             setCommandResult(result);
             return false;
         }
+        if (onConfirm) {
+            const closeResult = await onConfirm();
+            return closeResult === true;
+        }
+        if (onClose) {
+            const closeResult = await onClose(dialogs.DialogResult.Ok);
+            return closeResult !== false;
+        }
+        return true;
     };
     const processChildren = (nodes) => {
         return React.Children.map(nodes, (child) => {
@@ -42,11 +55,12 @@ const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabe
         });
     };
     const processedChildren = processChildren(children);
-    return (jsxRuntime.jsx(Dialog.Dialog, { title: header, visible: visible, width: width, onConfirm: handleConfirm, onCancel: onCancel, buttons: dialogs.DialogButtons.OkCancel, okLabel: confirmLabel, cancelLabel: cancelLabel, isValid: isValid, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
+    const isDialogValid = (isValid !== false) && isCommandFormValid;
+    return (jsxRuntime.jsx(Dialog.Dialog, { title: title, visible: visible, width: width, style: style, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
 };
 const CommandDialogComponent = (props) => {
-    const { visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, children, width = '50vw', ...commandFormProps } = props;
-    return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { header: header, visible: visible, width: width, confirmLabel: confirmLabel, cancelLabel: cancelLabel, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
+    const { title, visible, width, style, resizable, buttons = dialogs.DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, children, ...commandFormProps } = props;
+    return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
 };
 const CommandDialogColumnWrapper = ({ children }) => (jsxRuntime.jsx(commands.CommandForm.Column, { children: children }));
 CommandDialogColumnWrapper.displayName = 'CommandFormColumn';

package/dist/cjs/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { DialogButtons } from '@cratis/arc.react/dialogs';\nimport { Dialog } from '../Dialogs/Dialog';\nimport React from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\n\nexport interface CommandDialogProps<TCommand extends object, TResponse = object>\n    extends Omit<CommandFormProps<TCommand>, 'children'> {\n    visible?: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    header,\n    visible,\n    width,\n    confirmLabel,\n    cancelLabel,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    header: string;\n    visible?: boolean;\n    width: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    children: React.ReactNode;\n}) => {\n    const { setCommandValues, setCommandResult, isValid } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n        const result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n            return false;\n        } else {\n            setCommandResult(result);\n            return false;\n        }\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    const processedChildren = processChildren(children);\n\n    return (\n        <Dialog\n            title={header}\n            visible={visible}\n            width={width}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            buttons={DialogButtons.OkCancel}\n            okLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n            isValid={isValid}\n        >\n            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>\n                {processedChildren}\n            </div>\n        </Dialog>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        onConfirm,\n        onCancel,\n        children,\n        width = '50vw',\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <CommandDialogWrapper<TCommand>\n                header={header}\n                visible={visible}\n                width={width}\n                confirmLabel={confirmLabel}\n                cancelLabel={cancelLabel}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n            >\n                {children}\n            </CommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nconst CommandDialogColumnWrapper = ({ children }: { children: React.ReactNode }) => (\n    <CommandForm.Column>{children}</CommandForm.Column>\n);\nCommandDialogColumnWrapper.displayName = 'CommandFormColumn';\n\nCommandDialogComponent.Column = CommandDialogColumnWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["useCommandFormContext","useCommandInstance","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { DialogButtons, DialogResult } from '@cratis/arc.react/dialogs';\nimport { Dialog, type DialogProps } from '../Dialogs/Dialog';\nimport React, { useState } from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\n\nexport interface CommandDialogProps<TCommand extends object>\n    extends Omit<CommandFormProps<TCommand>, 'children'>,\n        Omit<DialogProps, 'children'> {\n    children?: React.ReactNode;\n}\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    title,\n    visible,\n    width,\n    style,\n    resizable,\n    buttons,\n    okLabel,\n    cancelLabel,\n    yesLabel,\n    noLabel,\n    isValid,\n    onClose,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    title: string;\n    visible?: boolean;\n    width?: string;\n    style?: DialogProps['style'];\n    resizable?: boolean;\n    buttons?: DialogProps['buttons'];\n    okLabel?: string;\n    cancelLabel?: string;\n    yesLabel?: string;\n    noLabel?: string;\n    isValid?: boolean;\n    onClose?: DialogProps['onClose'];\n    onConfirm?: DialogProps['onConfirm'];\n    onCancel?: DialogProps['onCancel'];\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    children?: React.ReactNode;\n}) => {\n    const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n    const [isBusy, setIsBusy] = useState(false);\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n\n        setIsBusy(true);\n        let result: ICommandResult<unknown>;\n        try {\n            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        } finally {\n            setIsBusy(false);\n        }\n\n        if (!result.isSuccess) {\n            setCommandResult(result);\n            return false;\n        }\n\n        if (onConfirm) {\n            const closeResult = await onConfirm();\n            return closeResult === true;\n        }\n\n        if (onClose) {\n            const closeResult = await onClose(DialogResult.Ok);\n            return closeResult !== false;\n        }\n\n        return true;\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    const processedChildren = processChildren(children);\n    const isDialogValid = (isValid !== false) && isCommandFormValid;\n\n    return (\n        <Dialog\n            title={title}\n            visible={visible}\n            width={width}\n            style={style}\n            resizable={resizable}\n            buttons={buttons}\n            onClose={onClose}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            okLabel={okLabel}\n            cancelLabel={cancelLabel}\n            yesLabel={yesLabel}\n            noLabel={noLabel}\n            isValid={isDialogValid}\n            isBusy={isBusy}\n        >\n            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>\n                {processedChildren}\n            </div>\n        </Dialog>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object>(props: CommandDialogProps<TCommand>) => {\n    const {\n        title,\n        visible,\n        width,\n        style,\n        resizable,\n        buttons = DialogButtons.OkCancel,\n        okLabel,\n        cancelLabel,\n        yesLabel,\n        noLabel,\n        isValid,\n        onClose,\n        onConfirm,\n        onCancel,\n        children,\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <CommandDialogWrapper<TCommand>\n                title={title}\n                visible={visible}\n                width={width}\n                style={style}\n                resizable={resizable}\n                buttons={buttons}\n                okLabel={okLabel}\n                cancelLabel={cancelLabel}\n                yesLabel={yesLabel}\n                noLabel={noLabel}\n                isValid={isValid}\n                onClose={onClose}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n            >\n                {children}\n            </CommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nconst CommandDialogColumnWrapper = ({ children }: { children: React.ReactNode }) => (\n    <CommandForm.Column>{children}</CommandForm.Column>\n);\nCommandDialogColumnWrapper.displayName = 'CommandFormColumn';\n\nCommandDialogComponent.Column = CommandDialogColumnWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["useCommandFormContext","useCommandInstance","useState","DialogResult","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}

package/dist/cjs/Dialogs/Dialog.js

@@ -5,7 +5,7 @@ var dialog = require('primereact/dialog');
 var button = require('primereact/button');
 var dialogs = require('@cratis/arc.react/dialogs');
 
-const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = dialogs.DialogButtons.OkCancel, children, width = '450px', resizable = false, isValid, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No' }) => {
+const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = dialogs.DialogButtons.OkCancel, children, width = '450px', style, resizable = false, isValid, isBusy = false, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No' }) => {
     let contextCloseDialog;
     try {
         const context = dialogs.useDialogContext();
@@ -42,10 +42,10 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
             contextCloseDialog?.(result);
         }
     };
-    const okFooter = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Ok), disabled: !isDialogValid, autoFocus: true }) }));
-    const okCancelFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Ok), disabled: !isDialogValid, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.Cancelled) })] }));
-    const yesNoFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Yes), disabled: !isDialogValid, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.No) })] }));
-    const yesNoCancelFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Yes), disabled: !isDialogValid, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.No) }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.Cancelled) })] }));
+    const okFooter = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Ok), disabled: !isDialogValid || isBusy, loading: isBusy, autoFocus: true }) }));
+    const okCancelFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Ok), disabled: !isDialogValid || isBusy, loading: isBusy, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.Cancelled), disabled: isBusy })] }));
+    const yesNoFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Yes), disabled: !isDialogValid || isBusy, loading: isBusy, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.No), disabled: isBusy })] }));
+    const yesNoCancelFooter = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(dialogs.DialogResult.Yes), disabled: !isDialogValid || isBusy, loading: isBusy, autoFocus: true }), jsxRuntime.jsx(button.Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.No), disabled: isBusy }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.Cancelled), disabled: isBusy })] }));
     const getFooterInterior = () => {
         if (typeof buttons !== 'number') {
             return buttons;
@@ -63,7 +63,7 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
         return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
     };
     const footer = (jsxRuntime.jsx("div", { className: "flex flex-wrap justify-content-start gap-3", children: getFooterInterior() }));
-    return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: typeof buttons === 'number' ? () => handleClose(dialogs.DialogResult.Cancelled) : () => { }, visible: visible, style: { width }, resizable: resizable, closable: typeof buttons === 'number', children: children }));
+    return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: typeof buttons === 'number' ? () => handleClose(dialogs.DialogResult.Cancelled) : () => { }, visible: visible, style: { width, ...style }, resizable: resizable, closable: typeof buttons === 'number', children: children }));
 };
 
 exports.Dialog = Dialog;

package/dist/cjs/Dialogs/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Dialog as PrimeDialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { ReactNode } from 'react';\n\nexport type CloseDialog = (result: DialogResult) => boolean | void | Promise<boolean> | Promise<void>;\nexport type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;\nexport type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;\n\nexport interface DialogProps {\n    title: string;\n    visible?: boolean;\n    onClose?: CloseDialog;\n    onConfirm?: ConfirmCallback;\n    onCancel?: CancelCallback;\n    buttons?: DialogButtons | ReactNode;\n    children: ReactNode;\n    width?: string;\n    resizable?: boolean;\n    isValid?: boolean;\n    okLabel?: string;\n    cancelLabel?: string;\n    yesLabel?: string;\n    noLabel?: string;\n}\n\nexport const Dialog = ({ \n    title, \n    visible = true, \n    onClose, \n    onConfirm,\n    onCancel,\n    buttons = DialogButtons.OkCancel, \n    children, \n    width = '450px', \n    resizable = false, \n    isValid,\n    okLabel = 'Ok',\n    cancelLabel = 'Cancel',\n    yesLabel = 'Yes',\n    noLabel = 'No'\n}: DialogProps) => {\n    // Try to get dialog context, but allow it to be undefined for standalone usage\n    let contextCloseDialog: ((result: DialogResult) => void) | undefined;\n    try {\n        const context = useDialogContext();\n        contextCloseDialog = context?.closeDialog;\n    } catch {\n        // No context available - dialog is being used standalone\n        contextCloseDialog = undefined;\n    }\n    \n    const isDialogValid = isValid !== false;\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{title}</span>\n        </div>\n    );\n\n    const handleClose = async (result: DialogResult) => {\n        let shouldCloseThroughContext = true;\n\n        if (result === DialogResult.Ok || result === DialogResult.Yes) {\n            if (onConfirm) {\n                const closeResult = await onConfirm();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        } else {\n            if (onCancel) {\n                const closeResult = await onCancel();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        }\n\n        if (shouldCloseThroughContext) {\n            contextCloseDialog?.(result);\n        }\n    };\n\n    const okFooter = (\n        <>\n            <Button label={okLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid} autoFocus />\n        </>\n    );\n\n    const okCancelFooter = (\n        <>\n            <Button label={okLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid} autoFocus />\n            <Button label={cancelLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.Cancelled)} />\n        </>\n    );\n\n    const yesNoFooter = (\n        <>\n            <Button label={yesLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid} autoFocus />\n            <Button label={noLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.No)} />\n        </>\n    );\n\n    const yesNoCancelFooter = (\n        <>\n            <Button label={yesLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid} autoFocus />\n            <Button label={noLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.No)} />\n            <Button label={cancelLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.Cancelled)} />\n        </>\n    );\n\n    const getFooterInterior = () => {\n        // If buttons is a ReactNode (custom buttons), use it directly\n        if (typeof buttons !== 'number') {\n            return buttons;\n        }\n\n        // Otherwise, use predefined buttons based on DialogButtons enum\n        switch (buttons) {\n            case DialogButtons.Ok:\n                return okFooter;\n            case DialogButtons.OkCancel:\n                return okCancelFooter;\n            case DialogButtons.YesNo:\n                return yesNoFooter;\n            case DialogButtons.YesNoCancel:\n                return yesNoCancelFooter;\n        }\n\n        return (<></>);\n    };\n\n    const footer = (\n        <div className=\"flex flex-wrap justify-content-start gap-3\">\n            {getFooterInterior()}\n        </div>\n    );\n\n    return (\n        <PrimeDialog\n            header={headerElement}\n            modal\n            footer={footer}\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onHide={typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => {}}\n            visible={visible}\n            style={{ width }}\n            resizable={resizable}\n            closable={typeof buttons === 'number'}>\n            {children}\n        </PrimeDialog>\n    );\n};\n"],"names":["DialogButtons","useDialogContext","_jsx","DialogResult","_Fragment","Button","_jsxs","PrimeDialog"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Dialog as PrimeDialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport { DialogResult, DialogButtons, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport type CloseDialog = (result: DialogResult) => boolean | void | Promise<boolean> | Promise<void>;\nexport type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;\nexport type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;\n\nexport interface DialogProps {\n    title: string;\n    visible?: boolean;\n    onClose?: CloseDialog;\n    onConfirm?: ConfirmCallback;\n    onCancel?: CancelCallback;\n    buttons?: DialogButtons | ReactNode;\n    children: ReactNode;\n    width?: string;\n    style?: CSSProperties;\n    resizable?: boolean;\n    isValid?: boolean;\n    isBusy?: boolean;\n    okLabel?: string;\n    cancelLabel?: string;\n    yesLabel?: string;\n    noLabel?: string;\n}\n\nexport const Dialog = ({ \n    title, \n    visible = true, \n    onClose, \n    onConfirm,\n    onCancel,\n    buttons = DialogButtons.OkCancel, \n    children, \n    width = '450px', \n    style,\n    resizable = false, \n    isValid,\n    isBusy = false,\n    okLabel = 'Ok',\n    cancelLabel = 'Cancel',\n    yesLabel = 'Yes',\n    noLabel = 'No'\n}: DialogProps) => {\n    // Try to get dialog context, but allow it to be undefined for standalone usage\n    let contextCloseDialog: ((result: DialogResult) => void) | undefined;\n    try {\n        const context = useDialogContext();\n        contextCloseDialog = context?.closeDialog;\n    } catch {\n        // No context available - dialog is being used standalone\n        contextCloseDialog = undefined;\n    }\n    \n    const isDialogValid = isValid !== false;\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{title}</span>\n        </div>\n    );\n\n    const handleClose = async (result: DialogResult) => {\n        let shouldCloseThroughContext = true;\n\n        if (result === DialogResult.Ok || result === DialogResult.Yes) {\n            if (onConfirm) {\n                const closeResult = await onConfirm();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        } else {\n            if (onCancel) {\n                const closeResult = await onCancel();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        }\n\n        if (shouldCloseThroughContext) {\n            contextCloseDialog?.(result);\n        }\n    };\n\n    const okFooter = (\n        <>\n            <Button label={okLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />\n        </>\n    );\n\n    const okCancelFooter = (\n        <>\n            <Button label={okLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Ok)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />\n            <Button label={cancelLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.Cancelled)} disabled={isBusy} />\n        </>\n    );\n\n    const yesNoFooter = (\n        <>\n            <Button label={yesLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />\n            <Button label={noLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.No)} disabled={isBusy} />\n        </>\n    );\n\n    const yesNoCancelFooter = (\n        <>\n            <Button label={yesLabel} icon=\"pi pi-check\" onClick={() => handleClose(DialogResult.Yes)} disabled={!isDialogValid || isBusy} loading={isBusy} autoFocus />\n            <Button label={noLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.No)} disabled={isBusy} />\n            <Button label={cancelLabel} icon=\"pi pi-times\" outlined onClick={() => handleClose(DialogResult.Cancelled)} disabled={isBusy} />\n        </>\n    );\n\n    const getFooterInterior = () => {\n        // If buttons is a ReactNode (custom buttons), use it directly\n        if (typeof buttons !== 'number') {\n            return buttons;\n        }\n\n        // Otherwise, use predefined buttons based on DialogButtons enum\n        switch (buttons) {\n            case DialogButtons.Ok:\n                return okFooter;\n            case DialogButtons.OkCancel:\n                return okCancelFooter;\n            case DialogButtons.YesNo:\n                return yesNoFooter;\n            case DialogButtons.YesNoCancel:\n                return yesNoCancelFooter;\n        }\n\n        return (<></>);\n    };\n\n    const footer = (\n        <div className=\"flex flex-wrap justify-content-start gap-3\">\n            {getFooterInterior()}\n        </div>\n    );\n\n    return (\n        <PrimeDialog\n            header={headerElement}\n            modal\n            footer={footer}\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onHide={typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => {}}\n            visible={visible}\n            style={{ width, ...style }}\n            resizable={resizable}\n            closable={typeof buttons === 'number'}>\n            {children}\n        </PrimeDialog>\n    );\n};\n"],"names":["DialogButtons","useDialogContext","_jsx","DialogResult","Button","_jsxs","_Fragment","PrimeDialog"],"mappings":";;;;;;;AA+BO,MAAM,MAAM,GAAG,CAAC,EACnB,KAAK,EACL,OAAO,GAAG,IAAI,EACd,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,GAAGA,qBAAa,CAAC,QAAQ,EAChC,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,QAAQ,EACtB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACJ,KAAI;AAEd,IAAA,IAAI,kBAAgE;AACpE,IAAA,IAAI;AACA,QAAA,MAAM,OAAO,GAAGC,wBAAgB,EAAE;AAClC,QAAA,kBAAkB,GAAG,OAAO,EAAE,WAAW;IAC7C;AAAE,IAAA,MAAM;QAEJ,kBAAkB,GAAG,SAAS;IAClC;AAEA,IAAA,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK;AACvC,IAAA,MAAM,aAAa,IACfC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6DAA6D,EAAA,QAAA,EACxEA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,EAAA,CAC3D,CACT;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,MAAoB,KAAI;QAC/C,IAAI,yBAAyB,GAAG,IAAI;AAEpC,QAAA,IAAI,MAAM,KAAKC,oBAAY,CAAC,EAAE,IAAI,MAAM,KAAKA,oBAAY,CAAC,GAAG,EAAE;YAC3D,IAAI,SAAS,EAAE;AACX,gBAAA,MAAM,WAAW,GAAG,MAAM,SAAS,EAAE;AACrC,gBAAA,yBAAyB,GAAG,WAAW,KAAK,IAAI;YACpD;iBAAO,IAAI,OAAO,EAAE;AAChB,gBAAA,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC;AACzC,gBAAA,yBAAyB,GAAG,WAAW,KAAK,KAAK;YACrD;QACJ;aAAO;YACH,IAAI,QAAQ,EAAE;AACV,gBAAA,MAAM,WAAW,GAAG,MAAM,QAAQ,EAAE;AACpC,gBAAA,yBAAyB,GAAG,WAAW,KAAK,IAAI;YACpD;iBAAO,IAAI,OAAO,EAAE;AAChB,gBAAA,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC;AACzC,gBAAA,yBAAyB,GAAG,WAAW,KAAK,KAAK;YACrD;QACJ;QAEA,IAAI,yBAAyB,EAAE;AAC3B,YAAA,kBAAkB,GAAG,MAAM,CAAC;QAChC;AACJ,IAAA,CAAC;AAED,IAAA,MAAM,QAAQ,IACVD,gDACIA,cAAA,CAACE,aAAM,IAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,aAAa,IAAI,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,EAAA,CAC1J,CACN;AAED,IAAA,MAAM,cAAc,IAChBE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIJ,eAACE,aAAM,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,aAAa,IAAI,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,EACzJD,cAAA,CAACE,aAAM,EAAA,EAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAA,IAAA,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAA,CAAI,CAAA,EAAA,CACjI,CACN;AAED,IAAA,MAAM,WAAW,IACbE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIJ,eAACE,aAAM,EAAA,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,aAAa,IAAI,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,EAC3JD,cAAA,CAACE,aAAM,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAA,IAAA,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAA,CAAI,CAAA,EAAA,CACtH,CACN;IAED,MAAM,iBAAiB,IACnBE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACIJ,eAACE,aAAM,EAAA,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,aAAa,IAAI,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,EAC3JD,cAAA,CAACE,aAAM,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAA,IAAA,EAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAA,CAAI,EACrHD,cAAA,CAACE,aAAM,EAAA,EAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,aAAa,EAAC,QAAQ,QAAC,OAAO,EAAE,MAAM,WAAW,CAACD,oBAAY,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAA,CAAI,CAAA,EAAA,CACjI,CACN;IAED,MAAM,iBAAiB,GAAG,MAAK;AAE3B,QAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,OAAO;QAClB;QAGA,QAAQ,OAAO;YACX,KAAKH,qBAAa,CAAC,EAAE;AACjB,gBAAA,OAAO,QAAQ;YACnB,KAAKA,qBAAa,CAAC,QAAQ;AACvB,gBAAA,OAAO,cAAc;YACzB,KAAKA,qBAAa,CAAC,KAAK;AACpB,gBAAA,OAAO,WAAW;YACtB,KAAKA,qBAAa,CAAC,WAAW;AAC1B,gBAAA,OAAO,iBAAiB;;QAGhC,QAAQE,cAAA,CAAAI,mBAAA,EAAA,EAAA,CAAK;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,MAAM,IACRJ,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACtD,iBAAiB,EAAE,EAAA,CAClB,CACT;AAED,IAAA,QACIA,cAAA,CAACK,aAAW,EAAA,EACR,MAAM,EAAE,aAAa,EACrB,KAAK,EAAA,IAAA,EACL,MAAM,EAAE,MAAM,EAEd,MAAM,EAAE,OAAO,OAAO,KAAK,QAAQ,GAAG,MAAM,WAAW,CAACJ,oBAAY,CAAC,SAAS,CAAC,GAAG,MAAK,EAAE,CAAC,EAC1F,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EAAA,QAAA,EACpC,QAAQ,EAAA,CACC;AAEtB;;;;"}

package/dist/esm/CommandDialog/CommandDialog.d.ts

@@ -1,19 +1,11 @@
-import { ICommandResult } from '@cratis/arc/commands';
+import { type DialogProps } from '../Dialogs/Dialog';
 import React from 'react';
 import { type CommandFormProps } from '@cratis/arc.react/commands';
-export interface CommandDialogProps<TCommand extends object, TResponse = object> extends Omit<CommandFormProps<TCommand>, 'children'> {
-    visible?: boolean;
-    header: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;
-    onCancel: () => void;
+export interface CommandDialogProps<TCommand extends object> extends Omit<CommandFormProps<TCommand>, 'children'>, Omit<DialogProps, 'children'> {
     children?: React.ReactNode;
-    style?: React.CSSProperties;
-    width?: string;
 }
 export declare const CommandDialog: {
-    <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>): import("react/jsx-runtime").JSX.Element;
+    <TCommand extends object = object>(props: CommandDialogProps<TCommand>): import("react/jsx-runtime").JSX.Element;
     Column: {
         ({ children }: {
             children: React.ReactNode;

package/dist/esm/CommandDialog/CommandDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAyHD,eAAO,MAAM,aAAa;KAtCM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;;uBA+BlF;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAO5B,CAAC"}
+{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,CACvD,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,EAChD,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA8KD,eAAO,MAAM,aAAa;KApDM,QAAQ,SAAS,MAAM,kBAAkB,kBAAkB,CAAC,QAAQ,CAAC;;uBA6CnD;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAO5B,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.js

@@ -1,26 +1,39 @@
 import { jsx } from 'react/jsx-runtime';
-import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { DialogButtons, DialogResult } from '@cratis/arc.react/dialogs';
 import { Dialog } from '../Dialogs/Dialog.js';
-import React from 'react';
+import React, { useState } from 'react';
 import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
 
-const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabel, onConfirm, onCancel, onBeforeExecute, children }) => {
-    const { setCommandValues, setCommandResult, isValid } = useCommandFormContext();
+const CommandDialogWrapper = ({ title, visible, width, style, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, children }) => {
+    const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext();
     const commandInstance = useCommandInstance();
+    const [isBusy, setIsBusy] = useState(false);
     const handleConfirm = async () => {
         if (onBeforeExecute) {
             const transformedValues = onBeforeExecute(commandInstance);
             setCommandValues(transformedValues);
         }
-        const result = await commandInstance.execute();
-        if (result.isSuccess) {
-            await onConfirm(result);
-            return false;
+        setIsBusy(true);
+        let result;
+        try {
+            result = await commandInstance.execute();
+        }
+        finally {
+            setIsBusy(false);
         }
-        else {
+        if (!result.isSuccess) {
             setCommandResult(result);
             return false;
         }
+        if (onConfirm) {
+            const closeResult = await onConfirm();
+            return closeResult === true;
+        }
+        if (onClose) {
+            const closeResult = await onClose(DialogResult.Ok);
+            return closeResult !== false;
+        }
+        return true;
     };
     const processChildren = (nodes) => {
         return React.Children.map(nodes, (child) => {
@@ -40,11 +53,12 @@ const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabe
         });
     };
     const processedChildren = processChildren(children);
-    return (jsx(Dialog, { title: header, visible: visible, width: width, onConfirm: handleConfirm, onCancel: onCancel, buttons: DialogButtons.OkCancel, okLabel: confirmLabel, cancelLabel: cancelLabel, isValid: isValid, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
+    const isDialogValid = (isValid !== false) && isCommandFormValid;
+    return (jsx(Dialog, { title: title, visible: visible, width: width, style: style, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
 };
 const CommandDialogComponent = (props) => {
-    const { visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, children, width = '50vw', ...commandFormProps } = props;
-    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { header: header, visible: visible, width: width, confirmLabel: confirmLabel, cancelLabel: cancelLabel, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
+    const { title, visible, width, style, resizable, buttons = DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, children, ...commandFormProps } = props;
+    return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
 };
 const CommandDialogColumnWrapper = ({ children }) => (jsx(CommandForm.Column, { children: children }));
 CommandDialogColumnWrapper.displayName = 'CommandFormColumn';

package/dist/esm/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { DialogButtons } from '@cratis/arc.react/dialogs';\nimport { Dialog } from '../Dialogs/Dialog';\nimport React from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\n\nexport interface CommandDialogProps<TCommand extends object, TResponse = object>\n    extends Omit<CommandFormProps<TCommand>, 'children'> {\n    visible?: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    header,\n    visible,\n    width,\n    confirmLabel,\n    cancelLabel,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    header: string;\n    visible?: boolean;\n    width: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    children: React.ReactNode;\n}) => {\n    const { setCommandValues, setCommandResult, isValid } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n        const result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n            return false;\n        } else {\n            setCommandResult(result);\n            return false;\n        }\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    const processedChildren = processChildren(children);\n\n    return (\n        <Dialog\n            title={header}\n            visible={visible}\n            width={width}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            buttons={DialogButtons.OkCancel}\n            okLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n            isValid={isValid}\n        >\n            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>\n                {processedChildren}\n            </div>\n        </Dialog>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        onConfirm,\n        onCancel,\n        children,\n        width = '50vw',\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <CommandDialogWrapper<TCommand>\n                header={header}\n                visible={visible}\n                width={width}\n                confirmLabel={confirmLabel}\n                cancelLabel={cancelLabel}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n            >\n                {children}\n            </CommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nconst CommandDialogColumnWrapper = ({ children }: { children: React.ReactNode }) => (\n    <CommandForm.Column>{children}</CommandForm.Column>\n);\nCommandDialogColumnWrapper.displayName = 'CommandFormColumn';\n\nCommandDialogComponent.Column = CommandDialogColumnWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { DialogButtons, DialogResult } from '@cratis/arc.react/dialogs';\nimport { Dialog, type DialogProps } from '../Dialogs/Dialog';\nimport React, { useState } from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\n\nexport interface CommandDialogProps<TCommand extends object>\n    extends Omit<CommandFormProps<TCommand>, 'children'>,\n        Omit<DialogProps, 'children'> {\n    children?: React.ReactNode;\n}\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    title,\n    visible,\n    width,\n    style,\n    resizable,\n    buttons,\n    okLabel,\n    cancelLabel,\n    yesLabel,\n    noLabel,\n    isValid,\n    onClose,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    title: string;\n    visible?: boolean;\n    width?: string;\n    style?: DialogProps['style'];\n    resizable?: boolean;\n    buttons?: DialogProps['buttons'];\n    okLabel?: string;\n    cancelLabel?: string;\n    yesLabel?: string;\n    noLabel?: string;\n    isValid?: boolean;\n    onClose?: DialogProps['onClose'];\n    onConfirm?: DialogProps['onConfirm'];\n    onCancel?: DialogProps['onCancel'];\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    children?: React.ReactNode;\n}) => {\n    const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n    const [isBusy, setIsBusy] = useState(false);\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n\n        setIsBusy(true);\n        let result: ICommandResult<unknown>;\n        try {\n            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        } finally {\n            setIsBusy(false);\n        }\n\n        if (!result.isSuccess) {\n            setCommandResult(result);\n            return false;\n        }\n\n        if (onConfirm) {\n            const closeResult = await onConfirm();\n            return closeResult === true;\n        }\n\n        if (onClose) {\n            const closeResult = await onClose(DialogResult.Ok);\n            return closeResult !== false;\n        }\n\n        return true;\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    const processedChildren = processChildren(children);\n    const isDialogValid = (isValid !== false) && isCommandFormValid;\n\n    return (\n        <Dialog\n            title={title}\n            visible={visible}\n            width={width}\n            style={style}\n            resizable={resizable}\n            buttons={buttons}\n            onClose={onClose}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            okLabel={okLabel}\n            cancelLabel={cancelLabel}\n            yesLabel={yesLabel}\n            noLabel={noLabel}\n            isValid={isDialogValid}\n            isBusy={isBusy}\n        >\n            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>\n                {processedChildren}\n            </div>\n        </Dialog>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object>(props: CommandDialogProps<TCommand>) => {\n    const {\n        title,\n        visible,\n        width,\n        style,\n        resizable,\n        buttons = DialogButtons.OkCancel,\n        okLabel,\n        cancelLabel,\n        yesLabel,\n        noLabel,\n        isValid,\n        onClose,\n        onConfirm,\n        onCancel,\n        children,\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <CommandDialogWrapper<TCommand>\n                title={title}\n                visible={visible}\n                width={width}\n                style={style}\n                resizable={resizable}\n                buttons={buttons}\n                okLabel={okLabel}\n                cancelLabel={cancelLabel}\n                yesLabel={yesLabel}\n                noLabel={noLabel}\n                isValid={isValid}\n                onClose={onClose}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n            >\n                {children}\n            </CommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nconst CommandDialogColumnWrapper = ({ children }: { children: React.ReactNode }) => (\n    <CommandForm.Column>{children}</CommandForm.Column>\n);\nCommandDialogColumnWrapper.displayName = 'CommandFormColumn';\n\nCommandDialogComponent.Column = CommandDialogColumnWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts

@@ -16,4 +16,5 @@ export declare const BeforeExecute: Story;
 export declare const WithIcons: Story;
 export declare const MultiColumnLayout: Story;
 export declare const MixedChildren: Story;
+export declare const WithBusyState: Story;
 //# sourceMappingURL=CommandDialog.stories.d.ts.map

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AA2L5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA6DF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AA+DF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA6BF,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AA6BF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AA8BF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AA8BF,eAAO,MAAM,yBAAyB,EAAE,KAEvC,CAAC;AA8CF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AA4CF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAsFF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAmCF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAmO5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA6DF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AA+DF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AA6BF,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AA6BF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AA8BF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AA8BF,eAAO,MAAM,yBAAyB,EAAE,KAEvC,CAAC;AA4CF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AA4CF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAsFF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAmCF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AA6CF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.stories.js

@@ -47,6 +47,38 @@ class UpdateUserCommand extends Command {
         return CommandResult.empty;
     }
 }
+class DemoSlowUpdateUserCommand extends Command {
+    route = '/api/users/update';
+    validation = new UpdateUserCommandValidator();
+    propertyDescriptors = [
+        new PropertyDescriptor('name', String),
+        new PropertyDescriptor('email', String),
+        new PropertyDescriptor('age', Number),
+    ];
+    name = '';
+    email = '';
+    age = 0;
+    constructor() {
+        super(Object, false);
+    }
+    get requestParameters() {
+        return [];
+    }
+    get properties() {
+        return ['name', 'email', 'age'];
+    }
+    async validate() {
+        const errors = this.validation?.validate(this) ?? [];
+        if (errors.length > 0) {
+            return CommandResult.validationFailed(errors);
+        }
+        return CommandResult.empty;
+    }
+    async execute() {
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        return CommandResult.empty;
+    }
+}
 class UpdateUserCommandWithServer extends Command {
     route = '/api/users/update';
     validation = new UpdateUserCommandValidator();
@@ -76,8 +108,8 @@ const ServerValidationWrapper = () => {
                     setVisible(true);
                     setValidationErrors([]);
                     setResult('');
-                }, children: "Open Dialog" }), validationErrors.length > 0 && (_jsxs("div", { className: "p-3 mt-3 bg-red-100 border-round", children: [_jsx("strong", { children: "Validation Errors:" }), _jsx("ul", { className: "mt-2 mb-0", children: validationErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Command executed:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommandWithServer, visible: visible, header: "Update User Information (with Server Validation)", confirmLabel: "Save", cancelLabel: "Cancel", onConfirm: async (commandResult) => {
-                    setResult(JSON.stringify(commandResult));
+                }, children: "Open Dialog" }), validationErrors.length > 0 && (_jsxs("div", { className: "p-3 mt-3 bg-red-100 border-round", children: [_jsx("strong", { children: "Validation Errors:" }), _jsx("ul", { className: "mt-2 mb-0", children: validationErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Command executed:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommandWithServer, visible: visible, title: "Update User Information (with Server Validation)", okLabel: "Save", cancelLabel: "Cancel", onConfirm: async () => {
+                    setResult('Command executed successfully');
                     setVisible(false);
                 }, onCancel: () => setVisible(false), onFieldChange: async (command) => {
                     const validationResult = await command.validate();
@@ -93,7 +125,7 @@ const AwaitableWithResultWrapper = () => {
     const [result, setResult] = useState('');
     const UpdateUserDialog = () => {
         const { closeDialog } = useDialogContext();
-        return (_jsxs(CommandDialog, { command: UpdateUserCommand, header: "Update User Information (awaitable result)", confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async (commandResult) => closeDialog(DialogResult.Ok, commandResult), onCancel: () => closeDialog(DialogResult.Cancelled), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name (min 2 chars)" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] }));
+        return (_jsxs(CommandDialog, { command: UpdateUserCommand, title: "Update User Information (awaitable result)", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => closeDialog(DialogResult.Ok), onCancel: () => closeDialog(DialogResult.Cancelled), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name (min 2 chars)" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] }));
     };
     const [UpdateUserDialogComponent, showUpdateUserDialog] = useDialog(UpdateUserDialog);
     return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: async () => {
@@ -122,7 +154,7 @@ const EditUserWrapper = () => {
         setResult('');
         setVisible(true);
     };
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("div", { style: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' }, children: users.map(user => (_jsxs("button", { className: "p-button p-component", onClick: () => handleEdit(user), children: ["Edit ", user.name] }, user.email))) }), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Saved:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommand, initialValues: selectedUser, visible: visible, header: `Edit User: ${selectedUser?.name ?? ''}`, confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => {
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("div", { style: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' }, children: users.map(user => (_jsxs("button", { className: "p-button p-component", onClick: () => handleEdit(user), children: ["Edit ", user.name] }, user.email))) }), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Saved:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommand, initialValues: selectedUser, visible: visible, title: `Edit User: ${selectedUser?.name ?? ''}`, okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => {
                     setResult(`User "${selectedUser?.name}" updated successfully`);
                     setVisible(false);
                 }, onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age" })] }, selectedUser?.email ?? 'empty')] }));
@@ -136,7 +168,7 @@ const CustomValidationWrapper = () => {
     return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => {
                     setResult('');
                     setVisible(true);
-                }, children: "Open Dialog" }), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Saved:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Add User (with Custom Validation)", confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => {
+                }, children: "Open Dialog" }), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Saved:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Add User (with Custom Validation)", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => {
                     setResult('User added successfully');
                     setVisible(false);
                 }, onCancel: () => setVisible(false), onFieldValidate: (_command, fieldName, _oldValue, newValue) => {
@@ -163,28 +195,28 @@ export const WithCustomValidation = {
 };
 const ValidationOnBlurWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Validation on Blur", confirmLabel: "Save", cancelLabel: "Cancel", validateOn: "blur", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Click away to validate" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Click away to validate", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Click away to validate" })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Validation on Blur", okLabel: "Save", cancelLabel: "Cancel", validateOn: "blur", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Click away to validate" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Click away to validate", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Click away to validate" })] })] }));
 };
 export const ValidationOnBlur = {
     render: () => _jsx(ValidationOnBlurWrapper, {}),
 };
 const ValidationOnChangeWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Validation on Change", confirmLabel: "Save", cancelLabel: "Cancel", validateOn: "change", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Errors appear while typing" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Errors appear while typing", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Errors appear while typing" })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Validation on Change", okLabel: "Save", cancelLabel: "Cancel", validateOn: "change", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Errors appear while typing" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Errors appear while typing", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Errors appear while typing" })] })] }));
 };
 export const ValidationOnChange = {
     render: () => _jsx(ValidationOnChangeWrapper, {}),
 };
 const ValidateOnInitWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Validate on Initialization", confirmLabel: "Save", cancelLabel: "Cancel", validateOnInit: true, autoServerValidate: false, initialValues: { name: 'A', email: 'invalid', age: 10 }, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Errors shown immediately" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Errors shown immediately", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Errors shown immediately" })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Validate on Initialization", okLabel: "Save", cancelLabel: "Cancel", validateOnInit: true, autoServerValidate: false, initialValues: { name: 'A', email: 'invalid', age: 10 }, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Errors shown immediately" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Errors shown immediately", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Errors shown immediately" })] })] }));
 };
 export const ValidateOnInit = {
     render: () => _jsx(ValidateOnInitWrapper, {}),
 };
 const ValidateAllFieldsWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Validate All Fields on Change", confirmLabel: "Save", cancelLabel: "Cancel", validateOn: "blur", validateAllFieldsOnChange: true, autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Blur one field \u2014 all validate" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Blur one field \u2014 all validate", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Blur one field \u2014 all validate" })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Validate All Fields on Change", okLabel: "Save", cancelLabel: "Cancel", validateOn: "blur", validateAllFieldsOnChange: true, autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Blur one field \u2014 all validate" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Blur one field \u2014 all validate", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Blur one field \u2014 all validate" })] })] }));
 };
 export const ValidateAllFieldsOnChange = {
     render: () => _jsx(ValidateAllFieldsWrapper, {}),
@@ -192,21 +224,19 @@ export const ValidateAllFieldsOnChange = {
 const BeforeExecuteWrapper = () => {
     const [visible, setVisible] = useState(true);
     const [preprocessedData, setPreprocessedData] = useState('');
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => { setVisible(true); setPreprocessedData(''); }, children: "Open Dialog" }), preprocessedData && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Preprocessed before submit:" }), _jsx("pre", { style: { marginTop: '0.5rem', fontSize: '0.875rem' }, children: preprocessedData })] })), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Before Execute Callback", confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, initialValues: { name: '', email: '', age: 18 }, onBeforeExecute: (command) => {
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => { setVisible(true); setPreprocessedData(''); }, children: "Open Dialog" }), preprocessedData && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Preprocessed before submit:" }), _jsx("pre", { style: { marginTop: '0.5rem', fontSize: '0.875rem' }, children: preprocessedData })] })), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Before Execute Callback", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, initialValues: { name: '', email: '', age: 18 }, onBeforeExecute: (command) => {
                     command.name = command.name.trim().replace(/\s+/g, ' ');
                     command.email = command.email.toLowerCase().trim();
+                    setPreprocessedData(JSON.stringify(command, null, 2));
                     return command;
-                }, onConfirm: async (result) => {
-                    setPreprocessedData(JSON.stringify(result, null, 2));
-                    setVisible(false);
-                }, onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: 'Try "  Extra   Spaces  "' }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Try UPPERCASE@EMAIL.COM", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] })] }));
+                }, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: 'Try "  Extra   Spaces  "' }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Try UPPERCASE@EMAIL.COM", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] })] }));
 };
 export const BeforeExecute = {
     render: () => _jsx(BeforeExecuteWrapper, {}),
 };
 const WithIconsWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Fields with Icons", confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83D\uDC64" }) }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83D\uDCE7" }) }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83C\uDF82" }) })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, title: "Fields with Icons", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83D\uDC64" }) }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83D\uDCE7" }) }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age", icon: _jsx("span", { style: { fontSize: '1.25rem' }, children: "\uD83C\uDF82" }) })] })] }));
 };
 export const WithIcons = {
     render: () => _jsx(WithIconsWrapper, {}),
@@ -255,16 +285,30 @@ class UpdateProfileCommand extends Command {
 }
 const MultiColumnWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateProfileCommand, visible: visible, header: "Edit Profile", confirmLabel: "Save", cancelLabel: "Cancel", width: "70vw", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }, children: [_jsxs(CommandDialog.Column, { children: [_jsx(InputTextField, { value: (c) => c.firstName, title: "First Name", placeholder: "Enter first name" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" })] }), _jsxs(CommandDialog.Column, { children: [_jsx(InputTextField, { value: (c) => c.lastName, title: "Last Name", placeholder: "Enter last name" }), _jsx(InputTextField, { value: (c) => c.phone, title: "Phone", placeholder: "Enter phone number" })] })] }), _jsx(TextAreaField, { value: (c) => c.bio, title: "Bio", placeholder: "Tell us about yourself", rows: 3 })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateProfileCommand, visible: visible, title: "Edit Profile", okLabel: "Save", cancelLabel: "Cancel", width: "70vw", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }, children: [_jsxs(CommandDialog.Column, { children: [_jsx(InputTextField, { value: (c) => c.firstName, title: "First Name", placeholder: "Enter first name" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" })] }), _jsxs(CommandDialog.Column, { children: [_jsx(InputTextField, { value: (c) => c.lastName, title: "Last Name", placeholder: "Enter last name" }), _jsx(InputTextField, { value: (c) => c.phone, title: "Phone", placeholder: "Enter phone number" })] })] }), _jsx(TextAreaField, { value: (c) => c.bio, title: "Bio", placeholder: "Tell us about yourself", rows: 3 })] })] }));
 };
 export const MultiColumnLayout = {
     render: () => _jsx(MultiColumnWrapper, {}),
 };
 const MixedChildrenWrapper = () => {
     const [visible, setVisible] = useState(true);
-    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateProfileCommand, visible: visible, header: "Edit Profile (Mixed Children)", confirmLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx("h3", { style: { marginTop: 0, marginBottom: '0.75rem' }, children: "Personal Information" }), _jsx(InputTextField, { value: (c) => c.firstName, title: "First Name", placeholder: "Enter first name" }), _jsx(InputTextField, { value: (c) => c.lastName, title: "Last Name", placeholder: "Enter last name" }), _jsx("h3", { style: { marginTop: '1rem', marginBottom: '0.75rem' }, children: "Contact Details" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(InputTextField, { value: (c) => c.phone, title: "Phone", placeholder: "Enter phone number" }), _jsx("h3", { style: { marginTop: '1rem', marginBottom: '0.75rem' }, children: "About You" }), _jsx(TextAreaField, { value: (c) => c.bio, title: "Bio", placeholder: "Tell us about yourself (min 10 chars)", rows: 3 })] })] }));
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => setVisible(true), children: "Open Dialog" }), _jsxs(CommandDialog, { command: UpdateProfileCommand, visible: visible, title: "Edit Profile (Mixed Children)", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => setVisible(false), onCancel: () => setVisible(false), children: [_jsx("h3", { style: { marginTop: 0, marginBottom: '0.75rem' }, children: "Personal Information" }), _jsx(InputTextField, { value: (c) => c.firstName, title: "First Name", placeholder: "Enter first name" }), _jsx(InputTextField, { value: (c) => c.lastName, title: "Last Name", placeholder: "Enter last name" }), _jsx("h3", { style: { marginTop: '1rem', marginBottom: '0.75rem' }, children: "Contact Details" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(InputTextField, { value: (c) => c.phone, title: "Phone", placeholder: "Enter phone number" }), _jsx("h3", { style: { marginTop: '1rem', marginBottom: '0.75rem' }, children: "About You" }), _jsx(TextAreaField, { value: (c) => c.bio, title: "Bio", placeholder: "Tell us about yourself (min 10 chars)", rows: 3 })] })] }));
 };
 export const MixedChildren = {
     render: () => _jsx(MixedChildrenWrapper, {}),
 };
+const WithBusyStateWrapper = () => {
+    const [visible, setVisible] = useState(true);
+    const [result, setResult] = useState('');
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => {
+                    setResult('');
+                    setVisible(true);
+                }, children: "Open Dialog" }), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Saved:" }), " ", result] })), _jsxs(CommandDialog, { command: DemoSlowUpdateUserCommand, visible: visible, title: "Save User (2s simulated delay)", okLabel: "Save", cancelLabel: "Cancel", autoServerValidate: false, onConfirm: async () => {
+                    setResult('User saved successfully');
+                    setVisible(false);
+                }, onCancel: () => setVisible(false), children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name (min 2 chars)" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] })] }));
+};
+export const WithBusyState = {
+    render: () => _jsx(WithBusyStateWrapper, {}),
+};
 //# sourceMappingURL=CommandDialog.stories.js.map