analysis-ui-components - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

lib-esm/layout/Toolbar.js

@@ -78,9 +78,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     useLayoutEffect(() => {
-        const lastElement = ref.current?.lastElementChild;
-        if (!lastElement) {
+        if (orientation === 'horizontal') {
             return;
         }
-        const rect = lastElement.getBoundingClientRect();
-        ref.current.style.width = `${rect.x + rect.width}px`;
-    }, []);
+        function update() {
+            const lastElement = ref.current?.lastElementChild;
+            if (!lastElement) {
+                return;
+            }
+            ref.current.style.width = 'initial';
+            const divRect = ref.current.getBoundingClientRect();
+            const lastElemRect = lastElement.getBoundingClientRect();
+            const width = `${lastElemRect.right - divRect.left}px`;
+            if (ref.current.style.width !== width) {
+                ref.current.style.width = width;
+            }
+        }
+        const element = ref.current;
+        if (element) {
+            const observer = new ResizeObserver(update);
+            observer.observe(element);
+            return () => observer.unobserve(element);
+        }
+    }, [orientation]);
     return (_jsx("div", Object.assign({ css: styles.toolbar(orientation), ref: ref }, { children: _jsx(ToolbarProvider, Object.assign({ orientation: orientation }, { children: children }), void 0) }), void 0));
@@ -91,3 +107,3 @@ }
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative', margin: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", Object.assign({ style: { position: 'relative', padding: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
@@ -94,0 +110,0 @@ onClick(props);

lib/layout/Toolbar.js

@@ -78,9 +78,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
     useLayoutEffect(() => {
-        const lastElement = ref.current?.lastElementChild;
-        if (!lastElement) {
+        if (orientation === 'horizontal') {
             return;
         }
-        const rect = lastElement.getBoundingClientRect();
-        ref.current.style.width = `${rect.x + rect.width}px`;
-    }, []);
+        function update() {
+            const lastElement = ref.current?.lastElementChild;
+            if (!lastElement) {
+                return;
+            }
+            ref.current.style.width = 'initial';
+            const divRect = ref.current.getBoundingClientRect();
+            const lastElemRect = lastElement.getBoundingClientRect();
+            const width = `${lastElemRect.right - divRect.left}px`;
+            if (ref.current.style.width !== width) {
+                ref.current.style.width = width;
+            }
+        }
+        const element = ref.current;
+        if (element) {
+            const observer = new ResizeObserver(update);
+            observer.observe(element);
+            return () => observer.unobserve(element);
+        }
+    }, [orientation]);
     return (_jsx("div", Object.assign({ css: styles.toolbar(orientation), ref: ref }, { children: _jsx(ToolbarProvider, Object.assign({ orientation: orientation }, { children: children }), void 0) }), void 0));
@@ -91,3 +107,3 @@ }
     const { active = false, children, onClick, title, titleOrientation = 'auto', id, ...other } = props;
-    return (_jsxs("div", Object.assign({ style: { position: 'relative', margin: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
+    return (_jsxs("div", Object.assign({ style: { position: 'relative', padding: 4 } }, other, { children: [_jsx("button", Object.assign({ type: "button", css: styles.item(active), onClick: () => {
                     if (onClick) {
@@ -94,0 +110,0 @@ onClick(props);

package.json

 {
   "name": "analysis-ui-components",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "React components to build analysis UI",
@@ -10,3 +10,4 @@ "main": "lib/index.js",
     "lib",
-    "lib-esm"
+    "lib-esm",
+    "src"
   ],
@@ -19,3 +20,3 @@ "scripts": {
     "serve": "vite preview",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -s ./public -p 6006",
+    "storybook": "start-storybook -s ./public -p 6006",
     "check-types": "tsc --noEmit",
@@ -87,3 +88,6 @@ "eslint": "eslint src stories --cache",
   },
-  "homepage": "https://github.com/cheminfo/analysis-ui-components#readme"
+  "homepage": "https://github.com/cheminfo/analysis-ui-components#readme",
+  "volta": {
+    "node": "16.13.0"
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

195206

increased by35.33%

Number of package files

139

increased by25.23%

Lines of code

4468

increased by66.9%

No dependency changes