oolib 2.57.2 → 2.57.3

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

@@ -0,0 +1,36 @@
+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, caretColor, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, displayCompStyle, S, disabled, broadcastShowOptions }: {
+    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;
+    caretColor: any;
+    genCustomSelectComp: any;
+    disableSelectTextUpdate: any;
+    selectConfig: any;
+    lightboxHeight: any;
+    lightboxStyle: any;
+    optionsAnchor: any;
+    popOutOfOverflowHiddenParent: any;
+    displayCompStyle: any;
+    S: any;
+    disabled: any;
+    broadcastShowOptions: any;
+}, ...args: any[]): any;

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

@@ -0,0 +1,201 @@
+"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.DropdownMulti = void 0;
+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 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");
+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, caretColor = _a.caretColor, 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, displayCompStyle = _a.displayCompStyle, //can be either tagsStyle OR commaSeparatedStyle
+    S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
+    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 });
+    //1 INIT REFS
+    var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    //2 INIT SHOW OPTIONS STATE
+    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+        broadcastShowOptions: broadcastShowOptions
+    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.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 _d = (0, useSearchString_1.useSearchString)({
+        setSearchStringInParent: setSearchStringInParent,
+        searchStringInParent: searchStringInParent
+    }), searchString = _d[0], setSearchString = _d[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),
+        // 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;
+        var tagsStyle = (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 }); })));
+        var commaSeparatedStyle = (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 }))); })));
+        //if an explicit displayComp style is specified then listen to it.
+        //else apply tagsStyle to 'tagStyle' inputs & commaseparatedstyle to
+        //regular plain dropdowns.
+        if (!!displayCompStyle) {
+            return displayCompStyle === 'tagsStyle'
+                ? tagsStyle
+                : displayCompStyle === 'commaSeparatedStyle'
+                    && commaSeparatedStyle;
+        }
+        else {
+            return isTagsStyle
+                ? tagsStyle
+                : commaSeparatedStyle;
+        }
+    };
+    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,
+        setSearchString: setSearchString,
+        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 },
+            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,
+                selectClassName: selectClassName,
+                selectStyleOverride: selectStyleOverride,
+                showOptions: showOptions,
+                caretColor: caretColor,
+                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-" : "") },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        readOnly ? genDisplayComp() : genInputComp()));
+}
+exports.DropdownMulti = DropdownMulti;

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

@@ -0,0 +1,37 @@
+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, caretColor, genCreateTagButton, popOutOfOverflowHiddenParent, displayCompStyle, S, disabled }: {
+    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;
+    caretColor: any;
+    genCreateTagButton: any;
+    popOutOfOverflowHiddenParent: any;
+    displayCompStyle: any;
+    S: any;
+    disabled: any;
+}, ...args: any[]): any;

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

@@ -0,0 +1,183 @@
+"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.DropdownSingle = void 0;
+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, //
+    caretColor = _a.caretColor, genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, displayCompStyle = _a.displayCompStyle, S = _a.S, //
+    disabled = _a.disabled //
+    ;
+    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 });
+    //1 INIT REFS
+    var _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    //2 INIT SHOW OPTIONS STATE
+    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+        broadcastShowOptions: broadcastShowOptions
+    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.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 _d = (0, useSearchString_1.useSearchString)({
+        searchStringInParent: searchStringInParent,
+        setSearchStringInParent: setSearchStringInParent
+    }), searchString = _d[0], setSearchString = _d[1];
+    var options = (0, react_1.useMemo)(function () {
+        var ops = (0, generateOptions_1.generateOptions)({
+            options: optionsProp,
+            optionsFn: optionsFn,
+        });
+        return (!isSearchable && !isTagsStyle)
+            ? ops
+            : (0, keywordSearchOptions_1.keywordSearchOptions)({
+                options: ops,
+                searchString: searchString,
+                searchFieldsConfig: searchFieldsConfig,
+                setFilteredOptionsInParent: setFilteredOptionsInParent,
+            });
+    }, [optionsProp, 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
+        // 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,
+                caretColor: caretColor,
+                genCustomSelectComp: genCustomSelectComp,
+                selectClassName: selectClassName,
+                selectStyleOverride: selectStyleOverride,
+                showOptions: showOptions,
+                disableSelectTextUpdate: disableSelectTextUpdate,
+                selectConfig: selectConfig,
+                S: S,
+                disabled: disabled
+            })))),
+            react_1.default.createElement(OptionsSingle_1.OptionsSingle, { lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, searchString: searchString, setSearchString: setSearchString, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, invert: invert, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
+                //combobox specific
+                isSearchable: isTagsStyle ? false : isSearchable, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
+    };
+    var genDisplayComp = function () {
+        if (!value)
+            return null;
+        var tagsStyle = (react_1.default.createElement(StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme })));
+        var commaSeparatedStyle = react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert }));
+        //if an explicit displayComp style is specified then listen to it.
+        //else apply tagsStyle to 'tagStyle' inputs & commaseparatedstyle to
+        //regular plain dropdowns.
+        if (!!displayCompStyle) {
+            return displayCompStyle === 'tagsStyle'
+                ? tagsStyle
+                : displayCompStyle === 'commaSeparatedStyle'
+                    && commaSeparatedStyle;
+        }
+        else {
+            return isTagsStyle
+                ? tagsStyle
+                : commaSeparatedStyle;
+        }
+    };
+    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()));
+}
+exports.DropdownSingle = DropdownSingle;

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

@@ -0,0 +1,6 @@
+export function Caret({ invert, caretColor, showOptions, disabled }: {
+    invert: any;
+    caretColor: any;
+    showOptions: any;
+    disabled: any;
+}): any;

package/dist/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, caretColor = _a.caretColor, 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 : caretColor || greyColor100, weight: "bold" })) : (react_1.default.createElement(CaretDown, { size: 12, color: disabled ? greyColor40 : invert ? white : caretColor || greyColor100, weight: "bold" })),
+        react_1.default.createElement(styled_1.StyledCaretClickArea, null)));
+};
+exports.Caret = Caret;

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

@@ -0,0 +1,2 @@
+export const StyledCaret: any;
+export const StyledCaretClickArea: any;

package/dist/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/components/Dropdowns/comps/DisplayCompSingle/index.d.ts

@@ -0,0 +1,5 @@
+export function DisplayCompSingle({ value, invert, injectComma }: {
+    value: any;
+    invert: any;
+    injectComma: any;
+}): any;

package/dist/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("../../../Typo");
+var OKELink_1 = require("../../../OKELink");
+var genIcon_1 = require("../../utils/genIcon");
+var genLinkOrText_1 = require("../../utils/genLinkOrText");
+var styled_components_1 = require("styled-components");
+var genProfileImg_1 = require("../../utils/genProfileImg");
+var DisplayCompSingle = function (_a) {
+    var value = _a.value, invert = _a.invert, injectComma = _a.injectComma;
+    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)(value === null || value === void 0 ? void 0 : value.icon),
+        (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, null,
+            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/components/Dropdowns/comps/NoOptionResultsComp/index.d.ts

@@ -0,0 +1,3 @@
+export function NoOptionResultsComp({ S }: {
+    S: any;
+}): any;

package/dist/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("../../../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/components/Dropdowns/comps/OptionContent/index.d.ts

@@ -0,0 +1,6 @@
+export function OptionContent({ option, optionsClassName, invert, S }: {
+    option: any;
+    optionsClassName: any;
+    invert: any;
+    S: any;
+}): any;

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

@@ -0,0 +1,30 @@
+"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 getText_1 = require("../../../../utils/getText");
+var genProfileImg_1 = require("../../utils/genProfileImg");
+var genIcon_1 = require("../../utils/genIcon");
+var Typo_1 = require("../../../Typo");
+var styled_components_1 = require("styled-components");
+var OptionContent = function (_a) {
+    var option = _a.option, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S;
+    var theme = (0, styled_components_1.useTheme)();
+    var TypoComp = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc;
+    return (react_1.default.createElement("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "1rem",
+            maxWidth: "36rem",
+        } },
+        (0, genProfileImg_1.genProfileImg)({ image: image, display: display, invert: invert, theme: theme }),
+        icon && (0, genIcon_1.genIcon)(icon),
+        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/components/Dropdowns/comps/OptionsMulti/index.d.ts

@@ -0,0 +1,25 @@
+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, }: {
+    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;
+}): any;