oolib 2.227.7 → 2.227.9

package/dist/v2/components/Dropdowns/DropdownMulti/index.d.ts

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

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

@@ -74,7 +74,7 @@ function DropdownMulti(_a) {
     optionsClassName = _a.optionsClassName, //used to override font size in priimary header
     selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
     //props whose existence needs to be questioned:
-    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d;
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d, observerRef = _a.observerRef;
     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, saveValueAsString: saveValueAsString });
@@ -127,15 +127,17 @@ function DropdownMulti(_a) {
     options = (0, react_1.useMemo)(function () {
         return (!isSearchable && !isTagsStyle)
             ? options
-            : (0, keywordSearchOptions_1.keywordSearchOptions)({
-                options: options,
-                searchString: searchString,
-                searchFieldsConfig: searchFieldsConfig,
-                setFilteredOptionsInParent: setFilteredOptionsInParent,
-            });
+            : !!observerRef === true //if this exists that means search is being handled on the backend via elastic search
+                ? options
+                : (0, keywordSearchOptions_1.keywordSearchOptions)({
+                    options: options,
+                    searchString: searchString,
+                    searchFieldsConfig: searchFieldsConfig,
+                    setFilteredOptionsInParent: setFilteredOptionsInParent,
+                });
     }, [
         searchString,
-        // showOptions, 
+        // showOptions,
         optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
         optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
         options,
@@ -192,7 +194,7 @@ function DropdownMulti(_a) {
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
                 } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
-            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
+            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { parentOnChange: parentOnChange, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, observerRef: observerRef, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp") },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.d.ts

@@ -1,4 +1,4 @@
-export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
+export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, parentOnChange, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, observerRef, searchbarPlaceholder, alignDropdown, matchSelectInputWidth }: {
     lightboxHeight: any;
     lightboxStyle: any;
     optionsAnchor: any;
@@ -22,6 +22,7 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
     setFocusSelectTagsInput: any;
     popOutOfOverflowHiddenParent: any;
     S: any;
+    observerRef: any;
     searchbarPlaceholder: any;
     alignDropdown: any;
     matchSelectInputWidth: any;

package/dist/v2/components/Dropdowns/comps/OptionsMulti/index.js

@@ -48,7 +48,7 @@ var OptionsMulti = 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, parentOnChange = _a.parentOnChange, 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, // for mobile
-    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
+    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown, matchSelectInputWidth = _a.matchSelectInputWidth;
     //INIT ORIENTATION STATE AND CUSTOM HOOK
     var optionsRef = (0, react_1.useRef)(null);
     var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
@@ -107,7 +107,7 @@ var OptionsMulti = function (_a) {
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth },
         react_1.default.createElement(List_1.List, { options: options, value: value, focussedOp: focussedOp, scrollFocussedOpIntoView: scrollFocussedOpIntoView, onChange: function (id, v) {
                 handleSelect(v);
-            }, optionsClassName: optionsClassName, S: S, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
+            }, optionsClassName: optionsClassName, S: S, observerRef: observerRef, isMulti: true, disableShadow: true, isSearchable: isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, children: !isTagsStyle && createSelectedOptions(), showList: showOptions, usedIn: "dropdown" }),
         genCreateTagButton && genCreateTagButton(options)));
 };
 exports.OptionsMulti = OptionsMulti;

package/dist/v2/components/TextInputs/index.d.ts

@@ -1,4 +1,4 @@
-export function TextInput({ S, id, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
+export function TextInput({ S, id, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, style, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
     S: any;
     id: any;
     disabled: any;
@@ -16,7 +16,8 @@ export function TextInput({ S, id, disabled, icon, type, placeholder, value, onC
     validateOnMount?: boolean;
     actionBtn: any;
     clearBtn: any;
-    className: any;
+    className?: string;
+    style?: {};
     maxLength: any;
     maxNumLimiter: any;
     forceFocus: any;

package/dist/v2/components/TextInputs/index.js

@@ -110,13 +110,13 @@ var BadgeVetted = icons_1.icons.BadgeVetted;
 function TextInput(_a) {
     var _this = this;
     var S = _a.S, id = _a.id, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
-    actionBtn = _a.actionBtn, clearBtn = _a.clearBtn, className = _a.className, maxLength = _a.maxLength, DEPRECATED_maxNumLimiter = _a.maxNumLimiter, forceFocus = _a.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
-    _e = _a.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
-    validateOnlyOnBlur = _e === void 0 ? false : _e, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
-    _validationStatus = _a.validationStatus, _f = _a.displayValidationMsg, displayValidationMsg = _f === void 0 ? true : _f, content = _a.content, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, plugin = _a.plugin;
+    actionBtn = _a.actionBtn, clearBtn = _a.clearBtn, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.style, style = _f === void 0 ? {} : _f, maxLength = _a.maxLength, DEPRECATED_maxNumLimiter = _a.maxNumLimiter, forceFocus = _a.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    _g = _a.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    validateOnlyOnBlur = _g === void 0 ? false : _g, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
+    _validationStatus = _a.validationStatus, _h = _a.displayValidationMsg, displayValidationMsg = _h === void 0 ? true : _h, content = _a.content, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, plugin = _a.plugin;
     var props = arguments[0];
     var theme = (0, styled_components_1.useTheme)();
-    var _g = (0, react_1.useState)(_validationStatus), validationStatus = _g[0], setValidationStatus = _g[1];
+    var _j = (0, react_1.useState)(_validationStatus), validationStatus = _j[0], setValidationStatus = _j[1];
     (0, react_1.useEffect)(function () {
         setValidationStatus(_validationStatus);
     }, [_validationStatus]);
@@ -193,7 +193,7 @@ function TextInput(_a) {
         forceFocus && inputRef.current && inputRef.current.focus();
     }, [forceFocus]);
     var localize = (0, utilsOolib_1.useLocale)();
-    return (react_1.default.createElement("div", { className: className },
+    return (react_1.default.createElement("div", { style: style, className: className },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
         readOnly ? (type === "url"
             ? react_1.default.createElement(OKELink_1.OKELink, { text: value, to: value })

package/package.json

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