oolib 2.208.0 → 2.208.2

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

@@ -1,159 +0,0 @@
-"use strict";
-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.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, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown;
-    //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, { option: d, optionsClassName: optionsClassName, invert: invert })) : (react_1.default.createElement(CheckboxButtonShell, { invert: invert, isSelected: opIsSelected(d) },
-            react_1.default.createElement(OptionContent_1.OptionContent, { option: d, optionsClassName: optionsClassName, invert: invert, S: S })));
-    };
-    var createSelectedOptions = function () {
-        return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 0 && (react_1.default.createElement("div", { style: {
-                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), S: S, 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, { placeholder: searchbarPlaceholder, 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 }))); };
-    console.log({ options: options });
-    return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown },
-        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/comps/OptionsAnimateWrapper/index.d.ts

@@ -1,14 +0,0 @@
-export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown }: {
-    options: any;
-    optionsRef: any;
-    relativeToRef: any;
-    showOptions: any;
-    invert: any;
-    yOrientation: any;
-    fixPos: any;
-    optionsAnchor: any;
-    children: any;
-    lightboxStyle: any;
-    alignDropdown: any;
-}): React.JSX.Element;
-import React from "react";

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

@@ -1,81 +0,0 @@
-"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.OptionsAnimateWrapper = void 0;
-var react_1 = __importStar(require("react"));
-var styled_1 = require("./styled");
-var OptionsAnimateWrapper = function (_a) {
-    var _b;
-    var _c;
-    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children, lightboxStyle = _a.lightboxStyle, alignDropdown = _a.alignDropdown;
-    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    //we need to recalc when ops length change because, in tag comps, when loading a fixed set of 'loading' options are shown
-    //before the actual number of options are loaded
-    //useMemo wont work cuz it runs before render, and before render ref doesnt exist.
-    var _d = (0, react_1.useState)({
-        width: undefined,
-        openHeight: undefined,
-    }), _e = _d[0], width = _e.width, openHeight = _e.openHeight, setWidthAndOpenHeight = _d[1];
-    (0, react_1.useEffect)(function () {
-        var _a, _b, _c, _d;
-        setWidthAndOpenHeight({
-            width: (_b = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width,
-            openHeight: (_d = (_c = optionsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height,
-        });
-    }, [options.length]);
-    var viewportWidth = document.documentElement.clientWidth; // excludes scrollbar
-    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign(__assign(__assign({}, (lightboxStyle || {})), { zIndex: 100000 }), (fixPos
-            ? __assign(__assign({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px") }, (alignDropdown === "right"
-                ? {
-                    right: "".concat(viewportWidth - fixPos.right, "px")
-                }
-                : {
-                    left: "".concat(fixPos.x, "px")
-                })), (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : alignDropdown === "right" ? { right: 0 } : { left: 0 })), (yOrientation === "bottom"
-            ? { bottom: 0, transform: "translateY(100%)" }
-            : { top: 0, transform: "translateY(-100%)" })))) }, children));
-};
-exports.OptionsAnimateWrapper = OptionsAnimateWrapper;

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

@@ -1,2 +0,0 @@
-/** for lightbox shell */
-export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,25 +0,0 @@
-"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.StyledOptionsAnimateWrapper = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var globalVariables_1 = require("../../../../../../globalStyles/globalVariables");
-var mixins_1 = require("../../../../../../themes/mixins");
-/** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
-    var isOpen = _a.isOpen, openHeight = _a.openHeight;
-    return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
-}, function (_a) {
-    var width = _a.width;
-    return width ? width + 'px' : '100%';
-}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
-    var isOpen = _a.isOpen;
-    return isOpen ? '1px' : 0;
-});
-var templateObject_1;

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

@@ -1,2 +0,0 @@
-export const OptionsShell: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

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

@@ -1,101 +0,0 @@
-"use strict";
-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.OptionsShell = void 0;
-var framer_motion_1 = require("framer-motion");
-var react_1 = __importStar(require("react"));
-var themes_1 = require("../../../../themes");
-var mixins_1 = require("../../../../themes/mixins");
-var useScreenWidth_1 = require("../../../../utils/customHooks/useScreenWidth");
-var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOverflowHiddenParent");
-var Buttons_1 = require("../../../Buttons");
-var Modal_1 = require("../../../Modals/Modal");
-var styled_1 = require("./styled");
-var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
-var styled_components_1 = require("styled-components");
-var DefaultMobileShell = function (_a) {
-    var children = _a.children;
-    return (react_1.default.createElement("div", { style: { top: 0, left: 0, height: '100dvh', width: '100dvw', position: 'fixed', zIndex: '100000000', background: 'rgba(0,0,0,0.5)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } }, children));
-};
-exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    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, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S, alignDropdown = _a.alignDropdown;
-    var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
-    var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
-    var currentTheme = (0, styled_components_1.useTheme)();
-    var MobileShell = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.MobileShell) || DefaultMobileShell;
-    var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
-    (0, react_1.useEffect)(function () {
-        if (popOutOfOverflowHiddenParent) {
-            if (showOptions)
-                applyFixedPos();
-            else
-                removeFixedPos();
-        }
-    }, [showOptions]);
-    return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
-        popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle, alignDropdown: alignDropdown },
-            react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
-                // className={className}
-                style: {
-                    position: "absolute",
-                    bottom: yOrientation === "top" ? undefined : 0,
-                    top: yOrientation === "top" ? 0 : undefined,
-                } }, children)))) : (
-    // <AnimatePresence>
-    //   {showOptions ? (
-    //     <Modal
-    //       fitToContentHeight
-    //       title={optionsModalLabel || label}
-    //       onClose={handleHideOptions}
-    //       invert={invert}
-    //       S={S}
-    //       dynamicHeaderHeight
-    //     >
-    react_1.default.createElement(react_1.Fragment, null, showOptions ? (react_1.default.createElement(MobileShell, { onClose: handleHideOptions, title: optionsModalLabel || label },
-        SelectComp && SelectComp,
-        react_1.default.createElement(styled_1.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)
-    //     </Modal>
-    //   ) : null}
-    // </AnimatePresence>
-    );
-});

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

@@ -1,5 +0,0 @@
-/** for lightbox shell */
-export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledOptionsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
-/** for modal shell */
-export const StyledModalOptionsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,45 +0,0 @@
-"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 = exports.StyledOptionsWrapper = exports.StyledOptionsAnimateWrapper = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var themes_1 = require("../../../../themes");
-var mixins_1 = require("../../../../themes/mixins");
-var globalVariables_1 = require("../../../../globalStyles/globalVariables");
-/** for lightbox shell */
-exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
-    var isOpen = _a.isOpen, openHeight = _a.openHeight;
-    return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
-}, function (_a) {
-    var width = _a.width;
-    return width ? width + 'px' : '100%';
-}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
-    var isOpen = _a.isOpen;
-    return isOpen ? '1px' : 0;
-});
-exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    max-height: ", ";\n"], ["\n    z-index: 100000; //show remove if we do animation thing\n    padding-left: 0; //cancel out the ul's padding left\n    cursor: pointer;\n    width: 100%;\n    min-width: max-content;\n    max-width: 36rem;\n    overflow: auto;\n    max-height: ", ";\n"
-    /** for modal shell */
-])), function (_a) {
-    var lightboxHeight = _a.lightboxHeight;
-    switch (lightboxHeight) {
-        case 'large':
-            return '33rem';
-        case 'small':
-            return '20rem';
-        case 'medium':
-        default:
-            return '24rem';
-    }
-});
-/** for modal shell */
-exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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, templateObject_2, templateObject_3;

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

@@ -1,28 +0,0 @@
-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, observerRef, 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;
-    genCreateTagButton: any;
-    invert: any;
-    popOutOfOverflowHiddenParent: any;
-    enableUseSetYOrientation?: boolean;
-    S: any;
-    observerRef: any;
-    searchbarPlaceholder: any;
-    alignDropdown: any;
-}): React.JSX.Element;
-import React from "react";

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

@@ -1,105 +0,0 @@
-"use strict";
-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.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, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, alignDropdown = _a.alignDropdown
-    //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, { placeholder: searchbarPlaceholder, invert: invert, forceFocus: searchBarFocus, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
-        react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(OptionsShell_1.OptionsShell, { 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, alignDropdown: alignDropdown, S: S },
-            isSearchable && genSearchBar(),
-            options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(react_1.Fragment, null, options.map(function (option, index) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
-                    return focussedOp === index && el && scrollFocussedOpIntoView(el);
-                }, onClick: function (e) {
-                    if (!option.loading)
-                        handleSelect(option);
-                    setSearchString && setSearchString("");
-                }, S: S }, option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : (react_1.default.createElement(OptionContent_1.OptionContent, { option: option, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: options.length === index + 1 ? observerRef : null })))); }))),
-            genCreateTagButton && genCreateTagButton(options))));
-};
-exports.OptionsSingle = OptionsSingle;

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

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