@sohanemon/utils 4.1.5 → 4.1.7

package/dist/hooks/index.js

@@ -303,7 +303,7 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         height: 500,
         width: 500,
     });
-    const handleCalculation = () => {
+    const handleCalculation = React.useCallback(() => {
         const blocksHeight = blockIds.reduce((prevHeight, id) => prevHeight + (document.getElementById(id)?.clientHeight || 0), 0);
         const blocksWidth = blockIds.reduce((prevWidth, id) => prevWidth + (document.getElementById(id)?.clientWidth || 0), 0);
         const height = substract
@@ -312,28 +312,80 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         const width = substract
             ? window.innerWidth - blocksWidth - margin
             : blocksWidth + margin;
-        const newDimensions = { height, width };
-        setDimensions(newDimensions);
+        setDimensions((prev) => {
+            // Only update state if dimensions have actually changed
+            if (prev.height === height && prev.width === width) {
+                return prev;
+            }
+            return { height, width };
+        });
         onChange?.({
             blocksWidth,
             blocksHeight,
             remainingWidth: width,
             remainingHeight: height,
         });
-    };
+    }, [blockIds, margin, substract, onChange]);
     useIsomorphicEffect(() => {
         handleCalculation();
-        if (!dynamic)
-            return;
-        if (typeof dynamic === 'string') {
-            const resizableElement = document.getElementById(dynamic);
-            const resizeObserver = new ResizeObserver(() => handleCalculation());
-            if (resizableElement)
-                resizeObserver.observe(resizableElement);
-            return () => resizeObserver.disconnect();
+        const cleanups = [];
+        if (blockIds.length > 0) {
+            const observer = new MutationObserver((mutations) => {
+                let shouldRecalculate = false;
+                for (const mutation of mutations) {
+                    for (const node of mutation.addedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                    for (const node of mutation.removedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                }
+                if (shouldRecalculate) {
+                    handleCalculation();
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            cleanups.push(() => observer.disconnect());
         }
-        window.addEventListener('resize', handleCalculation);
-        return () => window.removeEventListener('resize', handleCalculation);
-    }, []);
+        if (dynamic) {
+            if (typeof dynamic === 'string') {
+                const resizableElement = document.getElementById(dynamic);
+                if (resizableElement) {
+                    const resizeObserver = new ResizeObserver(handleCalculation);
+                    resizeObserver.observe(resizableElement);
+                    cleanups.push(() => resizeObserver.unobserve(resizableElement));
+                    cleanups.push(() => resizeObserver.disconnect());
+                }
+            }
+            else {
+                window.addEventListener('resize', handleCalculation);
+                cleanups.push(() => window.removeEventListener('resize', handleCalculation));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanups) {
+                cleanup();
+            }
+        };
+    }, [handleCalculation, dynamic, blockIds.join(',')]);
     return dimensions;
 };

package/dist/types/utilities.d.ts

@@ -7,6 +7,9 @@ export type SelectivePartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T
 export type DeepRequired<T> = T extends Function ? T : T extends Array<infer U> ? Array<DeepRequired<U>> : T extends object ? {
     [K in keyof T]-?: DeepRequired<T[K]>;
 } : T;
+export type Never<T> = {
+    [K in keyof T]: never;
+};
 export type DeepReadonly<T> = T extends Function ? T : T extends Array<infer U> ? ReadonlyArray<DeepReadonly<U>> : T extends object ? {
     readonly [K in keyof T]: DeepReadonly<T[K]>;
 } : T;
@@ -24,3 +27,6 @@ export type Diff<T, U> = Omit<T, keyof U> & Omit<U, keyof T>;
 export type Intersection<T extends object, U extends object> = Pick<T, Extract<keyof T, keyof U> & Extract<keyof U, keyof T>>;
 export type Merge<T extends object, U extends object, I = Diff<T, U> & Intersection<U, T> & Diff<U, T>> = Pick<I, keyof I>;
 export type Substract<T extends object, U extends object> = Omit<T, keyof U>;
+export type AllOrNone<T> = T | {
+    [P in keyof T]?: never;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",
@@ -15,19 +15,33 @@
   },
   "typesVersions": {
     "*": {
-      "core": ["dist/index.d.ts"],
-      "types": ["dist/types/index.d.ts"],
-      "hooks": ["dist/hooks/index.d.ts"],
-      "components": ["dist/components/index.d.ts"]
+      "core": [
+        "dist/index.d.ts"
+      ],
+      "types": [
+        "dist/types/index.d.ts"
+      ],
+      "hooks": [
+        "dist/hooks/index.d.ts"
+      ],
+      "components": [
+        "dist/components/index.d.ts"
+      ]
     }
   },
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
     "export": "tsc && npm publish"
   },
-  "keywords": ["utils", "cn"],
+  "keywords": [
+    "utils",
+    "cn"
+  ],
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^22.4.0",