@cratis/components 1.8.1 → 1.8.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/ToolbarSection.js +20 -1
- package/dist/cjs/Toolbar/ToolbarSection.js.map +1 -1
- package/dist/esm/Toolbar/ToolbarSection.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarSection.js +20 -1
- package/dist/esm/Toolbar/ToolbarSection.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -17,6 +17,7 @@ var React = require('react');
|
|
|
17
17
|
const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
|
|
18
18
|
const contextRefs = React.useRef({});
|
|
19
19
|
const resizeObserverRef = React.useRef(null);
|
|
20
|
+
const mutationObserverRef = React.useRef(null);
|
|
20
21
|
const [size, setSize] = React.useState(null);
|
|
21
22
|
const contexts = React.Children.toArray(children).filter((child) => React.isValidElement(child) && typeof child.props.name === 'string');
|
|
22
23
|
// Default to the first context if activeContext is not provided
|
|
@@ -26,7 +27,10 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
26
27
|
const measureAndSetSize = React.useCallback((contextName) => {
|
|
27
28
|
const ref = contextRefs.current[contextName];
|
|
28
29
|
if (ref) {
|
|
29
|
-
setSize({
|
|
30
|
+
setSize({
|
|
31
|
+
width: Math.max(ref.offsetWidth, ref.scrollWidth),
|
|
32
|
+
height: Math.max(ref.offsetHeight, ref.scrollHeight),
|
|
33
|
+
});
|
|
30
34
|
}
|
|
31
35
|
}, []);
|
|
32
36
|
// Set the initial size synchronously before the first browser paint so there is no layout flash.
|
|
@@ -45,17 +49,32 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
45
49
|
if (!activeContextElement || typeof ResizeObserver === 'undefined') {
|
|
46
50
|
return;
|
|
47
51
|
}
|
|
52
|
+
measureAndSetSize(effectiveContext);
|
|
53
|
+
mutationObserverRef.current?.disconnect();
|
|
48
54
|
resizeObserverRef.current?.disconnect();
|
|
49
55
|
const observer = new ResizeObserver(() => {
|
|
50
56
|
measureAndSetSize(effectiveContext);
|
|
51
57
|
});
|
|
52
58
|
observer.observe(activeContextElement);
|
|
53
59
|
resizeObserverRef.current = observer;
|
|
60
|
+
if (typeof MutationObserver !== 'undefined') {
|
|
61
|
+
const mutationObserver = new MutationObserver(() => {
|
|
62
|
+
measureAndSetSize(effectiveContext);
|
|
63
|
+
});
|
|
64
|
+
mutationObserver.observe(activeContextElement, {
|
|
65
|
+
childList: true,
|
|
66
|
+
subtree: true,
|
|
67
|
+
attributes: true,
|
|
68
|
+
});
|
|
69
|
+
mutationObserverRef.current = mutationObserver;
|
|
70
|
+
}
|
|
54
71
|
return () => {
|
|
55
72
|
observer.disconnect();
|
|
56
73
|
if (resizeObserverRef.current === observer) {
|
|
57
74
|
resizeObserverRef.current = null;
|
|
58
75
|
}
|
|
76
|
+
mutationObserverRef.current?.disconnect();
|
|
77
|
+
mutationObserverRef.current = null;
|
|
59
78
|
};
|
|
60
79
|
}, [effectiveContext, measureAndSetSize]);
|
|
61
80
|
return (jsxRuntime.jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["useRef","useState","Children","isValidElement","useCallback","useLayoutEffect","useEffect","_jsx"],"mappings":";;;;;AAuBA;;;;;;;;;;AAUG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAwC,EAAE,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAwB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["useRef","useState","Children","isValidElement","useCallback","useLayoutEffect","useEffect","_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AAKrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ToolbarSection.d.ts","sourceRoot":"","sources":["../../../Toolbar/ToolbarSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,SAAS,EAA6E,MAAM,OAAO,CAAC;AAKrI,MAAM,WAAW,mBAAmB;IAMhC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAC3C;AAaD,eAAO,MAAM,cAAc,GAAI,0CAAuD,mBAAmB,4CAwGxG,CAAC"}
|
|
@@ -15,6 +15,7 @@ import { useRef, useState, Children, isValidElement, useCallback, useLayoutEffec
|
|
|
15
15
|
const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
|
|
16
16
|
const contextRefs = useRef({});
|
|
17
17
|
const resizeObserverRef = useRef(null);
|
|
18
|
+
const mutationObserverRef = useRef(null);
|
|
18
19
|
const [size, setSize] = useState(null);
|
|
19
20
|
const contexts = Children.toArray(children).filter((child) => isValidElement(child) && typeof child.props.name === 'string');
|
|
20
21
|
// Default to the first context if activeContext is not provided
|
|
@@ -24,7 +25,10 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
24
25
|
const measureAndSetSize = useCallback((contextName) => {
|
|
25
26
|
const ref = contextRefs.current[contextName];
|
|
26
27
|
if (ref) {
|
|
27
|
-
setSize({
|
|
28
|
+
setSize({
|
|
29
|
+
width: Math.max(ref.offsetWidth, ref.scrollWidth),
|
|
30
|
+
height: Math.max(ref.offsetHeight, ref.scrollHeight),
|
|
31
|
+
});
|
|
28
32
|
}
|
|
29
33
|
}, []);
|
|
30
34
|
// Set the initial size synchronously before the first browser paint so there is no layout flash.
|
|
@@ -43,17 +47,32 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
43
47
|
if (!activeContextElement || typeof ResizeObserver === 'undefined') {
|
|
44
48
|
return;
|
|
45
49
|
}
|
|
50
|
+
measureAndSetSize(effectiveContext);
|
|
51
|
+
mutationObserverRef.current?.disconnect();
|
|
46
52
|
resizeObserverRef.current?.disconnect();
|
|
47
53
|
const observer = new ResizeObserver(() => {
|
|
48
54
|
measureAndSetSize(effectiveContext);
|
|
49
55
|
});
|
|
50
56
|
observer.observe(activeContextElement);
|
|
51
57
|
resizeObserverRef.current = observer;
|
|
58
|
+
if (typeof MutationObserver !== 'undefined') {
|
|
59
|
+
const mutationObserver = new MutationObserver(() => {
|
|
60
|
+
measureAndSetSize(effectiveContext);
|
|
61
|
+
});
|
|
62
|
+
mutationObserver.observe(activeContextElement, {
|
|
63
|
+
childList: true,
|
|
64
|
+
subtree: true,
|
|
65
|
+
attributes: true,
|
|
66
|
+
});
|
|
67
|
+
mutationObserverRef.current = mutationObserver;
|
|
68
|
+
}
|
|
52
69
|
return () => {
|
|
53
70
|
observer.disconnect();
|
|
54
71
|
if (resizeObserverRef.current === observer) {
|
|
55
72
|
resizeObserverRef.current = null;
|
|
56
73
|
}
|
|
74
|
+
mutationObserverRef.current?.disconnect();
|
|
75
|
+
mutationObserverRef.current = null;
|
|
57
76
|
};
|
|
58
77
|
}, [effectiveContext, measureAndSetSize]);
|
|
59
78
|
return (jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAuBA;;;;;;;;;;AAUG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAG,MAAM,CAAwC,EAAE,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAwB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarSection.js","sources":["../../../Toolbar/ToolbarSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAuBA;;;;;;;;;;AAUG;AACI,MAAM,cAAc,GAAG,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,GAAG,UAAU,EAAuB,KAAI;AACzG,IAAA,MAAM,WAAW,GAAG,MAAM,CAAwC,EAAE,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC7D,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAA0B,IAAI,CAAC;IACjE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2C,IAAI,CAAC;AAEhF,IAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC9C,CAAC,KAAK,KACF,cAAc,CAAC,KAAK,CAAC,IAAI,OAAQ,KAAK,CAAC,KAA6B,CAAC,IAAI,KAAK,QAAQ,CAC7F;;AAGD,IAAA,MAAM,gBAAgB,GAAG,aAAa,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAA6B,EAAE,IAAI,IAAI,EAAE;AAEjG,IAAA,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,GAAG,UAAU,GAAG,UAAU;;AAGxE,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,WAAmB,KAAI;QAC1D,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;QAC5C,IAAI,GAAG,EAAE;AACL,YAAA,OAAO,CAAC;AACJ,gBAAA,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,GAAG,CAAC,WAAW,CAAC;AACjD,gBAAA,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,YAAY,EAAE,GAAG,CAAC,YAAY,CAAC;AACvD,aAAA,CAAC;QACN;IACJ,CAAC,EAAE,EAAE,CAAC;;;IAIN,eAAe,CAAC,MAAK;QACjB,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,EAAE,CAAC,CAAC;;;IAIP,SAAS,CAAC,MAAK;QACX,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;;IAGzC,SAAS,CAAC,MAAK;QACX,MAAM,oBAAoB,GAAG,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAClE,IAAI,CAAC,oBAAoB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;YAChE;QACJ;QAEA,iBAAiB,CAAC,gBAAgB,CAAC;AAEnC,QAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,QAAA,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE;AAEvC,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;YACrC,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,oBAAoB,CAAC;AACtC,QAAA,iBAAiB,CAAC,OAAO,GAAG,QAAQ;AAEpC,QAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACzC,YAAA,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;gBAC/C,iBAAiB,CAAC,gBAAgB,CAAC;AACvC,YAAA,CAAC,CAAC;AACF,YAAA,gBAAgB,CAAC,OAAO,CAAC,oBAAoB,EAAE;AAC3C,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,UAAU,EAAE,IAAI;AACnB,aAAA,CAAC;AACF,YAAA,mBAAmB,CAAC,OAAO,GAAG,gBAAgB;QAClD;AAEA,QAAA,OAAO,MAAK;YACR,QAAQ,CAAC,UAAU,EAAE;AACrB,YAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,QAAQ,EAAE;AACxC,gBAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;YACpC;AAEA,YAAA,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE;AACzC,YAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;AACtC,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;AAEzC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAA,QAAA,EAEnE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YACpB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,KAA4B;AAC9E,YAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,gBAAgB;AAE1C,YAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAEI,GAAG,EAAE,CAAC,OAAO,KAAI,EAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAC1D,SAAS,EAAE,+BAA+B,SAAS,CAAA,oBAAA,EAC/C,QAAQ,GAAG,yBAAyB,GAAG,2BAC3C,EAAE,EAAA,QAAA,EAED,eAAe,IANX,IAAI,CAOP;QAEd,CAAC,CAAC,EAAA,CACA;AAEd;;;;"}
|