oolib 2.67.0 → 2.67.1

package/dist/components/SimpleTable/comps/AddRowColButtons/index.d.ts

@@ -0,0 +1,7 @@
+export function AddRowButton({ onClick }: {
+    onClick: any;
+}): React.JSX.Element;
+export function AddColButton({ onClick }: {
+    onClick: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/comps/AddRowColButtons/index.js

@@ -0,0 +1,55 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddColButton = exports.AddRowButton = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("../../../../icons");
+var themes_1 = require("../../../../themes");
+var styled_components_1 = __importStar(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var Plus = icons_1.icons.Plus;
+var commonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border: none;\n  ", "\n  &:hover {\n    background-color: ", ";\n  }\n  cursor: pointer;\n"])), themes_1.colors.greyColor5, (0, mixins_1.transition)("background-color"), themes_1.colors.greyColor10);
+var StyledRowButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 2rem;\n  text-align: center;\n  width: 100%;\n  ", "\n"], ["\n  height: 2rem;\n  text-align: center;\n  width: 100%;\n  ", "\n"])), commonStyles);
+var StyledColButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2rem; //should be same as height of StyledRowButton\n  flex-shrink: 0;\n  ", "\n"], ["\n  width: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 2rem; //should be same as height of StyledRowButton\n  flex-shrink: 0;\n  ", "\n"])), commonStyles);
+var AddRowButton = function (_a) {
+    var onClick = _a.onClick;
+    return (react_1.default.createElement(StyledRowButton, { onClick: onClick },
+        react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
+};
+exports.AddRowButton = AddRowButton;
+var AddColButton = function (_a) {
+    var onClick = _a.onClick;
+    return (react_1.default.createElement(StyledColButton, { onClick: onClick },
+        react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
+};
+exports.AddColButton = AddColButton;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,3 @@
+export function genHash(len: any): string;
+export function handleAddCol(value: any, props: any): void;
+export function handleAddRow(value: any, props: any): void;

package/dist/components/SimpleTable/functions.js

@@ -0,0 +1,52 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAddRow = exports.handleAddCol = exports.genHash = void 0;
+var makeArrayFromLength_1 = require("../../utils/makeArrayFromLength");
+var genHash = function (len) {
+    var arr = "1234567890abcdefghijklmnopqrstuvwxyz";
+    var ans = "";
+    for (var i = len; i > 0; i--) {
+        ans += arr[Math.floor(Math.random() * arr.length)];
+    }
+    return ans;
+};
+exports.genHash = genHash;
+var handleAddCol = function (value, props) {
+    var onChange = props.onChange, id = props.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = __spreadArray([], data, true);
+    newData.map(function (row) {
+        row.cellData.push({
+            id: "row_".concat((0, exports.genHash)(8)),
+        });
+    });
+    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleAddCol = handleAddCol;
+var handleAddRow = function (value, props) {
+    var onChange = props.onChange, id = props.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = __spreadArray([], data, true);
+    var lastRowIdx = newData.length - 1;
+    var newRowTotCells = newData[lastRowIdx].cellData.length;
+    if (!newRowTotCells)
+        return;
+    var newRow = {
+        id: "row_".concat((0, exports.genHash)(8)),
+        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(newRowTotCells).map(function (d, i) { return ({
+            id: "cell_".concat((0, exports.genHash)(8)),
+        }); })
+    };
+    newData.push(newRow);
+    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleAddRow = handleAddRow;

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

@@ -0,0 +1,15 @@
+export function SimpleTable({ id, readOnly, config, value: _value, onChange, canAddRows, defaultColWidth, }: {
+    id: any;
+    readOnly: any;
+    config?: {
+        noOfCols: number;
+        noOfRows: number;
+        colHeaderData: any;
+        rowHeaderData: any;
+    };
+    value: any;
+    onChange: any;
+    canAddRows?: boolean;
+    defaultColWidth?: number;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/index.js

@@ -0,0 +1,179 @@
+"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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTable = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("../../themes");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var BlockLabel_1 = require("../BlockLabel");
+//local utils
+var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../utilsOolib");
+var AddRowColButtons_1 = require("./comps/AddRowColButtons");
+var functions_1 = require("./functions");
+var styled_1 = require("./styled");
+var useResizeTableColumns_1 = require("./useResizeTableColumns");
+var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
+var greyColor100 = themes_1.colors.greyColor100;
+/*pending:
+- first test whatever is done on okf
+- add col is still buggy. cannot resize, plus width seems wrong of new col
+- add rowHeaderData functionality
+- fix bugs in the pointer and risize hover
+- action menu to toggle header styles for col & row
+- action menu to toggle between stretch to available width vs fixed col widths (this might not be straightforward)
+- delete cols & rows
+- reposition cols & rows
+*/
+function SimpleTable(_a) {
+    var id = _a.id, readOnly = _a.readOnly, _b = _a.config, config = _b === void 0 ? {
+        noOfCols: 3,
+        noOfRows: 3,
+        colHeaderData: undefined,
+        rowHeaderData: undefined
+    } : _b, _value = _a.value, onChange = _a.onChange, _c = _a.canAddRows, canAddRows = _c === void 0 ? true : _c, _d = _a.defaultColWidth, defaultColWidth = _d === void 0 ? 200 : _d;
+    var props = arguments[0];
+    var theme = (0, styled_components_1.useTheme)();
+    var _e = theme || {}, RichTextEditor = _e.RichTextEditor, convertToRichText = _e.convertToRichText;
+    var _f = (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
+        _value: _value,
+        config: config,
+        defaultColWidth: defaultColWidth,
+        convertToRichText: convertToRichText
+    }), value = _f.value, canAddCols = _f.canAddCols, //returns true if no config.colHeaderData is defined. else false
+    canToggleColHeaderStyle = _f.canToggleColHeaderStyle // returns true if no config.colHeaderData is defined. else false
+    ;
+    console.log({ value: value });
+    var _g = (0, useResizeTableColumns_1.useResizeTableColumns)({
+        setColWidthConfig: function (setterFn) {
+            var newColWidthConfig = setterFn(value.colWidthConfig);
+            onChange(id, __assign(__assign({}, value), { colWidthConfig: newColWidthConfig }));
+        },
+        colWidthConfig: value.colWidthConfig,
+        theme: theme,
+    }), resetColResizeState = _g.resetColResizeState, hideShowDragZoneIndicator = _g.hideShowDragZoneIndicator, initColResizeState = _g.initColResizeState, resetDragZoneIndicator = _g.resetDragZoneIndicator, handleResizeColumn = _g.handleResizeColumn, colResizeState = _g.colResizeState, dragZoneWidth = _g.dragZoneWidth;
+    (0, react_1.useEffect)(function () {
+        window.addEventListener("mouseup", resetColResizeState);
+        window.addEventListener("mousemove", handleResizeColumn);
+        return function () {
+            window.removeEventListener("mousemove", handleResizeColumn);
+            window.removeEventListener("mouseup", resetColResizeState);
+        };
+    }, [colResizeState]);
+    var CellContentBlocks = {
+        RichTextEditor: RichTextEditor,
+        // KPDropdown,
+        // TextInput,
+        // RadioList,
+        // SANS_3,
+    };
+    var CellContentBlockDefaultProps = {
+        RichTextEditor: {
+            variant: "simple",
+            typo: "SANS_3",
+            placeholder: " ",
+        },
+        // KPDropdown: {
+        // 	size: 'small',
+        // },
+    };
+    var CellValueGetters = {
+        RichTextEditor: function (v) { return (convertToRichText ? convertToRichText(v) : v); },
+    }; //prob dont need this..
+    var handleCellInputChange = function (_a) {
+        var cellIdx = _a.cellIdx, rowIdx = _a.rowIdx, v = _a.v;
+        var valData = value.data;
+        var colWidthConfig = value.colWidthConfig;
+        var newData = __spreadArray([], valData, true);
+        newData[rowIdx].cellData[cellIdx].value = v;
+        onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+    };
+    var genRow = function (_a) {
+        var row = _a.row, rowIdx = _a.rowIdx;
+        var StyledWrapper = row.isColHeader
+            ? styled_1.StyledSimpleTableHeader
+            : styled_1.StyledSimpleTableRow;
+        return (react_1.default.createElement(StyledWrapper
+        // onClick={() => row.link && history.push(row.link)}
+        , { 
+            // onClick={() => row.link && history.push(row.link)}
+            style: { display: "flex" }, readOnly: readOnly, rowIdx: rowIdx, key: "row_" + rowIdx }, 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), style: {
+                    color: greyColor100,
+                    width: "".concat(cellWidth),
+                    minHeight: "4rem",
+                    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)),
+                }, onMouseDown: function (e) {
+                    initColResizeState(e, { colId: "col_".concat(cellIdx) });
+                }, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator },
+                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 });
+                    } }))));
+        })));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                alignItems: "stretch" /**without stretch AddColButton will be wonky */,
+            } },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(styled_1.StyledSimpleTable, null, value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
+                !readOnly && canAddRows && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, functions_1.handleAddRow)(value, props); } }))),
+            !readOnly && canAddCols && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () { return (0, functions_1.handleAddCol)(value, props); } })))));
+}
+exports.SimpleTable = SimpleTable;

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

@@ -0,0 +1,4 @@
+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 StyledSimpleTableHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/SimpleTable/styled.js

@@ -0,0 +1,45 @@
+"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.StyledSimpleTableHeader = 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");
+exports.StyledSimpleTable = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  border-left: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  border-left: 1px solid ", ";\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10, themes_1.colors.greyColor10);
+exports.StyledSimpleTableRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  background-color: ", ";\n  ", "\n"], ["\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.greyColor3 : themes_1.colors.white;
+}, function (_a) {
+    var readOnly = _a.readOnly, theme = _a.theme;
+    return !readOnly && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    :hover{\n        background-color: ", ";\n    }\n      \n    "], ["\n    :hover{\n        background-color: ", ";\n    }\n      \n    "])), (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors));
+});
+exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* max-width: 300px; */\n  padding: 0.8rem 1rem;\n  /* margin: 0 1rem; */\n  border-right: 1px solid ", ";\n"], ["\n  /* max-width: 300px; */\n  padding: 0.8rem 1rem;\n  /* margin: 0 1rem; */\n  border-right: 1px solid ", ";\n"])), themes_1.colors.greyColor10);
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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;

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

@@ -0,0 +1,14 @@
+export function useResizeTableColumns({ setColWidthConfig, colWidthConfig, theme, builderProps }: {
+    setColWidthConfig: any;
+    colWidthConfig: any;
+    theme: any;
+    builderProps: any;
+}): {
+    resetColResizeState: (e: any) => void;
+    hideShowDragZoneIndicator: (e: any) => void;
+    initColResizeState: (e: any, d: any) => void;
+    resetDragZoneIndicator: (e: any) => void;
+    handleResizeColumn: (e: any) => void;
+    colResizeState: any;
+    dragZoneWidth: number;
+};

package/dist/components/SimpleTable/useResizeTableColumns.js

@@ -0,0 +1,86 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeTableColumns = void 0;
+var react_1 = require("react");
+var themes_1 = require("../../themes");
+var utilsOolib_1 = require("../../utilsOolib");
+var useResizeTableColumns = function (_a) {
+    var setColWidthConfig = _a.setColWidthConfig, colWidthConfig = _a.colWidthConfig, theme = _a.theme, builderProps = _a.builderProps;
+    var _b = (0, react_1.useState)(undefined), colResizeState = _b[0], setColResizeState = _b[1];
+    var dragZoneWidth = 5;
+    var handleResizeColumn = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (colResizeState) {
+            setColWidthConfig(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[colResizeState.colId] = (colResizeState.initWidth + (e.clientX - colResizeState.mousePos)) + 'px', _a)));
+            });
+        }
+    };
+    var resetDragZoneIndicator = function (e) {
+        if (colResizeState || e.currentTarget.id !== e.target.id)
+            return;
+        e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+        e.currentTarget.style.cursor = 'pointer';
+    };
+    var isInDragZone = function (e) {
+        var mouseX = e.clientX;
+        var colRightEdge = e.currentTarget.getBoundingClientRect().right;
+        return mouseX > colRightEdge - dragZoneWidth;
+    };
+    var initColResizeState = function (e, d) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isInDragZone(e)) {
+            setColResizeState({
+                mousePos: e.clientX,
+                initWidth: parseInt(colWidthConfig[d.colId].replace('px', '')),
+                colId: d.colId
+            });
+        }
+    };
+    var hideShowDragZoneIndicator = function (e) {
+        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.cursor = 'col-resize';
+            }
+            else {
+                e.currentTarget.style.borderRight = "1px solid ".concat(themes_1.colors.greyColor10);
+                e.currentTarget.style.cursor = 'pointer';
+            }
+        }
+    };
+    var resetColResizeState = function (e) {
+        setColResizeState(undefined);
+        if (builderProps === null || builderProps === void 0 ? void 0 : builderProps.updateColWidthsInTableConfig) {
+            builderProps.updateColWidthsInTableConfig(colWidthConfig);
+        }
+    };
+    return ({
+        resetColResizeState: resetColResizeState,
+        hideShowDragZoneIndicator: hideShowDragZoneIndicator,
+        initColResizeState: initColResizeState,
+        resetDragZoneIndicator: resetDragZoneIndicator,
+        handleResizeColumn: handleResizeColumn,
+        colResizeState: colResizeState,
+        dragZoneWidth: dragZoneWidth
+    });
+};
+exports.useResizeTableColumns = useResizeTableColumns;

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

@@ -0,0 +1,10 @@
+export function prepInitValueFromConfigIfNoValue({ _value, config, defaultColWidth, convertToRichText }: {
+    _value: any;
+    config: any;
+    defaultColWidth: any;
+    convertToRichText: any;
+}): {
+    value: any;
+    canAddCols: boolean;
+    canToggleColHeaderStyle: boolean;
+};

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

@@ -0,0 +1,85 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepInitValueFromConfigIfNoValue = void 0;
+var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
+var toArray_1 = require("../../../utils/toArray");
+var functions_1 = require("../functions");
+var prepInitValueFromConfigIfNoValue = function (_a) {
+    var _b;
+    var _value = _a._value, config = _a.config, defaultColWidth = _a.defaultColWidth, convertToRichText = _a.convertToRichText;
+    //if colHeaderData is defined then that decides the noOfCols.
+    var noOfCols = ((_b = config.colHeaderData) === null || _b === void 0 ? void 0 : _b.length) || config.noOfCols;
+    var value = !_value
+        ? {
+            data: __spreadArray(__spreadArray([], (config.colHeaderData ? [convertColHeaderConfigToRowData({ colHeaderData: config.colHeaderData, convertToRichText: convertToRichText })] : []), true), insertRowAndCellIds({
+                noOfRows: config.noOfRows,
+                noOfCols: noOfCols
+            }), true),
+            colWidthConfig: getInitColWidthConfigs({ noOfCols: noOfCols, defaultColWidth: defaultColWidth }),
+        }
+        : !_value.data
+            ? {
+                data: _value,
+                colWidthConfig: getInitColWidthConfigs({ noOfCols: _value[0].cellData.length, defaultColWidth: defaultColWidth }),
+            } //backwars compat
+            : _value;
+    return ({
+        value: value,
+        canAddCols: !!!config.colHeaderData,
+        canToggleColHeaderStyle: !!!config.colHeaderData // meaning its true if no config.colHeaderData is defined. else false
+    });
+};
+exports.prepInitValueFromConfigIfNoValue = prepInitValueFromConfigIfNoValue;
+var convertColHeaderConfigToRowData = function (_a) {
+    var colHeaderData = _a.colHeaderData, convertToRichText = _a.convertToRichText;
+    return {
+        id: "colHeader",
+        isColHeader: true,
+        cellData: colHeaderData.map(function (d, i) { return ({
+            value: convertToRichText ? convertToRichText(d) : d,
+            readOnly: true,
+            id: "colHeaderCell_".concat(i),
+        }); }),
+    };
+};
+var getInitColWidthConfigs = function (_a) {
+    var noOfCols = _a.noOfCols, defaultColWidth = _a.defaultColWidth;
+    return (0, makeArrayFromLength_1.makeArrayFromLength)(noOfCols)
+        .map(function (d, i) { return ({
+        colId: "col_".concat(i),
+        width: defaultColWidth + "px",
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+};
+var insertRowAndCellIds = function (_a) {
+    var noOfRows = _a.noOfRows, noOfCols = _a.noOfCols;
+    return (0, makeArrayFromLength_1.makeArrayFromLength)(noOfRows).map(function () { return ({
+        id: "row_".concat((0, functions_1.genHash)(8)),
+        cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(noOfCols).map(function () { return ({
+            id: "cell_".concat((0, functions_1.genHash)(8)),
+        }); }),
+    }); });
+};

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as MetaBlock } from "./components/MetaBlock";
 export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
+export { SimpleTable } from "./components/SimpleTable";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";
 export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = 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.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = 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.SimpleTable = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = 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.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = 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;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -138,3 +138,5 @@ var bannerContext_1 = require("./components/Banners/bannerContext");
 Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
 Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
 Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });
+var SimpleTable_1 = require("./components/SimpleTable");
+Object.defineProperty(exports, "SimpleTable", { enumerable: true, get: function () { return SimpleTable_1.SimpleTable; } });

package/package.json

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