oolib 2.68.3 → 2.68.5

package/dist/UIContent/index.d.ts

@@ -10,7 +10,12 @@ export namespace UIContent {
         export const duplicate: string;
         export const insertRowAfter: string;
         export const insertRowBefore: string;
+        export const clearContent: string;
         export const insertColAfter: string;
         export const insertColBefore: string;
+        export const addHeaderCol: string;
+        export const addHeaderRow: string;
+        export const removeHeaderRow: string;
+        export const stretchToFullWidth: string;
     }
 }

package/dist/UIContent/index.js

@@ -12,7 +12,12 @@ exports.UIContent = {
         duplicate: 'Duplicate',
         insertRowAfter: 'Insert Below',
         insertRowBefore: 'Insert Above',
+        clearContent: 'Clear Content',
         insertColAfter: 'Insert Right',
-        insertColBefore: 'Insert Left'
+        insertColBefore: 'Insert Left',
+        addHeaderCol: 'Header Column',
+        addHeaderRow: 'Add Header Row',
+        removeHeaderRow: 'Remove Header Row',
+        stretchToFullWidth: 'Stretch to Full Width'
     }
 };

package/dist/components/Hints/index.js

@@ -110,7 +110,7 @@ var Hints = function (_a) {
                         react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : (react_1.default.createElement(ModalLarge_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: title, onClose: function () { return setActive(""); } },
             react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
                 react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
-                    react_1.default.createElement("div", { style: { marginTop: ".5rem" } },
+                    react_1.default.createElement("div", { style: { marginTop: ".5rem", lineHeight: 0 } },
                         react_1.default.createElement(DisplayIcon_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
                     react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
 };

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

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

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

@@ -39,7 +39,7 @@ 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 StyledColButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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  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 },
@@ -47,8 +47,8 @@ var AddRowButton = function (_a) {
 };
 exports.AddRowButton = AddRowButton;
 var AddColButton = function (_a) {
-    var onClick = _a.onClick;
-    return (react_1.default.createElement(StyledColButton, { onClick: onClick },
+    var onClick = _a.onClick, addColButtonWidth = _a.addColButtonWidth;
+    return (react_1.default.createElement(StyledColButton, { style: { width: addColButtonWidth + 'px' }, onClick: onClick },
         react_1.default.createElement(Plus, { size: 12, weight: "bold" })));
 };
 exports.AddColButton = AddColButton;

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

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

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

@@ -15,13 +15,13 @@ 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 StyledCustomSelectCompWrapper = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  width: 2.5rem;\n"], ["\n  ", "\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;
+    var value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth, colActionsButtonHeight = _a.colActionsButtonHeight;
     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 },
+                return (react_1.default.createElement(StyledCustomSelectCompWrapper, { style: { height: colActionsButtonHeight + 'px' }, onClick: onClick, active: active },
                     react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThree", size: 16 })));
             }, actions: [
                 {
@@ -39,6 +39,10 @@ var ColActionsMenu = function (_a) {
                 {
                     display: UIContent_1.UIContent.SimpleTable.insertColBefore,
                     onClick: function () { return (0, handleColActions_1.handleInsertColBefore)({ value: value, colIdx: colIdx, onChange: onChange, id: id, defaultColWidth: defaultColWidth }); },
+                },
+                {
+                    display: UIContent_1.UIContent.SimpleTable.clearContent,
+                    onClick: function () { return (0, handleColActions_1.handleClearColContent)({ value: value, colIdx: colIdx, onChange: onChange, id: id, defaultColWidth: defaultColWidth }); },
                 }
             ] })));
 };

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

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

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

@@ -15,14 +15,10 @@ 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 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);
+// const CustomSelectComp = 
 var RowActionsMenu = function (_a) {
-    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, setActionsActiveOnRow = _a.setActionsActiveOnRow;
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth;
     return (react_1.default.createElement("div", { style: {
             zIndex: 1,
             position: "absolute",
@@ -30,7 +26,11 @@ var RowActionsMenu = function (_a) {
             left: 0,
             transform: "translate(-50%, -50%)",
         } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) { return setActionsActiveOnRow(showActions ? rowIdx : undefined); }, CustomSelectComp: CustomSelectComp, actions: [
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) { return setActionsActiveOnRow(showActions ? rowIdx : undefined); }, CustomSelectComp: function (_a) {
+                var active = _a.active, onClick = _a.onClick;
+                return (react_1.default.createElement(StyledCustomSelectCompWrapper, { style: { width: rowActionsButtonWidth + 'px' }, onClick: onClick, active: active },
+                    react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: "DotsThreeVertical", size: 16 })));
+            }, actions: [
                 {
                     display: UIContent_1.UIContent.SimpleTable.delete,
                     onClick: function () { return (0, handleRowActions_1.handleDeleteRow)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id }); },
@@ -51,6 +51,12 @@ var RowActionsMenu = function (_a) {
                         return (0, handleRowActions_1.handleInsertRowAfter)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
                     },
                 },
+                {
+                    display: UIContent_1.UIContent.SimpleTable.clearContent,
+                    onClick: function () {
+                        return (0, handleRowActions_1.handleClearRowContent)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
+                    },
+                },
             ] })));
 };
 exports.RowActionsMenu = RowActionsMenu;

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

@@ -30,3 +30,9 @@ export function handleInsertColBefore({ value, colIdx, onChange, id, defaultColW
     id: any;
     defaultColWidth: any;
 }): void;
+export function handleClearColContent({ value, colIdx, onChange, id }: {
+    value: any;
+    colIdx: any;
+    onChange: any;
+    id: any;
+}): void;

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

@@ -20,7 +20,7 @@ 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.handleInsertColBefore = exports.handleInsertColAfter = exports.handleDuplicateCol = exports.handleDeleteCol = exports.handleAddCol = void 0;
+exports.handleClearColContent = exports.handleInsertColBefore = exports.handleInsertColAfter = exports.handleDuplicateCol = exports.handleDeleteCol = exports.handleAddCol = void 0;
 var genHash_1 = require("../utils/genHash");
 var handleAddColAtIdx = function (_a) {
     var value = _a.value, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth, colIdx = _a.colIdx;
@@ -127,3 +127,17 @@ var handleInsertColBefore = function (_a) {
     });
 };
 exports.handleInsertColBefore = handleInsertColBefore;
+var handleClearColContent = 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 cellToClear = newCellData[colIdx];
+        delete cellToClear.value;
+        newCellData.splice(colIdx, 1, cellToClear);
+        return __assign(__assign({}, row), { cellData: newCellData });
+    });
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleClearColContent = handleClearColContent;

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

@@ -23,3 +23,9 @@ export function handleInsertRowBefore({ value, rowIdx, onChange, id }: {
     onChange: any;
     id: any;
 }): void;
+export function handleClearRowContent({ value, rowIdx, onChange, id }: {
+    value: any;
+    rowIdx: any;
+    onChange: any;
+    id: any;
+}): void;

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

@@ -20,7 +20,7 @@ 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.handleInsertRowBefore = exports.handleInsertRowAfter = exports.handleDuplicateRow = exports.handleDeleteRow = exports.handleAddRow = void 0;
+exports.handleClearRowContent = exports.handleInsertRowBefore = exports.handleInsertRowAfter = exports.handleDuplicateRow = exports.handleDeleteRow = exports.handleAddRow = void 0;
 var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
 var genHash_1 = require("../utils/genHash");
 var genNewRow = function (_a) {
@@ -78,3 +78,12 @@ var handleInsertRowBefore = function (_a) {
     onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };
 exports.handleInsertRowBefore = handleInsertRowBefore;
+var handleClearRowContent = 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 newRow = genNewRow({ data: newData, rowIdx: rowIdx });
+    newData.splice(rowIdx, 1, newRow);
+    onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleClearRowContent = handleClearRowContent;

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

@@ -0,0 +1,8 @@
+export function handleStretchToFullWidth({ value, onChange, id, enableColActions, addColButtonWidth, fullWidthCompWrapper, }: {
+    value: any;
+    onChange: any;
+    id: any;
+    enableColActions: any;
+    addColButtonWidth: any;
+    fullWidthCompWrapper: any;
+}): void;

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

@@ -0,0 +1,34 @@
+"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.handleStretchToFullWidth = void 0;
+var handleStretchToFullWidth = function (_a) {
+    var _b;
+    var value = _a.value, onChange = _a.onChange, id = _a.id, enableColActions = _a.enableColActions, addColButtonWidth = _a.addColButtonWidth, fullWidthCompWrapper = _a.fullWidthCompWrapper;
+    var data = value.data, colWidthConfig = value.colWidthConfig;
+    var totalAvailableWidth = ((_b = fullWidthCompWrapper.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) -
+        (enableColActions ? addColButtonWidth : 0);
+    var noOfCols = data[0].cellData.length;
+    var widthPerCol = totalAvailableWidth / noOfCols + "px";
+    var newColWidthConfig = Object.keys(colWidthConfig)
+        .map(function (k) { return ({
+        colId: k,
+        width: widthPerCol,
+    }); })
+        .reduce(function (a, b) {
+        var _a;
+        return (__assign(__assign({}, a), (_a = {}, _a[b.colId] = b.width, _a)));
+    }, {});
+    onChange && onChange(id, { data: data, colWidthConfig: newColWidthConfig });
+};
+exports.handleStretchToFullWidth = handleStretchToFullWidth;

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

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

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

@@ -0,0 +1,31 @@
+"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.handleToggleRowHeader = void 0;
+var handleToggleRowHeader = 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, rowIdx) {
+        if (row.isColHeader) { //then remove
+            var newRow = __assign({}, row);
+            delete newRow.isColHeader;
+            return newRow;
+        }
+        else { //else add
+            return __assign(__assign({}, row), (rowIdx === 0 ? { isColHeader: true } : {}));
+        }
+    });
+    onChange &&
+        onChange(id, { data: newData, colWidthConfig: colWidthConfig });
+};
+exports.handleToggleRowHeader = handleToggleRowHeader;

package/dist/components/SimpleTable/index.js

@@ -52,15 +52,18 @@ var BlockLabel_1 = require("../BlockLabel");
 var styled_components_1 = require("styled-components");
 var utilsOolib_1 = require("../../utilsOolib");
 var AddRowColButtons_1 = require("./comps/AddRowColButtons");
+var UIContent_1 = require("../../UIContent");
+var ActionMenu_1 = require("../ActionMenu");
 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 handleStretchToFullWidth_1 = require("./handlers/handleStretchToFullWidth");
+var handleToggleRowHeader_1 = require("./handlers/handleToggleRowHeader");
 var styled_1 = require("./styled");
 var useResizeTableColumns_1 = require("./useResizeTableColumns");
 var convertColHeaderConfigToRowData_1 = require("./utils/convertColHeaderConfigToRowData");
 var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
-var lodash_1 = require("lodash");
 var greyColor100 = themes_1.colors.greyColor100;
 /*pending:
 - first test whatever is done on okf
@@ -93,11 +96,14 @@ function SimpleTable(_a) {
     //   }
     //   return _RichTextEditor && React.memo(_RichTextEditor, checkMemoFn)
     // },[])
-    var _e = (0, react_1.useMemo)(function () { return (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
-        _value: _value,
-        config: config,
-        defaultColWidth: defaultColWidth,
-    }); }, [_value]), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
+    var _e = (0, react_1.useMemo)(function () {
+        return (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
+            //memo v.imp cuz otherwise cell and row id keep changing on rerender if value doesnt exist, and this messes with their react keys, this leads to bugs
+            _value: _value,
+            config: config,
+            defaultColWidth: defaultColWidth,
+        });
+    }, [_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) {
@@ -128,7 +134,7 @@ function SimpleTable(_a) {
             typo: "SANS_3",
             placeholder: " ",
             style: {
-                padding: "0.8rem 1rem",
+                padding: "0.9rem 1rem",
             },
         },
         // KPDropdown: {
@@ -151,6 +157,16 @@ function SimpleTable(_a) {
         newData[rowIdx].cellData[cellIdx].value = v;
         onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
     };
+    /**
+     * we are explicitly defining this here and passing it on to AddColButton comp
+     * since we need this width to calculate stretch to full width
+     */
+    var addColButtonWidth = 20;
+    // these are explicitly defined here cuz we need to calc offset padding and margin using these, so that overflowX doesnt hide them
+    var rowActionsButtonWidth = 15;
+    var colActionsButtonHeight = 15;
+    var primaryTableActionsMenuHeight = 30;
+    var primaryTableActionsMenuGap = 5;
     var genRow = function (_a) {
         var row = _a.row, rowIdx = _a.rowIdx;
         var StyledWrapper = row.isColHeader
@@ -196,38 +212,93 @@ function SimpleTable(_a) {
                     onChange: onChange,
                     id: id,
                     defaultColWidth: defaultColWidth,
+                    colActionsButtonHeight: colActionsButtonHeight,
                 }))),
                 !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, setActionsActiveOnRow: setActionsActiveOnRow }))),
+                    hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, {
+                    value: value,
+                    rowIdx: rowIdx,
+                    onChange: onChange,
+                    id: id,
+                    setActionsActiveOnRow: setActionsActiveOnRow,
+                    rowActionsButtonWidth: rowActionsButtonWidth,
+                }))),
                 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 fullWidthCompWrapper = (0, react_1.useRef)(null);
     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 */,
+                overflowX: "auto",
+                paddingLeft: rowActionsButtonWidth / 2 + "px",
+                marginLeft: "-" + rowActionsButtonWidth / 2 + "px",
+                paddingTop: primaryTableActionsMenuGap + primaryTableActionsMenuHeight + 'px'
             } },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(styled_1.StyledSimpleTable, { onMouseLeave: function () {
-                        return setHoveredRowAndCol({ rowIdx: undefined, colIdx: undefined });
-                    } },
-                    config.colHeaderData &&
-                        genRow({
-                            row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
-                                colHeaderData: config.colHeaderData,
-                                convertToRichText: convertToRichText,
+            react_1.default.createElement("div", { ref: fullWidthCompWrapper, style: {
+                    display: "flex",
+                    alignItems: "stretch" /**without stretch AddColButton will be wonky */,
+                } },
+                react_1.default.createElement("div", { style: { position: "relative" } },
+                    react_1.default.createElement("div", { style: {
+                            position: "absolute",
+                            right: 0,
+                            top: "-" + primaryTableActionsMenuGap + "px",
+                            transform: "translateY(-100%)",
+                            zIndex: 1,
+                        } },
+                        react_1.default.createElement(ActionMenu_1.ActionMenu, { ButtonComp: "ButtonPrimary", actions: __spreadArray(__spreadArray([
+                                {
+                                    display: UIContent_1.UIContent.SimpleTable.stretchToFullWidth,
+                                    onClick: function () {
+                                        return (0, handleStretchToFullWidth_1.handleStretchToFullWidth)({
+                                            value: value,
+                                            onChange: onChange,
+                                            id: id,
+                                            enableColActions: enableColActions,
+                                            addColButtonWidth: addColButtonWidth,
+                                            fullWidthCompWrapper: fullWidthCompWrapper,
+                                        });
+                                    },
+                                }
+                            ], (enableRowActions
+                                ? [
+                                    {
+                                        display: UIContent_1.UIContent.SimpleTable.addHeaderCol,
+                                        onClick: function () { },
+                                    },
+                                ]
+                                : []), true), (enableColActions
+                                ? [
+                                    {
+                                        display: value.data[0].isColHeader
+                                            ? UIContent_1.UIContent.SimpleTable.removeHeaderRow
+                                            : UIContent_1.UIContent.SimpleTable.addHeaderRow,
+                                        onClick: function () {
+                                            return (0, handleToggleRowHeader_1.handleToggleRowHeader)({ value: value, onChange: onChange, id: id });
+                                        },
+                                    },
+                                ]
+                                : []), true) })),
+                    react_1.default.createElement(styled_1.StyledSimpleTable, { onMouseLeave: function () {
+                            return setHoveredRowAndCol({ rowIdx: undefined, colIdx: undefined });
+                        } },
+                        config.colHeaderData &&
+                            genRow({
+                                row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
+                                    colHeaderData: config.colHeaderData,
+                                    convertToRichText: convertToRichText,
+                                }),
                             }),
-                        }),
-                    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: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
-                } })))));
+                        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, { addColButtonWidth: addColButtonWidth, onClick: function () {
+                        return (0, handleColActions_1.handleAddCol)({ value: value, onChange: onChange, id: id, defaultColWidth: defaultColWidth });
+                    } }))))));
 }
 exports.SimpleTable = SimpleTable;

package/dist/components/VideoInput/comps/EmbedLinkModal.d.ts

@@ -6,4 +6,5 @@ export function EmbedLinkModal({ id, setShowEmbedLinkModal, value, createVideoPr
     canPlay: any;
     onChange: any;
     invert: any;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
+import React from "react";

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

@@ -1,7 +1,30 @@
 "use strict";
+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.EmbedLinkModal = void 0;
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var ModalSmall_1 = require("../../Modals/ModalSmall");
 var TextInputs_1 = require("../../TextInputs");
 var Paddings_1 = require("../../Paddings");
@@ -11,22 +34,22 @@ var EmbedLinkModal = function (_a) {
     var _b;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, canPlay = _a.canPlay, onChange = _a.onChange, invert = _a.invert;
     var _c = (0, react_1.useState)(value), localValue = _c[0], setLocalValue = _c[1];
-    return (React.createElement(ModalSmall_1.ModalSmall, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
+    return (react_1.default.createElement(ModalSmall_1.ModalSmall, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ", 
         // invert={invert}
         onClose: function () {
             setShowEmbedLinkModal(false);
         } },
-        React.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { icon: 'X' } }),
-        localValue && React.createElement(Paddings_1.PaddingBottom20, null),
+        react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { icon: 'X' } }),
+        localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
         createVideoPreview({ value: localValue }),
-        React.createElement(styled_index_1.StyledModalActionButtons, null,
-            React.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
+        react_1.default.createElement(styled_index_1.StyledModalActionButtons, null,
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
                 // invert={invert}
                 onClick: function () {
                     onChange(id, localValue);
                     setShowEmbedLinkModal(false);
                 } }),
-            React.createElement(Buttons_1.ButtonGhost, { value: "Cancel", 
+            react_1.default.createElement(Buttons_1.ButtonGhost, { value: "Cancel", 
                 // invert={invert}
                 onClick: function () {
                     setShowEmbedLinkModal(false);

package/package.json

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