@cratis/components 1.8.0 → 1.8.1
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 +1 -1
- package/dist/cjs/Toolbar/ToolbarSection.js +20 -0
- package/dist/cjs/Toolbar/ToolbarSection.js.map +1 -1
- package/dist/esm/Toolbar/Toolbar.css +1 -1
- package/dist/esm/Toolbar/ToolbarSection.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarSection.js +20 -0
- package/dist/esm/Toolbar/ToolbarSection.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ var React = require('react');
|
|
|
16
16
|
*/
|
|
17
17
|
const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
|
|
18
18
|
const contextRefs = React.useRef({});
|
|
19
|
+
const resizeObserverRef = React.useRef(null);
|
|
19
20
|
const [size, setSize] = React.useState(null);
|
|
20
21
|
const contexts = React.Children.toArray(children).filter((child) => React.isValidElement(child) && typeof child.props.name === 'string');
|
|
21
22
|
// Default to the first context if activeContext is not provided
|
|
@@ -38,6 +39,25 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
38
39
|
React.useEffect(() => {
|
|
39
40
|
measureAndSetSize(effectiveContext);
|
|
40
41
|
}, [effectiveContext, measureAndSetSize]);
|
|
42
|
+
// Keep section dimensions in sync when the active context's content changes size after render.
|
|
43
|
+
React.useEffect(() => {
|
|
44
|
+
const activeContextElement = contextRefs.current[effectiveContext];
|
|
45
|
+
if (!activeContextElement || typeof ResizeObserver === 'undefined') {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
resizeObserverRef.current?.disconnect();
|
|
49
|
+
const observer = new ResizeObserver(() => {
|
|
50
|
+
measureAndSetSize(effectiveContext);
|
|
51
|
+
});
|
|
52
|
+
observer.observe(activeContextElement);
|
|
53
|
+
resizeObserverRef.current = observer;
|
|
54
|
+
return () => {
|
|
55
|
+
observer.disconnect();
|
|
56
|
+
if (resizeObserverRef.current === observer) {
|
|
57
|
+
resizeObserverRef.current = null;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
}, [effectiveContext, measureAndSetSize]);
|
|
41
61
|
return (jsxRuntime.jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
|
|
42
62
|
const { name, children: contextChildren } = child.props;
|
|
43
63
|
const isActive = name === effectiveContext;
|
|
@@ -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;
|
|
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,4CAiFxG,CAAC"}
|
|
@@ -14,6 +14,7 @@ import { useRef, useState, Children, isValidElement, useCallback, useLayoutEffec
|
|
|
14
14
|
*/
|
|
15
15
|
const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) => {
|
|
16
16
|
const contextRefs = useRef({});
|
|
17
|
+
const resizeObserverRef = useRef(null);
|
|
17
18
|
const [size, setSize] = useState(null);
|
|
18
19
|
const contexts = Children.toArray(children).filter((child) => isValidElement(child) && typeof child.props.name === 'string');
|
|
19
20
|
// Default to the first context if activeContext is not provided
|
|
@@ -36,6 +37,25 @@ const ToolbarSection = ({ activeContext, children, orientation = 'vertical' }) =
|
|
|
36
37
|
useEffect(() => {
|
|
37
38
|
measureAndSetSize(effectiveContext);
|
|
38
39
|
}, [effectiveContext, measureAndSetSize]);
|
|
40
|
+
// Keep section dimensions in sync when the active context's content changes size after render.
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const activeContextElement = contextRefs.current[effectiveContext];
|
|
43
|
+
if (!activeContextElement || typeof ResizeObserver === 'undefined') {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
resizeObserverRef.current?.disconnect();
|
|
47
|
+
const observer = new ResizeObserver(() => {
|
|
48
|
+
measureAndSetSize(effectiveContext);
|
|
49
|
+
});
|
|
50
|
+
observer.observe(activeContextElement);
|
|
51
|
+
resizeObserverRef.current = observer;
|
|
52
|
+
return () => {
|
|
53
|
+
observer.disconnect();
|
|
54
|
+
if (resizeObserverRef.current === observer) {
|
|
55
|
+
resizeObserverRef.current = null;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, [effectiveContext, measureAndSetSize]);
|
|
39
59
|
return (jsx("div", { className: 'toolbar-section', style: size ? { width: size.width, height: size.height } : undefined, children: contexts.map((child) => {
|
|
40
60
|
const { name, children: contextChildren } = child.props;
|
|
41
61
|
const isActive = name === effectiveContext;
|
|
@@ -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;
|
|
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;IAC7D,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,EAAE,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QACjE;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;AAEA,QAAA,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE;AACvC,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,OAAO,MAAK;YACR,QAAQ,CAAC,UAAU,EAAE;AACrB,YAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,QAAQ,EAAE;AACxC,gBAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;YACpC;AACJ,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;;;;"}
|