oolib 2.76.0 → 2.77.0

package/dist/components/ActionMenu/index.js

@@ -42,6 +42,7 @@ var icons_1 = require("../../icons");
 var useHandleClickOutside_1 = require("../../utils/customHooks/useHandleClickOutside");
 var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var styled_1 = require("./styled");
+var ModalConfirmAction_1 = require("../Modals/derivedComps/ModalConfirmAction");
 //
 var ActionMenu = function (_a) {
     var _b, _c;
@@ -97,14 +98,15 @@ var ActionMenu = function (_a) {
             fixPos: fixPos
         }),
             react_1.default.createElement(styled_1.StyledActionMenuOpsWrapper, { invert: invert, align: align, ref: optionsWrapperRef }, actions.map(function (action) {
-                return (react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        action.onClick && action.onClick(e);
-                        setShowActions(false);
-                    }, 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(ModalConfirmAction_1.ModalConfirmAction, __assign({}, action.confirmAction),
+                    react_1.default.createElement(styled_1.StyledOption, __assign({}, action, { onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            action.onClick && action.onClick(e);
+                            setShowActions(false);
+                        }, key: action.display, invert: invert }),
+                        action.icon && genOptionIcon(action.icon),
+                        react_1.default.createElement(Typo_1.SANS_2, null, action.display))));
             })))));
 };
 exports.ActionMenu = ActionMenu;

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

@@ -0,0 +1,9 @@
+export function ModalConfirmAction({ children, enabled, title, subtitle, onConfirmText, onCloseText, }: {
+    children: any;
+    enabled?: boolean;
+    title?: string;
+    subtitle: any;
+    onConfirmText: any;
+    onCloseText: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalConfirmAction = void 0;
+var react_1 = __importStar(require("react"));
+var ModalConfirm_1 = require("../ModalConfirm");
+function ModalConfirmAction(_a) {
+    var children = _a.children, _b = _a.enabled, enabled = _b === void 0 ? true : _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];
+    var callback;
+    var handleParentClick = function (e) {
+        setModal(e);
+    };
+    var handleConfirm = function (e) {
+        callback(modal);
+        setModal(false);
+    };
+    var getChildren = function () {
+        if (!enabled) {
+            return children;
+        }
+        else {
+            return react_1.default.Children.map(children, function (child) {
+                // Check if the child is a React component
+                if (react_1.default.isValidElement(child)) {
+                    // Access props of the child component
+                    callback = child.props.onClick;
+                    return react_1.default.cloneElement(child, { onClick: handleParentClick });
+                }
+                // Return non-component children as they are
+                return child;
+            });
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        modal ? (react_1.default.createElement(ModalConfirm_1.ModalConfirm, { title: title, subTitle: subtitle, onClose: function () { return setModal(false); }, onConfirmText: onConfirmText, onConfirm: handleConfirm, onCloseText: onCloseText })) : null,
+        getChildren()));
+}
+exports.ModalConfirmAction = ModalConfirmAction;

package/dist/components/Tooltip/styled.js

@@ -40,7 +40,7 @@ var clipPaths = {
     right: '100% 0%, 50% 47%, 50% 52%, 100% 100%',
     left: '0% 0%, 50% 47%, 50% 52%, 0% 100%',
 };
-exports.StyledTooltipBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n"], ["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n"])), function (_a) {
+exports.StyledTooltipBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n  overflow-wrap: break-word;\n  white-space: normal; // /* Allows text to wrap to the next line */\n"], ["\n  ", ";\n  ", "\n\n  padding: 1rem;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  /* position: ", "; */\n  /* left: ", "px; */\n  /* top: ", "px; */\n  z-index: 50000000;\n  ", "\n  width: max-content;\n  max-width: 20rem;\n  word-wrap:break-word;\n  overflow-wrap: break-word;\n  white-space: normal; // /* Allows text to wrap to the next line */\n"])), function (_a) {
     var show = _a.show;
     return show ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display:'visible'; z-index: 5000000;"], ["display:'visible'; z-index: 5000000;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["display:'none'; z-index: -5;"], ["display:'none'; z-index: -5;"])));
 }, (0, mixins_1.transition)('opacity 0.1s'), function (props) { return props.invert ? greyColor10 : greyColor100; }, function (props) { return props.invert ? greyColor100 : white; }, greyColor15, function (props) { return !props.fixPos ? 'fixed' : 'absolute'; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.x; }, function (props) { var _a; return (_a = props.fixPos) === null || _a === void 0 ? void 0 : _a.y; }, function (_a) {

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileI
 export { default as VideoInput } from "./components/VideoInput";
 export { default as AudioInput } from "./components/AudioInput";
 export { default as IFrame } from "./components/IFrame";
+export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfirmAction";
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerInfo = exports.BannerAlert = exports.IFrame = 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.ModalLarge = 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.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
+exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = 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; } });
@@ -153,6 +153,8 @@ var bannerContext_1 = require("./components/Banners/bannerContext");
 Object.defineProperty(exports, "BannerContext", { enumerable: true, get: function () { return bannerContext_1.BannerContext; } });
 Object.defineProperty(exports, "useBannerContext", { enumerable: true, get: function () { return bannerContext_1.useBannerContext; } });
 Object.defineProperty(exports, "BannerProvider", { enumerable: true, get: function () { return bannerContext_1.BannerProvider; } });
+var ModalConfirmAction_1 = require("./components/Modals/derivedComps/ModalConfirmAction");
+Object.defineProperty(exports, "ModalConfirmAction", { enumerable: true, get: function () { return ModalConfirmAction_1.ModalConfirmAction; } });
 var SimpleTable_1 = require("./components/SimpleTable");
 Object.defineProperty(exports, "SimpleTable", { enumerable: true, get: function () { return SimpleTable_1.SimpleTable; } });
 //styled-components css for use in lexical, since lexical uses classes primarily

package/package.json

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