oolib 2.57.2 → 2.57.3

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

@@ -0,0 +1,173 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsMulti = void 0;
+var react_1 = __importStar(require("react"));
+var OptionsShell_1 = require("../OptionsShell");
+var colors_1 = require("../../../../themes/colors");
+var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
+var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
+var NoOptionResultsComp_1 = require("../NoOptionResultsComp");
+var OptionContent_1 = require("../OptionContent");
+var styled_1 = require("../OptionsSingle/styled");
+var CheckboxButton_1 = require("../../../RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton");
+var Divider_1 = require("../../../Divider");
+var TextInputs_1 = require("../../../TextInputs");
+var Typo_1 = require("../../../Typo");
+var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
+var greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
+var CheckboxButtonShell = function (_a) {
+    var children = _a.children, isSelected = _a.isSelected, invert = _a.invert;
+    return (react_1.default.createElement("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            position: "relative",
+        } },
+        react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement("div", { className: "OKE-Dropdown__checkboxClickArea" }),
+            react_1.default.createElement(CheckboxButton_1.CheckboxButton, { invert: invert, isSelected: isSelected, className: "OKE-Dropdown__checkboxClickArea-box" })),
+        children));
+};
+var OptionsMulti = function (_a) {
+    var 
+    //from root
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, value = _a.value, id = _a.id, optionsClassName = _a.optionsClassName, 
+    //from Dropdown
+    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, // for mobile
+    isTagsStyle = _a.isTagsStyle, genCreateTagButton = _a.genCreateTagButton, invert = _a.invert, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S;
+    //INIT ORIENTATION STATE AND CUSTOM HOOK
+    var optionsRef = (0, react_1.useRef)(null);
+    var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
+        showOptions: showOptions,
+        optionsRef: optionsRef,
+        relativeToRef: relativeToRef,
+    }).yOrientation;
+    //RESET SEARCHSTRING WHEN OPTIONS ARE CLOSED
+    (0, react_1.useEffect)(function () {
+        if (!showOptions && !!searchString === true)
+            setSearchString("");
+    }, [showOptions]);
+    var selectedOptions = (0, react_1.useMemo)(function () {
+        return value || [];
+        //we need this to update on optionsProp, cuz when tag is created inTagsInputMulti
+        //opsProp changes.
+        //if we use value as dep, then this will update on every onChange, which we dont want.
+    }, [
+        // showOptions,
+        JSON.stringify(options),
+        value,
+    ]);
+    var _b = (0, useKeyboardControl_1.useKeyboardControl)({
+        showOptions: showOptions,
+        optionsWrapperRef: optionsRef,
+        handleHideOptions: handleHideOptions,
+        handleSelect: handleSelect,
+        options: options,
+        searchString: searchString,
+        id: id,
+    }), scrollFocussedOpIntoView = _b.scrollFocussedOpIntoView, focussedOp = _b.focussedOp;
+    var opIsSelected = function (thisOpData) {
+        return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
+    };
+    var _c = (0, react_1.useState)(true), searchBarFocus = _c[0], setSearchBarFocus = _c[1];
+    (0, react_1.useEffect)(function () {
+        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 }))));
+    };
+    var createSelectedOptions = function () {
+        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", { style: {
+                borderBottom: "1px solid ".concat(greyColor40),
+            } },
+            react_1.default.createElement(Typo_1.LABEL, { invert: invert, style: { padding: "2rem", paddingBottom: 0 }, color: colors_1.colors.greyColor70 }, "selected"),
+            selectedOptions.map(function (d) { return (react_1.default.createElement(styled_1.StyledOption, { invert: invert, key: d.value, isSelected: opIsSelected(d), className: "OKE-Dropdown__option", onClick: function (e) {
+                    if (!d.loading) {
+                        handleSelect(d);
+                        setSearchString("");
+                        setSearchBarFocus(true); //refocus on searchbar after select
+                    }
+                }, 
+                //this is important cuz if we dont, then the option will have the light blue background of the 'selected' state
+                //is a bit hacky, but will do for now.
+                style: { backgroundColor: invert ? colors_1.colors.greyColor90 : white } }, createOption(d))); })));
+    };
+    var genSearchBar = function () { return (react_1.default.createElement("div", { style: {
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+            background: invert ? colors_1.colors.greyColor90 : colors_1.colors.white,
+        } },
+        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
+    }),
+        isSearchable && genSearchBar(),
+        !isTagsStyle && createSelectedOptions(),
+        options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (options.map(function (d, i) {
+            return (react_1.default.createElement(styled_1.StyledOption, { key: d.value, invert: invert, isSelected: opIsSelected(d), isFocussed: focussedOp === i, className: "OKE-Dropdown__option", ref: function (el) {
+                    return focussedOp === i && el && scrollFocussedOpIntoView(el);
+                }, onClick: function (e) {
+                    if (!d.loading) {
+                        handleSelect(d);
+                        setSearchBarFocus(true);
+                        setSearchString("");
+                        setFocusSelectTagsInput && setFocusSelectTagsInput(true);
+                    }
+                }, S: S }, d.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (createOption(d))));
+        })),
+        genCreateTagButton && genCreateTagButton(options)));
+};
+exports.OptionsMulti = OptionsMulti;

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

@@ -0,0 +1 @@
+export const OptionsShell: any;

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

@@ -0,0 +1,81 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsShell = void 0;
+var framer_motion_1 = require("framer-motion");
+var react_1 = __importStar(require("react"));
+var styled_1 = require("../OptionsSingle/styled");
+var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
+var ModalLarge_1 = require("../../../Modals/ModalLarge");
+var mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
+var Buttons_1 = require("../../../Buttons");
+var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
+var styled_2 = require("./styled");
+exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
+    var _b;
+    var _c;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _d = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _d === void 0 ? false : _d, relativeToRef = _a.relativeToRef, S = _a.S;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
+    var _e = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _e.fixPos, applyFixedPos = _e.applyFixedPos, removeFixedPos = _e.removeFixedPos, trackerRef = _e.trackerRef;
+    (0, react_1.useEffect)(function () {
+        if (popOutOfOverflowHiddenParent) {
+            if (showOptions)
+                applyFixedPos();
+            else
+                removeFixedPos();
+        }
+    }, [showOptions]);
+    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
+        popOutOfOverflowHiddenParent &&
+            react_1.default.createElement("div", { ref: trackerRef }),
+        react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: 'StyledOptionsWrapper', ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
+            // className={className}
+            style: __assign(__assign(__assign({}, (lightboxStyle || {})), { display: showOptions ? "block" : "none" }), (fixPos
+                ? __assign({ position: 'fixed', top: "".concat(fixPos.y - (yOrientation === 'top' ? ((selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0) : 0), "px"), left: "".concat(fixPos.x, "px"), width: "max-content" }, (yOrientation === 'top' ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom" ? { bottom: 0, transform: "translateY(100%)" } : { top: 0, transform: "translateY(-100%)" })))) }, children))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },
+        SelectComp && SelectComp,
+        react_1.default.createElement(styled_2.StyledModalOptionsWrapper, { invert: invert, ref: ref }, children),
+        showDoneButton &&
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: invert ? themes_1.colors.greyColor90 : themes_1.colors.white,
+                    padding: '1rem 2rem',
+                    position: 'sticky',
+                    bottom: '0'
+                } },
+                react_1.default.createElement(Buttons_1.ButtonPrimary, { children: 'Done', width: '100%', onClick: handleHideOptions, S: S })))) : null));
+});

package/dist/components/Dropdowns/comps/OptionsShell/styled.d.ts

@@ -0,0 +1 @@
+export const StyledModalOptionsWrapper: any;

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

@@ -0,0 +1,17 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledModalOptionsWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../../themes");
+exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"], ["\n  position: relative;\n  padding-left: 0;\n  cursor: pointer;\n  background-color: ", ";\n  width: 100%;\n  min-width: max-content;\n  min-width: -moz-max-content;\n  overflow: auto;\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
+});
+var templateObject_1;

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

@@ -0,0 +1,24 @@
+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 }: {
+    lightboxHeight: any;
+    lightboxStyle: any;
+    optionsAnchor: any;
+    value: any;
+    id: any;
+    optionsClassName: any;
+    relativeToRef: any;
+    showOptions: any;
+    handleHideOptions: any;
+    handleSelect: any;
+    options: any;
+    isSearchable: any;
+    label: any;
+    optionsModalLabel: any;
+    searchString: any;
+    setSearchString: any;
+    SelectComp: any;
+    genCreateTagButton: any;
+    invert: any;
+    popOutOfOverflowHiddenParent: any;
+    enableUseSetYOrientation?: boolean;
+    S: any;
+}): any;

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

@@ -0,0 +1,117 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsSingle = void 0;
+var react_1 = __importStar(require("react"));
+var NoOptionResultsComp_1 = require("../NoOptionResultsComp");
+var OptionContent_1 = require("../OptionContent");
+var OptionsShell_1 = require("../OptionsShell");
+var styled_1 = require("./styled");
+var themes_1 = require("../../../../themes");
+var Divider_1 = require("../../../Divider");
+var TextInputs_1 = require("../../../TextInputs");
+var TextLoader_1 = require("../../../LoadersAndProgress/TextLoader");
+var useKeyboardControl_1 = require("../../utils/useKeyboardControl");
+var useSetYOrientation_1 = require("../../utils/useSetYOrientation");
+/**
+ * if used independently, must be used inside a 'position: relative/absolute' div.
+ */
+var OptionsSingle = function (_a) {
+    var 
+    //from root
+    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, value = _a.value, id = _a.id, optionsClassName = _a.optionsClassName, 
+    //from Dropdown
+    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
+    //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'
+    ;
+    //INIT ORIENTATION STATE AND CUSTOM HOOK
+    var optionsRef = (0, react_1.useRef)(null);
+    var yOrientation = (0, useSetYOrientation_1.useSetYOrientation)({
+        showOptions: showOptions,
+        optionsRef: optionsRef,
+        relativeToRef: relativeToRef,
+        enabled: enableUseSetYOrientation
+    }).yOrientation;
+    var _c = (0, useKeyboardControl_1.useKeyboardControl)({
+        showOptions: showOptions,
+        optionsWrapperRef: optionsRef,
+        handleHideOptions: handleHideOptions,
+        handleSelect: handleSelect,
+        options: options,
+        searchString: searchString,
+        id: id,
+    }), scrollFocussedOpIntoView = _c.scrollFocussedOpIntoView, focussedOp = _c.focussedOp;
+    var _d = (0, react_1.useState)(true), searchBarFocus = _d[0], setSearchBarFocus = _d[1];
+    (0, react_1.useEffect)(function () {
+        setSearchBarFocus(showOptions);
+    }, [showOptions]);
+    var genSearchBar = function () { return (react_1.default.createElement("div", { style: { position: 'sticky', top: 0, zIndex: 1, background: invert ? themes_1.colors.greyColor90 : themes_1.colors.white } },
+        react_1.default.createElement("div", { style: { padding: "1rem" } },
+            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(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
+    }),
+        isSearchable && genSearchBar(),
+        options.length === 0
+            ? react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })
+            : options.map(function (d, i) {
+                return (react_1.default.createElement(styled_1.StyledOption, { key: d.value, invert: invert, isSelected: !d.loading && (value === null || value === void 0 ? void 0 : value.value) === d.value, isFocussed: focussedOp === i, className: 'OKE-Dropdown__option', ref: function (el) { return focussedOp === i && el && scrollFocussedOpIntoView(el); }, onClick: function (e) {
+                        if (!d.loading)
+                            handleSelect(d);
+                        setSearchString && setSearchString('');
+                    }, S: S }, d.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, __assign({}, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })))));
+            }),
+        genCreateTagButton && genCreateTagButton(options)));
+};
+exports.OptionsSingle = OptionsSingle;

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

@@ -0,0 +1,2 @@
+export const StyledOptionsWrapper: any;
+export const StyledOption: any;

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

@@ -0,0 +1,71 @@
+"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.StyledOption = exports.StyledOptionsWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../themes");
+var mixins_1 = require("../../../../themes/mixins");
+var utilsOolib_1 = require("../../../../utilsOolib");
+exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    z-index: 100000;\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    border: 1px solid ", ";\n    border-bottom-right-radius: 2px;\n    border-bottom-left-radius: 2px;\n    ", ";\n    width: 100%;\n    min-width: max-content;\n    min-width: -moz-max-content;\n    max-width: 36rem;\n    overflow: auto;\n    background-color: ", ";\n    /* border: ", "; */\n    max-height: ", ";\n"], ["\n    z-index: 100000;\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    border: 1px solid ", ";\n    border-bottom-right-radius: 2px;\n    border-bottom-left-radius: 2px;\n    ", ";\n    width: 100%;\n    min-width: max-content;\n    min-width: -moz-max-content;\n    max-width: 36rem;\n    overflow: auto;\n    background-color: ", ";\n    /* border: ", "; */\n    max-height: ", ";\n"])), function (_a) {
+    var invert = _a.invert;
+    return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor5);
+}, mixins_1.boxShadow1, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert && "1px solid ".concat(themes_1.colors.greyColor80);
+}, function (_a) {
+    var lightboxHeight = _a.lightboxHeight;
+    switch (lightboxHeight) {
+        case 'large':
+            return '33rem';
+        case 'small':
+            return '20rem';
+        case 'medium':
+        default:
+            return '24rem';
+    }
+});
+exports.StyledOption = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: 0 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 2rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: 0 2rem;\n    ", "\n    ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n\n    &:last-of-type {\n      margin-bottom: 1rem;\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-right: 2rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+    var S = _a.S;
+    return !S
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n       \n        min-height: 4rem;\n      "], ["\n       \n        min-height: 4rem;\n      "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 3rem;\n      "], ["\n      height: 3rem;\n      "])));
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme, invert = _a.invert;
+    return isSelected
+        ? (invert ? themes_1.colors.greyColor70 : (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors))
+        : isFocussed
+            ? (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5)
+            : (invert ? themes_1.colors.greyColor90 : themes_1.colors.white);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,14 @@
+export function SelectDropdown({ invert, value, placeholder, caretColor, genCustomSelectComp, selectClassName, showOptions, disableSelectTextUpdate, selectConfig, selectStyleOverride, S, disabled, }: {
+    invert: any;
+    value: any;
+    placeholder: any;
+    caretColor: any;
+    genCustomSelectComp: any;
+    selectClassName: any;
+    showOptions: any;
+    disableSelectTextUpdate: any;
+    selectConfig?: string;
+    selectStyleOverride: any;
+    S: any;
+    disabled: any;
+}): any;

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

@@ -0,0 +1,56 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectDropdown = void 0;
+var react_1 = __importDefault(require("react"));
+var setDropdownSelectText_1 = require("../../utils/setDropdownSelectText");
+var Caret_1 = require("../Caret");
+var genIcon_1 = require("../../utils/genIcon");
+var Typo_1 = require("../../../Typo");
+var styled_1 = require("./styled");
+var SelectDropdown = function (_a) {
+    var 
+    //from root
+    invert = _a.invert, value = _a.value, placeholder = _a.placeholder, caretColor = _a.caretColor, genCustomSelectComp = _a.genCustomSelectComp, selectClassName = _a.selectClassName, 
+    //from Dropdown
+    showOptions = _a.showOptions, 
+    //used only for filters, where we dont remove the placeholder even when an option is selected, instead we sustain the blue underline
+    // && header where we dont update the menu title if one of its options is selected
+    disableSelectTextUpdate = _a.disableSelectTextUpdate, _b = _a.selectConfig, selectConfig = _b === void 0 ? "all" : _b, selectStyleOverride = _a.selectStyleOverride, //used curr only in access control table
+    S = _a.S, disabled = _a.disabled;
+    var dropdownSelectText = (0, setDropdownSelectText_1.setDropdownSelectText)({
+        placeholder: placeholder,
+        disableSelectTextUpdate: disableSelectTextUpdate,
+        value: value,
+        isTagsStyle: false,
+    });
+    var showElem = function (elem) {
+        if (selectConfig === "all")
+            return true;
+        //else
+        return selectConfig.indexOf(elem) !== -1 ? true : false;
+    };
+    var TypoComp = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
+    var genSelectComp = function () { return (react_1.default.createElement(styled_1.StyledSelectWrapper, { invert: invert, S: S, disabled: disabled, style: selectStyleOverride },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { style: { display: "flex", gap: "1rem", alignItems: "center" } },
+                showElem("icon") && (0, genIcon_1.genIcon)(value === null || value === void 0 ? void 0 : value.icon),
+                showElem("display") && (react_1.default.createElement(TypoComp, { semibold: dropdownSelectText.desc && showElem("desc") ? true : undefined, className: "".concat(selectClassName || "", " ").concat(!value && placeholder) }, dropdownSelectText.display))),
+            (dropdownSelectText === null || dropdownSelectText === void 0 ? void 0 : dropdownSelectText.desc) && showElem("desc") && (react_1.default.createElement(TypoComp, null, dropdownSelectText.desc))),
+        react_1.default.createElement(Caret_1.Caret, __assign({}, { caretColor: caretColor, showOptions: showOptions, invert: invert, disabled: disabled })))); };
+    return genCustomSelectComp ? genCustomSelectComp() : genSelectComp();
+};
+exports.SelectDropdown = SelectDropdown;

package/dist/components/Dropdowns/comps/SelectDropdown/styled.d.ts

@@ -0,0 +1 @@
+export const StyledSelectWrapper: any;

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

@@ -0,0 +1,61 @@
+"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.StyledSelectWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../../themes");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var mixins_1 = require("../../../../themes/mixins");
+exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"])), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
+}, function (_a) {
+    var disabled = _a.disabled, invert = _a.invert;
+    return disabled
+        ? themes_1.colors.greyColor40
+        : invert
+            ? themes_1.colors.greyColor5
+            : themes_1.colors.greyColor100;
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var S = _a.S;
+    return S && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    min-height: auto;\n    height: 3rem;\n  "], ["\n    min-height: auto;\n    height: 3rem;\n  "])));
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "])));
+}, function (_a) {
+    var invert = _a.invert, theme = _a.theme;
+    return invert ? themes_1.colors.white : (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, (0, mixins_1.transition)('width'), function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
+});
+var templateObject_1, templateObject_2, templateObject_3;