oolib 2.31.3 → 2.31.4

package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.d.ts

@@ -0,0 +1,7 @@
+export function ModalHeaderStyle1({ title, linkTo, onClose, setAnimPos, initAnimPos, }: {
+    title: any;
+    linkTo: any;
+    onClose: any;
+    setAnimPos: any;
+    initAnimPos: any;
+}): any;

package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeaderStyle1 = void 0;
+var react_1 = __importDefault(require("react"));
+var Buttons_1 = require("../../../../Buttons");
+var OKELink_1 = require("../../../../OKELink");
+var Typo_1 = require("../../../../Typo");
+var styled_1 = require("../../styled");
+var ModalHeaderStyle1 = function (_a) {
+    var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
+    return (react_1.default.createElement(styled_1.StyledModalLargeHeader, null,
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                gap: "2.5rem",
+                alignItems: "center",
+            } },
+            !linkTo && title && (react_1.default.createElement("div", null,
+                react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
+            linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
+                react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black" }, title)))),
+        onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
+};
+exports.ModalHeaderStyle1 = ModalHeaderStyle1;

package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.d.ts

@@ -0,0 +1,7 @@
+export function ModalHeaderStyle2({ title, subtitle, onClose, setAnimPos, initAnimPos, }: {
+    title: any;
+    subtitle: any;
+    onClose: any;
+    setAnimPos: any;
+    initAnimPos: any;
+}): any;

package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeaderStyle2 = void 0;
+var react_1 = __importDefault(require("react"));
+var Buttons_1 = require("../../../../Buttons");
+var OKELink_1 = require("../../../../OKELink");
+var Typo_1 = require("../../../../Typo");
+var themes_1 = require("../../../../../themes");
+var comps_1 = require("../../../../../utils/comps");
+var styled_1 = require("../../styled");
+var greyColor80 = themes_1.colors.greyColor80;
+var ModalHeaderStyle2 = function (_a) {
+    var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
+    return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
+        react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
+            react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
+        react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
+            react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
+            subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
+            onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
+};
+exports.ModalHeaderStyle2 = ModalHeaderStyle2;

package/dist/components/Modals/ModalLarge/index.js

@@ -27,38 +27,10 @@ exports.ModalLarge = void 0;
 var framer_motion_1 = require("framer-motion");
 var react_1 = __importStar(require("react"));
 var mixins_1 = require("../../../themes/mixins");
-var Buttons_1 = require("../../Buttons");
-var OKELink_1 = require("../../OKELink");
-var Typo_1 = require("../../Typo");
-var themes_1 = require("../../../themes");
-var comps_1 = require("../../../utils/comps");
 var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
+var ModalHeaderStyle1_1 = require("./comps/ModalHeaderStyle1");
+var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
 var styled_1 = require("./styled");
-var greyColor80 = themes_1.colors.greyColor80;
-var ModalHeaderStyle1 = function (_a) {
-    var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
-    return (react_1.default.createElement(styled_1.StyledModalLargeHeader, null,
-        react_1.default.createElement("div", { style: {
-                display: "flex",
-                gap: "2.5rem",
-                alignItems: "center",
-            } },
-            !linkTo && title && (react_1.default.createElement("div", null,
-                react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
-            linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
-                react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black" }, title)))),
-        onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
-};
-var ModalHeaderStyle2 = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
-    return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
-        react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
-            react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
-        react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
-            react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
-            subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
-            onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
-};
 var ModalLarge = function (_a) {
     var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
@@ -72,8 +44,8 @@ var ModalLarge = function (_a) {
     }, []);
     var genHeader = function () {
         var headerStyles = {
-            style1: ModalHeaderStyle1,
-            style2: ModalHeaderStyle2,
+            style1: ModalHeaderStyle1_1.ModalHeaderStyle1,
+            style2: ModalHeaderStyle2_1.ModalHeaderStyle2,
         };
         var Comp = headerStyles[headerStyle];
         return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos }));
@@ -95,7 +67,13 @@ var ModalLarge = function (_a) {
                 type: "tween",
                 ease: "easeOut",
             } }),
-        screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: { position: "relative" }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
+        screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: {
+                position: "relative",
+                // --- the below ensures that if modal content is less that screen height, it only grow enough to fit content (from bottom)
+                minHeight: '100vh',
+                display: 'flex',
+                alignItems: 'flex-end'
+            }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
                 type: "tween",
                 ease: "easeOut",
             }, onAnimationComplete: function () {

package/dist/components/Modals/ModalLarge/styled.js

@@ -38,7 +38,7 @@ exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion
 exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    min-height: 50vh;\n    max-height: 90vh;\n    position: relative;\n    overflow: ", ";\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"], ["\n  width: 100%;\n  margin-top: 4rem;\n  background-color: ", ";\n  ", "\n\n  ", " {\n    margin-top: 0;\n    border: 2px solid ", ";\n    width: ", ";\n    min-height: 50vh;\n    max-height: 90vh;\n    position: relative;\n    overflow: ", ";\n    border-radius: 0.2rem;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll
-        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          min-height: calc(100vh - 4rem);\n        "], ["\n          min-height: calc(100vh - 4rem);\n        "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "], ["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "])));
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          /* min-height: calc(100vh - 4rem); */\n        "], ["\n          /* min-height: calc(100vh - 4rem); */\n        "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "], ["\n          height: calc(100vh - 4rem);\n          display: flex;\n          flex-direction: column;\n        "])));
 }, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
     var desktopWidth = _a.desktopWidth;
     return desktopWidth;

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

@@ -1,4 +1,4 @@
-export function OKELink({ to: _to, link, onClick, icon, iconAfter, text, children, invertUnderline, color, invert, disabled, className, style, avatar, iconSize, contentEditable }: {
+export function OKELink({ to: _to, link, onClick, icon, iconAfter, text, children, invertUnderline, color, invert, disabled, className, style, avatar, iconSize, }: {
     to: any;
     link: any;
     onClick: any;
@@ -14,5 +14,4 @@ export function OKELink({ to: _to, link, onClick, icon, iconAfter, text, childre
     style: any;
     avatar: any;
     iconSize: any;
-    contentEditable?: boolean;
 }): any;

package/dist/components/OKELink/index.js

@@ -49,11 +49,7 @@ var OKELink = function (_a) {
     var _to = _a.to, link = _a.link, //link is deprecated. use to instead 
     onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar, // imageData // [ {...} ] OR {...}
     //imageSize ??
-    iconSize = _a.iconSize, // S & M type setup?
-    _b = _a.contentEditable //important for link to be clickable inside of a RTE
-    , // S & M type setup?
-    contentEditable = _b === void 0 ? false : _b //important for link to be clickable inside of a RTE
-    ;
+    iconSize = _a.iconSize;
     var to = link || _to;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();
@@ -111,16 +107,16 @@ var OKELink = function (_a) {
     var genLink = function () {
         switch (linkType) {
             case 'external':
-                return (react_1.default.createElement(styled_1.StyledLink, __assign({ contentEditable: contentEditable, as: 'a', href: !disabled ? (0, injectHttps_1.injectHttps)(to) : undefined, target: "_blank", onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'a', href: !disabled ? (0, injectHttps_1.injectHttps)(to) : undefined, target: "_blank", onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
             case 'action':
-                return (react_1.default.createElement(styled_1.StyledLink, __assign({ contentEditable: contentEditable, as: 'span', onClick: function (e) {
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: 'span', onClick: function (e) {
                         e.stopPropagation();
                         !disabled && onClick(e);
                     } }, commonProps), linkContents));
             case 'internal':
             default:
                 //internal
-                return (react_1.default.createElement(styled_1.StyledLink, __assign({ contentEditable: contentEditable, as: react_router_dom_1.Link, to: !disabled ? to : undefined, onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
+                return (react_1.default.createElement(styled_1.StyledLink, __assign({ as: react_router_dom_1.Link, to: !disabled ? to : undefined, onClick: function (e) { e.stopPropagation(); } }, commonProps), linkContents));
         }
     };
     return react_1.default.createElement(react_1.Fragment, null, genLink());

package/package.json

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