oolib 2.82.1 → 2.82.3

package/dist/components/Dropdowns/DropdownMulti/index.js

@@ -66,7 +66,7 @@ function DropdownMulti(_a) {
     S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
-    var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme });
+    var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
     var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
     //2 INIT SHOW OPTIONS STATE

package/dist/components/Dropdowns/DropdownSingle/index.js

@@ -75,7 +75,7 @@ function DropdownSingle(_a) {
     ;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
-    var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme });
+    var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
     var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
     //2 INIT SHOW OPTIONS STATE

package/dist/components/Dropdowns/utils/getValue.d.ts

@@ -1,12 +1,14 @@
-export function getValue_SINGLE({ valueProp, optionsFn, options, theme }: {
+export function getValue_SINGLE({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;
     options: any;
     theme: any;
+    saveValueAsString: any;
 }): any;
-export function getValue_MULTI({ valueProp, optionsFn, options, theme }: {
+export function getValue_MULTI({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;
     options: any;
     theme: any;
+    saveValueAsString: any;
 }): any;

package/dist/components/Dropdowns/utils/getValue.js

@@ -9,18 +9,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getValue_MULTI = exports.getValue_SINGLE = void 0;
 var getAllOptionsFns_1 = require("./getAllOptionsFns");
+// Note: - saveValueAsString can be misleading here, because the value could be a string, integer, boolean values
+// maybe we can rename to saveValueOnly, or some better name
 var getValue_SINGLE = function (_a) {
     var _b;
-    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
-    return !!valueProp === true && typeof valueProp === 'string'
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
+    return saveValueAsString
         ? (optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, (optionsFn.args || [])) : options).find(function (d) { return d.value === valueProp; })
         : valueProp;
 };
 exports.getValue_SINGLE = getValue_SINGLE;
 var getValue_MULTI = function (_a) {
-    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
-    return !!valueProp === true && valueProp.every(function (v) { return typeof v === 'string'; })
-        ? valueProp.map(function (vProp) {
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
+    return saveValueAsString
+        ? valueProp === null || valueProp === void 0 ? void 0 : valueProp.map(function (vProp) {
             var _a;
             return (optionsFn ? (_a = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_a, (optionsFn.args || [])) : options).find(function (d) { return d.value === vProp; });
         })

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/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/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ export namespace icons {
     export { PencilLine };
     export { Plus };
     export { Lightbulb };
+    export { Tag };
     export { UploadSimple };
     export { CaretLeft };
     export { CaretRight };
@@ -161,6 +162,7 @@ import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
 import { Plus } from "phosphor-react";
 import { Lightbulb } from "phosphor-react";
+import { Tag } from "phosphor-react";
 import { UploadSimple } from "phosphor-react";
 import { CaretLeft } from "phosphor-react";
 import { CaretRight } from "phosphor-react";

package/dist/icons/index.js

@@ -8,6 +8,7 @@ exports.icons = {
     PencilLine: phosphor_react_1.PencilLine,
     Plus: phosphor_react_1.Plus,
     Lightbulb: phosphor_react_1.Lightbulb,
+    Tag: phosphor_react_1.Tag,
     UploadSimple: phosphor_react_1.UploadSimple,
     CaretLeft: phosphor_react_1.CaretLeft,
     CaretRight: phosphor_react_1.CaretRight,

package/package.json

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