oolib 2.230.1 → 2.230.2

package/dist/utils/customHooks/useContainerQuery.d.ts

@@ -3,7 +3,7 @@ export interface useContainerQueryOptions {
     enabled?: boolean;
 }
 export interface useContainerQueryReturn {
-    ref?: React.RefObject<HTMLDivElement>;
+    ref?: (node: HTMLDivElement | null) => void;
     containerQuery?: (point: breakpoint) => (styles: string | TemplateStringsArray) => string;
     containerWidth: number;
     containerHeight: number;

package/dist/utils/customHooks/useContainerQuery.js

@@ -3,38 +3,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContainerQuery = void 0;
 var mixins_1 = require("../../themes/mixins");
 var react_1 = require("react");
+var RESIZE_DEBOUNCE_MS = 200;
 var useContainerQuery = function (options) {
     if (options === void 0) { options = {}; }
     var enabled = options.enabled;
-    var ref = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)({ width: 0, height: 0 }), containerSize = _a[0], setContainerSize = _a[1];
+    var _a = (0, react_1.useState)(null), node = _a[0], setNode = _a[1];
+    var _b = (0, react_1.useState)({ width: 0, height: 0 }), containerSize = _b[0], setContainerSize = _b[1];
+    var debounceTimerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
+        if (!node)
+            return;
+        // Synchronous initial measurement to avoid flash of incorrect layout
+        var rect = node.getBoundingClientRect();
+        setContainerSize({ width: rect.width, height: rect.height });
         var resizeObserver = new ResizeObserver(function (entries) {
+            var _loop_1 = function (entry) {
+                var _a = entry.contentBoxSize[0], inlineSize = _a.inlineSize, blockSize = _a.blockSize;
+                if (debounceTimerRef.current) {
+                    clearTimeout(debounceTimerRef.current);
+                }
+                debounceTimerRef.current = setTimeout(function () {
+                    setContainerSize(function (prev) {
+                        if (Math.abs(prev.width - inlineSize) > 2 || Math.abs(prev.height - blockSize) > 2) {
+                            return { width: inlineSize, height: blockSize };
+                        }
+                        return prev;
+                    });
+                }, RESIZE_DEBOUNCE_MS);
+            };
             for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                 var entry = entries_1[_i];
-                var _a = entry.contentBoxSize[0], inlineSize = _a.inlineSize, blockSize = _a.blockSize;
-                setContainerSize({ width: inlineSize, height: blockSize });
+                _loop_1(entry);
             }
         });
-        if (ref.current) {
-            resizeObserver.observe(ref.current);
-        }
+        resizeObserver.observe(node);
         return function () {
-            if (ref.current) {
-                resizeObserver.unobserve(ref.current);
+            resizeObserver.disconnect();
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
             }
         };
-    }, [ref]);
+    }, [node]);
     //if container queries are written for multiple breakpoints
-    //then they must be written in the order of small to big. 
-    //so for example, the 'sm' query should be written before the 'md' 
+    //then they must be written in the order of small to big.
+    //so for example, the 'sm' query should be written before the 'md'
     //query and so on. Else bugs will happen.
     var containerQuery = function (point) { return function (styles) {
         var breakpointWidth = (0, mixins_1.getBreakPoint)(point);
         return containerSize.width >= breakpointWidth ? styles : "";
     }; };
     return {
-        ref: enabled ? ref : undefined,
+        ref: enabled ? setNode : undefined,
         containerQuery: enabled ? containerQuery : undefined,
         containerWidth: containerSize.width,
         containerHeight: containerSize.height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.230.1",
+  "version": "2.230.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",