oolib 2.230.1 → 2.230.3

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/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -106,22 +106,23 @@ var OptionsMulti = function (_a) {
         setSearchString('');
     };
     var createSelectedOptions = function () {
-        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", null,
+        return (showSelectAll || (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0) && (react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: {
                     padding: "0 0.8rem",
                     display: "flex",
                     justifyContent: "space-between",
                     alignItems: "center",
                 } },
-                react_1.default.createElement(__1.UI_TAG, null, "Selected"),
+                react_1.default.createElement(__1.UI_TAG, null, (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && "Selected"),
                 react_1.default.createElement("div", { style: { display: "flex", gap: "0.2rem" } },
-                    showSelectAll && options.length > 0 && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleSelectAll, children: "Select all", icon: "CheckCircle" })),
-                    react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" }))),
-            react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
-                    return handleSelect(v);
-                }, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
-            react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
-                react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))));
+                    (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleClearAll, children: "Clear all", icon: "X" })),
+                    showSelectAll && (react_1.default.createElement(__1.ButtonTertiaryCompact, { onClick: handleSelectAll, children: "Select all", icon: "CheckCircle" })))),
+            (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(List_1.List, { key: value, options: selectedOptions, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
+                        return handleSelect(v);
+                    }, setSearchString: setSearchString, optionsClassName: optionsClassName, setFocusSelectTagsInput: setFocusSelectTagsInput, S: S, isMulti: true, style: { padding: "0" }, disableShadow: true }),
+                react_1.default.createElement("div", { style: { margin: "0.4rem 0rem" } },
+                    react_1.default.createElement(__1.Divider, { style: { borderBottom: "0.1rem solid ".concat(__1.colors2.grey20) } }))))));
     };
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
         react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {

package/package.json

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