oolib 2.82.3 → 2.83.0

package/dist/components/Container/index.styled.js

@@ -30,13 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
-exports.StyledContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 2rem;\n  ", "\n"], ["\n  padding: 0 2rem;\n  ", "\n"])), function (_a) {
+exports.StyledContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 2rem;\n\n  ", "\n"], ["\n  padding: 0 2rem;\n\n  ", "\n"])), function (_a) {
     var containerQuery = _a.containerQuery;
-    if (containerQuery) {
-        return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), containerQuery("sm", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: 0 6rem;"], ["padding: 0 6rem;"])))));
-    }
-    else {
-        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", " {\n          padding: 0 6rem;\n        }\n      "], ["\n        ", " {\n          padding: 0 6rem;\n        }\n      "])), (0, mixins_1.mediaQuery)("sm"));
-    }
+    return containerQuery ? containerQuery('sm')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 0 6rem\n          "], ["\n            padding: 0 6rem\n          "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          ", " {\n            padding: 0 2rem;\n          }\n        "], ["\n          ", " {\n            padding: 0 2rem;\n          }\n        "])), (0, mixins_1.mediaQuery)("sm"));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,4 +1,6 @@
 export function useContainerQuery(options?: {}): {
     ref: import("react").MutableRefObject<any>;
-    containerQuery: (size: any, css: any) => any;
+    containerQuery: (point: any) => (styles: any) => any;
+    containerWidth: number;
+    containerHeight: number;
 };

package/dist/utils/customHooks/useContainerQuery.js

@@ -1,33 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContainerQuery = void 0;
-var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
 var mixins_1 = require("../../themes/mixins");
 var react_1 = require("react");
 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)(undefined), containerWidth = _a[0], setContainerWidth = _a[1];
-    (0, resize_observer_1.default)(ref, function (entry) {
-        var width = entry.borderBoxSize[0].inlineSize;
-        setContainerWidth(width);
-    });
+    var _a = (0, react_1.useState)({ width: 0, height: 0 }), containerSize = _a[0], setContainerSize = _a[1];
+    (0, react_1.useEffect)(function () {
+        var resizeObserver = new ResizeObserver(function (entries) {
+            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 });
+            }
+        });
+        if (ref.current) {
+            resizeObserver.observe(ref.current);
+        }
+        return function () {
+            if (ref.current) {
+                resizeObserver.unobserve(ref.current);
+            }
+        };
+    }, [ref]);
     //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' 
     //query and so on. Else bugs will happen.
-    var containerQuery = function (size, css) {
-        var bp = (0, mixins_1.getBreakPoint)(size);
-        if (containerWidth >= bp)
-            return css;
-    };
-    return ({
+    var containerQuery = function (point) { return function (styles) {
+        var breakpointWidth = (0, mixins_1.getBreakPoint)(point);
+        return containerSize.width >= breakpointWidth ? styles : '';
+    }; };
+    return {
         ref: enabled ? ref : undefined,
-        containerQuery: enabled ? containerQuery : undefined
-    });
+        containerQuery: enabled ? containerQuery : undefined,
+        containerWidth: containerSize.width,
+        containerHeight: containerSize.height
+    };
 };
 exports.useContainerQuery = useContainerQuery;

package/package.json

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