oolib 2.89.2 → 2.90.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, CustomSelectComp, storybookPreview }: {
+export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonComp: _ButtonComp, setShowActions: setShowActionsInParent, popOutOfOverflowHiddenParent, CustomSelectComp, storybookPreview, useLightboxPortal, }: {
     icon?: string;
     invert: any;
     actions: any;
@@ -10,5 +10,6 @@ export function ActionMenu({ icon, invert, actions, align, iconSize, M, ButtonCo
     popOutOfOverflowHiddenParent?: boolean;
     CustomSelectComp: any;
     storybookPreview: any;
+    useLightboxPortal: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/ActionMenu/index.js

@@ -43,15 +43,15 @@ var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOut
 var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var styled_1 = require("./styled");
 var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
+var react_dom_1 = require("react-dom");
 //
 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, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview //for storybook purposes
-    ;
+    var _b = _a.icon, icon = _b === void 0 ? "DotsThree" : _b, //most likely will never change
+    invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? "right" : _c, _d = _a.iconSize, iconSize = _d === void 0 ? "S" : _d, M = _a.M, _e = _a.ButtonComp, _ButtonComp = _e === void 0 ? "ButtonGhost" : _e, setShowActionsInParent = _a.setShowActions, _f = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _f === void 0 ? false : _f, CustomSelectComp = _a.CustomSelectComp, storybookPreview = _a.storybookPreview, //for storybook purposes
+    useLightboxPortal = _a.useLightboxPortal;
     var actionMenuRef = (0, react_1.useRef)(null);
     var optionsWrapperRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(false), showActions = _j[0], setShowActions = _j[1];
+    var _g = (0, react_1.useState)(false), showActions = _g[0], setShowActions = _g[1];
     (0, useHandleClickOutside_1.useHandleClickOutside)(actionMenuRef, setShowActions);
     if (!actions || actions.length === 0)
         return null;
@@ -77,25 +77,17 @@ var ActionMenu = function (_a) {
     (0, react_1.useEffect)(function () {
         return function () { return setShowActionsInParent && setShowActionsInParent(false); };
     }, []);
-    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 },
-        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({}, {
-            id: 'dropmenu',
+    var _h = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _h.fixPos, applyFixedPos = _h.applyFixedPos, removeFixedPos = _h.removeFixedPos, trackerRef = _h.trackerRef;
+    var genLighbox = function () {
+        var _a, _b;
+        return (react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({}, {
+            id: "dropmenu",
             align: align,
             invert: invert,
-            optionsHeight: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.height,
-            optionsWidth: (_c = getOpsRect()) === null || _c === void 0 ? void 0 : _c.width,
+            optionsHeight: (_a = getOpsRect()) === null || _a === void 0 ? void 0 : _a.height,
+            optionsWidth: (_b = getOpsRect()) === null || _b === void 0 ? void 0 : _b.width,
             showActions: showActions,
-            fixPos: fixPos
+            fixPos: fixPos,
         }),
             react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
                 return (react_1.default.createElement(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction),
@@ -107,6 +99,17 @@ var ActionMenu = function (_a) {
                         }, key: action.display, invert: invert }),
                         action.icon && genOptionIcon(action.icon),
                         react_1.default.createElement(Typo_1.SANS_2, null, action.display))));
-            })))));
+            }))));
+    };
+    return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
+        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 })),
+        popOutOfOverflowHiddenParent
+            ? (0, react_dom_1.createPortal)(genLighbox(), document.getElementById("actionmenu-lightbox-root"))
+            : genLighbox()));
 };
 exports.ActionMenu = ActionMenu;

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

@@ -7,6 +7,8 @@ exports.genColor = void 0;
 var react_1 = __importDefault(require("react"));
 var genColor = function (_a) {
     var color = _a.color;
+    if (!color)
+        return null;
     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%' } })));
 };

package/dist/components/Modals/derivedComps/ModalConfirmAction/index.js

@@ -26,6 +26,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalConfirmAction = void 0;
 var react_1 = __importStar(require("react"));
 var ModalConfirm_1 = require("../../ModalConfirm");
+/*
+@description :
+it is a wrapper comp for comps which have a onClick prop ex- button comps. When you click the button,
+it shows a ModalConfirm comp asking for confirmation. If you say "yes" in the ModalConfirm, it does what the button was supposed to do in the first place.
+
+VERY IMPORTANT : Wrapping a comp is not enough, the prop enable should be passed as true, which is by default false
+
+Check the ModalConfirmAction.stories.js for component usage
+
+*/
 function ModalConfirmAction(_a) {
     var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? "Are you sure you want to do this action" : _c, subtitle = _a.subtitle, onConfirmText = _a.onConfirmText, onCloseText = _a.onCloseText;
     var _d = (0, react_1.useState)(false), modal = _d[0], setModal = _d[1];

package/dist/components/Modals/derivedComps/ModalSmall/index.d.ts

@@ -0,0 +1,15 @@
+export function ModalSmall({ title, onClose, invert, showActionPanel, onCloseText, onConfirm, onConfirmText, overflowVisible, fitToContentHeight, alignActions, desktopWidth, children }: {
+    title: any;
+    onClose: any;
+    invert: any;
+    showActionPanel: any;
+    onCloseText?: string;
+    onConfirm: any;
+    onConfirmText?: string;
+    overflowVisible?: boolean;
+    fitToContentHeight?: boolean;
+    alignActions?: string;
+    desktopWidth?: string;
+    children: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/Modals/derivedComps/ModalSmall/index.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.ModalSmall = void 0;
+var react_1 = __importDefault(require("react"));
+var Modal_1 = require("../../Modal");
+var ModalSmall = function (_a) {
+    var title = _a.title, onClose = _a.onClose, invert = _a.invert, showActionPanel = _a.showActionPanel, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Close" : _b, onConfirm = _a.onConfirm, _c = _a.onConfirmText, onConfirmText = _c === void 0 ? "Confirm" : _c, _d = _a.overflowVisible, overflowVisible = _d === void 0 ? true : _d, _e = _a.fitToContentHeight, fitToContentHeight = _e === void 0 ? true : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "right" : _f, _g = _a.desktopWidth, desktopWidth = _g === void 0 ? "50vw" : _g, children = _a.children;
+    return (react_1.default.createElement(Modal_1.Modal, { title: title, onClose: onClose, onCloseText: onCloseText, onConfirm: onConfirm, onConfirmText: onConfirmText, desktopWidth: desktopWidth, overflowVisible: overflowVisible, fitToContentHeight: fitToContentHeight, invert: invert, showActionPanel: showActionPanel, alignActions: alignActions, children: react_1.default.createElement("div", { style: { padding: "2rem" } }, children) }));
+};
+exports.ModalSmall = ModalSmall;

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

@@ -54,7 +54,7 @@ var ColActionsMenu = function (_a) {
     // 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) {
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, 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.js

@@ -61,7 +61,7 @@ var RowActionsMenu = function (_a) {
             left: 0,
             transform: "translate(-50%, -50%)",
         } },
-        react_1.default.createElement(ActionMenu_1.ActionMenu, { align: "left", setShowActions: function (showActions) {
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, align: "left", setShowActions: function (showActions) {
                 setActionMenuIsOpen(showActions);
             }, CustomSelectComp: function (_a) {
                 var active = _a.active, onClick = _a.onClick;

package/dist/components/SimpleTable/useResizeTableColumns.js

@@ -61,7 +61,7 @@ var useResizeTableColumns = function (_a) {
         if (!colResizeState) {
             if (isInDragZone(e)) {
                 e.currentTarget.style.borderRight = borderStyleActive;
-                e.currentTarget.style.cursor = 'col-resize';
+                e.currentTarget.style.setProperty('cursor', 'col-resize', 'important'); // using the setProperty approach only so that we can apply !important
             }
             else {
                 e.currentTarget.style.borderRight = borderStyleInactive;

package/dist/components/TextInputs/index.js

@@ -171,8 +171,8 @@ var TextInput = function (props) {
                             : onBlur, onFocus: onFocus, size: size, autoComplete: "off" }),
                     validationStatus === "loading" && (react_1.default.createElement("div", null,
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
-                    clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" }, icon: clearBtn.icon })),
-                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" }, icon: actionBtn.icon }))),
+                    clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" } })),
+                    actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" } }))),
                 (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
                     react_1.default.createElement(Typo_1.SANS_3, null,
                         validationStatus.msg,

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

@@ -40,7 +40,7 @@ var EmbedLinkModal = function (_a) {
             setShowEmbedLinkModal(false);
         } },
         react_1.default.createElement("div", { style: { padding: '2rem' } },
-            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' } }),
+            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: { text: 'clear' } }),
             localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
             createVideoPreview({ value: localValue }),
             react_1.default.createElement(styled_1.StyledModalActionButtons, null,

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/ModalConfirm";
 export { ModalForms } from "./components/Modals/derivedComps/ModalForms";
 export { Modal } from "./components/Modals/Modal";
+export { ModalSmall } from "./components/Modals/derivedComps/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerAlert = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = void 0;
+exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -74,6 +74,8 @@ var ModalForms_1 = require("./components/Modals/derivedComps/ModalForms");
 Object.defineProperty(exports, "ModalForms", { enumerable: true, get: function () { return ModalForms_1.ModalForms; } });
 var Modal_1 = require("./components/Modals/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+var ModalSmall_1 = require("./components/Modals/derivedComps/ModalSmall");
+Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 var EmptyStates_1 = require("./components/EmptyStates");
 Object.defineProperty(exports, "EmptyStates", { enumerable: true, get: function () { return EmptyStates_1.EmptyStates; } });
 var HomeCover_1 = require("./components/HomeCover");

package/package.json

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