oolib 2.90.0 → 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/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/package.json

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