oolib 2.82.2 → 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/components/Dropdowns/DropdownMulti/index.js

@@ -66,7 +66,7 @@ function DropdownMulti(_a) {
     S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
-    var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme });
+    var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
     var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
     //2 INIT SHOW OPTIONS STATE

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -75,7 +75,7 @@ function DropdownSingle(_a) {
     ;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
-    var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme });
+    var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
     var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
     //2 INIT SHOW OPTIONS STATE

package/dist/components/Dropdowns/utils/getValue.d.ts

@@ -1,12 +1,14 @@
-export function getValue_SINGLE({ valueProp, optionsFn, options, theme }: {
+export function getValue_SINGLE({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;
     options: any;
     theme: any;
+    saveValueAsString: any;
 }): any;
-export function getValue_MULTI({ valueProp, optionsFn, options, theme }: {
+export function getValue_MULTI({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;
     options: any;
     theme: any;
+    saveValueAsString: any;
 }): any;

package/dist/components/Dropdowns/utils/getValue.js

@@ -9,18 +9,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getValue_MULTI = exports.getValue_SINGLE = void 0;
 var getAllOptionsFns_1 = require("./getAllOptionsFns");
+// Note: - saveValueAsString can be misleading here, because the value could be a string, integer, boolean values
+// maybe we can rename to saveValueOnly, or some better name
 var getValue_SINGLE = function (_a) {
     var _b;
-    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
-    return !!valueProp === true && typeof valueProp === 'string'
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
+    return saveValueAsString
         ? (optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, (optionsFn.args || [])) : options).find(function (d) { return d.value === valueProp; })
         : valueProp;
 };
 exports.getValue_SINGLE = getValue_SINGLE;
 var getValue_MULTI = function (_a) {
-    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
-    return !!valueProp === true && valueProp.every(function (v) { return typeof v === 'string'; })
-        ? valueProp.map(function (vProp) {
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
+    return saveValueAsString
+        ? valueProp === null || valueProp === void 0 ? void 0 : valueProp.map(function (vProp) {
             var _a;
             return (optionsFn ? (_a = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_a, (optionsFn.args || [])) : options).find(function (d) { return d.value === vProp; });
         })

package/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ export namespace icons {
     export { PencilLine };
     export { Plus };
     export { Lightbulb };
+    export { Tag };
     export { UploadSimple };
     export { CaretLeft };
     export { CaretRight };
@@ -161,6 +162,7 @@ import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
 import { Plus } from "phosphor-react";
 import { Lightbulb } from "phosphor-react";
+import { Tag } from "phosphor-react";
 import { UploadSimple } from "phosphor-react";
 import { CaretLeft } from "phosphor-react";
 import { CaretRight } from "phosphor-react";

package/dist/icons/index.js

@@ -8,6 +8,7 @@ exports.icons = {
     PencilLine: phosphor_react_1.PencilLine,
     Plus: phosphor_react_1.Plus,
     Lightbulb: phosphor_react_1.Lightbulb,
+    Tag: phosphor_react_1.Tag,
     UploadSimple: phosphor_react_1.UploadSimple,
     CaretLeft: phosphor_react_1.CaretLeft,
     CaretRight: phosphor_react_1.CaretRight,

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.2",
+  "version": "2.83.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",