oolib 2.89.0 → 2.89.2

package/dist/components/ImageInput/comps/ImageEditor/comps/ConfirmDeleteModal/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmDeleteModal = void 0;
 var react_1 = __importDefault(require("react"));
-var ModalConfirm_1 = require("../../../../../Modals/derivedComps/ModalConfirm");
+var ModalConfirm_1 = require("../../../../../Modals/ModalConfirm");
 var ConfirmDeleteModal = function (_a) {
     var showDeleteImageModal = _a.showDeleteImageModal, setShowDeleteImageModal = _a.setShowDeleteImageModal, handleDeleteSingleImage = _a.handleDeleteSingleImage;
     return (react_1.default.createElement(ModalConfirm_1.ModalConfirm, { title: "Are you sure you want to delete this image?", subTitle: "Once you delete an image it cannot be undone", onClose: function () {

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

@@ -46,7 +46,9 @@ 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, 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 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, // used only in header style 2
+    _d = _a.fitToContentHeight, // used only in header style 2
+    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 };

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

@@ -0,0 +1,10 @@
+export function ModalConfirm({ title, subTitle, children, onClose, onCloseText, onConfirm, onConfirmText, alignActions }: {
+    title: any;
+    subTitle: any;
+    children: any;
+    onClose: any;
+    onCloseText?: string;
+    onConfirm: any;
+    onConfirmText?: string;
+    alignActions?: string;
+}): any;

package/dist/components/Modals/{ModalSmall → ModalConfirm}/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalSmall = void 0;
+exports.ModalConfirm = void 0;
 var react_1 = __importStar(require("react"));
 var react_dom_1 = require("react-dom");
 var mixins_1 = require("../../../themes/mixins");
@@ -31,33 +31,36 @@ var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
 var Buttons_1 = require("../../Buttons");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("./styled");
-var ModalSmall = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, onClose = _a.onClose, children = _a.children;
+var ModalConfirm = function (_a) {
+    var title = _a.title, subTitle = _a.subTitle, children = _a.children, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Delete" : _c, _d = _a.alignActions, alignActions = _d === void 0 ? "left" : _d;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var initAnimPos = { marginTop: "100vh", opacity: 0, translateY: "100%" };
     var endAnimPos = { marginTop: 0, opacity: 1, translateY: 0 };
-    var _b = (0, react_1.useState)(endAnimPos), animPos = _b[0], setAnimPos = _b[1];
+    var _e = (0, react_1.useState)(endAnimPos), animPos = _e[0], setAnimPos = _e[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { return (document.body.style.overflow = "unset"); };
     }, []);
     var SubTitleText = screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? Typo_1.SANS_4 : Typo_1.SANS_3;
     var genModalContents = function () { return (react_1.default.createElement(react_1.Fragment, null,
-        onClose && (react_1.default.createElement(styled_1.StyledModalSmallClose, null,
+        onClose && (react_1.default.createElement(styled_1.StyledModalConfirmClose, null,
             react_1.default.createElement(Buttons_1.ButtonPrimary, { S: true, icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))),
-        react_1.default.createElement(styled_1.StyledModalSmallContent, null,
+        react_1.default.createElement(styled_1.StyledModalConfirmContent, null,
             title && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Typo_1.SERIF_5_6, null, title))),
-            subTitle && (react_1.default.createElement(styled_1.StyledModalSmallContentSubtitle, null,
+            subTitle && (react_1.default.createElement(styled_1.StyledModalConfirmContentSubtitle, null,
                 react_1.default.createElement(SubTitleText, null, subTitle))),
-            react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null)))); };
-    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalSmall, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
+            react_1.default.createElement("div", { style: { marginTop: (title || subTitle) && "2rem" } }, children ? children : null),
+            react_1.default.createElement(styled_1.StyledFlexWrapper, { style: { marginTop: (children) && "2rem" }, alignActions: alignActions },
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))))); };
+    return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalConfirm, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: { type: "tween", ease: "easeOut" }, onClick: function () { return onClose(); } }, screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper, { initial: initAnimPos, animate: animPos, transition: {
             type: "tween",
             ease: "easeOut",
         }, onAnimationComplete: function () {
             if (animPos.marginTop === initAnimPos.marginTop)
                 onClose();
-        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalSmallContentWrapper
+        }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents())) : (react_1.default.createElement(styled_1.StyledModalConfirmContentWrapper
     // style={{ width: "100%" }}
     , { 
         // style={{ width: "100%" }}
@@ -75,4 +78,4 @@ var ModalSmall = function (_a) {
                 onClose();
         }, onClick: function (e) { return e.stopPropagation(); } }, genModalContents()))), document.getElementById("modal-root")));
 };
-exports.ModalSmall = ModalSmall;
+exports.ModalConfirm = ModalConfirm;

package/dist/components/Modals/ModalConfirm/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledModalConfirm: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledModalConfirmContentWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledModalConfirmContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledModalConfirmClose: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledModalConfirmContentSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledFlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,46 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.StyledFlexWrapper = exports.StyledModalConfirmContentSubtitle = exports.StyledModalConfirmClose = exports.StyledModalConfirmContent = exports.StyledModalConfirmContentWrapper = exports.StyledModalConfirm = void 0;
+var mixins_1 = require("../../../themes/mixins");
+var themes_1 = require("../../../themes");
+var framer_motion_1 = require("framer-motion");
+var styled_components_1 = __importStar(require("styled-components"));
+var white = themes_1.colors.white, greyColor100_opacity70 = themes_1.colors.greyColor100_opacity70;
+var ModalStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"])), greyColor100_opacity70);
+exports.StyledModalConfirm = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"], ["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalConfirmContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"], ["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
+exports.StyledModalConfirmContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledModalConfirmClose = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"])));
+exports.StyledModalConfirmContentSubtitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 0.5rem;\n"], ["\n  margin-top: 0.5rem;\n"])));
+exports.StyledFlexWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"])), function (_a) {
+    var alignActions = _a.alignActions;
+    return alignActions === "right" ? 'flex-end' : '';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalConfirmAction = void 0;
 var react_1 = __importStar(require("react"));
-var ModalConfirm_1 = require("../ModalConfirm");
+var ModalConfirm_1 = require("../../ModalConfirm");
 function ModalConfirmAction(_a) {
     var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? "Are you sure you want to do this action" : _c, subtitle = _a.subtitle, onConfirmText = _a.onConfirmText, onCloseText = _a.onCloseText;
     var _d = (0, react_1.useState)(false), modal = _d[0], setModal = _d[1];

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.js

@@ -55,7 +55,7 @@ var RowActionsMenu = function (_a) {
     // cuz if an actionmenu is open we want it to continue showing
     // on screen irrespective of other factors such as hover and such
     return (conditionsToRender || actionMenuIsOpen) && (react_1.default.createElement("div", { style: {
-            zIndex: 1,
+            zIndex: 2,
             position: "absolute",
             top: "50%",
             left: 0,

package/dist/components/SimpleTable/handlers/handleToggleColHeader.d.ts

@@ -0,0 +1,5 @@
+export function handleToggleColHeader({ value, onChange, id }: {
+    value: any;
+    onChange: any;
+    id: any;
+}): void;

package/dist/components/SimpleTable/handlers/handleToggleColHeader.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleToggleColHeader = void 0;
+var lodash_1 = require("lodash");
+var handleToggleColHeader = function (_a) {
+    var value = _a.value, onChange = _a.onChange, id = _a.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = data.map(function (row) {
+        var newRowData = (0, lodash_1.cloneDeep)(row);
+        if (newRowData.cellData[0].isRowHeader) { //then remove
+            delete newRowData.cellData[0].isRowHeader;
+        }
+        else {
+            newRowData.cellData[0].isRowHeader = true;
+        }
+        return newRowData;
+    });
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleToggleColHeader = handleToggleColHeader;

package/dist/components/SimpleTable/index.js

@@ -60,9 +60,11 @@ var handleColActions_1 = require("./handlers/handleColActions");
 var handleRowActions_1 = require("./handlers/handleRowActions");
 var handleStretchToFullWidth_1 = require("./handlers/handleStretchToFullWidth");
 var handleToggleRowHeader_1 = require("./handlers/handleToggleRowHeader");
+var handleToggleColHeader_1 = require("./handlers/handleToggleColHeader");
 var styled_1 = require("./styled");
 var useResizeTableColumns_1 = require("./useResizeTableColumns");
 var convertColHeaderConfigToRowData_1 = require("./utils/convertColHeaderConfigToRowData");
+var convertRowHeaderConfigToCellData_1 = require("./utils/convertRowHeaderConfigToCellData");
 var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
 var greyColor100 = themes_1.colors.greyColor100;
 /*pending:
@@ -168,6 +170,75 @@ function SimpleTable(_a) {
     var colActionsButtonHeight = 15;
     var primaryTableActionsMenuHeight = 30;
     var primaryTableActionsMenuGap = 5;
+    var genCell = function (_a) {
+        var cell = _a.cell, cellIdx = _a.cellIdx, rowIdx = _a.rowIdx;
+        var CellComp = RichTextEditor //cuz in oolib, richtexteditor will not be there for now
+            ? CellContentBlocks["RichTextEditor"]
+            : function () { return react_1.default.createElement("div", null, "RTE Doesnt Exist"); };
+        var cellProps = __assign({}, CellContentBlockDefaultProps["RichTextEditor"]);
+        var cellValue = CellValueGetters["RichTextEditor"](cell.value);
+        var cellWidth = value.colWidthConfig["col_".concat(cellIdx)];
+        //(100% - totalExplicitWidths)/(totalColumns - noOfColsWithExplicitWidths)
+        // let cellProps = {
+        // 	...CellContentBlockDefaultProps[cell.comp],
+        // 	...(cell.props ? cell.props : {}),
+        // }
+        if (cell.isRowHeader)
+            console.log({ cell: cell });
+        var StyledCellWrapper = cell.isRowHeader
+            ? styled_1.StyledSimpleTableHeaderCell
+            : styled_1.StyledSimpleTableCell;
+        return (react_1.default.createElement(StyledCellWrapper, { key: cell.id, id: "kp_table__cell__".concat(cell.id), readOnly: readOnly || cell.readOnly, style: {
+                color: greyColor100,
+                width: "".concat(cellWidth),
+                borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
+                    "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
+            }, actionsActiveOnRow: actionsActiveOnRow, colIdx: cellIdx, rowIdx: rowIdx, totRows: value.data.length, actionsActiveOnCol: actionsActiveOnCol, onMouseEnter: function (e) {
+                setHoveredRowAndCol({
+                    rowIdx: rowIdx,
+                    colIdx: cellIdx,
+                });
+            }, 
+            // onMouseOver={e => {
+            //   setHoveredRowAndCol(e.target.getBoundingClientRect())
+            // }}
+            onMouseDown: function (e) {
+                initColResizeState(e, { colId: "col_".concat(cellIdx) });
+            }, onMouseOut: function (e) { return resetDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? { borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10) } : {}))); }, onMouseMove: function (e) { return hideShowDragZoneIndicator(__assign({ e: e }, (cell.isRowHeader ? {
+                borderStyleInactive: "2px solid ".concat(themes_1.colors.greyColor10),
+                borderStyleActive: "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors))
+            } : {}))); }, tabIndex: 0 },
+            react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
+                value: value,
+                colIdx: cellIdx,
+                onChange: onChange,
+                id: id,
+                defaultColWidth: defaultColWidth,
+                setActionsActiveOnCol: setActionsActiveOnCol,
+                colActionsButtonHeight: colActionsButtonHeight,
+                conditionsToRender: !readOnly &&
+                    enableColActions &&
+                    rowIdx === 0 &&
+                    hoveredRowAndCol.colIdx === cellIdx,
+            })),
+            react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, {
+                value: value,
+                rowIdx: rowIdx,
+                onChange: onChange,
+                id: id,
+                setActionsActiveOnRow: setActionsActiveOnRow,
+                rowActionsButtonWidth: rowActionsButtonWidth,
+                conditionsToRender: !readOnly &&
+                    enableRowActions &&
+                    cellIdx === 0 &&
+                    rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
+                    hoveredRowAndCol.rowIdx === rowIdx,
+            })),
+            react_1.default.createElement("div", { style: { marginRight: dragZoneWidth + "px" } },
+                react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
+                        return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
+                    } })))));
+    };
     var genRow = function (_a) {
         var row = _a.row, rowIdx = _a.rowIdx;
         var StyledWrapper = row.isColHeader
@@ -175,66 +246,16 @@ function SimpleTable(_a) {
             : styled_1.StyledSimpleTableRow;
         return (react_1.default.createElement(StyledWrapper, { actionsActiveOnRow: actionsActiveOnRow, 
             // onClick={() => row.link && history.push(row.link)}
-            style: { display: "flex" }, readOnly: readOnly, rowIdx: rowIdx, key: row.id }, row.cellData.map(function (cell, cellIdx) {
-            var CellComp = RichTextEditor //cuz in oolib, richtexteditor will not be there for now
-                ? CellContentBlocks["RichTextEditor"]
-                : function () { return react_1.default.createElement("div", null, "RTE Doesnt Exist"); };
-            var cellProps = __assign({}, CellContentBlockDefaultProps["RichTextEditor"]);
-            var cellValue = CellValueGetters["RichTextEditor"](cell.value);
-            var cellWidth = value.colWidthConfig["col_".concat(cellIdx)];
-            //(100% - totalExplicitWidths)/(totalColumns - noOfColsWithExplicitWidths)
-            // let cellProps = {
-            // 	...CellContentBlockDefaultProps[cell.comp],
-            // 	...(cell.props ? cell.props : {}),
-            // }
-            return (react_1.default.createElement(styled_1.StyledSimpleTableCell, { key: cell.id, id: "kp_table__cell__".concat(cell.id), readOnly: readOnly || cell.readOnly, style: {
-                    color: greyColor100,
-                    width: "".concat(cellWidth),
-                    borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
-                        "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
-                }, actionsActiveOnRow: actionsActiveOnRow, colIdx: cellIdx, rowIdx: rowIdx, totRows: value.data.length, actionsActiveOnCol: actionsActiveOnCol, onMouseEnter: function (e) {
-                    setHoveredRowAndCol({
-                        rowIdx: rowIdx,
-                        colIdx: cellIdx,
-                    });
-                }, 
-                // onMouseOver={e => {
-                //   setHoveredRowAndCol(e.target.getBoundingClientRect())
-                // }}
-                onMouseDown: function (e) {
-                    initColResizeState(e, { colId: "col_".concat(cellIdx) });
-                }, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator, tabIndex: 0 },
-                react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
-                    value: value,
-                    colIdx: cellIdx,
-                    onChange: onChange,
-                    id: id,
-                    defaultColWidth: defaultColWidth,
-                    setActionsActiveOnCol: setActionsActiveOnCol,
-                    colActionsButtonHeight: colActionsButtonHeight,
-                    conditionsToRender: !readOnly &&
-                        enableColActions &&
-                        rowIdx === 0 &&
-                        hoveredRowAndCol.colIdx === cellIdx,
-                })),
-                react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, {
-                    value: value,
-                    rowIdx: rowIdx,
-                    onChange: onChange,
-                    id: id,
-                    setActionsActiveOnRow: setActionsActiveOnRow,
-                    rowActionsButtonWidth: rowActionsButtonWidth,
-                    conditionsToRender: !readOnly &&
-                        enableRowActions &&
-                        cellIdx === 0 &&
-                        rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
-                        hoveredRowAndCol.rowIdx === rowIdx,
-                })),
-                react_1.default.createElement("div", { style: { marginRight: dragZoneWidth + "px" } },
-                    react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
-                            return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
-                        } })))));
-        })));
+            style: { display: "flex" }, readOnly: readOnly, rowIdx: rowIdx, key: row.id },
+            config.rowHeaderData &&
+                genCell({
+                    cell: (0, convertRowHeaderConfigToCellData_1.convertRowHeaderConfigToCellData)({
+                        rowHeaderData: config.rowHeaderData,
+                        convertToRichText: convertToRichText,
+                        rowIdx: rowIdx
+                    }),
+                }),
+            row.cellData.map(function (cell, cellIdx) { return genCell({ cell: cell, cellIdx: cellIdx, rowIdx: rowIdx }); })));
     };
     var fullWidthCompWrapper = (0, react_1.useRef)(null);
     return (react_1.default.createElement("div", null,
@@ -275,8 +296,10 @@ function SimpleTable(_a) {
                                 ? [
                                     {
                                         icon: "SquareHalf",
-                                        display: UIContent_1.UIContent.SimpleTable.addHeaderCol,
-                                        onClick: function () { },
+                                        display: value.data[0].cellData[0].isRowHeader
+                                            ? UIContent_1.UIContent.SimpleTable.removeHeaderCol
+                                            : UIContent_1.UIContent.SimpleTable.addHeaderCol,
+                                        onClick: function () { return (0, handleToggleColHeader_1.handleToggleColHeader)({ value: value, onChange: onChange, id: id }); },
                                     },
                                 ]
                                 : []), true), (enableColActions

package/dist/components/SimpleTable/styled.d.ts

@@ -1,4 +1,5 @@
 export const StyledSimpleTable: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSimpleTableRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSimpleTableCell: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSimpleTableHeaderCell: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledSimpleTableHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/SimpleTable/styled.js

@@ -27,32 +27,44 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledSimpleTableHeader = exports.StyledSimpleTableCell = exports.StyledSimpleTableRow = exports.StyledSimpleTable = void 0;
+exports.StyledSimpleTableHeader = exports.StyledSimpleTableHeaderCell = exports.StyledSimpleTableCell = exports.StyledSimpleTableRow = exports.StyledSimpleTable = void 0;
 var themes_1 = require("../../themes");
 var transitions_1 = require("../../themes/mixins/transitions");
 var styled_components_1 = __importStar(require("styled-components"));
 var utilsOolib_1 = require("../../utilsOolib");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
-exports.StyledSimpleTable = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  \n  border-left: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n  \n  border-left: 1px solid ", ";\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10);
+exports.StyledSimpleTable = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n\n  border-left: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n\n  border-left: 1px solid ", ";\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10);
 exports.StyledSimpleTableRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 4rem;\n  position: relative;\n  display: flex;\n  ", ";\n  /* background-color: ", "; */\n  ", "\n"], ["\n  min-height: 4rem;\n  position: relative;\n  display: flex;\n  ", ";\n  /* background-color: ", "; */\n  ", "\n"])), (0, transitions_1.transition)("background-color"), function (_a) {
     var rowIdx = _a.rowIdx;
     return rowIdx % 2 === 1 ? themes_1.colors.white : themes_1.colors.greyColor3;
 }, function (_a) {
     var actionsActiveOnRow = _a.actionsActiveOnRow, rowIdx = _a.rowIdx, theme = _a.theme;
-    return actionsActiveOnRow === rowIdx && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &::before{\n      content: '';\n      position: absolute;\n      width: calc(100% - 1px);\n      height: calc(100% - 1px);\n      outline: 1px solid ", ";\n      border: 1px solid ", ";\n      z-index: 1;\n    }\n  "], ["\n    &::before{\n      content: '';\n      position: absolute;\n      width: calc(100% - 1px);\n      height: calc(100% - 1px);\n      outline: 1px solid ", ";\n      border: 1px solid ", ";\n      z-index: 1;\n    }\n  "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors));
+    return actionsActiveOnRow === rowIdx && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::before {\n        content: \"\";\n        position: absolute;\n        width: calc(100% - 1px);\n        height: calc(100% - 1px);\n        outline: 1px solid ", ";\n        border: 1px solid ", ";\n        z-index: 1;\n      }\n    "], ["\n      &::before {\n        content: \"\";\n        position: absolute;\n        width: calc(100% - 1px);\n        height: calc(100% - 1px);\n        outline: 1px solid ", ";\n        border: 1px solid ", ";\n        z-index: 1;\n      }\n    "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors));
 });
 var genActiveColBorder = function (_a) {
     var actionsActiveOnCol = _a.actionsActiveOnCol, colIdx = _a.colIdx, rowIdx = _a.rowIdx, totRows = _a.totRows, theme = _a.theme;
     var isActiveCol = actionsActiveOnCol === colIdx;
     var isFirstRow = rowIdx === 0;
     var isLastRow = rowIdx === totRows - 1;
-    return isActiveCol && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n     &::before{\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          width: calc(100% + 2px);\n          height: calc(100% + 2px);\n          border: 2px solid ", ";\n          z-index: 1;\n          ", "\n        }\n  "], ["\n     &::before{\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          width: calc(100% + 2px);\n          height: calc(100% + 2px);\n          border: 2px solid ", ";\n          z-index: 1;\n          ", "\n        }\n  "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), isFirstRow
-        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["border-bottom: none;"], ["border-bottom: none;"]))) : !isFirstRow && !isLastRow
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                border-bottom: none;\n                border-top: none;\n              "], ["\n                border-bottom: none;\n                border-top: none;\n              "]))) : isLastRow && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["border-top:none;"], ["border-top:none;"]))));
+    return (isActiveCol && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n        border: 2px solid ", ";\n        z-index: 1;\n        ", "\n      }\n    "], ["\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        width: calc(100% + 2px);\n        height: calc(100% + 2px);\n        border: 2px solid ", ";\n        z-index: 1;\n        ", "\n      }\n    "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), isFirstRow
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              border-bottom: none;\n            "], ["\n              border-bottom: none;\n            "]))) : !isFirstRow && !isLastRow
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              border-bottom: none;\n              border-top: none;\n            "], ["\n              border-bottom: none;\n              border-top: none;\n            "]))) : isLastRow && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              border-top: none;\n            "], ["\n              border-top: none;\n            "])))));
 };
-exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n  \n  ", "\n"], ["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n  \n  ", "\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10, (0, transitions_1.transition)("background-color"), function (_a) {
+var tableCellStyling = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n\n  ", ";\n\n  ", "\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10, (0, transitions_1.transition)("background-color"), function (_a) {
+    var readOnly = _a.readOnly;
+    return readOnly && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      cursor: default !important;\n    "], ["\n      cursor: default !important;\n    "])));
+}, function (_a) {
     var readOnly = _a.readOnly, theme = _a.theme, actionsActiveOnRow = _a.actionsActiveOnRow, actionsActiveOnCol = _a.actionsActiveOnCol, rowIdx = _a.rowIdx, totRows = _a.totRows, colIdx = _a.colIdx;
-    return !readOnly && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", ";\n    \n    ", "\n\n    ", "\n  "], ["\n    ", ";\n    \n    ", "\n\n    ", "\n  "])), globalVariables_1.globalHoverOnWhiteBG, !actionsActiveOnRow && !actionsActiveOnCol && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      :focus-within{\n        &::before{\n          content: '';\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          outline: 1px solid ", ";\n          border: 1px solid ", ";\n        }\n        background-color: ", ";\n      }    \n    "], ["\n      :focus-within{\n        &::before{\n          content: '';\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          outline: 1px solid ", ";\n          border: 1px solid ", ";\n        }\n        background-color: ", ";\n      }    \n    "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), themes_1.colors.none), genActiveColBorder({ theme: theme, actionsActiveOnCol: actionsActiveOnCol, rowIdx: rowIdx, totRows: totRows, colIdx: colIdx }));
+    return !readOnly && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      ", ";\n\n      ", "\n\n      ", "\n    "], ["\n      ", ";\n\n      ", "\n\n      ", "\n    "])), globalVariables_1.globalHoverOnWhiteBG, !actionsActiveOnRow &&
+        !actionsActiveOnCol && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        :focus-within {\n          &::before {\n            content: \"\";\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            outline: 1px solid ", ";\n            border: 1px solid ", ";\n          }\n          background-color: ", ";\n        }\n      "], ["\n        :focus-within {\n          &::before {\n            content: \"\";\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            outline: 1px solid ", ";\n            border: 1px solid ", ";\n          }\n          background-color: ", ";\n        }\n      "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), themes_1.colors.none), genActiveColBorder({
+        theme: theme,
+        actionsActiveOnCol: actionsActiveOnCol,
+        rowIdx: rowIdx,
+        totRows: totRows,
+        colIdx: colIdx,
+    }));
 });
-exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"], ["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"])), themes_1.colors.greyColor, themes_1.colors.greyColor10);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), tableCellStyling);
+exports.StyledSimpleTableHeaderCell = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-right: 2px solid ", ";\n"], ["\n  ", "\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-right: 2px solid ", ";\n"])), tableCellStyling, themes_1.colors.greyColor3, themes_1.colors.greyColor10);
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"], ["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"])), themes_1.colors.greyColor3, themes_1.colors.greyColor10);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/components/SimpleTable/useResizeTableColumns.d.ts

@@ -5,9 +5,16 @@ export function useResizeTableColumns({ setColWidthConfig, colWidthConfig, theme
     builderProps: any;
 }): {
     resetColResizeState: (e: any) => void;
-    hideShowDragZoneIndicator: (e: any) => void;
+    hideShowDragZoneIndicator: ({ e, borderStyleActive, borderStyleInactive }: {
+        e: any;
+        borderStyleActive?: string;
+        borderStyleInactive?: string;
+    }) => void;
     initColResizeState: (e: any, d: any) => void;
-    resetDragZoneIndicator: (e: any) => void;
+    resetDragZoneIndicator: ({ e, borderStyleInactive }: {
+        e: any;
+        borderStyleInactive?: string;
+    }) => void;
     handleResizeColumn: (e: any) => void;
     colResizeState: any;
     dragZoneWidth: number;

package/dist/components/SimpleTable/useResizeTableColumns.js

@@ -29,10 +29,11 @@ var useResizeTableColumns = function (_a) {
             });
         }
     };
-    var resetDragZoneIndicator = function (e) {
+    var resetDragZoneIndicator = function (_a) {
+        var e = _a.e, _b = _a.borderStyleInactive, borderStyleInactive = _b === void 0 ? "1px solid ".concat(themes_1.colors.greyColor10) : _b;
         if (colResizeState || e.currentTarget.id !== e.target.id)
             return;
-        e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+        e.currentTarget.style.borderRight = borderStyleInactive;
         e.currentTarget.style.cursor = 'pointer';
     };
     var isInDragZone = function (e) {
@@ -51,18 +52,19 @@ var useResizeTableColumns = function (_a) {
             });
         }
     };
-    var hideShowDragZoneIndicator = function (e) {
+    var hideShowDragZoneIndicator = function (_a) {
+        var e = _a.e, _b = _a.borderStyleActive, borderStyleActive = _b === void 0 ? "1px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)) : _b, _c = _a.borderStyleInactive, borderStyleInactive = _c === void 0 ? "1px solid ".concat(themes_1.colors.greyColor10) : _c;
         e.preventDefault();
         /** currentTarget is the element that this event is bound to */
         if (e.currentTarget.id !== e.target.id)
             return; //very important, else the indicator shows in some cases, when its not supposed to. we don't completely understand why...
         if (!colResizeState) {
             if (isInDragZone(e)) {
-                e.currentTarget.style.borderRight = "1px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors));
+                e.currentTarget.style.borderRight = borderStyleActive;
                 e.currentTarget.style.cursor = 'col-resize';
             }
             else {
-                e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+                e.currentTarget.style.borderRight = borderStyleInactive;
                 e.currentTarget.style.cursor = 'pointer';
             }
         }

package/dist/components/SimpleTable/utils/convertRowHeaderConfigToCellData.d.ts

@@ -0,0 +1,10 @@
+export function convertRowHeaderConfigToCellData({ rowHeaderData, rowIdx, convertToRichText }: {
+    rowHeaderData: any;
+    rowIdx: any;
+    convertToRichText: any;
+}): {
+    value: any;
+    readOnly: boolean;
+    id: string;
+    isRowHeader: boolean;
+};

package/dist/components/SimpleTable/utils/convertRowHeaderConfigToCellData.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertRowHeaderConfigToCellData = void 0;
+var convertRowHeaderConfigToCellData = function (_a) {
+    var rowHeaderData = _a.rowHeaderData, rowIdx = _a.rowIdx, convertToRichText = _a.convertToRichText;
+    return ({
+        value: convertToRichText ? convertToRichText(rowHeaderData[rowIdx]) : rowHeaderData[rowIdx],
+        readOnly: true,
+        id: "rowHeaderCell_".concat(rowIdx),
+        isRowHeader: true
+    });
+};
+exports.convertRowHeaderConfigToCellData = convertRowHeaderConfigToCellData;

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmbedLinkModal = void 0;
 var react_1 = __importStar(require("react"));
-var ModalSmall_1 = require("../../Modals/ModalSmall");
+var Modal_1 = require("../../Modals/Modal");
 var TextInputs_1 = require("../../TextInputs");
 var Paddings_1 = require("../../Paddings");
 var Buttons_1 = require("../../Buttons");
@@ -34,25 +34,26 @@ var EmbedLinkModal = function (_a) {
     var _b;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, canPlay = _a.canPlay, onChange = _a.onChange, invert = _a.invert;
     var _c = (0, react_1.useState)(value), localValue = _c[0], setLocalValue = _c[1];
-    return (react_1.default.createElement(ModalSmall_1.ModalSmall, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
+    return (react_1.default.createElement(Modal_1.Modal, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
         // invert={invert}
-        onClose: function () {
+        desktopWidth: "50vw", fitToContentHeight: true, onClose: function () {
             setShowEmbedLinkModal(false);
         } },
-        react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { icon: 'X' } }),
-        localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
-        createVideoPreview({ value: localValue }),
-        react_1.default.createElement(styled_1.StyledModalActionButtons, null,
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
-                // invert={invert}
-                onClick: function () {
-                    onChange(id, localValue);
-                    setShowEmbedLinkModal(false);
-                } }),
-            react_1.default.createElement(Buttons_1.ButtonGhost, { value: "Cancel", 
-                // invert={invert}
-                onClick: function () {
-                    setShowEmbedLinkModal(false);
-                } }))));
+        react_1.default.createElement("div", { style: { padding: '2rem' } },
+            react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { icon: 'X' } }),
+            localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
+            createVideoPreview({ value: localValue }),
+            react_1.default.createElement(styled_1.StyledModalActionButtons, null,
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
+                    // invert={invert}
+                    onClick: function () {
+                        onChange(id, localValue);
+                        setShowEmbedLinkModal(false);
+                    } }),
+                react_1.default.createElement(Buttons_1.ButtonGhost, { value: "Cancel", 
+                    // invert={invert}
+                    onClick: function () {
+                        setShowEmbedLinkModal(false);
+                    } })))));
 };
 exports.EmbedLinkModal = EmbedLinkModal;

package/dist/index.d.ts

@@ -27,10 +27,9 @@ export { Accordion } from "./components/Accordion";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
 export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
-export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
+export { ModalConfirm } from "./components/Modals/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";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";

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.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;
+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.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 = 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; } });
@@ -68,14 +68,12 @@ var Divider_1 = require("./components/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 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");
+var ModalConfirm_1 = require("./components/Modals/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");
-Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");
 Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
 var HomeCover_1 = require("./components/HomeCover");

package/package.json

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

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

@@ -1,6 +0,0 @@
-export function ModalSmall({ title, subTitle, onClose, children }: {
-    title: any;
-    subTitle: any;
-    onClose: any;
-    children: any;
-}): any;

package/dist/components/Modals/ModalSmall/styled.d.ts

@@ -1,5 +0,0 @@
-export const StyledModalSmall: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const StyledModalSmallContentWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-export const StyledModalSmallContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledModalSmallClose: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledModalSmallContentSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,42 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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.StyledModalSmallContentSubtitle = exports.StyledModalSmallClose = exports.StyledModalSmallContent = exports.StyledModalSmallContentWrapper = exports.StyledModalSmall = void 0;
-var mixins_1 = require("../../../themes/mixins");
-var themes_1 = require("../../../themes");
-var framer_motion_1 = require("framer-motion");
-var styled_components_1 = __importStar(require("styled-components"));
-var white = themes_1.colors.white, greyColor100_opacity70 = themes_1.colors.greyColor100_opacity70;
-var ModalStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background: ", ";\n  z-index: 999999999;\n"])), greyColor100_opacity70);
-exports.StyledModalSmall = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"], ["\n  ", "\n\n  ", " {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n  }\n"])), ModalStyles, (0, mixins_1.mediaQuery)("sm"));
-exports.StyledModalSmallContentWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"], ["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: ", ";\n\n  ", " {\n      border: 2px solid ", ";\n      width: 50vw;\n      position: relative;\n      border-radius: 0.2rem;\n  }\n"])), white, (0, mixins_1.mediaQuery)("sm"), white);
-exports.StyledModalSmallContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 0 2rem 2rem 2rem;\n\n  ", " {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-start;\n      padding: 0 3rem 3rem 3rem;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
-exports.StyledModalSmallClose = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n"])));
-exports.StyledModalSmallContentSubtitle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: 0.5rem;\n"], ["\n  margin-top: 0.5rem;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

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

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

@@ -1,38 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalConfirm = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Buttons_1 = require("../../../Buttons");
-var ModalSmall_1 = require("../../ModalSmall");
-var StyledFlexWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: ", ";\n  gap: 1rem;\n  align-items: center;\n"])), function (_a) {
-    var alignActions = _a.alignActions;
-    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, _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 },
-            react_1.default.createElement(Buttons_1.ButtonPrimary, { onClick: onConfirm }, onConfirmText),
-            react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: onClose }, onCloseText))));
-};
-exports.ModalConfirm = ModalConfirm;
-var templateObject_1;