oolib 2.88.2 → 2.89.1

package/dist/UIContent/index.d.ts

@@ -4,6 +4,13 @@ export namespace UIContent {
         const onlyFirstFileConsiderErrMsg: string;
         const corruptUrlErrMsg: string;
     }
+    namespace VideoInput {
+        const uploadError: string;
+    }
+    namespace Pdf {
+        const uploadError_1: string;
+        export { uploadError_1 as uploadError };
+    }
     namespace SimpleTable {
         const _delete: string;
         export { _delete as delete };

package/dist/UIContent/index.js

@@ -7,6 +7,12 @@ exports.UIContent = {
         onlyFirstFileConsiderErrMsg: "This is a single image input. Only first file will be considered",
         corruptUrlErrMsg: "Image URL seems to be corrupt. Cannot render it"
     },
+    VideoInput: {
+        uploadError: "Unable to upload file"
+    },
+    Pdf: {
+        uploadError: "Unable to upload file"
+    },
     SimpleTable: {
         delete: 'Delete',
         duplicate: 'Duplicate',

package/dist/components/ImageInput/comps/ImageUploadShell/index.d.ts

@@ -1,4 +1,20 @@
+export function UploadShell({ isLoading, children, disabled, enableFilesDrop, setDragOverActive: parentSetDragOverActive, handleUpload, onChange, value, id, multiple, mediaType, height, width }: {
+    isLoading: any;
+    children: any;
+    disabled: any;
+    enableFilesDrop?: boolean;
+    setDragOverActive: any;
+    handleUpload: any;
+    onChange: any;
+    value: any;
+    id: any;
+    multiple: any;
+    mediaType: any;
+    height: any;
+    width: any;
+}): React.JSX.Element;
 export default ImageUploadShell;
+import React from "react";
 declare function ImageUploadShell({ style, isLoading, children, disabled, enableFilesDrop, setDragOverActive }: {
     style: any;
     isLoading: any;
@@ -7,4 +23,3 @@ declare function ImageUploadShell({ style, isLoading, children, disabled, enable
     enableFilesDrop: any;
     setDragOverActive: any;
 }): React.JSX.Element;
-import React from "react";

package/dist/components/ImageInput/comps/ImageUploadShell/index.js

@@ -43,10 +43,72 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadShell = void 0;
 var react_1 = __importStar(require("react"));
 var ImageInputContext_1 = require("../../ImageInputContext");
 var bannerContext_1 = require("../../../Banners/bannerContext");
 var UIContent_1 = require("../../../../UIContent");
+var mediaFormat = {
+    image: 'image/*',
+    video: 'video/*',
+    pdf: 'application/pdf'
+};
+var mediaErrorMessage = {
+    image: UIContent_1.UIContent.ImageInput.onlyFirstFileConsiderErrMsg,
+    video: UIContent_1.UIContent.VideoInput.uploadError,
+    pdf: UIContent_1.UIContent.Pdf.uploadError
+};
+var UploadShell = function (_a) {
+    var isLoading = _a.isLoading, children = _a.children, disabled = _a.disabled, _b = _a.enableFilesDrop, enableFilesDrop = _b === void 0 ? true : _b, parentSetDragOverActive = _a.setDragOverActive, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, multiple = _a.multiple, mediaType = _a.mediaType, height = _a.height, width = _a.width;
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
+    var inputRef = (0, react_1.useRef)(null);
+    if (disabled)
+        return react_1.default.createElement("div", { style: { width: '100%', height: '100%' } }, children);
+    var fireHandleUpload = function (files) {
+        handleUpload({
+            files: files,
+            callback: function (_a) {
+                var successfulUploads = _a.successfulUploads;
+                onChange(id, multiple
+                    ? __spreadArray(__spreadArray([], successfulUploads, true), (value || []), true) : successfulUploads);
+            }
+        });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { type: "file", accept: mediaFormat[mediaType], style: { display: 'none' }, ref: inputRef, onChange: function (e) { return fireHandleUpload(e.target.files); }, multiple: multiple }),
+        react_1.default.createElement("div", __assign({}, (isLoading
+            ? {}
+            : {
+                onDragEnter: function (e) {
+                    e.preventDefault();
+                    parentSetDragOverActive(true);
+                },
+                onDragLeave: function (e) {
+                    e.preventDefault();
+                    parentSetDragOverActive(false);
+                },
+                onDragOver: enableFilesDrop
+                    ? function (e) { return e.preventDefault(); }
+                    : function () { },
+                onDrop: enableFilesDrop
+                    ? function (e) {
+                        var _a, _b;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                            if (!multiple && ((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files.length) > 1) { //then set alert saying only first image will be attempted to upload
+                                SET_ALERT_BANNER(mediaErrorMessage[mediaType], 'red', 3000);
+                            }
+                            var filesToUpload = multiple
+                                ? Array.from(e.dataTransfer.files)
+                                : [Array.from(e.dataTransfer.files)[0]];
+                            fireHandleUpload(filesToUpload);
+                        }
+                    }
+                    : function () { }
+            }), { onClick: function () { return inputRef.current.click(); }, style: { height: height || '100%', width: width || '100%' } }), children)));
+};
+exports.UploadShell = UploadShell;
 var ImageUploadShell = function (_a) {
     var style = _a.style, isLoading = _a.isLoading, children = _a.children, disabled = _a.disabled, enableFilesDrop = _a.enableFilesDrop, setDragOverActive = _a.setDragOverActive;
     var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;

package/dist/components/ImageInput/comps/Placeholder/index.js

@@ -47,6 +47,7 @@ var icons_1 = require("../../../../icons");
 var themes_1 = require("../../../../themes");
 var Typo_1 = require("../../../Typo");
 var ProgressBar_1 = require("../../../LoadersAndProgress/ProgressBar");
+var PlaceholderWrapper_1 = require("../../../PlaceholderWrapper");
 var ImageSquare = icons_1.icons.ImageSquare;
 var greyColor100 = themes_1.colors.greyColor100;
 var Placeholder = function (_a) {
@@ -75,24 +76,22 @@ var Placeholder = function (_a) {
      * then that image is rendered instead of placeholder
      *
      */
-    var _d = (0, react_1.useState)(false), dragOverActive = _d[0], setDragOverActive = _d[1];
+    // const [dragOverActive, setDragOverActive] = useState(false)
+    var _d = (0, ImageInputContext_1.useImageInputContext)(), handleUpload = _d.handleUpload, onChange = _d.onChange, value = _d.value, id = _d.id;
     return (react_1.default.createElement(AspectRatioShell_1.default, __assign({}, {
         aspectRatio: aspectRatio,
         containerShape: containerShape,
         stretchToFullHeight: stretchToFullHeight,
         onShellPrepared: decideUIStyle,
     }),
-        react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: styledPlaceholderWrapperRef, dragOverActive: dragOverActive }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
-                ? uploadProgress + "%"
-                : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.default, { isLoading: isLoading, enableFilesDrop: true, multiple: multiple, setDragOverActive: setDragOverActive },
-            react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
-                react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
-                showOptionalLabelInDropzone && isRequired === false && react_1.default.createElement(Typo_1.SANS_0, null, "(optional)"))) : (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
-                react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
-                    ? "(optional)"
-                    : "")),
-                react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel)))))))));
+        react_1.default.createElement(PlaceholderWrapper_1.PlaceHolderWrapper, { ref: styledPlaceholderWrapperRef, uploadProgress: uploadProgress, isLoading: isLoading, containerShape: containerShape, multiple: multiple, smallPlaceholderUI: smallPlaceholderUI, mediaType: 'image', handleUpload: handleUpload, onChange: onChange, value: value, id: id }, smallPlaceholderUI ? (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(ImageSquare, { size: 16, color: greyColor100 }),
+            react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
+            showOptionalLabelInDropzone && isRequired === false && react_1.default.createElement(Typo_1.SANS_0, null, "(optional)"))) : (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
+            react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
+                ? "(optional)"
+                : "")),
+            react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel))))));
 };
 exports.default = Placeholder;

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

@@ -0,0 +1,14 @@
+export const PlaceHolderWrapper: React.ForwardRefExoticComponent<{
+    smallPlaceholderUI: any;
+    isLoading: any;
+    multiple: any;
+    containerShape: any;
+    uploadProgress: any;
+    mediaType: any;
+    handleUpload: any;
+    onChange: any;
+    value: any;
+    id: any;
+    children: any;
+} & React.RefAttributes<any>>;
+import React from "react";

package/dist/components/PlaceholderWrapper/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    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.PlaceHolderWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
+var styled_1 = require("./styled");
+var ImageUploadShell_1 = require("../ImageInput/comps/ImageUploadShell");
+var PlaceHolder = function (_a, ref) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI, isLoading = _a.isLoading, multiple = _a.multiple, containerShape = _a.containerShape, uploadProgress = _a.uploadProgress, mediaType = _a.mediaType, handleUpload = _a.handleUpload, onChange = _a.onChange, value = _a.value, id = _a.id, children = _a.children;
+    var _b = (0, react_1.useState)(false), dragOverActive = _b[0], setDragOverActive = _b[1];
+    return (react_1.default.createElement(styled_1.StyledPlaceholderWrapper, { smallPlaceholderUI: smallPlaceholderUI, ref: ref, dragOverActive: dragOverActive }, isLoading ? (react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
+            ? uploadProgress + "%"
+            : "Almost Done..." })) : (react_1.default.createElement(ImageUploadShell_1.UploadShell, { isLoading: isLoading, enableFilesDrop: true, multiple: multiple, setDragOverActive: setDragOverActive, handleUpload: handleUpload, onChange: onChange, value: value, id: id, mediaType: mediaType },
+        react_1.default.createElement(styled_1.StyledPlaceholder, __assign({}, { containerShape: containerShape }, { smallPlaceholderUI: smallPlaceholderUI }), children)))));
+};
+exports.PlaceHolderWrapper = (0, react_1.forwardRef)(PlaceHolder);

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

@@ -0,0 +1,2 @@
+export const StyledPlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/PlaceholderWrapper/styled.js

@@ -0,0 +1,35 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPlaceholder = exports.StyledPlaceholderWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var utilsOolib_1 = require("../../utilsOolib");
+var mixins_1 = require("../../themes/mixins");
+var themes_1 = require("../../themes");
+var greyColor100 = themes_1.colors.greyColor100;
+exports.StyledPlaceholderWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, dragOverActive = _a.dragOverActive;
+    return dragOverActive
+        ? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
+        : (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && "1.2rem";
+}, (0, mixins_1.transition)("background-color"));
+exports.StyledPlaceholder = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-flow: column nowrap;\n  height: 100%;\n  width: 100%;\n  gap: ", ";\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border-radius: ", ";\n  border: 0.12rem dashed ", ";\n  padding: ", ";\n  cursor: pointer;\n"])), function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && "0.3rem";
+}, function (_a) {
+    var containerShape = _a.containerShape;
+    return containerShape === "circle" ? "50%" : "unset";
+}, greyColor100, function (_a) {
+    var smallPlaceholderUI = _a.smallPlaceholderUI;
+    return !smallPlaceholderUI && "2rem";
+});
+var templateObject_1, templateObject_2;

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,7 +27,7 @@ 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"));
@@ -50,9 +50,11 @@ var genActiveColBorder = function (_a) {
         ? (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;"]))));
 };
-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_10 || (templateObject_10 = __makeTemplateObject(["\nmin-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n  \n  ", "\n"], ["\nmin-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 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 }));
 });
-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_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), tableCellStyling);
+exports.StyledSimpleTableHeaderCell = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  border-right: 2px solid ", ";\n"], ["\n  ", "\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  border-right: 2px solid ", ";\n"])), tableCellStyling, themes_1.colors.greyColor10);
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  border-bottom: 2px solid ", ";\n"], ["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  border-bottom: 2px solid ", ";\n"])), 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;

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/package.json

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