oolib 2.87.1 → 2.88.1

package/dist/UIContent/index.d.ts

@@ -14,6 +14,7 @@ export namespace UIContent {
         export const insertColAfter: string;
         export const insertColBefore: string;
         export const addHeaderCol: string;
+        export const removeHeaderCol: string;
         export const addHeaderRow: string;
         export const removeHeaderRow: string;
         export const stretchToFullWidth: string;

package/dist/UIContent/index.js

@@ -15,7 +15,8 @@ exports.UIContent = {
         clearContent: 'Clear Content',
         insertColAfter: 'Insert Right',
         insertColBefore: 'Insert Left',
-        addHeaderCol: 'Header Column',
+        addHeaderCol: 'Add Header Column',
+        removeHeaderCol: 'Remove Header Column',
         addHeaderRow: 'Add Header Row',
         removeHeaderRow: 'Remove Header Row',
         stretchToFullWidth: 'Stretch to Full Width'

package/dist/components/Dropdowns/comps/OptionContent/index.js

@@ -10,11 +10,12 @@ var genProfileImg_1 = require("../../utils/genProfileImg");
 var genIcon_1 = require("../../utils/genIcon");
 var Typo_1 = require("../../../Typo");
 var styled_components_1 = require("styled-components");
+var genColor_1 = require("../../utils/genColor");
 var OptionContent = function (_a) {
     var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S;
     var theme = (0, styled_components_1.useTheme)();
     var TypoComp = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
-    var image = option.image, display = option.display, icon = option.icon, desc = option.desc;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color;
     return (react_1.default.createElement("div", { style: {
             display: "flex",
             alignItems: "center",
@@ -23,6 +24,7 @@ var OptionContent = function (_a) {
         } },
         image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
         icon && (0, genIcon_1.genIcon)(icon),
+        color && (0, genColor_1.genColor)({ color: color }),
         react_1.default.createElement("div", null,
             react_1.default.createElement(TypoComp, { invert: invert, semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || "") }, (0, getText_1.getText)(display)),
             desc && (react_1.default.createElement(TypoComp, { invert: invert, className: "OKE-Dropdown__optionDesc" }, (0, getText_1.getText)(desc))))));

package/dist/components/Dropdowns/comps/SelectDropdown/index.js

@@ -21,6 +21,7 @@ var Caret_1 = require("../Caret");
 var genIcon_1 = require("../../utils/genIcon");
 var Typo_1 = require("../../../Typo");
 var styled_1 = require("./styled");
+var genColor_1 = require("../../utils/genColor");
 var SelectDropdown = function (_a) {
     var 
     //from root
@@ -47,6 +48,7 @@ var SelectDropdown = function (_a) {
     var genSelectComp = function () { return (react_1.default.createElement(styled_1.StyledSelectWrapper, { invert: invert, S: S, disabled: disabled, style: selectStyleOverride },
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
+                showElem('color') && (0, genColor_1.genColor)({ color: value === null || value === void 0 ? void 0 : value.color }),
                 showElem("icon") && (0, genIcon_1.genIcon)(value === null || value === void 0 ? void 0 : value.icon),
                 showElem("display") && (react_1.default.createElement(TypoComp
                 // semibold={

package/dist/components/Dropdowns/utils/genColor.d.ts

@@ -0,0 +1,4 @@
+export function genColor({ color }: {
+    color: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/Dropdowns/utils/genColor.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genColor = void 0;
+var react_1 = __importDefault(require("react"));
+var genColor = function (_a) {
+    var color = _a.color;
+    return (react_1.default.createElement("div", { style: { flex: "0 0 auto" } },
+        react_1.default.createElement("div", { style: { width: '2rem', height: '2rem', background: color, borderRadius: '10%' } })));
+};
+exports.genColor = genColor;

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

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

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

@@ -3,12 +3,35 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColActionsMenu = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var ActionMenu_1 = require("../../../../ActionMenu");
 var handleColActions_1 = require("../../../handlers/handleColActions");
 var UIContent_1 = require("../../../../../UIContent");
@@ -17,9 +40,21 @@ 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  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, 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 value = _a.value, colIdx = _a.colIdx, onChange = _a.onChange, id = _a.id, defaultColWidth = _a.defaultColWidth, setActionsActiveOnCol = _a.setActionsActiveOnCol, colActionsButtonHeight = _a.colActionsButtonHeight, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b;
+    var _c = (0, react_1.useState)(false), actionMenuIsOpen = _c[0], setActionMenuIsOpen = _c[1];
+    var isFirstMount = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        if (!isFirstMount.current) {
+            setActionsActiveOnCol(actionMenuIsOpen ? colIdx : undefined);
+        }
+        else {
+            isFirstMount.current = false;
+        }
+    }, [actionMenuIsOpen]);
+    // cuz if an actionmenu is open we want it to continue showing
+    // on screen irrespective of other factors such as hover and such
+    return (conditionsToRender || actionMenuIsOpen) && (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, { setShowActions: function (bool) { return setActionMenuIsOpen(bool); }, align: "left", CustomSelectComp: function (_a) {
                 var active = _a.active, onClick = _a.onClick;
                 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 })));

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

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

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

@@ -3,12 +3,35 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowActionsMenu = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var UIContent_1 = require("../../../../../UIContent");
 var DisplayIcon_1 = require("../../../../../utils/comps/DisplayIcon");
@@ -16,19 +39,33 @@ 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);
-// const CustomSelectComp = 
+// const CustomSelectComp =
 var RowActionsMenu = function (_a) {
-    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: {
+    var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id, setActionsActiveOnRow = _a.setActionsActiveOnRow, rowActionsButtonWidth = _a.rowActionsButtonWidth, _b = _a.conditionsToRender, conditionsToRender = _b === void 0 ? true : _b;
+    var _c = (0, react_1.useState)(false), actionMenuIsOpen = _c[0], setActionMenuIsOpen = _c[1];
+    var isFirstMount = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        if (!isFirstMount.current) {
+            setActionsActiveOnRow(actionMenuIsOpen ? rowIdx : undefined);
+        }
+        else {
+            isFirstMount.current = false;
+        }
+    }, [actionMenuIsOpen]);
+    // cuz if an actionmenu is open we want it to continue showing
+    // on screen irrespective of other factors such as hover and such
+    return (conditionsToRender || actionMenuIsOpen) && (react_1.default.createElement("div", { style: {
             zIndex: 1,
             position: "absolute",
             top: "50%",
             left: 0,
             transform: "translate(-50%, -50%)",
         } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) { return setActionsActiveOnRow(showActions ? rowIdx : undefined); }, CustomSelectComp: function (_a) {
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) {
+                setActionMenuIsOpen(showActions);
+            }, CustomSelectComp: function (_a) {
                 var active = _a.active, onClick = _a.onClick;
-                return (react_1.default.createElement(StyledCustomSelectCompWrapper, { style: { width: rowActionsButtonWidth + 'px' }, onClick: onClick, active: active },
+                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: [
                 {

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

@@ -134,9 +134,12 @@ var handleClearColContent = function (_a) {
         var newCellData = __spreadArray([], row.cellData, true);
         var cellToClear = newCellData[colIdx];
         delete cellToClear.value;
+        console.log({ cellToClear: cellToClear });
         newCellData.splice(colIdx, 1, cellToClear);
+        console.log({ newCellData: newCellData });
         return __assign(__assign({}, row), { cellData: newCellData });
     });
+    console.log({ newData: newData });
     onChange &&
         onChange(id, { data: newData, colWidthConfig: colWidthConfig });
 };

package/dist/components/SimpleTable/index.js

@@ -142,10 +142,11 @@ function SimpleTable(_a) {
         // },
     };
     var _g = (0, react_1.useState)(undefined), actionsActiveOnRow = _g[0], setActionsActiveOnRow = _g[1];
-    var _h = (0, react_1.useState)({
+    var _h = (0, react_1.useState)(undefined), actionsActiveOnCol = _h[0], setActionsActiveOnCol = _h[1];
+    var _j = (0, react_1.useState)({
         rowIdx: undefined,
         colIdx: undefined,
-    }), hoveredRowAndCol = _h[0], setHoveredRowAndCol = _h[1];
+    }), hoveredRowAndCol = _j[0], setHoveredRowAndCol = _j[1];
     var CellValueGetters = {
         RichTextEditor: function (v) { return (convertToRichText ? convertToRichText(v) : v); },
     }; //prob dont need this..
@@ -191,7 +192,7 @@ function SimpleTable(_a) {
                     width: "".concat(cellWidth),
                     borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
                         "2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
-                }, actionsActiveOnRow: actionsActiveOnRow, onMouseEnter: function (e) {
+                }, actionsActiveOnRow: actionsActiveOnRow, colIdx: cellIdx, rowIdx: rowIdx, totRows: value.data.length, actionsActiveOnCol: actionsActiveOnCol, onMouseEnter: function (e) {
                     setHoveredRowAndCol({
                         rowIdx: rowIdx,
                         colIdx: cellIdx,
@@ -203,32 +204,36 @@ function SimpleTable(_a) {
                 onMouseDown: function (e) {
                     initColResizeState(e, { colId: "col_".concat(cellIdx) });
                 }, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator, tabIndex: 0 },
-                !readOnly &&
-                    enableColActions &&
-                    rowIdx === 0 &&
-                    hoveredRowAndCol.colIdx === cellIdx && (react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
+                react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, __assign({}, {
                     value: value,
                     colIdx: cellIdx,
                     onChange: onChange,
                     id: id,
                     defaultColWidth: defaultColWidth,
+                    setActionsActiveOnCol: setActionsActiveOnCol,
                     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({}, {
+                    conditionsToRender: !readOnly &&
+                        enableColActions &&
+                        rowIdx === 0 &&
+                        hoveredRowAndCol.colIdx === cellIdx,
+                })),
+                react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, {
                     value: value,
                     rowIdx: rowIdx,
                     onChange: onChange,
                     id: id,
                     setActionsActiveOnRow: setActionsActiveOnRow,
                     rowActionsButtonWidth: rowActionsButtonWidth,
-                }))),
-                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 });
-                    } }))));
+                    conditionsToRender: !readOnly &&
+                        enableRowActions &&
+                        cellIdx === 0 &&
+                        rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
+                        hoveredRowAndCol.rowIdx === rowIdx,
+                })),
+                react_1.default.createElement("div", { style: { marginRight: dragZoneWidth + "px" } },
+                    react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
+                            return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
+                        } })))));
         })));
     };
     var fullWidthCompWrapper = (0, react_1.useRef)(null);
@@ -238,7 +243,7 @@ function SimpleTable(_a) {
                 overflowX: "auto",
                 paddingLeft: rowActionsButtonWidth / 2 + "px",
                 marginLeft: "-" + rowActionsButtonWidth / 2 + "px",
-                paddingTop: primaryTableActionsMenuGap + primaryTableActionsMenuHeight + 'px'
+                paddingTop: primaryTableActionsMenuGap + primaryTableActionsMenuHeight + "px",
             } },
             react_1.default.createElement("div", { ref: fullWidthCompWrapper, style: {
                     display: "flex",
@@ -250,7 +255,7 @@ function SimpleTable(_a) {
                             right: 0,
                             top: "-" + primaryTableActionsMenuGap + "px",
                             transform: "translateY(-100%)",
-                            zIndex: 1,
+                            zIndex: 10,
                         } },
                         react_1.default.createElement(ActionMenu_1.ActionMenu, { ButtonComp: "ButtonPrimary", actions: __spreadArray(__spreadArray([
                                 {
@@ -269,6 +274,7 @@ function SimpleTable(_a) {
                             ], (enableRowActions
                                 ? [
                                     {
+                                        icon: "SquareHalf",
                                         display: UIContent_1.UIContent.SimpleTable.addHeaderCol,
                                         onClick: function () { },
                                     },
@@ -276,6 +282,7 @@ function SimpleTable(_a) {
                                 : []), true), (enableColActions
                                 ? [
                                     {
+                                        icon: "SquareHalfBottom",
                                         display: value.data[0].isColHeader
                                             ? UIContent_1.UIContent.SimpleTable.removeHeaderRow
                                             : UIContent_1.UIContent.SimpleTable.addHeaderRow,

package/dist/components/SimpleTable/styled.js

@@ -41,9 +41,18 @@ exports.StyledSimpleTableRow = styled_components_1.default.div(templateObject_3
     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_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));
+var genActiveColBorder = function (_a) {
+    var actionsActiveOnCol = _a.actionsActiveOnCol, colIdx = _a.colIdx, rowIdx = _a.rowIdx, totRows = _a.totRows, theme = _a.theme;
+    var isActiveCol = actionsActiveOnCol === colIdx;
+    var isFirstRow = rowIdx === 0;
+    var isLastRow = rowIdx === totRows - 1;
+    return isActiveCol && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n     &::before{\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          width: calc(100% + 2px);\n          height: calc(100% + 2px);\n          border: 2px solid ", ";\n          z-index: 1;\n          ", "\n        }\n  "], ["\n     &::before{\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          width: calc(100% + 2px);\n          height: calc(100% + 2px);\n          border: 2px solid ", ";\n          z-index: 1;\n          ", "\n        }\n  "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), isFirstRow
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["border-bottom: none;"], ["border-bottom: none;"]))) : !isFirstRow && !isLastRow
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                border-bottom: none;\n                border-top: none;\n              "], ["\n                border-bottom: none;\n                border-top: none;\n              "]))) : isLastRow && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["border-top:none;"], ["border-top:none;"]))));
+};
+exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n  \n  ", "\n"], ["\n  min-height: 4rem;\n  position: relative;\n  border-right: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  ", ";\n  \n  ", "\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10, (0, transitions_1.transition)("background-color"), function (_a) {
+    var readOnly = _a.readOnly, theme = _a.theme, actionsActiveOnRow = _a.actionsActiveOnRow, actionsActiveOnCol = _a.actionsActiveOnCol, rowIdx = _a.rowIdx, totRows = _a.totRows, colIdx = _a.colIdx;
+    return !readOnly && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", ";\n    \n    ", "\n\n    ", "\n  "], ["\n    ", ";\n    \n    ", "\n\n    ", "\n  "])), globalVariables_1.globalHoverOnWhiteBG, !actionsActiveOnRow && !actionsActiveOnCol && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      :focus-within{\n        &::before{\n          content: '';\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          outline: 1px solid ", ";\n          border: 1px solid ", ";\n        }\n        background-color: ", ";\n      }    \n    "], ["\n      :focus-within{\n        &::before{\n          content: '';\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          outline: 1px solid ", ";\n          border: 1px solid ", ";\n        }\n        background-color: ", ";\n      }    \n    "])), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), themes_1.colors.none), genActiveColBorder({ theme: theme, actionsActiveOnCol: actionsActiveOnCol, rowIdx: rowIdx, totRows: totRows, colIdx: colIdx }));
 });
-exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_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;
+exports.StyledSimpleTableHeader = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"], ["\n  .public-DraftEditor-content {\n    font-weight: 600;\n  }\n  background-color: ", ";\n  border-bottom: 2px solid ", ";\n"])), themes_1.colors.greyColor, themes_1.colors.greyColor10);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -7,7 +7,7 @@ export function SwitchDouble({ id, value: valueProp, options, onChange, invert,
     saveValueAsString: any;
     disabled?: boolean;
 }, ...args: any[]): React.JSX.Element;
-export function SwitchSingle({ id, value, option, onChange, disabled, invert, saveValueAsString, layoutStyle, }: {
+export function SwitchSingle({ id, value, option, onChange, disabled, invert, saveValueAsString, layoutStyle, infoTooltip, }: {
     id: any;
     value: any;
     option: any;
@@ -16,5 +16,6 @@ export function SwitchSingle({ id, value, option, onChange, disabled, invert, sa
     invert: any;
     saveValueAsString: any;
     layoutStyle?: string;
+    infoTooltip: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

package/dist/components/Switches/index.js

@@ -20,6 +20,7 @@ var themes_1 = require("../../themes");
 var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var BlockLabel_1 = require("../BlockLabel");
 var styled_1 = require("./styled");
+var Tooltip_1 = require("../Tooltip");
 var greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white;
 function SwitchDouble(_a) {
     var id = _a.id, valueProp = _a.value, options = _a.options, onChange = _a.onChange, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
@@ -55,7 +56,7 @@ function SwitchDouble(_a) {
 }
 exports.SwitchDouble = SwitchDouble;
 function SwitchSingle(_a) {
-    var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _c = _a.layoutStyle, layoutStyle = _c === void 0 ? "style1" : _c;
+    var id = _a.id, value = _a.value, option = _a.option, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, invert = _a.invert, saveValueAsString = _a.saveValueAsString, _c = _a.layoutStyle, layoutStyle = _c === void 0 ? "style1" : _c, infoTooltip = _a.infoTooltip;
     var props = arguments[0];
     /**
      * very important that we check this way,
@@ -75,7 +76,12 @@ function SwitchSingle(_a) {
     var genSwitch = function () { return (react_1.default.createElement(styled_1.StyledButtonSlider, { inactive: isInactive, disabled: disabled, invert: invert, onClick: handleClick },
         react_1.default.createElement(styled_1.StyledSwitch, { className: "StyledSwitch" //read in styled.js why we are using an okf-anti-pattern
             , direction: isInactive ? "left" : "right", inactive: isInactive, disabled: disabled, invert: invert }))); };
-    var genSwitchDisplay = function () { return (react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, lineHeight: 1, semibold: isInactive ? false : true }), option.display)); };
+    var genDisplayText = function () { return react_1.default.createElement(styled_1.STYLED_SANS_3, __assign({}, { invert: invert, lineHeight: 1, semibold: isInactive ? false : true }), option.display); };
+    var genSwitchDisplay = function () {
+        return infoTooltip ? (react_1.default.createElement("div", { style: { display: "flex", gap: ".5rem", alignItems: "center" } },
+            genDisplayText(),
+            react_1.default.createElement(Tooltip_1.Tooltip, __assign({ presetTarget: "infoIcon" }, infoTooltip)))) : genDisplayText();
+    };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         layoutStyle === "style1" ? (react_1.default.createElement(styled_1.StyledSwitchWrapperStyle1, null,

package/dist/icons/index.d.ts

@@ -106,6 +106,8 @@ export namespace icons {
     export { ThumbsUp };
     export { ChatText };
     export { SlackLogo };
+    export { SquareHalf };
+    export { SquareHalfBottom };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -265,6 +267,8 @@ import { TextAa } from "phosphor-react";
 import { ThumbsUp } from "phosphor-react";
 import { ChatText } from "phosphor-react";
 import { SlackLogo } from "phosphor-react";
+import { SquareHalf } from "phosphor-react";
+import { SquareHalfBottom } from "phosphor-react";
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -111,6 +111,8 @@ exports.icons = {
     ThumbsUp: phosphor_react_1.ThumbsUp,
     ChatText: phosphor_react_1.ChatText,
     SlackLogo: phosphor_react_1.SlackLogo,
+    SquareHalf: phosphor_react_1.SquareHalf,
+    SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

package/package.json

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