oolib 2.64.1 → 2.64.3

package/dist/components/Container/index.d.ts

@@ -1,11 +1,13 @@
-export function Comp({ children, className, style }: {
+export function Comp({ children, className, style, enableContainerQuery }: {
     children: any;
     className: any;
     style: any;
+    enableContainerQuery: any;
 }, ref: any): React.JSX.Element;
 export const Container: React.ForwardRefExoticComponent<{
     children: any;
     className: any;
     style: any;
+    enableContainerQuery: any;
 } & React.RefAttributes<any>>;
 import React from "react";

package/dist/components/Container/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,9 +26,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = exports.Comp = void 0;
 var react_1 = __importStar(require("react"));
 var index_styled_1 = require("./index.styled");
-var Comp = function (_a, ref) {
-    var children = _a.children, className = _a.className, style = _a.style;
-    return (react_1.default.createElement(index_styled_1.StyledContainer, { ref: ref, className: className || '', style: __assign({}, style) }, children));
+var useContainerQuery_1 = require("../../utils/customHooks/useContainerQuery");
+var Comp = function (_a, ref //if a ref is passed from outside, it will override the containerQuery feature
+) {
+    var children = _a.children, className = _a.className, style = _a.style, enableContainerQuery = _a.enableContainerQuery;
+    var _b = (0, useContainerQuery_1.useContainerQuery)({
+        enabled: enableContainerQuery,
+    }), selfRef = _b.ref, containerQuery = _b.containerQuery;
+    return (react_1.default.createElement(index_styled_1.StyledContainer, { ref: ref || selfRef, className: className || "", style: style, containerQuery: containerQuery }, children));
 };
 exports.Comp = Comp;
 exports.Container = (0, react_1.forwardRef)(exports.Comp);

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

@@ -3,12 +3,40 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledContainer = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
-exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 2rem;\n  ", "{\n    padding: 0 6rem;\n  }\n"], ["\n  padding: 0 2rem;\n  ", "{\n    padding: 0 6rem;\n  }\n"])), (0, mixins_1.mediaQuery)('sm'));
-var templateObject_1;
+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) {
+    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"));
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Dropdowns/comps/OptionsShell/styled.js

@@ -13,12 +13,12 @@ var themes_1 = require("../../../../themes");
 var mixins_1 = require("../../../../themes/mixins");
 var globalVariables_1 = require("../../../../globalStyles/globalVariables");
 /** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
     var isOpen = _a.isOpen, openHeight = _a.openHeight;
     return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
 }, function (_a) {
     var width = _a.width;
-    return width + 'px';
+    return width ? width + 'px' : '100%';
 }, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
     var isOpen = _a.isOpen;
     return isOpen ? '1px' : 0;

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

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

package/dist/utils/customHooks/useContainerQuery.js

@@ -0,0 +1,33 @@
+"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);
+    });
+    //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 ({
+        ref: enabled && ref,
+        containerQuery: enabled && containerQuery
+    });
+};
+exports.useContainerQuery = useContainerQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.64.1",
+  "version": "2.64.3",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,6 +84,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
     "d3-collection": "^1.0.7",