@cratis/components 2.7.1 → 2.7.2
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/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/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
|
@@ -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":";;;;;;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,kBAAkB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,qCAAqC,GAAG,EAAE;AAE1F,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,qBAAA,EAAwB,kBAAkB,CAAA,CAAE,EACvD,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAA,QAAA,EAAA,CAEpEC,cAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,qCAAqC,SAAS,CAAA,mBAAA,CAAqB,EAAA,QAAA,EAE7E,OAAO,EAAA,CACN,EACL,OAAO,CAAC,MAAM,GAAG,CAAC,KACfA,cAAA,CAAA,KAAA,EAAA,EAEI,SAAS,EAAE,CAAA,kCAAA,EAAqC,SAAS,CAAA,mBAAA,CAAqB,EAAA,QAAA,EAE7E,OAAO,EAAA,EAHH,YAAY,CAIf,CACT,CAAA,EAAA,CACC;AAEd,CAAC;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAsB,KAAI;AAC9F,IAAA,MAAM,SAAS,GAAGC,0BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU;AACxE,IAAA,MAAM,aAAa,GAAGC,aAAO,CAAC,MAAMC,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAC3E,IAAA,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,aAAa;AAE9D,IAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAEnC,QACIH,wBAAK,SAAS,EAAE,8BAA8B,SAAS,CAAA,mBAAA,CAAqB,YACxEA,cAAA,CAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,EAAA,CACtD;AAEd;;;;"}
|
|
@@ -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"}
|
|
@@ -72,7 +72,12 @@ const SlotTransition = ({ slotName, flexClass }) => {
|
|
|
72
72
|
}, []);
|
|
73
73
|
if (current.length === 0 && exiting.length === 0)
|
|
74
74
|
return null;
|
|
75
|
-
|
|
75
|
+
// The section is only clipped while outgoing content is fading out, so it
|
|
76
|
+
// doesn't bleed outside the container. Once the transition is complete the
|
|
77
|
+
// section must be overflow:visible so fan-out and folder panels (which are
|
|
78
|
+
// position:absolute children) can escape the slot section's bounds.
|
|
79
|
+
const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
|
|
80
|
+
return (jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
|
|
76
81
|
};
|
|
77
82
|
/**
|
|
78
83
|
* 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":["_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,GAAG,cAAc,CAAC,QAAQ,CAAC;;;IAI1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAc,SAAS,CAAC;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;;;AAInD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,OAAO,CAAC;AAC/C,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;AAChF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA4C,SAAS,CAAC;AAC7E,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;AAEnC,IAAA,MAAM,eAAe,GAAG,WAAW,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;;IAGN,eAAe,CAAC,MAAK;AACjB,QAAA,eAAe,EAAE;AACrB,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;IAGP,SAAS,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;;;;IAKf,SAAS,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,IAAA,SAAS,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":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -51,12 +51,12 @@ const LayoutTransition = ({ items, flexClass }) => {
|
|
|
51
51
|
}, []);
|
|
52
52
|
if (current.length === 0 && exiting.length === 0)
|
|
53
53
|
return null;
|
|
54
|
-
//
|
|
54
|
+
// The section is only clipped while outgoing content is fading out, so it
|
|
55
55
|
// doesn't bleed outside the container. Once the transition is complete the
|
|
56
56
|
// section must be overflow:visible so fan-out and folder panels (which are
|
|
57
57
|
// position:absolute children) can escape the slot section's bounds.
|
|
58
|
-
const
|
|
59
|
-
return (jsxs("div", { className:
|
|
58
|
+
const transitioningClass = exiting.length > 0 ? 'toolbar-slot-section--transitioning' : '';
|
|
59
|
+
return (jsxs("div", { className: `toolbar-slot-section ${transitioningClass}`, style: size ? { width: size.width, height: size.height } : undefined, children: [jsx("div", { ref: incomingRef, className: `toolbar-slot-incoming inline-flex ${flexClass} items-center gap-1`, children: current }), exiting.length > 0 && (jsx("div", { className: `toolbar-slot-outgoing inline-flex ${flexClass} items-center gap-1`, children: exiting }, exitRevision))] }));
|
|
60
60
|
};
|
|
61
61
|
/**
|
|
62
62
|
* 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":["_jsxs","_jsx"],"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,GAAG,QAAQ,CAAc,KAAK,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEnD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,OAAO,CAAC;AAC/C,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;AAChF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA4C,SAAS,CAAC;;;;IAK7E,SAAS,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;IAEP,SAAS,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,IAAA,SAAS,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":["_jsxs","_jsx"],"mappings":"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"}
|