oolib 2.110.1 → 2.111.1

package/dist/components/Coachmark/comps/MovingCoachmark/utils/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionMark = void 0;
+var styled_components_1 = require("styled-components");
+var putInEmptySide = function (elmCoords, arrowDegree) {
+    var leftSideSpace = elmCoords.left;
+    var rightSideSpace = document.documentElement.clientWidth - elmCoords.right;
+    //30px marginal factor (10% of the narrowset phone 'iphone SE')
+    if (leftSideSpace > rightSideSpace + 30) {
+        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      right: ", "px; // 4 : start at the quarter of the element\n    "], ["\n      right: ", "px; // 4 : start at the quarter of the element\n    "])), (document.documentElement.clientWidth - elmCoords.right) + elmCoords.width / 4);
+    }
+    else if (rightSideSpace > leftSideSpace + 30) {
+        return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: ", "px;"], ["left: ", "px;"])), elmCoords.left + elmCoords.width / 4);
+    }
+    else {
+        // the target is centered or not to the left nor right by that much
+        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", "px;\n      transform: translateX(-50%) ", ";\n    "], ["\n      left: ", "px;\n      transform: translateX(-50%) ", ";\n    "])), elmCoords.left + elmCoords.width / 2, arrowDegree ? "rotate(".concat(arrowDegree, "deg)") : ''); //center the coachmark too
+    }
+};
+var position2ndArg = function (elmCoords, pos) {
+    switch (pos) {
+        case 'left':
+            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["left: ", "px;"], ["left: ", "px;"])), elmCoords.left);
+        case 'right':
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["right: ", "px;"], ["right: ", "px;"])), document.documentElement.clientWidth - elmCoords.right);
+        case 'top':
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["top: ", "px;"], ["top: ", "px;"])), elmCoords.top);
+        case 'bottom':
+            return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["bottom: ", "px;"], ["bottom: ", "px;"])), document.documentElement.clientHeight - elmCoords.bottom);
+        default:
+            return;
+    }
+};
+var positionMark = function (targetElmCoords, markPos, arrowDegree) {
+    var possiblePoses = ['left', 'right', 'top', 'bottom'];
+    var arrowSpace = arrowDegree !== undefined ? -13 : 10; //this function is called for arrow || coachmark, arrow width: 13px, leaving 10px space on the side for it
+    var elmVerticalMiddle = targetElmCoords.top + targetElmCoords.height / 2 - 13; //-----------------------------↑
+    var use2ndArg = markPos[1] && possiblePoses.includes(markPos[1]);
+    switch (markPos[0]) {
+        case 'left':
+            return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        right: ", "px;\n        ", "\n      "], ["\n        right: ", "px;\n        ", "\n      "])), (document.documentElement.clientWidth - targetElmCoords.right) + targetElmCoords.width + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : "top: ".concat(elmVerticalMiddle, "px"));
+        case 'right':
+            return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        left: ", "px;\n        ", "\n    "], ["\n        left: ", "px;\n        ", "\n    "])), targetElmCoords.right + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : "top: ".concat(elmVerticalMiddle, "px"));
+        case 'top':
+            return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        bottom: ", "px;////////////////////// -100%???\n        ", "\n    "], ["\n        bottom: ", "px;////////////////////// -100%???\n        ", "\n    "])), (document.documentElement.clientHeight - targetElmCoords.bottom) + targetElmCoords.height + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : putInEmptySide(targetElmCoords, arrowDegree));
+        case 'bottom':
+            return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        top: ", "px;\n        ", "\n      "], ["\n        top: ", "px;\n        ", "\n      "])), targetElmCoords.bottom + arrowSpace, use2ndArg ? position2ndArg(targetElmCoords, markPos[1]) : putInEmptySide(targetElmCoords, arrowDegree));
+        default:
+            return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["position: relative"], ["position: relative"]))); // in case of a wrong position argument, re-center
+    }
+};
+exports.positionMark = positionMark;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/components/Coachmark/config.d.ts

@@ -0,0 +1,31 @@
+export default coachingList;
+declare namespace coachingList {
+    let H5PEmbed: ({
+        element: string;
+        mark: {
+            headline: string;
+            text: string;
+            image: any;
+            position?: undefined;
+            arrow?: undefined;
+        };
+    } | {
+        element: string;
+        mark: {
+            headline: string;
+            text: string;
+            image: any;
+            position: string;
+            arrow: boolean;
+        };
+    })[];
+    let AnalysisDashboard: {
+        element: string;
+        mark: {
+            headline: string;
+            text: string;
+            position: string;
+            arrow: boolean;
+        };
+    }[];
+}

package/dist/components/Coachmark/config.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// to be moved in the future .. being here is not optimal (oolib wise)
+// this file contain all coachmarks data for all comps using it
+var phone_tilt_png_1 = __importDefault(require("../../assets/images/phone-tilt.png"));
+var expand_arrows_png_1 = __importDefault(require("../../assets/images/expand-arrows.png"));
+var coachingList = {
+    H5PEmbed: [
+        {
+            element: 'set inside comp',
+            mark: {
+                headline: "Rotate your device",
+                text: "Enhance accesibility by rotating device to landscape mode",
+                image: phone_tilt_png_1.default,
+            }
+        },
+        {
+            element: 'set inside comp',
+            mark: {
+                headline: "Expand screen",
+                text: "Click on the expand button to access the presentation",
+                image: expand_arrows_png_1.default,
+                position: 'bottom right',
+                arrow: true,
+            }
+        }
+    ],
+    AnalysisDashboard: [
+        {
+            element: 'set inside comp',
+            mark: {
+                headline: "Set Country",
+                text: "Select All to see data across countries or select any one country to see it's data",
+                position: "bottom",
+                arrow: true
+            }
+        },
+        {
+            element: 'set inside comp',
+            mark: {
+                headline: "Set Research Areas",
+                text: "Select the research area from here",
+                position: "bottom",
+                arrow: true
+            }
+        },
+        {
+            element: 'set inside comp',
+            mark: {
+                headline: "Set Participant Type ",
+                text: "Select the participant type whose data you want to see",
+                position: "bottom",
+                arrow: true
+            }
+        }
+    ]
+};
+exports.default = coachingList;

package/dist/components/Coachmark/index.d.ts

@@ -0,0 +1,4 @@
+export function Coachmark(props: any): React.JSX.Element;
+import { useCoachmark } from './utils';
+import React from 'react';
+export { useCoachmark };

package/dist/components/Coachmark/index.js

@@ -0,0 +1,74 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCoachmark = exports.Coachmark = void 0;
+var react_1 = __importStar(require("react"));
+var MovingCoachmark_1 = __importDefault(require("./comps/MovingCoachmark"));
+var styled_1 = require("./styled");
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "useCoachmark", { enumerable: true, get: function () { return utils_1.useCoachmark; } });
+var Coachmark = function (props) {
+    var _a = props.active, active = _a === void 0 ? true : _a, _b = props.observerThreshold, observerThreshold = _b === void 0 ? 0.6 : _b, currentMark = props.currentMark, handleSkip = props.handleSkip, handleNext = props.handleNext, rank = props.rank;
+    var _c = (0, react_1.useState)(false), isElementInView = _c[0], setIsElementInView = _c[1];
+    (0, react_1.useEffect)(function () {
+        if ((currentMark === null || currentMark === void 0 ? void 0 : currentMark.element) instanceof Element) {
+            if (currentMark.mark.position && currentMark.mark.position !== 'center') {
+                if (isElementInView)
+                    currentMark.element.style.zIndex = 160;
+            }
+            return function () {
+                if (currentMark.element)
+                    currentMark.element.style.zIndex = 'auto';
+            };
+        }
+    });
+    if (!currentMark || !active)
+        return null;
+    var element = currentMark.element, mark = currentMark.mark;
+    var targetElm = element instanceof Element && element;
+    if (!targetElm)
+        return null;
+    var observer = new IntersectionObserver(function (entries, observer) {
+        setIsElementInView(entries[0].isIntersecting);
+    }, { threshold: observerThreshold }); // if 60% of the element is covered, it is intersecting
+    observer.observe(targetElm);
+    return isElementInView && (react_1.default.createElement(styled_1.StyledOverlay, null,
+        react_1.default.createElement(MovingCoachmark_1.default, __assign({ observer: observer, targetElm: targetElm, handleNext: handleNext, handleSkip: handleSkip, rank: rank }, mark))));
+};
+exports.Coachmark = Coachmark;

package/dist/components/Coachmark/styled.d.ts

@@ -0,0 +1 @@
+export const StyledOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Coachmark/styled.js

@@ -0,0 +1,37 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledOverlay = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var black_opacity30 = colors_1.colors.black_opacity30;
+var fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {opacity: 0}\n  to {opacity: 1}\n"], ["\n  from {opacity: 0}\n  to {opacity: 1}\n"])));
+var StyledOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  z-index: 150;\n  animation: ", " 0.5s linear; \n  display: grid;// centering the coachmark below by default, will have no\n  place-items: center;// effect if a position (other than 'center') is passed in the tooltip pbject\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  z-index: 150;\n  animation: ", " 0.5s linear; \n  display: grid;// centering the coachmark below by default, will have no\n  place-items: center;// effect if a position (other than 'center') is passed in the tooltip pbject\n"])), black_opacity30, fadeIn);
+exports.StyledOverlay = StyledOverlay;
+var templateObject_1, templateObject_2;

package/dist/components/Coachmark/utils/index.d.ts

@@ -0,0 +1,13 @@
+export function useCoachmark({ coachmarks, compIdentifier }: {
+    coachmarks: any;
+    compIdentifier?: string;
+}): {
+    activeMark: any;
+    rank: {
+        order: string;
+        isLast: boolean;
+    };
+    removeCoachmark: () => void;
+    showNextMark: (condition?: boolean) => void;
+    useReliableRef: (idx: any, dep?: any) => (node: any) => void;
+};

package/dist/components/Coachmark/utils/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCoachmark = void 0;
+var react_1 = require("react");
+var styled_components_1 = require("styled-components");
+var theme = (0, styled_components_1.useTheme)();
+var useCoachmark = function (_a) {
+    var coachmarks = _a.coachmarks, _b = _a.compIdentifier, compIdentifier = _b === void 0 ? '' : _b;
+    var _c = (0, react_1.useState)([]), elmsAttachedMarks = _c[0], setElmsAttachedMarks = _c[1];
+    var _d = (0, react_1.useState)(0), activeMarkIdx = _d[0], setActiveMarkIdx = _d[1];
+    var _e = (0, react_1.useState)(0), lastShownMark = _e[0], setLastShownMark = _e[1];
+    var setElmToMark = function (node, idx) {
+        if (idx instanceof Array) {
+            idx.forEach(function (i) { return coachmarks[i].element = node; });
+        }
+        else {
+            coachmarks[idx].element = node;
+        }
+        if (coachmarks.every(function (mark) { return mark.element instanceof Element; })) {
+            setElmsAttachedMarks(__spreadArray([], coachmarks, true));
+        }
+    };
+    var useReliableRef = function (idx, dep) {
+        if (dep === void 0) { dep = null; }
+        return (0, react_1.useCallback)(function (node) { return setElmToMark(node, idx); }, dep ? [dep] : []);
+    };
+    var showNextMark = function (condition) {
+        if (condition === void 0) { condition = true; }
+        if (condition) {
+            if (activeMarkIdx + 1 === elmsAttachedMarks.length) {
+                removeCoachmark();
+            }
+            else {
+                setActiveMarkIdx((activeMarkIdx === -1 ? lastShownMark : activeMarkIdx) + 1); // in case the mark was hidden temporarily if the condition isn't met 
+            }
+        }
+        else {
+            setLastShownMark(activeMarkIdx);
+            setActiveMarkIdx(-1);
+        }
+    };
+    var updateCoachmarkList = theme === null || theme === void 0 ? void 0 : theme.useUpdateCoachmarkChecklist();
+    // const {_Branch} = useGetQueryData('platformConfigs');
+    var removeCoachmark = function () {
+        if (process.env.REACT_APP_ENV !== 'dev') {
+            updateCoachmarkList.mutate({ property: compIdentifier, value: true });
+        }
+        setActiveMarkIdx(-1);
+    };
+    return {
+        activeMark: elmsAttachedMarks[activeMarkIdx],
+        rank: {
+            order: "".concat(activeMarkIdx + 1, "/").concat(elmsAttachedMarks.length),
+            isLast: activeMarkIdx === elmsAttachedMarks.length - 1
+        },
+        removeCoachmark: removeCoachmark,
+        showNextMark: showNextMark,
+        useReliableRef: useReliableRef
+    };
+};
+exports.useCoachmark = useCoachmark;

package/dist/components/DateRangePicker/index.d.ts

@@ -1,4 +1,4 @@
 declare const _default: React.MemoExoticComponent<typeof DateRangePicker>;
 export default _default;
 declare function DateRangePicker(props: any): React.JSX.Element;
-import React from "react";
+import React from 'react';

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

@@ -91,7 +91,7 @@ function DropdownMulti(_a) {
         // rm the selectedOps from ops list (since they are shown anyway in the selectedops list)
         return /*isTagsStyle ? ops : */ ops.filter(function (op) { return currentValue.every(function (v) { return v.value !== op.value; }); });
     }, [
-        JSON.stringify(optionsProp),
+        JSON.stringify(optionsProp), //we need this cuz options change from 'loading' to actual options in some cases
         // showOptions
         value
     ]);
@@ -140,21 +140,9 @@ function DropdownMulti(_a) {
             react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
     };
     var _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
-    var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({}, {
-        id: id,
-        value: value,
-        invert: invert,
-        handleSelect: handleSelect,
-        searchString: searchString,
+    var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString,
         setSearchString: setSearchString,
-        single_multi: "multi",
-        placeholder: placeholder,
-        focusSelectTagsInput: focusSelectTagsInput,
-        setFocusSelectTagsInput: setFocusSelectTagsInput,
-        showOptions: showOptions,
-        S: S,
-        disabled: disabled
-    }))); };
+        single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled })); };
     var genInputComp = function () {
         // const SelectComp = isTagsStyle ? SelectTagsInput : SelectDropdown 
         return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
@@ -162,19 +150,7 @@ function DropdownMulti(_a) {
                     isTagsStyle
                         ? !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, __assign({}, {
-                invert: invert,
-                value: value,
-                placeholder: placeholder,
-                selectClassName: selectClassName,
-                selectStyleOverride: selectStyleOverride,
-                showOptions: showOptions,
-                genCustomSelectComp: genCustomSelectComp,
-                disableSelectTextUpdate: disableSelectTextUpdate,
-                selectConfig: selectConfig,
-                S: S,
-                disabled: disabled
-            })))),
+                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
             react_1.default.createElement(OptionsMulti_1.OptionsMulti, { id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput(), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S })));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },

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

@@ -120,40 +120,16 @@ function DropdownSingle(_a) {
                     setFilteredOptionsInParent: setFilteredOptionsInParent,
                 });
     }, [optionsProp, optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn, searchString]);
-    var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({}, {
-        id: id,
-        value: value,
-        invert: invert,
-        handleSelect: handleSelect,
-        searchString: searchString,
-        setSearchString: setSearchString,
-        single_multi: 'single',
-        placeholder: placeholder,
-        S: S,
-        disabled: disabled,
-        showOptions: showOptions,
-        S: S
+    var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString, setSearchString: setSearchString, single_multi: 'single', placeholder: placeholder, S: S, disabled: disabled, showOptions: showOptions, S: S
         // forceFocus, comp is expecting this
-    }))); };
+     })); };
     var genInputComp = function () {
         return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
             react_1.default.createElement("div", { ref: selectRef, className: "OKE-Dropdown__Select-wrapper", onClick: disabled ? function () { } : function () {
                     isTagsStyle
                         ? !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, __assign({}, {
-                invert: invert,
-                value: value,
-                placeholder: placeholder,
-                genCustomSelectComp: genCustomSelectComp,
-                selectClassName: selectClassName,
-                selectStyleOverride: selectStyleOverride,
-                showOptions: showOptions,
-                disableSelectTextUpdate: disableSelectTextUpdate,
-                selectConfig: selectConfig,
-                S: S,
-                disabled: disabled
-            })))),
+                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, genCustomSelectComp: genCustomSelectComp, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
             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 })));
@@ -161,7 +137,7 @@ function DropdownSingle(_a) {
     var genDisplayComp = function () {
         if (!value)
             return null;
-        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme, color: tagColor }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert, S: S })));
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme, color: tagColor }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: value, invert: invert, S: S }));
     };
     return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : ""), style: style },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props) /** in other words, props. */)),

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -109,8 +98,8 @@ var OptionsMulti = function (_a) {
         setSearchBarFocus(showOptions);
     }, [showOptions]);
     var createOption = function (d) {
-        return isTagsStyle ? (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: d, optionsClassName: optionsClassName, invert: invert }))) : (react_1.default.createElement(CheckboxButtonShell, { invert: invert, isSelected: opIsSelected(d) },
-            react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: d, optionsClassName: optionsClassName, invert: invert, S: S }))));
+        return isTagsStyle ? (react_1.default.createElement(OptionContent_1.OptionContent, { option: d, optionsClassName: optionsClassName, invert: invert })) : (react_1.default.createElement(CheckboxButtonShell, { invert: invert, isSelected: opIsSelected(d) },
+            react_1.default.createElement(OptionContent_1.OptionContent, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })));
     };
     var createSelectedOptions = function () {
         return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", { style: {
@@ -139,23 +128,7 @@ var OptionsMulti = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(TextInputs_1.TextInput, { forceFocus: searchBarFocus, invert: invert, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
-        yOrientation: yOrientation,
-        lightboxHeight: lightboxHeight,
-        lightboxStyle: lightboxStyle,
-        options: options,
-        optionsAnchor: optionsAnchor,
-        showOptions: showOptions,
-        handleHideOptions: handleHideOptions,
-        SelectComp: SelectComp,
-        label: label,
-        optionsModalLabel: optionsModalLabel,
-        invert: invert,
-        showDoneButton: true,
-        popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
-        relativeToRef: relativeToRef,
-        S: S
-    }),
+    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, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S },
         isSearchable && genSearchBar(),
         !isTagsStyle && createSelectedOptions(),
         options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (options.map(function (d, i) {

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

@@ -60,17 +60,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, __assign({}, {
-            options: options,
-            optionsRef: ref,
-            relativeToRef: relativeToRef,
-            showOptions: showOptions,
-            invert: invert,
-            yOrientation: yOrientation,
-            fixPos: fixPos,
-            optionsAnchor: optionsAnchor,
-            children: children,
-        }),
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children },
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
                 style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(Modal_1.Modal, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -90,22 +79,7 @@ var OptionsSingle = function (_a) {
             react_1.default.createElement(TextInputs_1.TextInput, { invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(OptionsShell_1.OptionsShell, __assign({ ref: optionsRef }, {
-            yOrientation: yOrientation,
-            lightboxHeight: lightboxHeight,
-            lightboxStyle: lightboxStyle,
-            options: options,
-            optionsAnchor: optionsAnchor,
-            showOptions: showOptions,
-            SelectComp: SelectComp,
-            handleHideOptions: handleHideOptions,
-            label: label,
-            optionsModalLabel: optionsModalLabel,
-            invert: invert,
-            relativeToRef: relativeToRef,
-            popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent,
-            S: S,
-        }),
+        react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, invert: invert, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S },
             isSearchable && genSearchBar(),
             options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
                     return focussedOp === index && el && scrollFocussedOpIntoView(el);
@@ -113,13 +87,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,
-                observerRef: options.length === index + 1 ? observerRef : null,
-            }))))); })),
+                }, 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, { option: option, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null })))); })),
             genCreateTagButton && genCreateTagButton(options))));
 };
 exports.OptionsSingle = OptionsSingle;

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -59,7 +48,7 @@ var SelectDropdown = function (_a) {
                     //   dropdownSelectText.desc && showElem("desc") ? true : undefined
                     // }
                     className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display)))),
-        react_1.default.createElement(Caret_1.Caret, __assign({}, { showOptions: showOptions, invert: invert, disabled: disabled })))); };
+        react_1.default.createElement(Caret_1.Caret, { showOptions: showOptions, invert: invert, disabled: disabled }))); };
     return genCustomSelectComp ? genCustomSelectComp() : genSelectComp();
 };
 exports.SelectDropdown = SelectDropdown;