@cratis/components 2.7.1 → 2.8.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/StepperCommandDialog.js +20 -9
- package/dist/cjs/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/cjs/Toolbar/Toolbar.css +25 -2
- package/dist/cjs/Toolbar/ToolbarFanOutItem.js +34 -4
- package/dist/cjs/Toolbar/ToolbarFanOutItem.js.map +1 -1
- package/dist/cjs/Toolbar/ToolbarGroup.js +6 -1
- package/dist/cjs/Toolbar/ToolbarGroup.js.map +1 -1
- package/dist/cjs/Toolbar/ToolbarLayout.js +3 -3
- package/dist/cjs/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts +2 -0
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.js +20 -9
- package/dist/esm/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/esm/Toolbar/Toolbar.css +25 -2
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts +2 -2
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.js +35 -5
- package/dist/esm/Toolbar/ToolbarFanOutItem.js.map +1 -1
- package/dist/esm/Toolbar/ToolbarGroup.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarGroup.js +6 -1
- package/dist/esm/Toolbar/ToolbarGroup.js.map +1 -1
- package/dist/esm/Toolbar/ToolbarLayout.js +3 -3
- package/dist/esm/Toolbar/ToolbarLayout.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var CommandStepper = require('./CommandStepper.js');
|
|
|
10
10
|
var applyBeforeExecute = require('./applyBeforeExecute.js');
|
|
11
11
|
var stepChildren = require('./stepChildren.js');
|
|
12
12
|
|
|
13
|
-
const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, contentStyle, resizable = false, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children }) => {
|
|
13
|
+
const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, contentStyle, resizable = false, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', showCancel = false, cancelLabel = 'Cancel', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children }) => {
|
|
14
14
|
const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = commands.useCommandFormContext();
|
|
15
15
|
const commandInstance = commands.useCommandInstance();
|
|
16
16
|
const [isBusy, setIsBusy] = React.useState(false);
|
|
@@ -67,14 +67,21 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
67
67
|
contextCloseDialog?.(result);
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
|
+
// Busy is set before anything is awaited, not just around execute(). `onBeforeExecute` may be
|
|
71
|
+
// async, and from the moment Submit is pressed the dialog is committed to running the command -
|
|
72
|
+
// so every dismissal has to be withdrawn for the whole window, not only for the part of it the
|
|
73
|
+
// request is in flight. Setting it after the transform would leave Cancel live while the command
|
|
74
|
+
// is already on its way: the operator cancels, the dialog closes reporting cancellation, the
|
|
75
|
+
// transform resolves, and the command executes anyway. The `finally` is what releases it, so the
|
|
76
|
+
// flag is cleared on the failure paths and on a transform that throws just as it is on success.
|
|
70
77
|
const handleSubmit = async () => {
|
|
71
|
-
if (onBeforeExecute) {
|
|
72
|
-
const applied = applyBeforeExecute.applyBeforeExecute(onBeforeExecute, commandInstance);
|
|
73
|
-
setCommandValues(applied instanceof Promise ? await applied : applied);
|
|
74
|
-
}
|
|
75
78
|
setIsBusy(true);
|
|
76
79
|
let result;
|
|
77
80
|
try {
|
|
81
|
+
if (onBeforeExecute) {
|
|
82
|
+
const applied = applyBeforeExecute.applyBeforeExecute(onBeforeExecute, commandInstance);
|
|
83
|
+
setCommandValues(applied instanceof Promise ? await applied : applied);
|
|
84
|
+
}
|
|
78
85
|
result = await commandInstance.execute();
|
|
79
86
|
}
|
|
80
87
|
finally {
|
|
@@ -94,11 +101,15 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
94
101
|
await handleClose(dialogs.DialogResult.Ok);
|
|
95
102
|
};
|
|
96
103
|
const headerElement = (jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center gap-2", children: jsxRuntime.jsx("span", { className: "font-bold whitespace-nowrap", children: title }) }));
|
|
97
|
-
const footer = (jsxRuntime.jsxs("div", { className: "flex items-center w-full gap-3", children: [!isFirstStep && (jsxRuntime.jsx(button.Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(Math.max(0, currentStep - 1)), disabled: isBusy, outlined: true })), jsxRuntime.jsx("div", { className: "flex-1" }), !isLastStep && (jsxRuntime.jsx(button.Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
|
|
104
|
+
const footer = (jsxRuntime.jsxs("div", { className: "flex items-center w-full gap-3", children: [showCancel && (jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: "pi pi-times", onClick: () => handleClose(dialogs.DialogResult.Cancelled), disabled: isBusy, outlined: true })), !isFirstStep && (jsxRuntime.jsx(button.Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(Math.max(0, currentStep - 1)), disabled: isBusy, outlined: true })), jsxRuntime.jsx("div", { className: "flex-1" }), !isLastStep && (jsxRuntime.jsx(button.Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
|
|
98
105
|
setVisitedSteps(prev => new Set(prev).add(currentStep));
|
|
99
106
|
setActiveStep(Math.min(stepCount - 1, currentStep + 1));
|
|
100
107
|
}, disabled: isBusy || isCurrentStepInvalid })), isLastStep && isDialogValid && (jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: handleSubmit, loading: isBusy, disabled: isBusy, autoFocus: true }))] }));
|
|
101
|
-
|
|
108
|
+
// The header X and the Escape key are withdrawn on the same flag as the footer Cancel. A
|
|
109
|
+
// dismissal that still worked mid-flight would close the dialog and then let onSuccess fire on a
|
|
110
|
+
// dialog that is already gone. PrimeReact gates Escape behind `closable` too, so `closeOnEscape`
|
|
111
|
+
// is stated rather than load-bearing - it keeps the Escape path guarded on its own terms.
|
|
112
|
+
return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(dialogs.DialogResult.Cancelled), visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: !isBusy, closeOnEscape: !isBusy, className: dialogClassName, pt: dialogPt, ptOptions: dialogPtOptions, unstyled: dialogUnstyled, children: jsxRuntime.jsx(CommandStepper.CommandStepperContent, { activeStep: currentStep, visitedSteps: visitedSteps, getFieldError: getFieldError, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: setStepErrors, showNavigation: false, showSubmit: false, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
102
113
|
};
|
|
103
114
|
/**
|
|
104
115
|
* A multi-step wizard dialog backed by a single Cratis Arc command. Wraps
|
|
@@ -187,8 +198,8 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
187
198
|
* @param props - {@link StepperCommandDialogProps}.
|
|
188
199
|
*/
|
|
189
200
|
const StepperCommandDialogComponent = (props) => {
|
|
190
|
-
const { title, visible, width, style, contentStyle, resizable, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel, nextLabel, previousLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children, ...commandFormProps } = props;
|
|
191
|
-
return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, dialogClassName: dialogClassName, dialogPt: dialogPt, dialogPtOptions: dialogPtOptions, dialogUnstyled: dialogUnstyled, children: children }) }));
|
|
201
|
+
const { title, visible, width, style, contentStyle, resizable, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel, nextLabel, previousLabel, showCancel, cancelLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children, ...commandFormProps } = props;
|
|
202
|
+
return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, showCancel: showCancel, cancelLabel: cancelLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, dialogClassName: dialogClassName, dialogPt: dialogPt, dialogPtOptions: dialogPtOptions, dialogUnstyled: dialogUnstyled, children: children }) }));
|
|
192
203
|
};
|
|
193
204
|
const StepperCommandDialog = StepperCommandDialogComponent;
|
|
194
205
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","useDialogContext","getStepPanels","DialogResult","applyBeforeExecute","_jsx","_jsxs","Button","PrimeDialog","CommandStepperContent","CommandForm"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","useDialogContext","getStepPanels","DialogResult","applyBeforeExecute","_jsx","_jsxs","Button","PrimeDialog","CommandStepperContent","CommandForm"],"mappings":"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"}
|
|
@@ -187,6 +187,22 @@
|
|
|
187
187
|
pointer-events: auto;
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
+
/*
|
|
191
|
+
* Reveal complete. The clip-path did its job — the wipe cannot run without it,
|
|
192
|
+
* because `clip-path: none` is a discrete value that snaps instead of
|
|
193
|
+
* interpolating. But clip-path also clips every descendant, so leaving a zero
|
|
194
|
+
* inset in place slices off the hover tooltips of the outermost buttons, which
|
|
195
|
+
* paint outside the panel by design.
|
|
196
|
+
*
|
|
197
|
+
* ToolbarFanOutItem therefore adds this class once the reveal transition ends,
|
|
198
|
+
* and takes it off again (restoring an interpolable inset) before the close
|
|
199
|
+
* transition starts — so both wipes keep their exact timing and a settled panel
|
|
200
|
+
* clips nothing.
|
|
201
|
+
*/
|
|
202
|
+
.toolbar-fanout-panel--settled {
|
|
203
|
+
clip-path: none;
|
|
204
|
+
}
|
|
205
|
+
|
|
190
206
|
/* ── Toolbar folder ──────────────────────────────────────────────────────── */
|
|
191
207
|
|
|
192
208
|
.toolbar-folder-item {
|
|
@@ -288,18 +304,25 @@
|
|
|
288
304
|
/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
|
|
289
305
|
|
|
290
306
|
/*
|
|
291
|
-
* Size-morphing container for slot content inside a ToolbarGroup.
|
|
307
|
+
* Size-morphing container for slot content inside a ToolbarGroup or ToolbarLayout.
|
|
292
308
|
* Mirrors the .toolbar-section transition parameters for visual consistency —
|
|
293
309
|
* the container resizes smoothly while content cross-fades.
|
|
310
|
+
* Overflow stays visible in the settled state so absolutely-positioned children
|
|
311
|
+
* (fan-out and folder panels, and the hover tooltips inside them) can escape the
|
|
312
|
+
* section's bounds; it is only clipped while outgoing content is fading out, so
|
|
313
|
+
* that content does not bleed past the container mid-transition.
|
|
294
314
|
*/
|
|
295
315
|
.toolbar-slot-section {
|
|
296
316
|
position: relative;
|
|
297
|
-
overflow: hidden;
|
|
298
317
|
transition:
|
|
299
318
|
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
|
300
319
|
height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
301
320
|
}
|
|
302
321
|
|
|
322
|
+
.toolbar-slot-section--transitioning {
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
}
|
|
325
|
+
|
|
303
326
|
@keyframes toolbar-slot-fade-in {
|
|
304
327
|
from { opacity: 0; }
|
|
305
328
|
to { opacity: 1; }
|
|
@@ -17,9 +17,38 @@ var Tooltip = require('../Common/Tooltip.js');
|
|
|
17
17
|
*/
|
|
18
18
|
const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDirection = 'right', children, }) => {
|
|
19
19
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
20
|
+
const [isSettled, setIsSettled] = React.useState(false);
|
|
20
21
|
const containerRef = React.useRef(null);
|
|
22
|
+
const panelRef = React.useRef(null);
|
|
23
|
+
// A settled panel has `clip-path: none`, which cannot interpolate — closing
|
|
24
|
+
// straight from it would snap the panel shut instead of wiping it closed.
|
|
25
|
+
// Put an equivalent inset back and let the browser observe it (the forced
|
|
26
|
+
// reflow) before React removes the visible class, so the close transition
|
|
27
|
+
// has an interpolable starting value.
|
|
28
|
+
const collapse = React.useCallback(() => {
|
|
29
|
+
const panel = panelRef.current;
|
|
30
|
+
if (panel && panel.classList.contains('toolbar-fanout-panel--settled')) {
|
|
31
|
+
panel.style.setProperty('clip-path', 'inset(0 0 0 0 round 1rem)');
|
|
32
|
+
panel.style.setProperty('transition', 'none');
|
|
33
|
+
void panel.offsetWidth;
|
|
34
|
+
panel.style.removeProperty('transition');
|
|
35
|
+
panel.style.removeProperty('clip-path');
|
|
36
|
+
}
|
|
37
|
+
setIsSettled(false);
|
|
38
|
+
setIsExpanded(false);
|
|
39
|
+
}, []);
|
|
21
40
|
const handleToggle = () => {
|
|
22
|
-
|
|
41
|
+
if (isExpanded) {
|
|
42
|
+
collapse();
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
setIsExpanded(true);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const handleTransitionEnd = (event) => {
|
|
49
|
+
if (event.target === panelRef.current && event.propertyName === 'clip-path' && isExpanded) {
|
|
50
|
+
setIsSettled(true);
|
|
51
|
+
}
|
|
23
52
|
};
|
|
24
53
|
// Close the fan-out when clicking outside
|
|
25
54
|
React.useEffect(() => {
|
|
@@ -27,18 +56,19 @@ const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDir
|
|
|
27
56
|
return;
|
|
28
57
|
const handleClickOutside = (event) => {
|
|
29
58
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
30
|
-
|
|
59
|
+
collapse();
|
|
31
60
|
}
|
|
32
61
|
};
|
|
33
62
|
document.addEventListener('mousedown', handleClickOutside);
|
|
34
63
|
return () => {
|
|
35
64
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
36
65
|
};
|
|
37
|
-
}, [isExpanded]);
|
|
66
|
+
}, [isExpanded, collapse]);
|
|
38
67
|
const activeClass = isExpanded ? 'toolbar-button--active' : '';
|
|
39
68
|
const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
|
|
69
|
+
const panelSettledClass = isExpanded && isSettled ? 'toolbar-fanout-panel--settled' : '';
|
|
40
70
|
const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
|
|
41
|
-
return (jsxRuntime.jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, disabled: isExpanded, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx(Icon.IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsxRuntime.jsx("div", { className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`, children: children })] }));
|
|
71
|
+
return (jsxRuntime.jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, disabled: isExpanded, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx(Icon.IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsxRuntime.jsx("div", { ref: panelRef, className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass}`, onTransitionEnd: handleTransitionEnd, children: children })] }));
|
|
42
72
|
};
|
|
43
73
|
|
|
44
74
|
exports.ToolbarFanOutItem = ToolbarFanOutItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","_jsxs","_jsx","Tooltip","IconDisplay"],"mappings":";;;;;;;AA2BA;;;;;;;;;AASG;MACU,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,OAAO,EACzB,eAAe,GAAG,OAAO,EACzB,QAAQ,GACa,KAAI;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","Tooltip","IconDisplay"],"mappings":"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"}
|
|
@@ -74,7 +74,12 @@ const SlotTransition = ({ slotName, flexClass }) => {
|
|
|
74
74
|
}, []);
|
|
75
75
|
if (current.length === 0 && exiting.length === 0)
|
|
76
76
|
return null;
|
|
77
|
-
|
|
77
|
+
// The section is only clipped while outgoing content is fading out, so it
|
|
78
|
+
// doesn't bleed outside the container. Once the transition is complete the
|
|
79
|
+
// section must be overflow:visible so fan-out and folder panels (which are
|
|
80
|
+
// position:absolute children) can escape the slot section's bounds.
|
|
81
|
+
const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
|
|
82
|
+
return (jsxRuntime.jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsxRuntime.jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsxRuntime.jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
|
|
78
83
|
};
|
|
79
84
|
/**
|
|
80
85
|
* A logical sub-grouping of toolbar items within a {@link Toolbar}.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarGroup.js","sources":["../../../Toolbar/ToolbarGroup.tsx"],"sourcesContent":[null],"names":["useToolbarSlot","useState","useRef","useCallback","useLayoutEffect","useEffect","_jsxs","_jsx"],"mappings":";;;;;;AAMA;AACA,MAAM,kBAAkB,GAAG,GAAG;AAE9B;;;;;;;;;;AAUG;AACH,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA2C,KAAI;AACxF,IAAA,MAAM,SAAS,GAAGA,0BAAc,CAAC,QAAQ,CAAC;;;IAI1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAc,SAAS,CAAC;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAc,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;;;AAInD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAc,OAAO,CAAC;AAC/C,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGD,cAAQ,CAA2C,IAAI,CAAC;AAChF,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAA4C,SAAS,CAAC;AAC7E,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAC,KAAK,CAAC;AAEnC,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;AACrC,QAAA,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,YAAA,OAAO,CAAC;AACJ,gBAAA,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,WAAW;AACtC,gBAAA,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,YAAY;AAC3C,aAAA,CAAC;QACN;IACJ,CAAC,EAAE,EAAE,CAAC;;IAGNC,qBAAe,CAAC,MAAK;AACjB,QAAA,eAAe,EAAE;AACrB,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;IAGPC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,SAAS,KAAK,UAAU,CAAC,OAAO;YAAE;AACtC,QAAA,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO;AAE9B,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;QAClE,UAAU,CAAC,SAAS,CAAC;AAErB,QAAA,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YAChB,UAAU,CAAC,GAAG,CAAC;YACf,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,YAAA,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,EAAE,CAAC,EAAE,kBAAkB,CAAC;QAC3E;AACJ,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;;;;IAKfA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;AACxB,YAAA,aAAa,CAAC,OAAO,GAAG,IAAI;AAC5B,YAAA,OAAO;QACX;AACA,QAAA,eAAe,EAAE;AACrB,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;AAE9B,IAAAA,eAAS,CAAC,MAAM,MAAK;AACjB,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;IACtE,CAAC,EAAE,EAAE,CAAC;IAEN,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;
|
|
1
|
+
{"version":3,"file":"ToolbarGroup.js","sources":["../../../Toolbar/ToolbarGroup.tsx"],"sourcesContent":[null],"names":["useToolbarSlot","useState","useRef","useCallback","useLayoutEffect","useEffect","_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -53,12 +53,12 @@ const LayoutTransition = ({ items, flexClass }) => {
|
|
|
53
53
|
}, []);
|
|
54
54
|
if (current.length === 0 && exiting.length === 0)
|
|
55
55
|
return null;
|
|
56
|
-
//
|
|
56
|
+
// The section is only clipped while outgoing content is fading out, so it
|
|
57
57
|
// doesn't bleed outside the container. Once the transition is complete the
|
|
58
58
|
// section must be overflow:visible so fan-out and folder panels (which are
|
|
59
59
|
// position:absolute children) can escape the slot section's bounds.
|
|
60
|
-
const
|
|
61
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
60
|
+
const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
|
|
61
|
+
return (jsxRuntime.jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsxRuntime.jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsxRuntime.jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
|
|
62
62
|
};
|
|
63
63
|
/**
|
|
64
64
|
* A named, transparent layout region inside a {@link Toolbar} that enables decoupled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarLayout.js","sources":["../../../Toolbar/ToolbarLayout.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","_jsxs","_jsx","useToolbarSlot","useMemo","Children"],"mappings":";;;;;;AAMA;AACA,MAAM,oBAAoB,GAAG,GAAG;AAEhC;;;;;AAKG;AACH,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAA6C,KAAI;IACzF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAc,KAAK,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAc,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;AAEnD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAc,OAAO,CAAC;AAC/C,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGD,cAAQ,CAA2C,IAAI,CAAC;AAChF,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAA4C,SAAS,CAAC;;;;IAK7EC,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,EAAE;YAAE;QAET,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC,YAAY,EAAE,CAAC;AAE9E,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC;AACzC,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;QACpB,IAAI,EAAE,CAAC;AAEP,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;IAEPA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,KAAK,UAAU,CAAC,OAAO;YAAE;AAClC,QAAA,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO;AAE9B,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;QAClE,UAAU,CAAC,KAAK,CAAC;AAEjB,QAAA,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YAChB,UAAU,CAAC,GAAG,CAAC;YACf,eAAe,CAAC,QAAQ,IAAI,QAAQ,GAAG,CAAC,CAAC;AACzC,YAAA,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,EAAE,CAAC,EAAE,oBAAoB,CAAC;QAC7E;AACJ,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAAA,eAAS,CAAC,MAAM,MAAK;AACjB,QAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC;IACtE,CAAC,EAAE,EAAE,CAAC;IAEN,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;;;;;AAM7D,IAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"ToolbarLayout.js","sources":["../../../Toolbar/ToolbarLayout.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","_jsxs","_jsx","useToolbarSlot","useMemo","Children"],"mappings":"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"}
|
|
@@ -19,6 +19,8 @@ export interface StepperCommandDialogProps<TCommand extends object, TResponse =
|
|
|
19
19
|
okLabel?: string;
|
|
20
20
|
nextLabel?: string;
|
|
21
21
|
previousLabel?: string;
|
|
22
|
+
showCancel?: boolean;
|
|
23
|
+
cancelLabel?: string;
|
|
22
24
|
dialogClassName?: string;
|
|
23
25
|
dialogPt?: PrimeDialogProps['pt'];
|
|
24
26
|
dialogPtOptions?: PrimeDialogProps['ptOptions'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperCommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAIH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAyB,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAetF,MAAM,WAAW,yBAAyB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAClF,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,yBAAyB;IAa7B,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAElD,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAElC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAEhD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,SAAS,CAAC,EAAE,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"StepperCommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyB,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhG,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAIH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAyB,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAsB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAetF,MAAM,WAAW,yBAAyB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAClF,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,GAAG,iBAAiB,CAAC,EAC/E,yBAAyB;IAa7B,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAElD,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAElC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAEhD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,SAAS,CAAC,EAAE,eAAe,CAAC;IAO5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAMvB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAElC,eAAe,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAEhD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoaD,eAAO,MAAM,oBAAoB,GA/EM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBACvE,yBAAyB,CAAC,QAAQ,EAAE,SAAS,CAAC,sBA8EQ,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { CommandStepperContent } from './CommandStepper.js';
|
|
|
8
8
|
import { applyBeforeExecute } from './applyBeforeExecute.js';
|
|
9
9
|
import { getStepPanels } from './stepChildren.js';
|
|
10
10
|
|
|
11
|
-
const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, contentStyle, resizable = false, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children }) => {
|
|
11
|
+
const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, contentStyle, resizable = false, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', showCancel = false, cancelLabel = 'Cancel', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children }) => {
|
|
12
12
|
const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext();
|
|
13
13
|
const commandInstance = useCommandInstance();
|
|
14
14
|
const [isBusy, setIsBusy] = useState(false);
|
|
@@ -65,14 +65,21 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
65
65
|
contextCloseDialog?.(result);
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
+
// Busy is set before anything is awaited, not just around execute(). `onBeforeExecute` may be
|
|
69
|
+
// async, and from the moment Submit is pressed the dialog is committed to running the command -
|
|
70
|
+
// so every dismissal has to be withdrawn for the whole window, not only for the part of it the
|
|
71
|
+
// request is in flight. Setting it after the transform would leave Cancel live while the command
|
|
72
|
+
// is already on its way: the operator cancels, the dialog closes reporting cancellation, the
|
|
73
|
+
// transform resolves, and the command executes anyway. The `finally` is what releases it, so the
|
|
74
|
+
// flag is cleared on the failure paths and on a transform that throws just as it is on success.
|
|
68
75
|
const handleSubmit = async () => {
|
|
69
|
-
if (onBeforeExecute) {
|
|
70
|
-
const applied = applyBeforeExecute(onBeforeExecute, commandInstance);
|
|
71
|
-
setCommandValues(applied instanceof Promise ? await applied : applied);
|
|
72
|
-
}
|
|
73
76
|
setIsBusy(true);
|
|
74
77
|
let result;
|
|
75
78
|
try {
|
|
79
|
+
if (onBeforeExecute) {
|
|
80
|
+
const applied = applyBeforeExecute(onBeforeExecute, commandInstance);
|
|
81
|
+
setCommandValues(applied instanceof Promise ? await applied : applied);
|
|
82
|
+
}
|
|
76
83
|
result = await commandInstance.execute();
|
|
77
84
|
}
|
|
78
85
|
finally {
|
|
@@ -92,11 +99,15 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
92
99
|
await handleClose(DialogResult.Ok);
|
|
93
100
|
};
|
|
94
101
|
const headerElement = (jsx("div", { className: "inline-flex items-center justify-center gap-2", children: jsx("span", { className: "font-bold whitespace-nowrap", children: title }) }));
|
|
95
|
-
const footer = (jsxs("div", { className: "flex items-center w-full gap-3", children: [!isFirstStep && (jsx(Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(Math.max(0, currentStep - 1)), disabled: isBusy, outlined: true })), jsx("div", { className: "flex-1" }), !isLastStep && (jsx(Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
|
|
102
|
+
const footer = (jsxs("div", { className: "flex items-center w-full gap-3", children: [showCancel && (jsx(Button, { label: cancelLabel, icon: "pi pi-times", onClick: () => handleClose(DialogResult.Cancelled), disabled: isBusy, outlined: true })), !isFirstStep && (jsx(Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(Math.max(0, currentStep - 1)), disabled: isBusy, outlined: true })), jsx("div", { className: "flex-1" }), !isLastStep && (jsx(Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
|
|
96
103
|
setVisitedSteps(prev => new Set(prev).add(currentStep));
|
|
97
104
|
setActiveStep(Math.min(stepCount - 1, currentStep + 1));
|
|
98
105
|
}, disabled: isBusy || isCurrentStepInvalid })), isLastStep && isDialogValid && (jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: handleSubmit, loading: isBusy, disabled: isBusy, autoFocus: true }))] }));
|
|
99
|
-
|
|
106
|
+
// The header X and the Escape key are withdrawn on the same flag as the footer Cancel. A
|
|
107
|
+
// dismissal that still worked mid-flight would close the dialog and then let onSuccess fire on a
|
|
108
|
+
// dialog that is already gone. PrimeReact gates Escape behind `closable` too, so `closeOnEscape`
|
|
109
|
+
// is stated rather than load-bearing - it keeps the Escape path guarded on its own terms.
|
|
110
|
+
return (jsx(Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(DialogResult.Cancelled), visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: !isBusy, closeOnEscape: !isBusy, className: dialogClassName, pt: dialogPt, ptOptions: dialogPtOptions, unstyled: dialogUnstyled, children: jsx(CommandStepperContent, { activeStep: currentStep, visitedSteps: visitedSteps, getFieldError: getFieldError, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: setStepErrors, showNavigation: false, showSubmit: false, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
100
111
|
};
|
|
101
112
|
/**
|
|
102
113
|
* A multi-step wizard dialog backed by a single Cratis Arc command. Wraps
|
|
@@ -185,8 +196,8 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
185
196
|
* @param props - {@link StepperCommandDialogProps}.
|
|
186
197
|
*/
|
|
187
198
|
const StepperCommandDialogComponent = (props) => {
|
|
188
|
-
const { title, visible, width, style, contentStyle, resizable, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel, nextLabel, previousLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children, ...commandFormProps } = props;
|
|
189
|
-
return (jsx(CommandForm, { ...commandFormProps, children: jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, dialogClassName: dialogClassName, dialogPt: dialogPt, dialogPtOptions: dialogPtOptions, dialogUnstyled: dialogUnstyled, children: children }) }));
|
|
199
|
+
const { title, visible, width, style, contentStyle, resizable, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel, nextLabel, previousLabel, showCancel, cancelLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, dialogClassName, dialogPt, dialogPtOptions, dialogUnstyled, children, ...commandFormProps } = props;
|
|
200
|
+
return (jsx(CommandForm, { ...commandFormProps, children: jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, showCancel: showCancel, cancelLabel: cancelLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, dialogClassName: dialogClassName, dialogPt: dialogPt, dialogPtOptions: dialogPtOptions, dialogUnstyled: dialogUnstyled, children: children }) }));
|
|
190
201
|
};
|
|
191
202
|
const StepperCommandDialog = StepperCommandDialogComponent;
|
|
192
203
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","PrimeDialog"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","PrimeDialog"],"mappings":"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"}
|
|
@@ -187,6 +187,22 @@
|
|
|
187
187
|
pointer-events: auto;
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
+
/*
|
|
191
|
+
* Reveal complete. The clip-path did its job — the wipe cannot run without it,
|
|
192
|
+
* because `clip-path: none` is a discrete value that snaps instead of
|
|
193
|
+
* interpolating. But clip-path also clips every descendant, so leaving a zero
|
|
194
|
+
* inset in place slices off the hover tooltips of the outermost buttons, which
|
|
195
|
+
* paint outside the panel by design.
|
|
196
|
+
*
|
|
197
|
+
* ToolbarFanOutItem therefore adds this class once the reveal transition ends,
|
|
198
|
+
* and takes it off again (restoring an interpolable inset) before the close
|
|
199
|
+
* transition starts — so both wipes keep their exact timing and a settled panel
|
|
200
|
+
* clips nothing.
|
|
201
|
+
*/
|
|
202
|
+
.toolbar-fanout-panel--settled {
|
|
203
|
+
clip-path: none;
|
|
204
|
+
}
|
|
205
|
+
|
|
190
206
|
/* ── Toolbar folder ──────────────────────────────────────────────────────── */
|
|
191
207
|
|
|
192
208
|
.toolbar-folder-item {
|
|
@@ -288,18 +304,25 @@
|
|
|
288
304
|
/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
|
|
289
305
|
|
|
290
306
|
/*
|
|
291
|
-
* Size-morphing container for slot content inside a ToolbarGroup.
|
|
307
|
+
* Size-morphing container for slot content inside a ToolbarGroup or ToolbarLayout.
|
|
292
308
|
* Mirrors the .toolbar-section transition parameters for visual consistency —
|
|
293
309
|
* the container resizes smoothly while content cross-fades.
|
|
310
|
+
* Overflow stays visible in the settled state so absolutely-positioned children
|
|
311
|
+
* (fan-out and folder panels, and the hover tooltips inside them) can escape the
|
|
312
|
+
* section's bounds; it is only clipped while outgoing content is fading out, so
|
|
313
|
+
* that content does not bleed past the container mid-transition.
|
|
294
314
|
*/
|
|
295
315
|
.toolbar-slot-section {
|
|
296
316
|
position: relative;
|
|
297
|
-
overflow: hidden;
|
|
298
317
|
transition:
|
|
299
318
|
width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
|
300
319
|
height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
301
320
|
}
|
|
302
321
|
|
|
322
|
+
.toolbar-slot-section--transitioning {
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
}
|
|
325
|
+
|
|
303
326
|
@keyframes toolbar-slot-fade-in {
|
|
304
327
|
from { opacity: 0; }
|
|
305
328
|
to { opacity: 1; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import type { Icon } from '../Common/Icon';
|
|
3
3
|
import type { TooltipPosition } from '../Common/Tooltip';
|
|
4
4
|
export interface ToolbarFanOutItemProps {
|
|
@@ -8,5 +8,5 @@ export interface ToolbarFanOutItemProps {
|
|
|
8
8
|
fanOutDirection?: 'right' | 'left' | 'up' | 'down';
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
}
|
|
11
|
-
export declare const ToolbarFanOutItem: ({ icon, tooltip, tooltipPosition, fanOutDirection, children, }: ToolbarFanOutItemProps) =>
|
|
11
|
+
export declare const ToolbarFanOutItem: ({ icon, tooltip, tooltipPosition, fanOutDirection, children, }: ToolbarFanOutItemProps) => React.JSX.Element;
|
|
12
12
|
//# sourceMappingURL=ToolbarFanOutItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarFanOutItem.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"ToolbarFanOutItem.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,MAAM,WAAW,sBAAsB;IAEnC,IAAI,EAAE,IAAI,CAAC;IAGX,OAAO,EAAE,MAAM,CAAC;IAGhB,eAAe,CAAC,EAAE,eAAe,CAAC;IAGlC,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IAGnD,QAAQ,EAAE,SAAS,CAAC;CACvB;AAYD,eAAO,MAAM,iBAAiB,GAAI,gEAM/B,sBAAsB,sBAiFxB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
3
3
|
import { IconDisplay } from '../Common/Icon.js';
|
|
4
4
|
import { Tooltip } from '../Common/Tooltip.js';
|
|
5
5
|
|
|
@@ -15,9 +15,38 @@ import { Tooltip } from '../Common/Tooltip.js';
|
|
|
15
15
|
*/
|
|
16
16
|
const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDirection = 'right', children, }) => {
|
|
17
17
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
18
|
+
const [isSettled, setIsSettled] = useState(false);
|
|
18
19
|
const containerRef = useRef(null);
|
|
20
|
+
const panelRef = useRef(null);
|
|
21
|
+
// A settled panel has `clip-path: none`, which cannot interpolate — closing
|
|
22
|
+
// straight from it would snap the panel shut instead of wiping it closed.
|
|
23
|
+
// Put an equivalent inset back and let the browser observe it (the forced
|
|
24
|
+
// reflow) before React removes the visible class, so the close transition
|
|
25
|
+
// has an interpolable starting value.
|
|
26
|
+
const collapse = useCallback(() => {
|
|
27
|
+
const panel = panelRef.current;
|
|
28
|
+
if (panel && panel.classList.contains('toolbar-fanout-panel--settled')) {
|
|
29
|
+
panel.style.setProperty('clip-path', 'inset(0 0 0 0 round 1rem)');
|
|
30
|
+
panel.style.setProperty('transition', 'none');
|
|
31
|
+
void panel.offsetWidth;
|
|
32
|
+
panel.style.removeProperty('transition');
|
|
33
|
+
panel.style.removeProperty('clip-path');
|
|
34
|
+
}
|
|
35
|
+
setIsSettled(false);
|
|
36
|
+
setIsExpanded(false);
|
|
37
|
+
}, []);
|
|
19
38
|
const handleToggle = () => {
|
|
20
|
-
|
|
39
|
+
if (isExpanded) {
|
|
40
|
+
collapse();
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
setIsExpanded(true);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const handleTransitionEnd = (event) => {
|
|
47
|
+
if (event.target === panelRef.current && event.propertyName === 'clip-path' && isExpanded) {
|
|
48
|
+
setIsSettled(true);
|
|
49
|
+
}
|
|
21
50
|
};
|
|
22
51
|
// Close the fan-out when clicking outside
|
|
23
52
|
useEffect(() => {
|
|
@@ -25,18 +54,19 @@ const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDir
|
|
|
25
54
|
return;
|
|
26
55
|
const handleClickOutside = (event) => {
|
|
27
56
|
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
28
|
-
|
|
57
|
+
collapse();
|
|
29
58
|
}
|
|
30
59
|
};
|
|
31
60
|
document.addEventListener('mousedown', handleClickOutside);
|
|
32
61
|
return () => {
|
|
33
62
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
34
63
|
};
|
|
35
|
-
}, [isExpanded]);
|
|
64
|
+
}, [isExpanded, collapse]);
|
|
36
65
|
const activeClass = isExpanded ? 'toolbar-button--active' : '';
|
|
37
66
|
const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
|
|
67
|
+
const panelSettledClass = isExpanded && isSettled ? 'toolbar-fanout-panel--settled' : '';
|
|
38
68
|
const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
|
|
39
|
-
return (jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsx(Tooltip, { content: tooltip, position: tooltipPosition, disabled: isExpanded, children: jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx(IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsx("div", { className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`, children: children })] }));
|
|
69
|
+
return (jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsx(Tooltip, { content: tooltip, position: tooltipPosition, disabled: isExpanded, children: jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsx(IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsx("div", { ref: panelRef, className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass} ${panelSettledClass}`, onTransitionEnd: handleTransitionEnd, children: children })] }));
|
|
40
70
|
};
|
|
41
71
|
|
|
42
72
|
export { ToolbarFanOutItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AA2BA;;;;;;;;;AASG;MACU,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,OAAO,EACzB,eAAe,GAAG,OAAO,EACzB,QAAQ,GACa,KAAI;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarGroup.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarGroup.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AAkH7F,MAAM,WAAW,iBAAiB;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAQrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAmBD,eAAO,MAAM,YAAY,GAAI,qCAAkD,iBAAiB,gCAS/F,CAAC"}
|