oolib 2.77.0 → 2.79.0

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/{IFrame → IFrameInput}/index.d.ts

@@ -1,5 +1,5 @@
-export default IFrame;
-declare function IFrame({ label, sublabel, value, placeholder, onChange, readOnly, isRequired, errorMsgs, isInRTE, invert, }: {
+export default IFrameInput;
+declare function IFrameInput({ label, sublabel, value, placeholder, onChange, readOnly, isRequired, errorMsgs, isInRTE, invert, }: {
     label: any;
     sublabel: any;
     value: any;

package/dist/components/{IFrame → IFrameInput}/index.js

@@ -43,7 +43,7 @@ var themes_1 = require("../../themes");
 var TextInputs_1 = require("../TextInputs");
 var Typo_1 = require("../Typo");
 var Embed_1 = require("./comps/Embed");
-function IFrame(_a) {
+function IFrameInput(_a) {
     var label = _a.label, sublabel = _a.sublabel, value = _a.value, placeholder = _a.placeholder, onChange = _a.onChange, readOnly = _a.readOnly, isRequired = _a.isRequired, errorMsgs = _a.errorMsgs, isInRTE = _a.isInRTE, invert = _a.invert;
     var _b = (0, react_1.useState)(true), isValidURL = _b[0], setIsValidURL = _b[1];
     var createEmbedPreview = function () {
@@ -63,4 +63,4 @@ function IFrame(_a) {
                 react_1.default.createElement(TextInputs_1.URLInput, { placeholder: placeholder || 'Enter a valid embedable url', onChange: function (k, v) { return onChange(k, v); }, value: value, isRequired: isRequired, label: label, S: true, invert: invert, readOnly: readOnly, sublabel: sublabel, passValidationErrorToFormValidation: function (type) { return type === "error" ? setIsValidURL(false) : setIsValidURL(true); }, icon: "LinkSimple", clearBtn: !isInRTE && { text: "Clear", onClick: function () { return onChange(undefined); }, invert: invert } }),
                 createEmbedPreview())));
 }
-exports.default = IFrame;
+exports.default = IFrameInput;

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  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) {
+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) {
     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

@@ -58,7 +58,7 @@ export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
 export { default as AudioInput } from "./components/AudioInput";
-export { default as IFrame } from "./components/IFrame";
+export { default as IFrameInput } from "./components/IFrameInput";
 export { ModalConfirmAction } from "./components/Modals/derivedComps/ModalConfirmAction";
 export { SimpleTable } from "./components/SimpleTable";
 export { styledOKELinkCSS } from "./components/OKELink/styled";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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.BannerInfo = exports.BannerAlert = exports.IFrameInput = 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.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
@@ -143,8 +143,8 @@ var VideoInput_1 = require("./components/VideoInput");
 Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });
 var AudioInput_1 = require("./components/AudioInput");
 Object.defineProperty(exports, "AudioInput", { enumerable: true, get: function () { return __importDefault(AudioInput_1).default; } });
-var IFrame_1 = require("./components/IFrame");
-Object.defineProperty(exports, "IFrame", { enumerable: true, get: function () { return __importDefault(IFrame_1).default; } });
+var IFrameInput_1 = require("./components/IFrameInput");
+Object.defineProperty(exports, "IFrameInput", { enumerable: true, get: function () { return __importDefault(IFrameInput_1).default; } });
 //banners
 var Banners_1 = require("./components/Banners");
 Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });

package/package.json

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