oolib 2.86.1 → 2.87.1

package/dist/components/Modals/Modal/index.d.ts

@@ -1,4 +1,4 @@
-export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, }: {
+export function Modal({ title, onClose, children, linkTo, desktopWidth, headerStyle, subtitle, fitToContentHeight, invert, overflowVisible, showActionPanel, onCloseText, onConfirm, onConfirmText, alignActions }: {
     title: any;
     onClose: any;
     children: any;
@@ -8,4 +8,10 @@ export function Modal({ title, onClose, children, linkTo, desktopWidth, headerSt
     subtitle: any;
     fitToContentHeight?: boolean;
     invert: any;
+    overflowVisible: any;
+    showActionPanel?: boolean;
+    onCloseText?: string;
+    onConfirm: any;
+    onConfirmText?: string;
+    alignActions?: string;
 }): any;

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

@@ -46,12 +46,12 @@ var styled_1 = require("./styled");
 var Buttons_1 = require("../../Buttons");
 var Divider_1 = require("../../Divider");
 var Modal = 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, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert;
+    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, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.onConfirmText, onConfirmText = _g === void 0 ? "Confirm" : _g, _h = _a.alignActions, alignActions = _h === void 0 ? "right" : _h;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100vh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _e = (0, react_1.useState)(endAnimPos), animPos = _e[0], setAnimPos = _e[1];
+    var _j = (0, react_1.useState)(endAnimPos), animPos = _j[0], setAnimPos = _j[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
@@ -75,10 +75,16 @@ var Modal = function (_a) {
         : ["style2"].indexOf(headerStyle) !== -1 && false;
     var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
         genHeader(),
-        react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, 
-            // showActionPanel={showActionPanel} 
-            takeFullScreenOnScroll: takeFullScreenOnScroll },
-            react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children)))); };
+        react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
+            react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
+            showActionPanel &&
+                react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
+                    react_1.default.createElement(Divider_1.Divider, null),
+                    react_1.default.createElement(styled_1.StyledActionButtonsWrapper, { alignActions: alignActions },
+                        typeof onConfirm === 'function'
+                            ? react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText) // In some cases we want to pass button directly to the component as prop
+                            : onConfirm,
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
         react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",

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

@@ -48,25 +48,16 @@ exports.StyledModalLargeHeader = styled_components_1.default.header(templateObje
     return invert ? themes_1.colors.greyColor90 : greyColor5;
 });
 exports.StyledModalBodyWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: ", ";\n"])), function (_a) {
-    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
-    return takeFullScreenOnScroll ? "auto" : "unset";
+    var takeFullScreenOnScroll = _a.takeFullScreenOnScroll, overflowVisible = _a.overflowVisible;
+    return overflowVisible ? "unset" : takeFullScreenOnScroll ? "auto" : 'unset';
 });
-exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; \n  ", "\n"])), function (_a) {
-    var noPadding = _a.noPadding;
-    return noPadding && '2rem';
-}, function (_a) {
+exports.StyledModalLargeBody = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return !takeFullScreenOnScroll && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex: 1;\n      overflow: auto;\n    "], ["\n      flex: 1;\n      overflow: auto;\n    "])));
 });
-exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: ", ";\n  padding-right: ", ";\n  background-color: white;\n"])), function (_a) {
+exports.StyledActionButtonsWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"], ["\n  gap: 1rem;\n  display: flex;\n  justify-content: ", ";\n  padding: 1rem 0;\n  padding-left: 2rem;\n  padding-right: 0.5rem; \n  background-color: white;\n"])), function (_a) {
     var alignActions = _a.alignActions;
     return alignActions === "right" ? 'flex-end' : '';
-}, function (_a) {
-    var noPadding = _a.noPadding;
-    return !noPadding && '2rem';
-}, function (_a) {
-    var noPadding = _a.noPadding;
-    return !noPadding ? '2rem' : '0.5rem';
 });
 exports.StyledModalHeaderStyle2Container = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"], ["\n  display: flex;\n  border-bottom: 1px solid ", ";\n  padding: 1rem 2rem;\n  position: relative;\n"])), greyColor15);
 exports.StyledModalHeaderStyle2Title = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  padding-top: 1rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 1.5rem;\n  justify-content: space-between;\n  align-items: center;\n"])));

package/dist/components/Modals/derivedComps/ModalConfirm/index.d.ts

@@ -1,4 +1,4 @@
-export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, }: {
+export function ModalConfirm({ title, subTitle, onClose, onCloseText, children, onConfirm, onConfirmText, alignActions }: {
     title: any;
     subTitle: any;
     onClose: any;
@@ -6,5 +6,6 @@ export function ModalConfirm({ title, subTitle, onClose, onCloseText, children,
     children: any;
     onConfirm: any;
     onConfirmText?: string;
+    alignActions?: string;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Modals/derivedComps/ModalConfirm/index.js

@@ -28,11 +28,9 @@ var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (tem
     return alignActions === "right" ? 'flex-end' : '';
 });
 var ModalConfirm = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c;
+    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, children = _a.children, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c, _d = _a.alignActions, alignActions = _d === void 0 ? "left" : _d;
     return (react_1.default.createElement(ModalSmall_1.ModalSmall, __assign({}, { title: title, subTitle: subTitle, onClose: onClose, children: children }),
-        react_1.default.createElement(StyledFlexWrapper
-        // alignActions={alignActions}
-        , null,
+        react_1.default.createElement(StyledFlexWrapper, { alignActions: alignActions },
             react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
             react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
 };

package/dist/components/Modals/derivedComps/ModalForms/index.d.ts

@@ -0,0 +1,8 @@
+export function ModalForms({ children, SUBMIT_BUTTON, title, onClose, alignActions, }: {
+    children: any;
+    SUBMIT_BUTTON: any;
+    title: any;
+    onClose: any;
+    alignActions: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/Modals/derivedComps/ModalForms/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalForms = void 0;
+var react_1 = __importDefault(require("react"));
+var Modal_1 = require("../../Modal");
+var Buttons_1 = require("../../../Buttons");
+var ModalForms = function (_a) {
+    var children = _a.children, SUBMIT_BUTTON = _a.SUBMIT_BUTTON, title = _a.title, onClose = _a.onClose, alignActions = _a.alignActions;
+    console.log({ SUBMIT_BUTTON: SUBMIT_BUTTON });
+    return (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: title, showActionPanel: true, onClose: onClose, onCloseText: "Cancel", desktopWidth: "600px", onConfirm: SUBMIT_BUTTON, alignActions: alignActions || 'left' }, children));
+};
+exports.ModalForms = ModalForms;

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
+export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
 export { ModalSmall } from "./components/Modals/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerAlert = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = void 0;
+exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -70,6 +70,8 @@ var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader")
 Object.defineProperty(exports, "SkeletonLoader", { enumerable: true, get: function () { return SkeletonLoader_1.SkeletonLoader; } });
 var ModalConfirm_1 = require("./components/Modals/derivedComps/ModalConfirm");
 Object.defineProperty(exports, "ModalConfirm", { enumerable: true, get: function () { return ModalConfirm_1.ModalConfirm; } });
+var ModalForms_1 = require("./components/Modals/derivedComps/ModalForms");
+Object.defineProperty(exports, "ModalForms", { enumerable: true, get: function () { return ModalForms_1.ModalForms; } });
 var Modal_1 = require("./components/Modals/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
 var ModalSmall_1 = require("./components/Modals/ModalSmall");

package/package.json

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