oolib 2.67.9 → 2.68.1

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

@@ -1,4 +1,4 @@
-export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, storybookPreview }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview }: {
     icon?: string;
     invert: any;
     actions: any;
@@ -8,6 +8,7 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonCo
     ButtonComp?: string;
     setShowActions: any;
     popOutOfOverflowHiddenParent?: boolean;
+    CustomSelectComp: any;
     storybookPreview: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ActionMenu/index.js

@@ -46,7 +46,7 @@ var styled_1 = require("./styled");
 var ActionMenu = function (_a) {
     var _b, _c;
     var _d = _a.icon, icon = _d === void 0 ? 'DotsThree' : _d, //most likely will never change
-    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, M = _a.M, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, storybookPreview = _a.storybookPreview //for storybook purposes
+    invert = _a.invert, actions = _a.actions, _e = _a.align, align = _e === void 0 ? 'right' : _e, _f = _a.iconSize, iconSize = _f === void 0 ? 'S' : _f, M = _a.M, _g = _a.ButtonComp, _ButtonComp = _g === void 0 ? 'ButtonGhost' : _g, setShowActionsInParent = _a.setShowActions, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview //for storybook purposes
     ;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
@@ -78,10 +78,13 @@ var ActionMenu = function (_a) {
     }, []);
     var _k = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _k.fixPos, applyFixedPos = _k.applyFixedPos, removeFixedPos = _k.removeFixedPos, trackerRef = _k.trackerRef;
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
-                console.log('detected');
-                setShowActions(!showActions);
-            }, active: showActions })),
+        CustomSelectComp
+            ? react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function (e) {
+                    setShowActions(!showActions);
+                } })
+            : react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
+                    setShowActions(!showActions);
+                }, active: showActions })),
         popOutOfOverflowHiddenParent &&
             react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef }),
         react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {

package/dist/components/SimpleTable/comps/rowColActionMenus/ColActionsMenu/index.d.ts

@@ -0,0 +1,8 @@
+export function ColActionsMenu({ value, colIdx, onChange, id, defaultColWidth }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+    defaultColWidth: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/comps/rowColActionMenus/ColActionsMenu/index.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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColActionsMenu = void 0;
+var react_1 = __importDefault(require("react"));
+var ActionMenu_1 = require("../../../../ActionMenu");
+var handleColActions_1 = require("../../../handlers/handleColActions");
+var UIContent_1 = require("../../../../../UIContent");
+var styled_1 = require("../styled");
+var DisplayIcon_1 = require("../../../../../utils/comps/DisplayIcon");
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledCustomSelectCompWrapper = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  height: 1.5rem;\n  width: 2.5rem;\n"], ["\n  ", "\n  height: 1.5rem;\n  width: 2.5rem;\n"])), styled_1.commonRowColActionMenuStyles);
+var ColActionsMenu = function (_a) {
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth;
+    return (react_1.default.createElement("div", { style: { zIndex: 2, position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -50%)' } },
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", CustomSelectComp: function (_a) {
+                var active = _a.active, onClick = _a.onClick;
+                return (react_1.default.createElement(StyledCustomSelectCompWrapper, { onClick: onClick, active: active },
+                    react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThree", size: 16 })));
+            }, actions: [
+                {
+                    display: UIContent_1.UIContent.SimpleTable.delete,
+                    onClick: function () { return (0, handleColActions_1.handleDeleteCol)({ value: value, colIdx: colIdx, onChange: onChange, id: id }); },
+                },
+                {
+                    display: UIContent_1.UIContent.SimpleTable.duplicate,
+                    onClick: function () { return (0, handleColActions_1.handleDuplicateCol)({ value: value, colIdx: colIdx, onChange: onChange, id: id }); },
+                },
+                {
+                    display: UIContent_1.UIContent.SimpleTable.insertColAfter,
+                    onClick: function () { return (0, handleColActions_1.handleInsertColAfter)({ value: value, colIdx: colIdx, onChange: onChange, id: id, defaultColWidth: defaultColWidth }); },
+                },
+                {
+                    display: UIContent_1.UIContent.SimpleTable.insertColBefore,
+                    onClick: function () { return (0, handleColActions_1.handleInsertColBefore)({ value: value, colIdx: colIdx, onChange: onChange, id: id, defaultColWidth: defaultColWidth }); },
+                }
+            ] })));
+};
+exports.ColActionsMenu = ColActionsMenu;
+var templateObject_1;

package/dist/components/SimpleTable/comps/rowColActionMenus/RowActionsMenu/index.d.ts

@@ -0,0 +1,8 @@
+export function RowActionsMenu({ value, rowIdx, onChange, id, setActionsActiveOnRow }: {
+    value: any;
+    rowIdx: any;
+    onChange: any;
+    id: any;
+    setActionsActiveOnRow: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/SimpleTable/comps/{RowActionsMenu → rowColActionMenus/RowActionsMenu}/index.js

@@ -1,23 +1,36 @@
 "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.RowActionsMenu = void 0;
 var react_1 = __importDefault(require("react"));
-var handleRowActions_1 = require("../../handlers/handleRowActions");
-var ActionMenu_1 = require("../../../ActionMenu");
-var UIContent_1 = require("../../../../UIContent");
+var styled_components_1 = __importDefault(require("styled-components"));
+var UIContent_1 = require("../../../../../UIContent");
+var DisplayIcon_1 = require("../../../../../utils/comps/DisplayIcon");
+var ActionMenu_1 = require("../../../../ActionMenu");
+var handleRowActions_1 = require("../../../handlers/handleRowActions");
+var styled_1 = require("../styled");
+var StyledCustomSelectCompWrapper = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  width: 1.5rem;\n  height: 2.5rem;\n"], ["\n  ", "\n  width: 1.5rem;\n  height: 2.5rem;\n"])), styled_1.commonRowColActionMenuStyles);
+var CustomSelectComp = function (_a) {
+    var active = _a.active, onClick = _a.onClick;
+    return (react_1.default.createElement(StyledCustomSelectCompWrapper, { onClick: onClick, active: active },
+        react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThreeVertical", size: 16 })));
+};
 var RowActionsMenu = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, setActionsActiveOnRow = _a.setActionsActiveOnRow;
     return (react_1.default.createElement("div", { style: {
-            zIndex: 100,
+            zIndex: 1,
             position: "absolute",
             top: "50%",
             left: 0,
-            transform: "translate(-100%, -50%)",
+            transform: "translate(-50%, -50%)",
         } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: [
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) { return setActionsActiveOnRow(showActions ? rowIdx : undefined); }, CustomSelectComp: CustomSelectComp, actions: [
                 {
                     display: UIContent_1.UIContent.SimpleTable.delete,
                     onClick: function () { return (0, handleRowActions_1.handleDeleteRow)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id }); },
@@ -41,3 +54,4 @@ var RowActionsMenu = function (_a) {
             ] })));
 };
 exports.RowActionsMenu = RowActionsMenu;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export const commonRowColActionMenuStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/dist/components/SimpleTable/comps/rowColActionMenus/styled.js

@@ -0,0 +1,18 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonRowColActionMenuStyles = void 0;
+var styled_components_1 = require("styled-components");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var globalVariables_1 = require("../../../../globalStyles/globalVariables");
+var mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
+exports.commonRowColActionMenuStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  border-radius: 4px;\n  ", "\n  cursor: pointer;\n  ", "\n"], ["\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", ";\n  border-radius: 4px;\n  ", "\n  cursor: pointer;\n  ", "\n"])), (0, mixins_1.transition)("background-color", "border-color"), function (_a) {
+    var active = _a.active, theme = _a.theme;
+    return active
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n          border: 1px solid;\n          border-color: ", ";\n        "], ["\n          background-color: ", ";\n          border: 1px solid;\n          border-color: ", ";\n        "])), (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: ", ";\n          border: 1px solid;\n          border-color: ", ";\n          ", ";\n        "], ["\n          background-color: ", ";\n          border: 1px solid;\n          border-color: ", ";\n          ", ";\n        "])), themes_1.colors.white, themes_1.colors.greyColor15, globalVariables_1.globalHoverOnWhiteBG);
+}, mixins_1.boxShadow1);
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1 +1,32 @@
-export function handleAddCol(value: any, props: any): void;
+export function handleAddCol({ value, onChange, id, defaultColWidth }: {
+    value: any;
+    onChange: any;
+    id: any;
+    defaultColWidth: any;
+}): void;
+export function handleDeleteCol({ value, colIdx, onChange, id }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+}): void;
+export function handleDuplicateCol({ value, colIdx, onChange, id }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+}): void;
+export function handleInsertColAfter({ value, colIdx, onChange, id, defaultColWidth }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+    defaultColWidth: any;
+}): void;
+export function handleInsertColBefore({ value, colIdx, onChange, id, defaultColWidth }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+    defaultColWidth: any;
+}): void;

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

@@ -1,4 +1,15 @@
 "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)) {
@@ -9,17 +20,110 @@ 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.handleAddCol = void 0;
+exports.handleInsertColBefore = exports.handleInsertColAfter = exports.handleDuplicateCol = exports.handleDeleteCol = exports.handleAddCol = void 0;
 var genHash_1 = require("../utils/genHash");
-var handleAddCol = function (value, props) {
-    var onChange = props.onChange, id = props.id;
+var handleAddColAtIdx = function (_a) {
+    var value = _a.value, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth, colIdx = _a.colIdx;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
-    newData.map(function (row) {
-        row.cellData.push({
-            id: "row_".concat((0, genHash_1.genHash)(8)),
-        });
+    newData = newData.map(function (row) {
+        var newCellData = __spreadArray([], row.cellData, true);
+        newCellData.splice(colIdx, 0, { id: "cell_".concat((0, genHash_1.genHash)(8)) });
+        return __assign(__assign({}, row), { cellData: newCellData });
+    });
+    var newColWidthValue = defaultColWidth + "px";
+    var newColWidthConfigAsArray = Object.values(colWidthConfig);
+    newColWidthConfigAsArray.splice(colIdx, 0, newColWidthValue);
+    var newColWidthConfig = newColWidthConfigAsArray
+        .map(function (width, i) { return ({
+        colId: "col_".concat(i),
+        width: width,
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: newColWidthConfig });
+};
+var handleAddCol = function (_a) {
+    var value = _a.value, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth;
+    handleAddColAtIdx({
+        value: value,
+        onChange: onChange,
+        id: id,
+        defaultColWidth: defaultColWidth,
+        colIdx: value.data[0].cellData.length,
     });
-    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };
 exports.handleAddCol = handleAddCol;
+var handleDeleteCol = function (_a) {
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = data.map(function (row) {
+        var newCellData = row.cellData.filter(function (cell, cellIdx) { return colIdx !== cellIdx; });
+        return __assign(__assign({}, row), { cellData: newCellData });
+    });
+    var newColWidthConfig = __assign({}, colWidthConfig);
+    delete newColWidthConfig["col_".concat(colIdx)];
+    // now that we deleted this colIdx from widthconfig. we need to reset all the keys from col_0 to col_<length-1>
+    newColWidthConfig = Object.values(newColWidthConfig)
+        .map(function (width, i) { return ({
+        colId: "col_".concat(i),
+        width: width,
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: newColWidthConfig });
+};
+exports.handleDeleteCol = handleDeleteCol;
+var handleDuplicateCol = function (_a) {
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var newData = data.map(function (row) {
+        var newCellData = __spreadArray([], row.cellData, true);
+        var dataToDuplicate = __assign(__assign({}, newCellData[colIdx]), { id: "cell_".concat((0, genHash_1.genHash)(8)) });
+        newCellData.splice(colIdx + 1, 0, dataToDuplicate);
+        return __assign(__assign({}, row), { cellData: newCellData });
+    });
+    var newColWidthValue = colWidthConfig["col_".concat(colIdx)];
+    var newColWidthConfigAsArray = Object.values(colWidthConfig);
+    newColWidthConfigAsArray.splice(colIdx + 1, 0, newColWidthValue);
+    var newColWidthConfig = newColWidthConfigAsArray
+        .map(function (width, i) { return ({
+        colId: "col_".concat(i),
+        width: width,
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: newColWidthConfig });
+};
+exports.handleDuplicateCol = handleDuplicateCol;
+var handleInsertColAfter = function (_a) {
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth;
+    handleAddColAtIdx({
+        value: value,
+        onChange: onChange,
+        id: id,
+        defaultColWidth: defaultColWidth,
+        colIdx: colIdx + 1,
+    });
+};
+exports.handleInsertColAfter = handleInsertColAfter;
+var handleInsertColBefore = function (_a) {
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth;
+    handleAddColAtIdx({
+        value: value,
+        onChange: onChange,
+        id: id,
+        defaultColWidth: defaultColWidth,
+        colIdx: colIdx,
+    });
+};
+exports.handleInsertColBefore = handleInsertColBefore;

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

@@ -1,4 +1,15 @@
 "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)) {
@@ -44,7 +55,7 @@ var handleDuplicateRow = function (_a) {
     var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
     var data = value.data, colWidthConfig = value.colWidthConfig;
     var newData = __spreadArray([], data, true);
-    var dataToDuplicate = newData[rowIdx];
+    var dataToDuplicate = __assign(__assign({}, newData[rowIdx]), { id: "row_".concat((0, genHash_1.genHash)(8)), cellData: newData[rowIdx].cellData.map(function (cell) { return (__assign(__assign({}, cell), { id: "cell_".concat((0, genHash_1.genHash)(8)) })); }) });
     newData.splice(rowIdx + 1, 0, dataToDuplicate);
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };

package/dist/components/SimpleTable/index.js

@@ -52,8 +52,8 @@ var BlockLabel_1 = require("../BlockLabel");
 var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../utilsOolib");
 var AddRowColButtons_1 = require("./comps/AddRowColButtons");
-var ColActionsMenu_1 = require("./comps/ColActionsMenu");
-var RowActionsMenu_1 = require("./comps/RowActionsMenu");
+var ColActionsMenu_1 = require("./comps/rowColActionMenus/ColActionsMenu");
+var RowActionsMenu_1 = require("./comps/rowColActionMenus/RowActionsMenu");
 var handleColActions_1 = require("./handlers/handleColActions");
 var handleRowActions_1 = require("./handlers/handleRowActions");
 var styled_1 = require("./styled");
@@ -78,12 +78,21 @@ function SimpleTable(_a) {
     } : _b, _value = _a.value, onChange = _a.onChange, _c = _a.defaultColWidth, defaultColWidth = _c === void 0 ? 200 : _c;
     var props = arguments[0];
     var theme = (0, styled_components_1.useTheme)();
-    var _d = theme || {}, RichTextEditor = _d.RichTextEditor, convertToRichText = _d.convertToRichText;
-    var _e = (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
+    var _d = theme || {}, _RichTextEditor = _d.RichTextEditor, convertToRichText = _d.convertToRichText;
+    //memoizing cuz we dont want all cell rtes to render everytime one cell changes
+    var RichTextEditor = (0, react_1.useMemo)(function () {
+        var checkMemoFn = function (prevProps, currentProps) {
+            var prevVal = prevProps.value;
+            var currentVal = currentProps.value;
+            return isEqual(prevVal, currentVal);
+        };
+        return _RichTextEditor && react_1.default.memo(_RichTextEditor, checkMemoFn);
+    }, []);
+    var _e = (0, react_1.useMemo)(function () { return (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
         _value: _value,
         config: config,
         defaultColWidth: defaultColWidth,
-    }), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
+    }); }, [_value]), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
     enableRowActions = _e.enableRowActions, canToggleColHeaderStyle = _e.canToggleColHeaderStyle;
     var _f = (0, useResizeTableColumns_1.useResizeTableColumns)({
         setColWidthConfig: function (setterFn) {
@@ -121,10 +130,11 @@ function SimpleTable(_a) {
         // 	size: 'small',
         // },
     };
-    var _g = (0, react_1.useState)({
+    var _g = (0, react_1.useState)(undefined), actionsActiveOnRow = _g[0], setActionsActiveOnRow = _g[1];
+    var _h = (0, react_1.useState)({
         rowIdx: undefined,
         colIdx: undefined,
-    }), hoveredRowAndCol = _g[0], setHoveredRowAndCol = _g[1];
+    }), hoveredRowAndCol = _h[0], setHoveredRowAndCol = _h[1];
     var CellValueGetters = {
         RichTextEditor: function (v) { return (convertToRichText ? convertToRichText(v) : v); },
     }; //prob dont need this..
@@ -141,11 +151,9 @@ function SimpleTable(_a) {
         var StyledWrapper = row.isColHeader
             ? styled_1.StyledSimpleTableHeader
             : styled_1.StyledSimpleTableRow;
-        return (react_1.default.createElement(StyledWrapper
-        // onClick={() => row.link && history.push(row.link)}
-        , { 
+        return (react_1.default.createElement(StyledWrapper, { actionsActiveOnRow: actionsActiveOnRow, 
             // onClick={() => row.link && history.push(row.link)}
-            style: { display: "flex" }, readOnly: readOnly, rowIdx: rowIdx, key: "row_" + rowIdx }, row.cellData.map(function (cell, cellIdx) {
+            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"); };
@@ -160,10 +168,9 @@ function SimpleTable(_a) {
             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),
-                    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)),
-                }, onMouseEnter: function (e) {
+                }, actionsActiveOnRow: actionsActiveOnRow, onMouseEnter: function (e) {
                     setHoveredRowAndCol({
                         rowIdx: rowIdx,
                         colIdx: cellIdx,
@@ -175,13 +182,21 @@ function SimpleTable(_a) {
                 onMouseDown: function (e) {
                     initColResizeState(e, { colId: "col_".concat(cellIdx) });
                 }, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator, tabIndex: 0 },
-                !readOnly && enableColActions &&
+                !readOnly &&
+                    enableColActions &&
                     rowIdx === 0 &&
-                    hoveredRowAndCol.colIdx === cellIdx && react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, null),
-                !readOnly && enableRowActions &&
+                    hoveredRowAndCol.colIdx === cellIdx && (react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
+                    value: value,
+                    colIdx: cellIdx,
+                    onChange: onChange,
+                    id: id,
+                    defaultColWidth: defaultColWidth,
+                }))),
+                !readOnly &&
+                    enableRowActions &&
                     cellIdx === 0 &&
                     rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
-                    hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, { value: value, rowIdx: rowIdx, onChange: onChange, id: id }))),
+                    hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, { value: value, rowIdx: rowIdx, onChange: onChange, id: id, setActionsActiveOnRow: setActionsActiveOnRow }))),
                 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 });
                     } }))));
@@ -206,6 +221,8 @@ function SimpleTable(_a) {
                         }),
                     value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
                 !readOnly && enableRowActions && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, handleRowActions_1.handleAddRow)(value, props); } }))),
-            !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () { return (0, handleColActions_1.handleAddCol)(value, props); } })))));
+            !readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () {
+                    return (0, handleColActions_1.handleAddCol)({ value: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
+                } })))));
 }
 exports.SimpleTable = SimpleTable;

package/dist/components/SimpleTable/styled.js

@@ -32,14 +32,18 @@ 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_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  ", ";\n  background-color: ", ";\n"], ["\n  display: flex;\n  ", ";\n  background-color: ", ";\n"])), (0, transitions_1.transition)("background-color"), function (_a) {
+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.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));
 });
-exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  border-right: 1px solid ", ";\n  ", ";\n  ", "\n"], ["\n  position: relative;\n  border-right: 1px solid ", ";\n  ", ";\n  ", "\n"])), themes_1.colors.greyColor10, (0, transitions_1.transition)("background-color"), function (_a) {
-    var readOnly = _a.readOnly, theme = _a.theme;
-    return !readOnly && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    :hover{\n        background-color: ", ";\n    }\n    :focus-within{\n      outline: 1px solid ", ";\n      background-color: ", ";\n    }    \n  "], ["\n    :hover{\n        background-color: ", ";\n    }\n    :focus-within{\n      outline: 1px solid ", ";\n      background-color: ", ";\n    }    \n  "])), (0, utilsOolib_1.getPrimaryColor10)(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);
+exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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 readOnly = _a.readOnly, theme = _a.theme, actionsActiveOnRow = _a.actionsActiveOnRow;
+    return !readOnly && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n    \n    ", "\n  "], ["\n    ", ";\n    \n    ", "\n  "])), globalVariables_1.globalHoverOnWhiteBG, !actionsActiveOnRow && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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));
 });
-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;
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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;

package/dist/globalStyles/globalVariables.js

@@ -22,18 +22,15 @@ exports.globalInputElemFocused = (0, styled_components_1.css)(templateObject_3 |
     return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10);
 });
 // Lghtbox style used for DatePicker, Dropdowns, hints and ActionMenu
-exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px ", ";\n"], ["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  box-shadow: 2px 2px 10px ", ";\n"])), function (_a) {
+exports.globalLightboxStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  ", ";\n"], ["\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 2px;\n  ", ";\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5);
 }, function (_a) {
     var invert = _a.invert;
     return (invert ? themes_1.colors.greyColor80 : themes_1.colors.white);
-}, themes_1.colors.black_opacity05);
-exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_a) {
+}, mixins_1.boxShadow1);
+exports.globalHoverOnWhiteBG = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? themes_1.colors.white : themes_1.colors.greyColor100;
-}, function (_a) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
+    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/themes/mixins/boxShadows.js

@@ -6,7 +6,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.innerShadow0 = exports.boxShadow1 = exports.boxShadow0 = void 0;
 var styled_components_1 = require("styled-components");
-exports.boxShadow0 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);\n"], ["\n    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);\n"])));
-exports.boxShadow1 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"], ["\n    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n"])));
-exports.innerShadow0 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);\n"], ["\n    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);\n"])));
+var colors_1 = require("../colors");
+exports.boxShadow0 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 1px 1px 5px ", ";\n"], ["\n    box-shadow: 1px 1px 5px ", ";\n"])), colors_1.colors.black_opacity05);
+exports.boxShadow1 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    box-shadow: 2px 2px 10px ", ";\n"], ["\n    box-shadow: 2px 2px 10px ", ";\n"])), colors_1.colors.black_opacity05);
+exports.innerShadow0 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-shadow: inset 1px 1px 5px ", ";\n"], ["\n    box-shadow: inset 1px 1px 5px ", ";\n"])), colors_1.colors.black_opacity05);
 var templateObject_1, templateObject_2, templateObject_3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.67.9",
+  "version": "2.68.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -60,6 +60,7 @@
     "chromatic": "^6.1.0",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
+    "localtunnel": "^2.0.2",
     "mdx-embed": "^1.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -92,7 +93,6 @@
     "draft-js": "^0.11.7",
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
-    "localtunnel": "^2.0.2",
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",

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

@@ -1,2 +0,0 @@
-export function ColActionsMenu({}: {}): React.JSX.Element;
-import React from "react";

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

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColActionsMenu = void 0;
-var react_1 = __importDefault(require("react"));
-var ActionMenu_1 = require("../../../ActionMenu");
-var ColActionsMenu = function (_a) {
-    return (react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -100%)' } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: [
-                {
-                    display: 'Dummy',
-                    onClick: function () { return console.log('dummy'); },
-                }
-            ] })));
-};
-exports.ColActionsMenu = ColActionsMenu;

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

@@ -1,7 +0,0 @@
-export function RowActionsMenu({ value, rowIdx, onChange, id }: {
-    value: any;
-    rowIdx: any;
-    onChange: any;
-    id: any;
-}): React.JSX.Element;
-import React from "react";