oolib 2.68.0 → 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,9 +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) {
-                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/{ColActionsMenu → rowColActionMenus/ColActionsMenu}/index.js

@@ -1,17 +1,29 @@
 "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 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%, -100%)' } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: [
+    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 }); },
@@ -31,3 +43,4 @@ var ColActionsMenu = function (_a) {
             ] })));
 };
 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: 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/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,
@@ -189,7 +196,7 @@ function SimpleTable(_a) {
                     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 });
                     } }))));

package/dist/components/SimpleTable/styled.js

@@ -34,13 +34,16 @@ var styled_components_1 = __importStar(require("styled-components"));
 var utilsOolib_1 = require("../../utilsOolib");
 var globalVariables_1 = require("../../globalStyles/globalVariables");
 exports.StyledSimpleTable = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  \n  border-left: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n  \n  border-left: 1px solid ", ";\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10);
-exports.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) {
+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  border-bottom: 1px solid ", ";\n  ", ";\n  ", "\n"], ["\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\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;
-    return !readOnly && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    /* :hover{\n        background-color: ", ";\n    } */\n    :focus-within{\n      outline: 1px solid ", ";\n      background-color: ", ";\n    }    \n  "], ["\n    ", ";\n    /* :hover{\n        background-color: ", ";\n    } */\n    :focus-within{\n      outline: 1px solid ", ";\n      background-color: ", ";\n    }    \n  "])), globalVariables_1.globalHoverOnWhiteBG, (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,17 +22,14 @@ 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) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.white : themes_1.colors.greyColor100;
-}, 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.greyColor80 : themes_1.colors.greyColor5;
 });

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.68.0",
+  "version": "2.68.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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";