@cratis/components 2.6.1 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/CommandDialog/CommandDialog.js +30 -4
- package/dist/cjs/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js +6 -2
- package/dist/cjs/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/cjs/Dialogs/Dialog.js +61 -7
- package/dist/cjs/Dialogs/Dialog.js.map +1 -1
- package/dist/cjs/Dialogs/DialogInitialFocus.js +49 -0
- package/dist/cjs/Dialogs/DialogInitialFocus.js.map +1 -0
- package/dist/cjs/Dialogs/index.js +5 -0
- package/dist/cjs/Dialogs/index.js.map +1 -1
- package/dist/cjs/useOverlayZIndex.js +39 -8
- package/dist/cjs/useOverlayZIndex.js.map +1 -1
- package/dist/esm/CommandDialog/CommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/CommandDialog.js +30 -4
- package/dist/esm/CommandDialog/CommandDialog.js.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/BusyIndicatorDialog.js +6 -2
- package/dist/esm/Dialogs/BusyIndicatorDialog.js.map +1 -1
- package/dist/esm/Dialogs/Dialog.d.ts +3 -1
- package/dist/esm/Dialogs/Dialog.d.ts.map +1 -1
- package/dist/esm/Dialogs/Dialog.js +62 -8
- package/dist/esm/Dialogs/Dialog.js.map +1 -1
- package/dist/esm/Dialogs/DialogInitialFocus.d.ts +6 -0
- package/dist/esm/Dialogs/DialogInitialFocus.d.ts.map +1 -0
- package/dist/esm/Dialogs/DialogInitialFocus.js +49 -0
- package/dist/esm/Dialogs/DialogInitialFocus.js.map +1 -0
- package/dist/esm/Dialogs/index.d.ts +1 -0
- package/dist/esm/Dialogs/index.d.ts.map +1 -1
- package/dist/esm/Dialogs/index.js +1 -0
- package/dist/esm/Dialogs/index.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/useOverlayZIndex.d.ts +2 -1
- package/dist/esm/useOverlayZIndex.d.ts.map +1 -1
- package/dist/esm/useOverlayZIndex.js +39 -9
- package/dist/esm/useOverlayZIndex.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ var React = require('react');
|
|
|
7
7
|
var commands = require('@cratis/arc.react/commands');
|
|
8
8
|
var applyBeforeExecute = require('./applyBeforeExecute.js');
|
|
9
9
|
|
|
10
|
-
const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
|
|
10
|
+
const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
|
|
11
11
|
const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = commands.useCommandFormContext();
|
|
12
12
|
const commandInstance = commands.useCommandInstance();
|
|
13
13
|
const [isBusy, setIsBusy] = React.useState(false);
|
|
@@ -64,7 +64,7 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
64
64
|
};
|
|
65
65
|
const processedChildren = processChildren(children);
|
|
66
66
|
const isDialogValid = (isValid !== false) && isCommandFormValid;
|
|
67
|
-
return (jsxRuntime.jsx(Dialog.Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
|
|
67
|
+
return (jsxRuntime.jsx(Dialog.Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
|
|
68
68
|
};
|
|
69
69
|
/**
|
|
70
70
|
* A {@link Dialog} that hosts a Cratis Arc `CommandForm`, runs the bound
|
|
@@ -100,6 +100,32 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
100
100
|
* Throughout, the dialog is in the `isBusy` state — every action button is
|
|
101
101
|
* disabled and the confirm button shows a spinner.
|
|
102
102
|
*
|
|
103
|
+
* ## Destructive commands and initial focus
|
|
104
|
+
*
|
|
105
|
+
* The confirm button is focused when the dialog opens, and a focused native
|
|
106
|
+
* button fires `click` from the `keydown` of `Enter`. A command whose form
|
|
107
|
+
* has required fields is protected from a held or double-tapped `Enter` for
|
|
108
|
+
* free, because `isCommandFormValid` keeps confirm disabled until something
|
|
109
|
+
* is filled in. A command that takes **no** input — the typical "delete
|
|
110
|
+
* this, permanently" command — has no such gate, so its confirm button is
|
|
111
|
+
* armed the instant the dialog appears.
|
|
112
|
+
*
|
|
113
|
+
* Pass `initialFocus` (forwarded straight to {@link Dialog}) for those:
|
|
114
|
+
*
|
|
115
|
+
* ```tsx
|
|
116
|
+
* <CommandDialog<DeletePerson>
|
|
117
|
+
* command={DeletePerson}
|
|
118
|
+
* title="Delete personal data?"
|
|
119
|
+
* okLabel="Delete"
|
|
120
|
+
* initialFocus={DialogInitialFocus.Cancel}
|
|
121
|
+
* onSuccess={() => closeDialog(DialogResult.Ok)}>
|
|
122
|
+
* This cannot be undone.
|
|
123
|
+
* </CommandDialog>
|
|
124
|
+
* ```
|
|
125
|
+
*
|
|
126
|
+
* Everything else — the footer, the close (X), `Escape`, and the confirm
|
|
127
|
+
* wiring that runs the command — is untouched.
|
|
128
|
+
*
|
|
103
129
|
* ## Field binding
|
|
104
130
|
*
|
|
105
131
|
* Children that are `CommandFormField` instances (`InputTextField`,
|
|
@@ -157,8 +183,8 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
157
183
|
* @param props - {@link CommandDialogProps}.
|
|
158
184
|
*/
|
|
159
185
|
const CommandDialogComponent = (props) => {
|
|
160
|
-
const { title, visible, width, style, contentStyle, resizable, buttons = dialogs.DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
|
|
161
|
-
return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
186
|
+
const { title, visible, width, style, contentStyle, resizable, buttons = dialogs.DialogButtons.OkCancel, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
|
|
187
|
+
return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
162
188
|
};
|
|
163
189
|
const CommandDialogColumnWrapper = ({ children }) => (jsxRuntime.jsx(commands.CommandForm.Column, { children: children }));
|
|
164
190
|
CommandDialogColumnWrapper.displayName = 'CommandFormColumn';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","applyBeforeExecute","DialogResult","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":";;;;;;;;;AAmDA,MAAM,oBAAoB,GAAG,CAA8C,EACvE,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,
|
|
1
|
+
{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","applyBeforeExecute","DialogResult","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var progressspinner = require('primereact/progressspinner');
|
|
5
5
|
var Dialog = require('./Dialog.js');
|
|
6
|
+
var DialogInitialFocus = require('./DialogInitialFocus.js');
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Modal "busy" dialog used by the `@cratis/arc.react` dialog host whenever a
|
|
@@ -42,7 +43,10 @@ var Dialog = require('./Dialog.js');
|
|
|
42
43
|
*
|
|
43
44
|
* - **No interactive buttons.** A busy indicator is a wait-state, not a
|
|
44
45
|
* confirmation prompt. The dialog has no Ok / Cancel / X — only the host
|
|
45
|
-
* can dismiss it.
|
|
46
|
+
* can dismiss it. Because there is nothing focusable inside it, initial
|
|
47
|
+
* focus is put on the dialog's own title, so a keyboard or screen-reader
|
|
48
|
+
* user is told what is happening instead of being left on `document.body`
|
|
49
|
+
* behind the modal mask.
|
|
46
50
|
* - **No per-instance pass-through.** The request type
|
|
47
51
|
* ({@link BusyIndicatorDialogRequest}) is owned by `@cratis/arc.react`, so
|
|
48
52
|
* `pt` / `unstyled` are not exposed on a per-call basis. Restyle the
|
|
@@ -52,7 +56,7 @@ var Dialog = require('./Dialog.js');
|
|
|
52
56
|
* @param props - The request from the dialog host, containing `title` and `message`.
|
|
53
57
|
*/
|
|
54
58
|
const BusyIndicatorDialog = (props) => {
|
|
55
|
-
return (jsxRuntime.jsx(Dialog.Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-4", children: [jsxRuntime.jsx(progressspinner.ProgressSpinner, {}), jsxRuntime.jsx("p", { className: "m-0 text-center", children: props.message })] }) }));
|
|
59
|
+
return (jsxRuntime.jsx(Dialog.Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, initialFocus: DialogInitialFocus.DialogInitialFocus.Content, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-4", children: [jsxRuntime.jsx(progressspinner.ProgressSpinner, {}), jsxRuntime.jsx("p", { className: "m-0 text-center", children: props.message })] }) }));
|
|
56
60
|
};
|
|
57
61
|
|
|
58
62
|
exports.BusyIndicatorDialog = BusyIndicatorDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","Dialog","_jsxs","ProgressSpinner"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","Dialog","DialogInitialFocus","_jsxs","ProgressSpinner"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDG;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAiC,KAAI;IACrE,QACIA,cAAA,CAACC,aAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,MAAM,SAAS,EACzB,OAAO,EAAE,IAAI,EACb,YAAY,EAAEC,qCAAkB,CAAC,OAAO,EAAA,QAAA,EAExCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sDAAsD,EAAA,QAAA,EAAA,CACjEH,cAAA,CAACI,+BAAe,EAAA,EAAA,CAAG,EACnBJ,sBAAG,SAAS,EAAC,iBAAiB,EAAA,QAAA,EACzB,KAAK,CAAC,OAAO,EAAA,CACd,CAAA,EAAA,CACF,EAAA,CACD;AAEjB;;;;"}
|
|
@@ -4,6 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var dialog = require('primereact/dialog');
|
|
5
5
|
var button = require('primereact/button');
|
|
6
6
|
var dialogs = require('@cratis/arc.react/dialogs');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var DialogInitialFocus = require('./DialogInitialFocus.js');
|
|
7
9
|
|
|
8
10
|
/**
|
|
9
11
|
* Cratis wrapper around PrimeReact's `Dialog` that adds the surface every Arc
|
|
@@ -25,6 +27,36 @@ var dialogs = require('@cratis/arc.react/dialogs');
|
|
|
25
27
|
* - **Validity gate** (`isValid`) that disables the confirm button without
|
|
26
28
|
* disabling the cancel button. Used by command-executing wrappers to
|
|
27
29
|
* block submission while form validation fails.
|
|
30
|
+
* - **Initial focus** (`initialFocus`) choosing which element inside the
|
|
31
|
+
* dialog the keyboard lands on when it opens.
|
|
32
|
+
*
|
|
33
|
+
* ## Initial focus
|
|
34
|
+
*
|
|
35
|
+
* By default the confirm button is focused when the dialog opens, so the
|
|
36
|
+
* common "read it, press Enter" flow costs one keystroke. That default also
|
|
37
|
+
* *arms* the confirm button: browsers fire `click` from the `keydown` of
|
|
38
|
+
* `Enter`, so the key still held down from opening the dialog — or the very
|
|
39
|
+
* ordinary habit of pressing `Enter` twice — confirms it immediately.
|
|
40
|
+
*
|
|
41
|
+
* A dialog whose confirm action is destructive **and** needs no input to
|
|
42
|
+
* become valid gets no protection from `isValid`, because there is nothing
|
|
43
|
+
* to fill in. Give those dialogs an explicit
|
|
44
|
+
* {@link DialogInitialFocus} instead:
|
|
45
|
+
*
|
|
46
|
+
* ```tsx
|
|
47
|
+
* <Dialog title="Delete personal data?"
|
|
48
|
+
* buttons={DialogButtons.YesNo}
|
|
49
|
+
* initialFocus={DialogInitialFocus.Cancel}
|
|
50
|
+
* onConfirm={...} onCancel={...}>
|
|
51
|
+
* This permanently removes the person and every record about them.
|
|
52
|
+
* </Dialog>
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
* `Cancel` focuses the dismissing button (`Cancel`, or `No` when the set has
|
|
56
|
+
* no `Cancel`); `Content` focuses the dialog's title so nothing at all is
|
|
57
|
+
* armed and screen readers announce the dialog from the top. Both keep the
|
|
58
|
+
* footer, the close (X), `Escape`, and every callback intact — unlike
|
|
59
|
+
* replacing `buttons` with a custom node.
|
|
28
60
|
*
|
|
29
61
|
* ## Arc dialog host integration
|
|
30
62
|
*
|
|
@@ -77,7 +109,7 @@ var dialogs = require('@cratis/arc.react/dialogs');
|
|
|
77
109
|
*
|
|
78
110
|
* @param props - {@link DialogProps}.
|
|
79
111
|
*/
|
|
80
|
-
const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = dialogs.DialogButtons.OkCancel, children, width = '450px', style, contentStyle, resizable = false, isValid, isBusy = false, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No', className, pt, ptOptions, unstyled }) => {
|
|
112
|
+
const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = dialogs.DialogButtons.OkCancel, initialFocus = DialogInitialFocus.DialogInitialFocus.Confirm, children, width = '450px', style, contentStyle, resizable = false, isValid, isBusy = false, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No', className, pt, ptOptions, unstyled }) => {
|
|
81
113
|
// useDialogContext() is called unconditionally on every render — the try/catch only suppresses
|
|
82
114
|
// the exception when Dialog is used standalone (outside a provider). React's Rules of Hooks
|
|
83
115
|
// are not violated because the hook is always called; the try/catch never skips the call.
|
|
@@ -90,7 +122,29 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
|
|
|
90
122
|
contextCloseDialog = undefined;
|
|
91
123
|
}
|
|
92
124
|
const isDialogValid = isValid !== false;
|
|
93
|
-
|
|
125
|
+
// A dismissing button only exists for the predefined sets that have one — Cancel for
|
|
126
|
+
// OkCancel / YesNoCancel, No for YesNo. Asking for Cancel focus without one (DialogButtons.Ok,
|
|
127
|
+
// a custom footer node, or no footer) degrades to focusing the title rather than silently
|
|
128
|
+
// leaving focus on document.body outside the modal.
|
|
129
|
+
const hasDismissingButton = typeof buttons === 'number' && buttons !== dialogs.DialogButtons.Ok;
|
|
130
|
+
const resolvedInitialFocus = (initialFocus === DialogInitialFocus.DialogInitialFocus.Cancel && !hasDismissingButton)
|
|
131
|
+
? DialogInitialFocus.DialogInitialFocus.Content
|
|
132
|
+
: initialFocus;
|
|
133
|
+
const focusesConfirmButton = resolvedInitialFocus === DialogInitialFocus.DialogInitialFocus.Confirm;
|
|
134
|
+
const focusesDismissingButton = resolvedInitialFocus === DialogInitialFocus.DialogInitialFocus.Cancel;
|
|
135
|
+
const focusesTitle = resolvedInitialFocus === DialogInitialFocus.DialogInitialFocus.Content;
|
|
136
|
+
// PrimeReact's focus trap parks focus on the first focusable element inside the dialog while
|
|
137
|
+
// it transitions in, and its own onShow focus only fires when nothing in the dialog has focus.
|
|
138
|
+
// Moving focus to the title from onShow therefore runs last and wins, without having to fight
|
|
139
|
+
// the trap or turn focusOnShow off (which would leave focus outside the modal for the duration
|
|
140
|
+
// of the transition).
|
|
141
|
+
const titleRef = React.useRef(null);
|
|
142
|
+
const handleShow = () => {
|
|
143
|
+
if (focusesTitle) {
|
|
144
|
+
titleRef.current?.focus({ preventScroll: true });
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
const headerElement = (jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center gap-2", children: jsxRuntime.jsx("span", { ref: titleRef, tabIndex: focusesTitle ? -1 : undefined, className: "font-bold whitespace-nowrap", children: title }) }));
|
|
94
148
|
const handleClose = async (result) => {
|
|
95
149
|
let shouldCloseThroughContext = true;
|
|
96
150
|
if (result === dialogs.DialogResult.Ok || result === dialogs.DialogResult.Yes) {
|
|
@@ -117,10 +171,10 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
|
|
|
117
171
|
contextCloseDialog?.(result);
|
|
118
172
|
}
|
|
119
173
|
};
|
|
120
|
-
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:
|
|
121
|
-
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:
|
|
122
|
-
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:
|
|
123
|
-
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:
|
|
174
|
+
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: focusesConfirmButton }) }));
|
|
175
|
+
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: focusesConfirmButton }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.Cancelled), disabled: isBusy, autoFocus: focusesDismissingButton })] }));
|
|
176
|
+
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: focusesConfirmButton }), jsxRuntime.jsx(button.Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(dialogs.DialogResult.No), disabled: isBusy, autoFocus: focusesDismissingButton })] }));
|
|
177
|
+
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: focusesConfirmButton }), 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, autoFocus: focusesDismissingButton })] }));
|
|
124
178
|
const getFooterInterior = () => {
|
|
125
179
|
// If buttons is a ReactNode (custom buttons), use it directly
|
|
126
180
|
if (typeof buttons !== 'number') {
|
|
@@ -142,7 +196,7 @@ const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons =
|
|
|
142
196
|
const footer = (jsxRuntime.jsx("div", { className: "flex flex-wrap justify-start gap-3", children: getFooterInterior() }));
|
|
143
197
|
return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer,
|
|
144
198
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
145
|
-
onHide: typeof buttons === 'number' ? () => handleClose(dialogs.DialogResult.Cancelled) : () => { }, visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: typeof buttons === 'number', className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
|
|
199
|
+
onHide: typeof buttons === 'number' ? () => handleClose(dialogs.DialogResult.Cancelled) : () => { }, onShow: handleShow, visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: typeof buttons === 'number', className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
|
|
146
200
|
};
|
|
147
201
|
|
|
148
202
|
exports.Dialog = Dialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":[null],"names":["DialogButtons","useDialogContext","_jsx","DialogResult","
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../Dialogs/Dialog.tsx"],"sourcesContent":[null],"names":["DialogButtons","DialogInitialFocus","useDialogContext","useRef","_jsx","DialogResult","_Fragment","Button","_jsxs","PrimeDialog"],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// Copyright (c) Cratis. All rights reserved.
|
|
4
|
+
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
5
|
+
/**
|
|
6
|
+
* Defines where keyboard focus lands when a dialog becomes visible.
|
|
7
|
+
*
|
|
8
|
+
* A modal must move focus into itself when it opens — leaving focus on
|
|
9
|
+
* `document.body` strands keyboard and screen-reader users outside the
|
|
10
|
+
* content they were just interrupted with. Every member of this enum
|
|
11
|
+
* therefore names a real element inside the dialog; there is deliberately
|
|
12
|
+
* no "focus nothing" member.
|
|
13
|
+
*/
|
|
14
|
+
exports.DialogInitialFocus = void 0;
|
|
15
|
+
(function (DialogInitialFocus) {
|
|
16
|
+
/**
|
|
17
|
+
* Focus the confirming button (`Ok` / `Yes`). This is the default and
|
|
18
|
+
* the fastest path for a dialog whose expected answer is "go ahead".
|
|
19
|
+
*
|
|
20
|
+
* ⚠️ It also *arms* that button: a browser fires `click` on a native
|
|
21
|
+
* button from the `keydown` of `Enter` or `Space`, so a held key or a
|
|
22
|
+
* second press of the key that opened the dialog confirms it. For a
|
|
23
|
+
* destructive action that needs no input to become valid, prefer
|
|
24
|
+
* {@link DialogInitialFocus.Cancel} or {@link DialogInitialFocus.Content}.
|
|
25
|
+
*/
|
|
26
|
+
DialogInitialFocus[DialogInitialFocus["Confirm"] = 1] = "Confirm";
|
|
27
|
+
/**
|
|
28
|
+
* Focus the dismissing button — `Cancel` when the button set has one,
|
|
29
|
+
* otherwise `No`. This is the least destructive action, which is what
|
|
30
|
+
* the WAI-ARIA authoring practices recommend focusing for a dialog that
|
|
31
|
+
* confirms something irreversible.
|
|
32
|
+
*
|
|
33
|
+
* Falls back to {@link DialogInitialFocus.Content} when the button set
|
|
34
|
+
* has no dismissing button (`DialogButtons.Ok`), when the footer is a
|
|
35
|
+
* custom `ReactNode`, or when there is no footer at all.
|
|
36
|
+
*/
|
|
37
|
+
DialogInitialFocus[DialogInitialFocus["Cancel"] = 2] = "Cancel";
|
|
38
|
+
/**
|
|
39
|
+
* Focus the dialog's own title instead of any button, so nothing is
|
|
40
|
+
* armed. Screen readers announce the dialog and its title, and the
|
|
41
|
+
* first `Tab` walks the content from the top.
|
|
42
|
+
*
|
|
43
|
+
* This is the right choice for a dialog that should be *read* before it
|
|
44
|
+
* is answered, and the only sensible choice for a dialog with no footer
|
|
45
|
+
* buttons at all.
|
|
46
|
+
*/
|
|
47
|
+
DialogInitialFocus[DialogInitialFocus["Content"] = 3] = "Content";
|
|
48
|
+
})(exports.DialogInitialFocus || (exports.DialogInitialFocus = {}));
|
|
49
|
+
//# sourceMappingURL=DialogInitialFocus.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogInitialFocus.js","sources":["../../../Dialogs/DialogInitialFocus.ts"],"sourcesContent":[null],"names":["DialogInitialFocus"],"mappings":";;AAAA;AACA;AAEA;;;;;;;;AAQG;AACSA;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAE1B;;;;;;;;;AASG;AACH,IAAA,kBAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAW;AAEX;;;;;;;;;AASG;AACH,IAAA,kBAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAU;AAEV;;;;;;;;AAQG;AACH,IAAA,kBAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAW;AACf,CAAC,EApCWA,0BAAkB,KAAlBA,0BAAkB,GAAA,EAAA,CAAA,CAAA;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var BusyIndicatorDialog = require('./BusyIndicatorDialog.js');
|
|
4
4
|
var ConfirmationDialog = require('./ConfirmationDialog.js');
|
|
5
5
|
var Dialog = require('./Dialog.js');
|
|
6
|
+
var DialogInitialFocus = require('./DialogInitialFocus.js');
|
|
6
7
|
|
|
7
8
|
// Copyright (c) Cratis. All rights reserved.
|
|
8
9
|
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
@@ -10,4 +11,8 @@ var Dialog = require('./Dialog.js');
|
|
|
10
11
|
exports.BusyIndicatorDialog = BusyIndicatorDialog.BusyIndicatorDialog;
|
|
11
12
|
exports.ConfirmationDialog = ConfirmationDialog.ConfirmationDialog;
|
|
12
13
|
exports.Dialog = Dialog.Dialog;
|
|
14
|
+
Object.defineProperty(exports, "DialogInitialFocus", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return DialogInitialFocus.DialogInitialFocus; }
|
|
17
|
+
});
|
|
13
18
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../Dialogs/index.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../Dialogs/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;AACA;;;;;;;;;;"}
|
|
@@ -5,19 +5,31 @@ var React = require('react');
|
|
|
5
5
|
// Copyright (c) Cratis. All rights reserved.
|
|
6
6
|
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
7
7
|
/**
|
|
8
|
-
* Hook
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* Hook that keeps a PrimeReact overlay panel at or above a minimum z-index.
|
|
9
|
+
*
|
|
10
|
+
* PrimeReact computes overlay z-indexes relative to whatever is currently open — in an application that
|
|
11
|
+
* configures the PrimeReact z-index tiers this already stacks panels above dialogs correctly. This hook is
|
|
12
|
+
* the safety net for applications that do not: when PrimeReact's computed value is *below* the floor, the
|
|
13
|
+
* panel is raised to it.
|
|
14
|
+
*
|
|
15
|
+
* It is strictly raise-only. It must never lower a value PrimeReact computed, for two reasons: the computed
|
|
16
|
+
* value is what stacks the panel above an open dialog's mask, and PrimeReact's `ZIndexUtils.clear()`
|
|
17
|
+
* un-registers an overlay by reading its inline z-index back — overwriting it with a different number makes
|
|
18
|
+
* that lookup miss, leaks the registry entry, and every dialog opened afterwards escalates its mask's
|
|
19
|
+
* z-index further above the panels until dropdowns render behind the very dialogs that host them.
|
|
11
20
|
*
|
|
12
21
|
* @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')
|
|
13
|
-
* @param
|
|
22
|
+
* @param minimumZIndex - The floor the panel must not sit below (default: 10000)
|
|
14
23
|
*/
|
|
15
|
-
function useOverlayZIndex(className,
|
|
24
|
+
function useOverlayZIndex(className, minimumZIndex = 10000) {
|
|
16
25
|
React.useEffect(() => {
|
|
17
26
|
const observer = new MutationObserver(() => {
|
|
18
27
|
const panel = document.querySelector(`.${className}`);
|
|
19
|
-
if (panel instanceof HTMLElement
|
|
20
|
-
|
|
28
|
+
if (!(panel instanceof HTMLElement))
|
|
29
|
+
return;
|
|
30
|
+
const raised = raisedOverlayZIndex(panel.style.zIndex, minimumZIndex);
|
|
31
|
+
if (raised !== undefined) {
|
|
32
|
+
panel.style.zIndex = raised;
|
|
21
33
|
}
|
|
22
34
|
});
|
|
23
35
|
observer.observe(document.body, {
|
|
@@ -27,8 +39,27 @@ function useOverlayZIndex(className, zIndex = 10000) {
|
|
|
27
39
|
attributeFilter: ['style']
|
|
28
40
|
});
|
|
29
41
|
return () => observer.disconnect();
|
|
30
|
-
}, [className,
|
|
42
|
+
}, [className, minimumZIndex]);
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Decides whether an overlay panel's inline z-index must be raised to the floor.
|
|
46
|
+
*
|
|
47
|
+
* Raise-only by design: a value PrimeReact computed at or above the floor is left untouched, both because
|
|
48
|
+
* it is what stacks the panel above an open dialog and because PrimeReact reads it back to un-register the
|
|
49
|
+
* overlay when it closes.
|
|
50
|
+
*
|
|
51
|
+
* @param currentZIndex - The panel's current inline z-index value, possibly empty.
|
|
52
|
+
* @param minimumZIndex - The floor the panel must not sit below.
|
|
53
|
+
* @returns The value to assign, or undefined when the current value must be left alone.
|
|
54
|
+
*/
|
|
55
|
+
function raisedOverlayZIndex(currentZIndex, minimumZIndex) {
|
|
56
|
+
const current = Number.parseInt(currentZIndex, 10);
|
|
57
|
+
if (Number.isNaN(current) || current < minimumZIndex) {
|
|
58
|
+
return minimumZIndex.toString();
|
|
59
|
+
}
|
|
60
|
+
return undefined;
|
|
31
61
|
}
|
|
32
62
|
|
|
63
|
+
exports.raisedOverlayZIndex = raisedOverlayZIndex;
|
|
33
64
|
exports.useOverlayZIndex = useOverlayZIndex;
|
|
34
65
|
//# sourceMappingURL=useOverlayZIndex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA
|
|
1
|
+
{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;AAgBG;SACa,gBAAgB,CAAC,SAAiB,EAAE,gBAAwB,KAAK,EAAA;IAC7EA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,EAAE,KAAK,YAAY,WAAW,CAAC;gBAAE;AAErC,YAAA,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AACrE,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,gBAAA,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YAC/B;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAClC;AAEA;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAE,aAAqB,EAAA;IAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;IAClD,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,aAAa,EAAE;AAClD,QAAA,OAAO,aAAa,CAAC,QAAQ,EAAE;IACnC;AAEA,IAAA,OAAO,SAAS;AACpB;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAWtF,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAcjC,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAOlD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;
|
|
1
|
+
{"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;AACpC,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAWtF,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC3E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAcjC,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAOlD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiVD,eAAO,MAAM,aAAa;KApEM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;;uBA6DlF;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;CAO5B,CAAC"}
|
|
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
|
|
|
5
5
|
import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
|
|
6
6
|
import { applyBeforeExecute } from './applyBeforeExecute.js';
|
|
7
7
|
|
|
8
|
-
const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
|
|
8
|
+
const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
|
|
9
9
|
const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = useCommandFormContext();
|
|
10
10
|
const commandInstance = useCommandInstance();
|
|
11
11
|
const [isBusy, setIsBusy] = useState(false);
|
|
@@ -62,7 +62,7 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
62
62
|
};
|
|
63
63
|
const processedChildren = processChildren(children);
|
|
64
64
|
const isDialogValid = (isValid !== false) && isCommandFormValid;
|
|
65
|
-
return (jsx(Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
|
|
65
|
+
return (jsx(Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
|
|
66
66
|
};
|
|
67
67
|
/**
|
|
68
68
|
* A {@link Dialog} that hosts a Cratis Arc `CommandForm`, runs the bound
|
|
@@ -98,6 +98,32 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
98
98
|
* Throughout, the dialog is in the `isBusy` state — every action button is
|
|
99
99
|
* disabled and the confirm button shows a spinner.
|
|
100
100
|
*
|
|
101
|
+
* ## Destructive commands and initial focus
|
|
102
|
+
*
|
|
103
|
+
* The confirm button is focused when the dialog opens, and a focused native
|
|
104
|
+
* button fires `click` from the `keydown` of `Enter`. A command whose form
|
|
105
|
+
* has required fields is protected from a held or double-tapped `Enter` for
|
|
106
|
+
* free, because `isCommandFormValid` keeps confirm disabled until something
|
|
107
|
+
* is filled in. A command that takes **no** input — the typical "delete
|
|
108
|
+
* this, permanently" command — has no such gate, so its confirm button is
|
|
109
|
+
* armed the instant the dialog appears.
|
|
110
|
+
*
|
|
111
|
+
* Pass `initialFocus` (forwarded straight to {@link Dialog}) for those:
|
|
112
|
+
*
|
|
113
|
+
* ```tsx
|
|
114
|
+
* <CommandDialog<DeletePerson>
|
|
115
|
+
* command={DeletePerson}
|
|
116
|
+
* title="Delete personal data?"
|
|
117
|
+
* okLabel="Delete"
|
|
118
|
+
* initialFocus={DialogInitialFocus.Cancel}
|
|
119
|
+
* onSuccess={() => closeDialog(DialogResult.Ok)}>
|
|
120
|
+
* This cannot be undone.
|
|
121
|
+
* </CommandDialog>
|
|
122
|
+
* ```
|
|
123
|
+
*
|
|
124
|
+
* Everything else — the footer, the close (X), `Escape`, and the confirm
|
|
125
|
+
* wiring that runs the command — is untouched.
|
|
126
|
+
*
|
|
101
127
|
* ## Field binding
|
|
102
128
|
*
|
|
103
129
|
* Children that are `CommandFormField` instances (`InputTextField`,
|
|
@@ -155,8 +181,8 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
|
|
|
155
181
|
* @param props - {@link CommandDialogProps}.
|
|
156
182
|
*/
|
|
157
183
|
const CommandDialogComponent = (props) => {
|
|
158
|
-
const { title, visible, width, style, contentStyle, resizable, buttons = DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
|
|
159
|
-
return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
184
|
+
const { title, visible, width, style, contentStyle, resizable, buttons = DialogButtons.OkCancel, initialFocus, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onBeforeExecute, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
|
|
185
|
+
return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, initialFocus: initialFocus, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
160
186
|
};
|
|
161
187
|
const CommandDialogColumnWrapper = ({ children }) => (jsx(CommandForm.Column, { children: children }));
|
|
162
188
|
CommandDialogColumnWrapper.displayName = 'CommandFormColumn';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAmDA,MAAM,oBAAoB,GAAG,CAA8C,EACvE,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,eAAe,EACf,SAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,QAAQ,
|
|
1
|
+
{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAuDvE,eAAO,MAAM,mBAAmB,GAAI,OAAO,0BAA0B,gCAiBpE,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { ProgressSpinner } from 'primereact/progressspinner';
|
|
3
3
|
import { Dialog } from './Dialog.js';
|
|
4
|
+
import { DialogInitialFocus } from './DialogInitialFocus.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
7
|
* Modal "busy" dialog used by the `@cratis/arc.react` dialog host whenever a
|
|
@@ -40,7 +41,10 @@ import { Dialog } from './Dialog.js';
|
|
|
40
41
|
*
|
|
41
42
|
* - **No interactive buttons.** A busy indicator is a wait-state, not a
|
|
42
43
|
* confirmation prompt. The dialog has no Ok / Cancel / X — only the host
|
|
43
|
-
* can dismiss it.
|
|
44
|
+
* can dismiss it. Because there is nothing focusable inside it, initial
|
|
45
|
+
* focus is put on the dialog's own title, so a keyboard or screen-reader
|
|
46
|
+
* user is told what is happening instead of being left on `document.body`
|
|
47
|
+
* behind the modal mask.
|
|
44
48
|
* - **No per-instance pass-through.** The request type
|
|
45
49
|
* ({@link BusyIndicatorDialogRequest}) is owned by `@cratis/arc.react`, so
|
|
46
50
|
* `pt` / `unstyled` are not exposed on a per-call basis. Restyle the
|
|
@@ -50,7 +54,7 @@ import { Dialog } from './Dialog.js';
|
|
|
50
54
|
* @param props - The request from the dialog host, containing `title` and `message`.
|
|
51
55
|
*/
|
|
52
56
|
const BusyIndicatorDialog = (props) => {
|
|
53
|
-
return (jsx(Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, children: jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-4", children: [jsx(ProgressSpinner, {}), jsx("p", { className: "m-0 text-center", children: props.message })] }) }));
|
|
57
|
+
return (jsx(Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, initialFocus: DialogInitialFocus.Content, children: jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-4", children: [jsx(ProgressSpinner, {}), jsx("p", { className: "m-0 text-center", children: props.message })] }) }));
|
|
54
58
|
};
|
|
55
59
|
|
|
56
60
|
export { BusyIndicatorDialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDG;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAiC,KAAI;IACrE,QACIA,GAAA,CAAC,MAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,MAAM,SAAS,EACzB,OAAO,EAAE,IAAI,EACb,YAAY,EAAE,kBAAkB,CAAC,OAAO,EAAA,QAAA,EAExCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sDAAsD,EAAA,QAAA,EAAA,CACjED,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EACnBA,WAAG,SAAS,EAAC,iBAAiB,EAAA,QAAA,EACzB,KAAK,CAAC,OAAO,EAAA,CACd,CAAA,EAAA,CACF,EAAA,CACD;AAEjB;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type DialogProps as PrimeDialogProps } from 'primereact/dialog';
|
|
2
2
|
import { DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
|
+
import { DialogInitialFocus } from './DialogInitialFocus';
|
|
4
5
|
export type CloseDialog = (result: DialogResult) => boolean | void | Promise<boolean> | Promise<void>;
|
|
5
6
|
export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
|
|
6
7
|
export type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;
|
|
@@ -11,6 +12,7 @@ export interface DialogProps {
|
|
|
11
12
|
onConfirm?: ConfirmCallback;
|
|
12
13
|
onCancel?: CancelCallback;
|
|
13
14
|
buttons?: DialogButtons | ReactNode;
|
|
15
|
+
initialFocus?: DialogInitialFocus;
|
|
14
16
|
children: ReactNode;
|
|
15
17
|
width?: string;
|
|
16
18
|
style?: PrimeDialogProps['style'];
|
|
@@ -27,5 +29,5 @@ export interface DialogProps {
|
|
|
27
29
|
ptOptions?: PrimeDialogProps['ptOptions'];
|
|
28
30
|
unstyled?: boolean;
|
|
29
31
|
}
|
|
30
|
-
export declare const Dialog: ({ title, visible, onClose, onConfirm, onCancel, buttons, children, width, style, contentStyle, resizable, isValid, isBusy, okLabel, cancelLabel, yesLabel, noLabel, className, pt, ptOptions, unstyled }: DialogProps) => import("react").JSX.Element;
|
|
32
|
+
export declare const Dialog: ({ title, visible, onClose, onConfirm, onCancel, buttons, initialFocus, children, width, style, contentStyle, resizable, isValid, isBusy, okLabel, cancelLabel, yesLabel, noLabel, className, pt, ptOptions, unstyled }: DialogProps) => import("react").JSX.Element;
|
|
31
33
|
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAoB,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,EAAE,YAAY,EAAE,aAAa,EAAoB,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAOtG,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAMtF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAKrF,MAAM,WAAW,WAAW;IAExB,KAAK,EAAE,MAAM,CAAC;IAGd,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,SAAS,CAAC,EAAE,eAAe,CAAC;IAG5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAoB1B,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAapC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAGlC,QAAQ,EAAE,SAAS,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAGlC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAGhD,SAAS,CAAC,EAAE,OAAO,CAAC;IAOpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAKjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAQnB,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAM5B,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAO1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAwGD,eAAO,MAAM,MAAM,GAAI,wNAuBpB,WAAW,gCAkJb,CAAC"}
|