oolib 2.76.0 → 2.78.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/DatePicker/index.js

@@ -172,7 +172,8 @@ function DatePicker(props) {
         return dateObj.toLocaleDateString("en-GB", options);
     };
     var autoFormatter = function () {
-        var input = inputRef.current.value;
+        var _a;
+        var input = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
         if (/^\d{2}\/?$/.test(input) && flag) {
             input += "/";
         }
@@ -181,29 +182,20 @@ function DatePicker(props) {
         }
         inputRef.current.value = input;
     };
-    // function handleFocusOut() {
-    //   if (from && inputRef.current.value.split("/")[1] === calender.month + 1) {
-    //     setRange(new Date(calender.year, calender.month, calender.today));
-    //   }
-    //   monthNumber = 0;
-    //   setMonthNumber(monthNumber);
-    //   let dateObj = buildCalenderObj(
-    //     from,
-    //     inputRef,
-    //     monthNumber,
-    //     calender,
-    //     setCalender
-    //   );
-    //   if (from && dateObj < from) {
-    //     dateObj = from;
-    //   }
-    //   inputRef.current.value = buildDateInput(dateObj);
-    //   onParentChange(
-    //     id,
-    //     dateObj.toISOString(),
-    //     props.passChangeHandlerOps && props
-    //   );
-    // }
+    var handleFocusOut = function () {
+        var _a;
+        if (from && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.split("/")[1]) == calender.month + 1) {
+            setRange(new Date(calender.year, calender.month, calender.today));
+        }
+        monthNumber = 0;
+        setMonthNumber(monthNumber);
+        var dateObj = (0, buildCalenderObj_1.buildCalenderObj)(from, inputRef, monthNumber, calender, setCalender);
+        if (from && dateObj < from) {
+            dateObj = from;
+        }
+        inputRef.current.value = buildDateInput(dateObj);
+        onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
+    };
     var handleOnChange = function () {
         autoFormatter();
         setMonthNumber(0);
@@ -211,7 +203,6 @@ function DatePicker(props) {
         if (from) {
             setRange(dateObj);
         }
-        onParentChange(id, dateObj.toISOString(), props.passChangeHandlerOps && props);
     };
     var handleKeyDown = function (e) {
         if (e.keyCode === 8) {
@@ -257,9 +248,7 @@ function DatePicker(props) {
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         react_1.default.createElement(styled_1.StyledDateInputContainer, { invert: invert, onClick: function () { return setShowCalendar(true); }, ref: containerRef },
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, getReadOnlyDate())) : (react_1.default.createElement(styled_1.StyledDateInputWrapper, null,
-                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, 
-                    // onBlur={handleFocusOut}
-                    onFocus: function () {
+                react_1.default.createElement(styled_1.StyledInput, { ref: inputRef, type: "text", className: "SANS_3", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: function () {
                         (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef);
                     } }))),
             react_1.default.createElement(styled_1.StyledCalenderContainer, { debug: debug, showCalendar: showCalendar, ref: calenderRef, className: " ".concat(from ? "right-class" : ""), invert: invert },

package/dist/components/DatePicker/styled.js

@@ -101,7 +101,7 @@ exports.StyledDateBlock = styled_components_1.default.div(templateObject_14 || (
     return isToday && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "], ["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "])), primaryColor100, primaryColor100);
 }, function (_a) {
     var isSelectedDate = _a.isSelectedDate;
-    return isSelectedDate && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "], ["\n      pointer-events: none; // disable hover style\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "])), primaryColor100, primaryColor100);
+    return isSelectedDate && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      /* pointer-events: none; // disable hover style */\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "], ["\n      /* pointer-events: none; // disable hover style */\n      background-color: ", ";\n      color: white;\n      &:hover {\n        background-color: ", ";\n        color: white;\n      }\n    "])), primaryColor100, primaryColor100);
 }, function (_a) {
     var disableClick = _a.disableClick;
     return disableClick && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));

package/dist/components/DatePicker/utils/buildCalenderObj.js

@@ -17,19 +17,19 @@ var buildCalenderObj = function (from, inputRef, monthNumber, calender, setCalen
     // the current month, including the dates of the current, previous, and next months. 
     // This function is called whenever the value or from props change, which may happen when the user 
     // selects a new date or when the component is initially mounted.
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var date = from || new Date();
     var currentDate = new Date();
-    var day = (((_b = (_a = inputRef.current.value) === null || _a === void 0 ? void 0 : _a.split('/')[0]) === null || _b === void 0 ? void 0 : _b.length) > 1 &&
-        inputRef.current.value.split('/')[0]) ||
+    var day = (((_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.split('/')[0]) === null || _c === void 0 ? void 0 : _c.length) > 1 &&
+        ((_e = (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.split('/')[0])) ||
         date.getDate();
-    var month = (((_d = (_c = inputRef.current.value) === null || _c === void 0 ? void 0 : _c.split('/')[1]) === null || _d === void 0 ? void 0 : _d.length) > 1 &&
+    var month = (((_g = (_f = inputRef.current.value) === null || _f === void 0 ? void 0 : _f.split('/')[1]) === null || _g === void 0 ? void 0 : _g.length) > 1 &&
         inputRef.current.value.split('/')[1]) ||
         date.getMonth();
     if (month == inputRef.current.value.split('/')[1]) {
         month--;
     }
-    var year = (((_f = (_e = inputRef.current.value) === null || _e === void 0 ? void 0 : _e.split('/')[2]) === null || _f === void 0 ? void 0 : _f.length) > 3 &&
+    var year = (((_j = (_h = inputRef.current.value) === null || _h === void 0 ? void 0 : _h.split('/')[2]) === null || _j === void 0 ? void 0 : _j.length) > 3 &&
         inputRef.current.value.split('/')[2]) ||
         // calender?.year ||
         date.getFullYear();

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