oolib 2.55.6 → 2.55.8

package/dist/components/DatePicker/index.js

@@ -208,7 +208,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 },
             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", invert: invert, disabled: disabled, onChange: handleOnChange, placeholder: "DD/MM/YYYY", maxLength: "10", onKeyDown: handleKeyDown, onBlur: handleFocusOut, onFocus: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
+                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: (0, handlePos_1.handleVerticalPos)(calenderRef, inputRef) }))),
             react_1.default.createElement(styled_1.StyledCalenderContainer, { ref: calenderRef, className: "calender-container ".concat(from ? 'right-class' : ''), invert: invert },
                 react_1.default.createElement(styled_1.StyledMonthView, null,
                     react_1.default.createElement(styled_1.StyledHeader, null,

package/dist/components/DatePicker/styled.js

@@ -13,12 +13,14 @@ var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
 var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100, primaryColor40 = themes_1.colors.primaryColor40;
 exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    width: fit-content;\n\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"], ["\n    position: relative;\n    width: fit-content;\n\n\n    &:focus-within .calender-container {\n        visibility: visible;\n    }\n\n"])));
-exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n        font-size: 1.6rem;\n    }\n\n"], ["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    font-size: 1.6rem;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n        font-size: 1.6rem;\n    }\n\n"])), function (_a) {
+exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"], ["\n    text-align: center;\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 13.2rem;\n    height: 4rem;\n    color: ", ";\n    &:hover {\n        background-color: ", ";\n        color: ", ";\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n"])), function (_a) {
     var invert = _a.invert;
     return (invert ? greyColor80 : greyColor5);
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
-    return disabled ? greyColor100 : invert && white;
+    return invert
+        ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
+        : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
 }, function (_a) {
     var invert = _a.invert, disabled = _a.disabled;
     return disabled ? greyColor15 : invert ? primaryColor40 : greyColor10;

package/dist/components/HomeCover/index.js

@@ -47,6 +47,7 @@ var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
 var HomeCover = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, desc = _a.desc, CTALink = _a.CTALink, customComp = _a.customComp, coverImagesConfig = _a.coverImagesConfig, _b = _a.variant, variant = _b === void 0 ? "default" : _b;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
     var history = (0, react_router_dom_1.useHistory)();
     //   const {deployment: {_CoverImages : coverImagesConfig}} = useGetQueryData('platformConfigs');
     //backwards compat
@@ -54,12 +55,26 @@ var HomeCover = function (_a) {
         ? coverImagesConfig
         : coverImagesConfig.map(function (c) { return c.publicUrl; });
     var _c = (0, react_1.useState)(undefined), dynamicTitleWidth = _c[0], setDynamicTitleWidth = _c[1];
-    var _d = (0, react_1.useState)({
+    var initDesktopState = {
         currLayer: "layer1",
         layer1: [0, 1],
         layer2: [2, 3],
-    }), coverImageIdx = _d[0], setCoverImageIdx = _d[1];
-    //console.log({_CoverImages:_CoverImages[coverImageIdx.layer1[0]]})
+    };
+    var initMobileState = {
+        currLayer: "layer1",
+        layer1: [0],
+        layer2: [1],
+    };
+    var _d = (0, react_1.useState)(isDesktop ? initDesktopState : initMobileState), coverImageIdx = _d[0], setCoverImageIdx = _d[1];
+    var firstMount = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        //basically if a switch happens between mobile and desktop then switch to the initial desktop / mobile state
+        if (firstMount.current)
+            firstMount.current = false;
+        else {
+            setCoverImageIdx(isDesktop ? initDesktopState : initMobileState);
+        }
+    }, [isDesktop]);
     var titleTextSpan_ref = (0, react_1.useRef)(null);
     var title_ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
@@ -83,10 +98,24 @@ var HomeCover = function (_a) {
                     setCoverImageIdx(function (prev) {
                         var _a;
                         var layerToSwitch = prev.currLayer === "layer1" ? "layer2" : "layer1";
-                        return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = [
-                            (prev[layerToSwitch][0] + 4) % _CoverImages.length,
-                            (prev[layerToSwitch][1] + 4) % _CoverImages.length,
-                        ], _a));
+                        return __assign(__assign({}, prev), (_a = {}, _a[layerToSwitch] = isDesktop
+                            ? /**
+                               * i.e there are 2 images showing ----------------> layer1 > img idx 0 | img idx 1
+                               * the hidden layer below that will reveal has ---> layer2 > img idx 2 | img idx 3
+                               *
+                               * after reveal, 0 needs to become 4 & 1 needs to become 5
+                               */
+                                [
+                                    (prev[layerToSwitch][0] + 4) % _CoverImages.length,
+                                    (prev[layerToSwitch][1] + 4) % _CoverImages.length,
+                                ]
+                            : /**
+                               * i.e there is only 1 image showing ----------------> layer1 > img idx 0
+                               * the hidden layer below that will reveal has ---> layer2 > img idx 1
+                               *
+                               * after reveal, 0 needs to become 2 & 1 needs to become 3
+                               */
+                                [(prev[layerToSwitch][0] + 2) % _CoverImages.length], _a));
                     });
                 }, 300); // the interval here shoudl be the same as the css transition interval
             }
@@ -96,22 +125,7 @@ var HomeCover = function (_a) {
             clearTimeout(timeout);
             clearInterval(interval);
         };
-    }, []);
-    //   const getFontSize = (titleLength) => {
-    //     let decay = (80 / (titleLength * 0.08));
-    //     let max = 40;
-    //     let min = 20;
-    //     return (
-    //       (decay < max && decay > min)
-    //       ? decay
-    //       : decay > max
-    //         ? 40
-    //         : decay < min
-    //         && 20
-    //     )
-    //   }
-    // console.log({MED:mediaQuery("md")})
-    var isDesktop = screenWidth > (0, mixins_1.getBreakPoint)("md");
+    }, [isDesktop]);
     var genCTALink = function (_a) {
         var CTALink = _a.CTALink, variant = _a.variant, isDesktop = _a.isDesktop;
         return CTALink && (react_1.default.createElement(Buttons_1.ButtonPrimary, { className: "HomeCover__cta", icon: "CaretRight", M: variant === "small" && !isDesktop && true, style: __assign({ position: "absolute", bottom: 0, borderRadius: 0, right: variant === "small" && !isDesktop ? "2rem" : 0 }, (variant === "small" && !isDesktop ? { zIndex: 100 } : {})), onClick: function () {

package/dist/index.js

@@ -85,7 +85,7 @@ var DateRangePicker_1 = require("./components/DateRangePicker");
 Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return __importDefault(DateRangePicker_1).default; } });
 var BarChart_1 = require("./components/dataViz/comps/BarChart");
 Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
-//// context
+////// context
 var contextApi_1 = require("./components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
 // export this

package/dist/utils/_EXPORTS/index.d.ts

@@ -11,4 +11,5 @@ export { useScroll } from "../customHooks/useScroll";
 export { usePopOutOfOverflowHiddenParent } from "../usePopOutOfOverflowHiddenParent";
 export { useHandleClickOutside } from "../customHooks/useHandleClickOutside";
 export { testJSON } from "../testJSON";
+export { useScreenWidth } from "../customHooks/useScreenWidth";
 export { getDaysDiff } from "../momentjs/getDaysDiff";

package/dist/utils/_EXPORTS/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDaysDiff = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.sortData = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
+exports.getDaysDiff = exports.useScreenWidth = exports.testJSON = exports.useHandleClickOutside = exports.usePopOutOfOverflowHiddenParent = exports.useScroll = exports.sortData = exports.toArray = exports.formatCamelCaseToSentenceCase = exports.formatTextToCamelCase = exports.injectHttps = exports.getBlockLabelProps = exports.deleteVal = exports.setVal = exports.getVal = void 0;
 //the holy setter, getter & deleter
 var getVal_1 = require("../getterSetterDeleter/getVal");
 Object.defineProperty(exports, "getVal", { enumerable: true, get: function () { return getVal_1.getVal; } });
@@ -30,6 +30,8 @@ var useHandleClickOutside_1 = require("../customHooks/useHandleClickOutside");
 Object.defineProperty(exports, "useHandleClickOutside", { enumerable: true, get: function () { return useHandleClickOutside_1.useHandleClickOutside; } });
 var testJSON_1 = require("../testJSON");
 Object.defineProperty(exports, "testJSON", { enumerable: true, get: function () { return testJSON_1.testJSON; } });
+var useScreenWidth_1 = require("../customHooks/useScreenWidth");
+Object.defineProperty(exports, "useScreenWidth", { enumerable: true, get: function () { return useScreenWidth_1.useScreenWidth; } });
 //moment js
 var getDaysDiff_1 = require("../momentjs/getDaysDiff");
 Object.defineProperty(exports, "getDaysDiff", { enumerable: true, get: function () { return getDaysDiff_1.getDaysDiff; } });

package/package.json

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