oolib 2.107.1 → 2.108.1

package/dist/components/Dropdowns/DropdownSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled, tagColor }: {
+export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled, tagColor, observerRef }: {
     optionsAnchor: any;
     lightboxHeight: any;
     lightboxStyle: any;
@@ -33,5 +33,6 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     S: any;
     disabled: any;
     tagColor: any;
+    observerRef: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

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

@@ -72,7 +72,7 @@ function DropdownSingle(_a) {
     searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, genCustomSelectComp = _a.genCustomSelectComp, placeholder = _a.placeholder, //
     genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, //
     disabled = _a.disabled, //
-    tagColor = _a.tagColor;
+    tagColor = _a.tagColor, observerRef = _a.observerRef;
     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, saveValueAsString: saveValueAsString });
@@ -152,7 +152,7 @@ function DropdownSingle(_a) {
                 S: S,
                 disabled: disabled
             })))),
-            react_1.default.createElement(OptionsSingle_1.OptionsSingle, { lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, searchString: searchString, setSearchString: setSearchString, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, invert: invert, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
+            react_1.default.createElement(OptionsSingle_1.OptionsSingle, { observerRef: observerRef, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, searchString: searchString, setSearchString: setSearchString, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, invert: invert, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
                 //combobox specific
                 isSearchable: isTagsStyle ? false : isSearchable, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
     };

package/dist/components/Dropdowns/comps/OptionContent/index.d.ts

@@ -1,7 +1,8 @@
-export function OptionContent({ option, optionsClassName, invert, S }: {
+export function OptionContent({ option, optionsClassName, invert, S, observerRef }: {
     option: any;
     optionsClassName: any;
     invert: any;
     S: any;
+    observerRef: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/OptionContent/index.js

@@ -12,11 +12,11 @@ var Typo_1 = require("../../../Typo");
 var styled_components_1 = require("styled-components");
 var genColor_1 = require("../../utils/genColor");
 var OptionContent = function (_a) {
-    var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S;
+    var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef;
     var theme = (0, styled_components_1.useTheme)();
     var TypoComp = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
     var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color;
-    return (react_1.default.createElement("div", { style: {
+    return (react_1.default.createElement("div", { ref: observerRef, style: {
             display: "flex",
             alignItems: "flex-start",
             gap: "1rem",

package/dist/components/Dropdowns/comps/OptionsSingle/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S }: {
+export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, genCreateTagButton, invert, popOutOfOverflowHiddenParent, enableUseSetYOrientation, S, observerRef }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -21,5 +21,6 @@ export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, va
     popOutOfOverflowHiddenParent: any;
     enableUseSetYOrientation?: boolean;
     S: any;
+    observerRef: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/Dropdowns/comps/OptionsSingle/index.js

@@ -58,7 +58,7 @@ var OptionsSingle = function (_a) {
     relativeToRef = _a.relativeToRef, //the element that this lightbox is being rendered against. i.e top or bottom
     showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, handleSelect = _a.handleSelect, options = _a.options, isSearchable = _a.isSearchable, label = _a.label, optionsModalLabel = _a.optionsModalLabel, //label is just a fallback for optionsModalLabel. Don't know why both are needed
     searchString = _a.searchString, setSearchString = _a.setSearchString, SelectComp = _a.SelectComp, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, _b = _a.enableUseSetYOrientation, enableUseSetYOrientation = _b === void 0 ? true : _b, // if using this component standalone, this should be set to false ( if relativeToRef is not being passed thru)
-    S = _a.S
+    S = _a.S, observerRef = _a.observerRef
     //disabled only with this is being used for the RTEEmbedLightbox. Also this might be temp.
     //ensure this is set to false, if you are not passing a 'relativeToRef'
     ;
@@ -113,7 +113,7 @@ var OptionsSingle = function (_a) {
                                 if (!option.loading)
                                     handleSelect(option);
                                 setSearchString && setSearchString('');
-                            }, S: S, style: style && style }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: option, optionsClassName: optionsClassName, invert: invert, S: S }))));
+                            }, S: S, style: style && style }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: option, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: observerRef }))));
                     }),
             genCreateTagButton && genCreateTagButton(options))));
 };

package/dist/components/ResourceInput/index.js

@@ -54,6 +54,8 @@ var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 var ResourceDisplayBlock_1 = require("./comp/ResourceDisplayBlock");
 var styled_1 = require("./styled");
 var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
+var utilsOolib_1 = require("../../utilsOolib");
+var themes_1 = require("../../themes");
 var Plus = icons_1.icons.Plus;
 var ResourceInput = function (props) {
     var parentOnChange = props.onChange, comp_id = props.id, _a = props.folderName, folderName = _a === void 0 ? "media" : _a, value = props.value, _b = props.multiple, multiple = _b === void 0 ? true : _b, uploadBtnText = props.uploadBtnText, readOnly = props.readOnly, invert = props.invert;
@@ -112,9 +114,9 @@ var ResourceInput = function (props) {
         react_1.default.createElement(styled_1.StyledWrapper, null,
             react_1.default.createElement(ResourceDisplayBlock_1.ResourceDisplayBlock, { resources: resources, filesLength: filesLength, uploadProgress: uploadProgress, invert: invert, removeResource: function (id) { return removeResource(id); } }),
             !readOnly &&
-                react_1.default.createElement(styled_1.StyledUploadButton, { onClick: function () { return inputRef.current.click(); }, invert: invert },
-                    react_1.default.createElement(Plus, { stroke: 'white', size: 20, weight: 'bold' }),
-                    react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { marginTop: '0.5rem' } }, uploadBtnText || "Add Resource"))),
+                react_1.default.createElement(styled_1.StyledUploadButton, { onClick: function () { return inputRef.current.click(); }, invert: invert, theme: theme },
+                    react_1.default.createElement(Plus, { color: invert ? (0, utilsOolib_1.getPrimaryColor40)(themes_1.colors) : (0, utilsOolib_1.getPrimaryColorText)(themes_1.colors), size: 20, weight: 'bold', "style-": { border: 'none' } }),
+                    react_1.default.createElement(Typo_1.SANS_3, { semibold: true, style: { marginTop: '0.5rem' } }, uploadBtnText || "Add Resource"))),
         react_1.default.createElement("input", { id: "".concat(comp_id, "_resources_uploader"), type: "file", multiple: multiple, style: { display: 'none' }, ref: inputRef, onChange: function (v) { return handleUpload(v.target.files); } })));
 };
 exports.ResourceInput = ResourceInput;

package/dist/components/ResourceInput/styled.js

@@ -12,18 +12,23 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var mixins_1 = require("../../themes/mixins");
 var utilsOolib_1 = require("../../utilsOolib");
-exports.StyledUploadButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    background-color: ", "; \n\n\n    ", "\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    background-color: ", "; \n\n\n    ", "\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), function (_a) {
+var white = colors_1.colors.white, greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80;
+exports.StyledUploadButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    border: 2px solid ", ";\n\n    background-color: ", "; \n\n    &:hover {\n\n      background-color: ", ";\n\n    } \n\n    ", "\n\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n    border: none;\n    width: 14rem;\n    height: 14rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    cursor: pointer;\n    color: ", ";;\n    text-align: center;\n    \n    border: 2px solid ", ";\n\n    background-color: ", "; \n\n    &:hover {\n\n      background-color: ", ";\n\n    } \n\n    ", "\n\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), function (_a) {
     var invert = _a.invert;
-    return invert ? colors_1.colors.greyColor100 : 'white';
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColorText)(colors_1.colors);
 }, function (_a) {
-    var invert = _a.invert;
-    return invert ? (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors);
-}, (0, mixins_1.transition)('background-color'), function (_a) {
-    var invert = _a.invert;
-    return invert ? (0, utilsOolib_1.getPrimaryColor10)(colors_1.colors) : (0, utilsOolib_1.getPrimaryColor40)(colors_1.colors);
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? (0, utilsOolib_1.getPrimaryColor40)(colors)
+        : (0, utilsOolib_1.getPrimaryColor100)(colors);
 }, function (_a) {
     var invert = _a.invert;
-    return invert ? colors_1.colors.greyColor100 : (0, utilsOolib_1.getPrimaryColorText)(colors_1.colors);
-});
+    return invert ? greyColor100 : white;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? greyColor80
+        : (0, utilsOolib_1.getPrimaryColor40)(colors);
+}, (0, mixins_1.transition)('background-color'));
 exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  \n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  \n"])));
 var templateObject_1, templateObject_2;

package/package.json

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