oolib 2.82.0 → 2.82.2

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -66,10 +66,12 @@ function ImageEditor(_a) {
     _underEditImageData = _a.underEditImageData, //ImageEditor passes this to its recursive self when opening in popup
     _setUnderEditImageData = _a.setUnderEditImageData, isInPopUp = _a.isInPopUp, isInRTE = _a.isInRTE;
     var theme = (0, styled_components_1.useTheme)();
-    var _b = theme || {}, RichTextEditor = _b.RichTextEditor, _c = _b.richTextHasValue //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
-    , richTextHasValue = _c === void 0 ? function () { return false; } : _c //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
-    ; //temporarily passed thru from okf
-    var _d = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _d[0], setUnderEditImageData = _d[1];
+    var _b = theme || {}, LexicalTextEditor = _b.LexicalTextEditor, _c = _b.lexicalTextEditorHasValue, lexicalTextEditorHasValue = _c === void 0 ? function () { return false; } : _c, //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
+    //backwards compat
+    _d = _b.richTextHasValue, //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
+    //backwards compat
+    richTextHasValue = _d === void 0 ? function () { return false; } : _d; //temporarily passed thru from okf
+    var _e = (0, react_1.useState)(_underEditImageData || undefined), underEditImageData = _e[0], setUnderEditImageData = _e[1];
     //set state in parent imageeditor
     (0, react_1.useEffect)(function () {
         _setUnderEditImageData && _setUnderEditImageData(underEditImageData);
@@ -83,15 +85,15 @@ function ImageEditor(_a) {
      * underEditImageData is merged into imageData, only if the 'formattings'
      * are 'saved'
      */
-    var _e = underEditImageData || imageData, publicUrl = _e.publicUrl, _f = _e.imageSpread, imageSpread = _f === void 0 ? defaultImageSpread : _f, _g = _e.imageRotate, imageRotate = _g === void 0 ? 0 : _g, _h = _e.cropX, cropX = _h === void 0 ? 0 : _h, _j = _e.cropY, cropY = _j === void 0 ? 0 : _j;
+    var _f = underEditImageData || imageData, publicUrl = _f.publicUrl, _g = _f.imageSpread, imageSpread = _g === void 0 ? defaultImageSpread : _g, _h = _f.imageRotate, imageRotate = _h === void 0 ? 0 : _h, _j = _f.cropX, cropX = _j === void 0 ? 0 : _j, _k = _f.cropY, cropY = _k === void 0 ? 0 : _k;
     /**
      * repos management
      */
     var wrapperRef = (0, react_1.useRef)(null);
     var renderedImageRef = (0, react_1.useRef)(null);
     var isFirstMount = (0, react_1.useRef)(true);
-    var _k = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _k[0], setFullWidthOrFullHeightImg = _k[1];
-    var _l = (0, useReorientImage_1.useReorientImage)({
+    var _l = (0, react_1.useState)(undefined), fullWidthOrFullHeightImg = _l[0], setFullWidthOrFullHeightImg = _l[1];
+    var _m = (0, useReorientImage_1.useReorientImage)({
         imageRotate: imageRotate,
         setFullWidthOrFullHeightImg: setFullWidthOrFullHeightImg,
         setUnderEditImageData: setUnderEditImageData,
@@ -101,10 +103,10 @@ function ImageEditor(_a) {
         isFirstMount: isFirstMount,
         handleDeleteSingleImage: handleDeleteSingleImage,
         readOnly: readOnly
-    }), reorientedImageTempUrl = _l.reorientedImageTempUrl, imageLazyLoading = _l.imageLazyLoading;
-    var _m = (0, react_1.useState)(undefined), showDeleteImageModal = _m[0], setShowDeleteImageModal = _m[1];
+    }), reorientedImageTempUrl = _m.reorientedImageTempUrl, imageLazyLoading = _m.imageLazyLoading;
+    var _o = (0, react_1.useState)(undefined), showDeleteImageModal = _o[0], setShowDeleteImageModal = _o[1];
     var inputRef = (0, react_1.useRef)(null);
-    var _o = (0, react_1.useState)(undefined), editorStyle = _o[0], setEditorStyle = _o[1]; //alt: modal
+    var _p = (0, react_1.useState)(undefined), editorStyle = _p[0], setEditorStyle = _p[1]; //alt: modal
     (0, react_1.useEffect)(function () { isFirstMount.current = false; }, []);
     var decideEditorStyle = function () {
         var _a = wrapperRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
@@ -196,7 +198,9 @@ function ImageEditor(_a) {
             handleUpload: handleUpload,
             isInRTE: isInRTE
         }))) : editorStyle === "toolbar" ? (genToolbarStyledEditor()) : (editorStyle === "modal" && genModalStyleEditor()))),
-        enableCaptions && (readOnly && !richTextHasValue(imageData.caption)
+        enableCaptions && (readOnly &&
+            !lexicalTextEditorHasValue(imageData.caption) &&
+            !richTextHasValue(imageData.caption) //backwards compat cuz its possible caption data might be in draftjs shape
             ? null
             : react_1.default.createElement(react_1.Fragment, null,
                 react_1.default.createElement(Divider_1.Divider, { invert: invert }),
@@ -204,12 +208,12 @@ function ImageEditor(_a) {
                         borderRadius: "0.2rem",
                         padding: readOnly ? "1rem" : "2rem",
                         backgroundColor: readOnly ? "initial" : invert ? themes_1.colors.greyColor90 : themes_1.colors.greyColor5,
-                    } }, !RichTextEditor
+                    } }, !LexicalTextEditor
                     ? (0, renderRTEPlaceholderForOolibPreview_1.renderRTEPlaceholderForOolibPreview)({
                         width: '100%',
                         height: '30px'
                     })
-                    : react_1.default.createElement(RichTextEditor, { variant: 'simple', disableNewline: true, invert: invert, placeholder: "type caption for image (optional)", readOnly: readOnly, charLimit: 100, typo: "SANS_3", placeholderColor: invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor40, value: imageData.caption, onChange: function (id, val) {
+                    : react_1.default.createElement(LexicalTextEditor, { variant: 'simple', disableNewline: true, invert: invert, placeholder: "type caption for image (optional)", readOnly: readOnly, charLimit: 100, typo: "SANS_3", placeholderColor: invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor40, value: imageData.caption, onChange: function (id, val) {
                             handleSingleImageDataChange({
                                 publicUrl: publicUrl,
                                 imageData: __assign(__assign({}, imageData), { caption: val }),

package/dist/components/LoadersAndProgress/LoaderOverlay/index.js

@@ -39,7 +39,7 @@ var LoaderOverlay = function (_a) {
                 opacity: 0.8,
                 top: 0,
                 left: 0,
-                zIndex: 100000,
+                zIndex: 1000000,
             } },
             react_1.default.createElement(LoaderCircle_1.LoaderCircle, { text: loaderText || "Generating Template...", isBlock: true, invert: true }))));
 };

package/dist/components/OKELink/styled.js

@@ -44,7 +44,7 @@ var genColor = function (_a) {
 };
 exports.genColor = genColor;
 //separated out this way so we can use it in LexicalTextEditor's StyledEditorWrapperLex
-exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"], ["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"])), function (_a) {
+exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"], ["\ncursor: ", ";\n    display: inline-flex;\n    gap: 0.7rem;\n    align-items: center;\n    max-width: 100%;\n    text-decoration: none;\n    position: relative;\n    color: ", ";\n\n    &::after{\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      pointer-events: ", ";\n      ", ";\n      background-color: ", ";\n    }\n\n    &:hover{\n        color: ", ";\n        &::after{ width: ", "; }\n    }\n"])), function (_a) {
     var disabled = _a.disabled;
     return !disabled ? 'pointer' : 'not-allowed';
 }, exports.genColor, function (_a) {
@@ -61,5 +61,5 @@ exports.styledOKELinkCSS = (0, styled_components_1.css)(templateObject_1 || (tem
     return invertUnderline ? '100%' : 0;
 });
 exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), exports.styledOKELinkCSS);
-exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    white-space: nowrap;\n  /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"], ["\n    white-space: nowrap;\n  /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"])));
+exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    max-width: 100%;\n    ", ";\n"], ["\n    max-width: 100%;\n    ", ";\n"])), mixins_1.ellipsis);
 var templateObject_1, templateObject_2, templateObject_3;

package/package.json

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