oolib 2.177.0 → 2.177.2

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

@@ -0,0 +1,38 @@
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, 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 }: {
+    saveValueAsString: any;
+    value: any;
+    id: any;
+    onChange: any;
+    className: any;
+    readOnly: any;
+    invert: any;
+    selectClassName: any;
+    optionsClassName: any;
+    selectStyleOverride: any;
+    optionsFn: any;
+    options: any;
+    isTagsStyle: any;
+    isSearchable: any;
+    searchFieldsConfig: any;
+    setFilteredOptions: any;
+    setSearchString: any;
+    searchString: any;
+    label: any;
+    optionsModalLabel: any;
+    genCreateTagButton: any;
+    placeholder: any;
+    genCustomSelectComp: any;
+    disableSelectTextUpdate: any;
+    selectConfig: any;
+    lightboxHeight: any;
+    lightboxStyle: any;
+    optionsAnchor: any;
+    popOutOfOverflowHiddenParent: any;
+    S: any;
+    disabled: any;
+    broadcastShowOptions: any;
+    tagColor: any;
+    searchbarPlaceholder: any;
+    alignDropdown?: string;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,172 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMulti = DropdownMulti;
+var mixins_1 = require("../../../../themes/mixins");
+var useHandleClickOutside_1 = require("../../../../utils/customHooks/useHandleClickOutside");
+var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
+var react_1 = __importStar(require("react"));
+var SelectTagsInput_1 = require("../comps/SelectTagsInput");
+var SelectDropdown_1 = require("../comps/SelectDropdown");
+var OptionsMulti_1 = require("../comps/OptionsMulti");
+var DisplayCompSingle_1 = require("../comps/DisplayCompSingle");
+var handlers_1 = require("../handlers");
+var useHideShowOptions_1 = require("../utils/useHideShowOptions");
+var useCreateDropdownRefs_1 = require("../utils/useCreateDropdownRefs");
+var keywordSearchOptions_1 = require("../utils/keywordSearchOptions");
+var getValue_1 = require("../utils/getValue");
+var generateOptions_1 = require("../utils/generateOptions");
+var useSearchString_1 = require("../utils/useSearchString");
+var styled_components_1 = require("styled-components");
+var genTagComp_1 = require("../utils/genTagComp");
+var styled_1 = require("../styled");
+var BlockLabel_1 = require("../../BlockLabel");
+var getBlockLabelProps_1 = require("../../../../utils/getBlockLabelProps");
+function DropdownMulti(_a) {
+    var saveValueAsString = _a.saveValueAsString, valueProp = _a.value, id = _a.id, parentOnChange = _a.onChange, className = _a.className, 
+    // injectOtherOption,
+    readOnly = _a.readOnly, invert = _a.invert, selectClassName = _a.selectClassName, //used to override font size in priimary header
+    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;
+    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 });
+    //1 INIT REFS
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
+    //2 INIT SHOW OPTIONS STATE
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
+        broadcastShowOptions: broadcastShowOptions
+    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    //3 INIT DD FOCUS CUSTOM HOOK
+    (0, useHandleClickOutside_1.useHandleClickOutside)(dropdownRef, handleHideOptions, { enabled: screenWidth >= (0, mixins_1.getBreakPoint)('sm') });
+    //-- TAG INPUT SPECIFIC
+    var _e = (0, useSearchString_1.useSearchString)({
+        setSearchStringInParent: setSearchStringInParent,
+        searchStringInParent: searchStringInParent
+    }), searchString = _e[0], setSearchString = _e[1];
+    var options = (0, react_1.useMemo)(function () {
+        var ops = (0, generateOptions_1.generateOptions)({
+            options: optionsProp,
+            optionsFn: optionsFn,
+            theme: theme
+            // injectOtherOption,
+        });
+        var currentValue = value || [];
+        // 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), //we need this cuz options change from 'loading' to actual options in some cases
+        // showOptions
+        value
+    ]);
+    options = (0, react_1.useMemo)(function () {
+        return (!isSearchable && !isTagsStyle)
+            ? options
+            : (0, keywordSearchOptions_1.keywordSearchOptions)({
+                options: options,
+                searchString: searchString,
+                searchFieldsConfig: searchFieldsConfig,
+                setFilteredOptionsInParent: setFilteredOptionsInParent,
+            });
+    }, [
+        searchString,
+        // showOptions, 
+        options,
+        value
+    ]);
+    /**
+     * very importnant to understand:
+     * Assume this second useMemo didnt have 'options' in its dependency array
+     * Lets assume initial state of options from previous render is length = 8
+     * If options change because of the first useMemo, (and lets say become of length 5)
+     * and lets say second memo doesnt fire cuz showOptions or searchString dont change,
+     * then the second useMemo sets the 'options' to its previous value in previous render (which is length = 8)
+     *
+     * obviously this causes bugs.
+     * so by putting options in the second useMemo dependency, we force the second one to fire
+     * if the options change
+     */
+    //--
+    //5 PRIMARY CHANGE HANDLER
+    var handleSelect = function (newVal) { return (0, handlers_1.handleSelect_MULTI)({
+        parentOnChange: parentOnChange,
+        id: id,
+        newVal: newVal,
+        prevVal: value,
+        parentOnChange: parentOnChange,
+        // hideShowOtherTextInputOnSelect_MULTI,
+        saveValueAsString: saveValueAsString
+    }); };
+    var genDisplayComp = function () {
+        if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
+            return null;
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme, color: tagColor }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
+    };
+    var _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[1];
+    var genSelectTagsInput = function (ops) {
+        if (ops === void 0) { ops = {}; }
+        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, style: ops.style }));
+    };
+    var genInputComp = function () {
+        // const SelectComp = isTagsStyle ? SelectTagsInput : SelectDropdown 
+        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, { 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, { searchbarPlaceholder: searchbarPlaceholder, 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({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown })));
+    };
+    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        readOnly ? genDisplayComp() : genInputComp()));
+}

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

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

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

@@ -0,0 +1,158 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownSingle = DropdownSingle;
+var react_1 = __importStar(require("react"));
+var OptionsSingle_1 = require("../comps/OptionsSingle");
+var SelectDropdown_1 = require("../comps/SelectDropdown");
+var SelectTagsInput_1 = require("../comps/SelectTagsInput");
+var DisplayCompSingle_1 = require("../comps/DisplayCompSingle");
+var handlers_1 = require("../handlers");
+var useHideShowOptions_1 = require("../utils/useHideShowOptions");
+var useCreateDropdownRefs_1 = require("../utils/useCreateDropdownRefs");
+var keywordSearchOptions_1 = require("../utils/keywordSearchOptions");
+var getValue_1 = require("../utils/getValue");
+var generateOptions_1 = require("../utils/generateOptions");
+var useSearchString_1 = require("../utils/useSearchString");
+var styled_components_1 = require("styled-components");
+var genTagComp_1 = require("../utils/genTagComp");
+var BlockLabel_1 = require("../../BlockLabel");
+var getBlockLabelProps_1 = require("../../../../utils/getBlockLabelProps");
+var mixins_1 = require("../../../../themes/mixins");
+var useHandleClickOutside_1 = require("../../../../utils/customHooks/useHandleClickOutside");
+var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
+var styled_1 = require("../styled");
+// single_multi
+// static_dynamic
+function DropdownSingle(_a) {
+    var optionsAnchor = _a.optionsAnchor, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, 
+    //to restructure: rename to TYPO = 'SANS_3' or something. which can be overridden
+    selectClassName = _a.selectClassName, //used to override font size in priimary header
+    optionsClassName = _a.optionsClassName, //used to override font size in priimary header
+    //used by filters topbar. this is a hack. find another way
+    disableSelectTextUpdate = _a.disableSelectTextUpdate, selectStyleOverride = _a.selectStyleOverride, valueProp = _a.value, id = _a.id, parentOnChange = _a.onChange, className = _a.className, style = _a.style, readOnly = _a.readOnly, //
+    invert = _a.invert, //
+    optionsFn = _a.optionsFn, optionsProp = _a.options, saveValueAsString = _a.saveValueAsString, // used in tci
+    isTagsStyle = _a.isTagsStyle, selectConfig = _a.selectConfig, label = _a.label, optionsModalLabel = _a.optionsModalLabel, broadcastShowOptions = _a.broadcastShowOptions, 
+    //combobox specific
+    isSearchable = _a.isSearchable, //
+    searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, genCustomSelectComp = _a.genCustomSelectComp, placeholder = _a.placeholder, //
+    genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, //
+    disabled = _a.disabled, //
+    tagColor = _a.tagColor, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b;
+    var theme = (0, styled_components_1.useTheme)();
+    var props = arguments[0];
+    var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
+    //1 INIT REFS
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
+    //2 INIT SHOW OPTIONS STATE
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
+        broadcastShowOptions: broadcastShowOptions
+    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
+    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
+    //3 INIT DD FOCUS CUSTOM HOOK
+    (0, useHandleClickOutside_1.useHandleClickOutside)(dropdownRef, handleHideOptions, { enabled: screenWidth >= (0, mixins_1.getBreakPoint)('sm') });
+    //5 PRIMARY CHANGE HANDLER
+    var handleSelect = function (newVal) {
+        setSearchString('');
+        (0, handlers_1.handleSelect_SINGLE)({
+            id: id,
+            newVal: newVal,
+            // prevVal: value,
+            // hideShowOtherTextInputOnSelect_SINGLE,
+            handleHideOptions: handleHideOptions,
+            saveValueAsString: saveValueAsString,
+            parentOnChange: parentOnChange
+        });
+    };
+    //-- TAG INPUT SPECIFIC
+    var _e = (0, useSearchString_1.useSearchString)({
+        searchStringInParent: searchStringInParent,
+        setSearchStringInParent: setSearchStringInParent
+    }), searchString = _e[0], setSearchString = _e[1];
+    var options = (0, react_1.useMemo)(function () {
+        var ops = (0, generateOptions_1.generateOptions)({
+            options: optionsProp,
+            optionsFn: optionsFn,
+            theme: theme
+        });
+        return (!isSearchable && !isTagsStyle)
+            ? ops
+            : !!observerRef === true //if this exists that means search is being handled on the backend via elastic search
+                ? ops
+                : (0, keywordSearchOptions_1.keywordSearchOptions)({
+                    options: ops,
+                    searchString: searchString,
+                    searchFieldsConfig: searchFieldsConfig,
+                    setFilteredOptionsInParent: setFilteredOptionsInParent,
+                });
+    }, [optionsProp, optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn, searchString]);
+    var genSelectTagsInput = function (ops) {
+        if (ops === void 0) { ops = {}; }
+        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, style: ops.style
+            // forceFocus, comp is expecting this
+         }));
+    };
+    var genInputComp = function () {
+        return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef, id: "StyledDropdownRefWrapper" },
+            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, { 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, { searchbarPlaceholder: searchbarPlaceholder, 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, alignDropdown: alignDropdown, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
+    };
+    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, { 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. */)),
+        readOnly ? genDisplayComp() : genInputComp()));
+}

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

@@ -0,0 +1,6 @@
+export function Caret({ invert, showOptions, disabled }: {
+    invert: any;
+    showOptions: any;
+    disabled: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Caret = void 0;
+var colors_1 = require("../../../../../themes/colors");
+var icons_1 = require("../../../../../icons");
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var white = colors_1.colors.white, greyColor100 = colors_1.colors.greyColor100, greyColor40 = colors_1.colors.greyColor40;
+var CaretDown = icons_1.icons.CaretDown, CaretUp = icons_1.icons.CaretUp;
+var Caret = function (_a) {
+    var invert = _a.invert, showOptions = _a.showOptions, disabled = _a.disabled;
+    return (react_1.default.createElement(styled_1.StyledCaret, null,
+        showOptions ? (react_1.default.createElement(CaretUp, { size: 12, color: invert ? white : greyColor100, weight: "bold" })) : (react_1.default.createElement(CaretDown, { size: 12, color: disabled ? greyColor40 : invert ? white : greyColor100, weight: "bold" })),
+        react_1.default.createElement(styled_1.StyledCaretClickArea, null)));
+};
+exports.Caret = Caret;

package/dist/v2/components/Dropdowns/comps/Caret/styled.d.ts

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

package/dist/v2/components/Dropdowns/comps/Caret/styled.js

@@ -0,0 +1,14 @@
+"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.StyledCaretClickArea = exports.StyledCaret = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledCaret = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding-left: 1rem;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  padding-left: 1rem;\n  display: flex;\n  align-items: center;\n"])));
+exports.StyledCaretClickArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,7 @@
+export function DisplayCompSingle({ value, invert, injectComma, S }: {
+    value: any;
+    invert: any;
+    injectComma: any;
+    S: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,39 @@
+"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.DisplayCompSingle = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../../../../../components/Typo");
+var OKELink_1 = require("../../../../../components/OKELink");
+var genLinkOrText_1 = require("../../utils/genLinkOrText");
+var styled_components_1 = require("styled-components");
+var genProfileImg_1 = require("../../utils/genProfileImg");
+var genIcon_1 = require("../../utils/genIcon");
+var DisplayCompSingle = function (_a) {
+    var value = _a.value, invert = _a.invert, injectComma = _a.injectComma, S = _a.S;
+    var theme = (0, styled_components_1.useTheme)();
+    if (!value)
+        return null;
+    return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: '1rem' } },
+        (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, invert: invert, S: S }),
+        (value === null || value === void 0 ? void 0 : value.image) && (0, genProfileImg_1.genProfileImg)(__assign(__assign({}, value), { invert: invert, theme: theme })),
+        (0, genLinkOrText_1.genLinkOrText)(value, function (display, link) { return (react_1.default.createElement(Typo_1.SANS_3, { invert: invert },
+            link
+                ? react_1.default.createElement(OKELink_1.OKELink, { invert: invert, to: link }, display)
+                : display,
+            injectComma && react_1.default.createElement("span", null, ","))); }, { invert: invert })));
+};
+exports.DisplayCompSingle = DisplayCompSingle;

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

@@ -0,0 +1,4 @@
+export function NoOptionResultsComp({ S }: {
+    S: any;
+}): React.JSX.Element;
+import React from "react";

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoOptionResultsComp = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../../../../../components/Typo");
+var NoOptionResultsComp = function (_a) {
+    var S = _a.S;
+    var TYPO_COMP = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
+    return (react_1.default.createElement("div", { style: { padding: '1rem 2rem' } },
+        react_1.default.createElement(TYPO_COMP, { italic: true }, "No Results!")));
+};
+exports.NoOptionResultsComp = NoOptionResultsComp;

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionContent = void 0;
+var react_1 = __importDefault(require("react"));
+var genProfileImg_1 = require("../../utils/genProfileImg");
+var genIcon_1 = require("../../utils/genIcon");
+var styled_components_1 = require("styled-components");
+var genColor_1 = require("../../utils/genColor");
+var getText_1 = require("../../../../../utils/getText");
+var Typo_1 = require("../../../../../components/Typo");
+var Typo2_1 = require("../../../Typo2");
+var OptionContent = function (_a) {
+    var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef;
+    var theme = (0, styled_components_1.useTheme)();
+    var TypoComp = S ? Typo_1.SANS_2 : Typo2_1.UI_BODY_SEMIBOLD_SM_DF;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color;
+    return (react_1.default.createElement("div", { ref: observerRef, style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: "0.6rem",
+            maxWidth: "36rem",
+        } },
+        (image || icon || color) &&
+            react_1.default.createElement("div", { style: { marginTop: desc && '0.2rem', display: 'flex', alignContent: 'center' } },
+                image && (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
+                icon && (0, genIcon_1.genIcon)({ icon: icon, invert: invert, S: S, className: "OKE-Dropdown__optionIcon" }),
+                color && (0, genColor_1.genColor)({ color: color })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(TypoComp, { invert: invert, semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || "") }, (0, getText_1.getText)(display)),
+            desc && (react_1.default.createElement(TypoComp, { invert: invert, className: "OKE-Dropdown__optionDesc" }, (0, getText_1.getText)(desc))))));
+};
+exports.OptionContent = OptionContent;

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

@@ -0,0 +1,28 @@
+export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, value, id, optionsClassName, relativeToRef, showOptions, handleHideOptions, handleSelect, options, isSearchable, label, optionsModalLabel, searchString, setSearchString, SelectComp, isTagsStyle, genCreateTagButton, invert, setFocusSelectTagsInput, popOutOfOverflowHiddenParent, S, searchbarPlaceholder, alignDropdown }: {
+    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;
+    isTagsStyle: any;
+    genCreateTagButton: any;
+    invert: any;
+    setFocusSelectTagsInput: any;
+    popOutOfOverflowHiddenParent: any;
+    S: any;
+    searchbarPlaceholder: any;
+    alignDropdown: any;
+}): React.JSX.Element;
+import React from "react";