oolib 2.149.4 → 2.149.5

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

@@ -1,4 +1,4 @@
-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 }: {
+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;
@@ -33,5 +33,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     broadcastShowOptions: any;
     tagColor: any;
     searchbarPlaceholder: any;
+    alignDropdown?: string;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

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

@@ -62,24 +62,24 @@ function DropdownMulti(_a) {
     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;
+    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 _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.handleShowOptions;
+    }), 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 _d = (0, useSearchString_1.useSearchString)({
+    var _e = (0, useSearchString_1.useSearchString)({
         setSearchStringInParent: setSearchStringInParent,
         searchStringInParent: searchStringInParent
-    }), searchString = _d[0], setSearchString = _d[1];
+    }), searchString = _e[0], setSearchString = _e[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -139,7 +139,7 @@ function DropdownMulti(_a) {
         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 _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
+    var _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[1];
     var genSelectTagsInput = function () { return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString,
         setSearchString: setSearchString,
         single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled })); };
@@ -151,7 +151,7 @@ function DropdownMulti(_a) {
                         ? !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(), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S })));
+            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(), 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))),

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

@@ -1,4 +1,4 @@
-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 }: {
+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;
@@ -35,5 +35,6 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     tagColor: any;
     observerRef: any;
     searchbarPlaceholder: any;
+    alignDropdown?: string;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

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

@@ -72,16 +72,16 @@ function DropdownSingle(_a) {
     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;
+    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 _b = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _b.selectRef, dropdownRef = _b.dropdownRef;
+    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _c = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _c.showOptions, handleHideOptions = _c.handleHideOptions, handleShowOptions = _c.handleShowOptions;
+    }), 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') });
@@ -99,10 +99,10 @@ function DropdownSingle(_a) {
         });
     };
     //-- TAG INPUT SPECIFIC
-    var _d = (0, useSearchString_1.useSearchString)({
+    var _e = (0, useSearchString_1.useSearchString)({
         searchStringInParent: searchStringInParent,
         setSearchStringInParent: setSearchStringInParent
-    }), searchString = _d[0], setSearchString = _d[1];
+    }), searchString = _e[0], setSearchString = _e[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -124,7 +124,7 @@ function DropdownSingle(_a) {
         // forceFocus, comp is expecting this
      })); };
     var genInputComp = function () {
-        return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
+        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
@@ -132,7 +132,7 @@ function DropdownSingle(_a) {
                 } }, 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, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
+                isSearchable: isTagsStyle ? false : isSearchable, alignDropdown: alignDropdown, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput(), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
     };
     var genDisplayComp = function () {
         if (!value)

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

@@ -1,4 +1,4 @@
-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 }: {
+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;
@@ -23,5 +23,6 @@ export function OptionsMulti({ lightboxHeight, lightboxStyle, optionsAnchor, val
     popOutOfOverflowHiddenParent: any;
     S: any;
     searchbarPlaceholder: any;
+    alignDropdown: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -58,7 +58,7 @@ var OptionsMulti = function (_a) {
     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;
+    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)({
@@ -128,7 +128,7 @@ var OptionsMulti = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(TextInputs_1.TextInput, { 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 }))); };
-    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 },
+    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) {

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

@@ -1,4 +1,4 @@
-export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle }: {
+export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, lightboxStyle, alignDropdown }: {
     options: any;
     optionsRef: any;
     relativeToRef: any;
@@ -9,5 +9,6 @@ export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, show
     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

@@ -40,7 +40,7 @@ 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;
+    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
@@ -57,7 +57,13 @@ var OptionsAnimateWrapper = function (_a) {
         });
     }, [options.length]);
     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({ position: "fixed", top: "".concat(fixPos.y - (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top" ? { transform: "translateY(-100%)" } : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? __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(window.innerWidth - 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));
 };

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

@@ -35,7 +35,7 @@ var Modal_1 = require("../../../Modals/Modal");
 var styled_1 = require("./styled");
 var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
 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;
+    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 _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
@@ -49,7 +49,7 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
     }, [showOptions]);
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, { options: options, optionsRef: ref, relativeToRef: relativeToRef, showOptions: showOptions, invert: invert, yOrientation: yOrientation, fixPos: fixPos, optionsAnchor: optionsAnchor, children: children, lightboxStyle: lightboxStyle },
+        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: {

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

@@ -1,4 +1,4 @@
-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 }: {
+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;
@@ -23,5 +23,6 @@ export function OptionsSingle({ lightboxHeight, lightboxStyle, optionsAnchor, va
     S: any;
     observerRef: any;
     searchbarPlaceholder: any;
+    alignDropdown: any;
 }): React.JSX.Element;
 import React from "react";

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

@@ -47,7 +47,7 @@ var OptionsSingle = function (_a) {
     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
+    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'
     ;
@@ -82,7 +82,7 @@ var OptionsSingle = function (_a) {
             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, S: S },
+        react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, SelectComp: SelectComp, handleHideOptions: handleHideOptions, label: label, optionsModalLabel: optionsModalLabel, invert: invert, relativeToRef: relativeToRef, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, alignDropdown: alignDropdown, S: S },
             isSearchable && genSearchBar(),
             options.length === 0 ? (react_1.default.createElement(NoOptionResultsComp_1.NoOptionResultsComp, { S: S })) : (react_1.default.createElement(VirtualizedWrapper_1.VirtualizedWrapper, { options: options, lightboxHeight: lightboxHeight, searchString: searchString }, function (option, index, style) { return (react_1.default.createElement(styled_1.StyledOption, { key: option.value, invert: invert, isSelected: !option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value, isFocussed: focussedOp === index, className: "OKE-Dropdown__option", ref: function (el) {
                     return focussedOp === index && el && scrollFocussedOpIntoView(el);

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

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../../../themes");
 var utilsOolib_1 = require("../../../../utilsOolib");
 var mixins_1 = require("../../../../themes/mixins");
-exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"])), function (_a) {
+exports.StyledSelectWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    right: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  min-height: 4rem;\n  padding: 0 2rem;\n  background-color: ", ";\n  color: ", "; \n  ", "\n  ", "\n  ", "\n\n  &::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 2px;\n    bottom: 0;\n    right: 0;\n    background-color: ", ";\n    ", "\n  }\n  \n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.focussed {\n    background-color: ", ";\n    &::after{\n          width: 100%;\n      }\n  }\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
 }, function (_a) {

package/dist/stories/Oolib/components/Dropdowns.stories.d.ts

@@ -72,6 +72,17 @@ declare namespace _default {
             let name_11: string;
             export { name_11 as name };
         }
+        namespace alignDropdown {
+            let name_12: string;
+            export { name_12 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
     }
     namespace args {
         let placeholder_1: string;
@@ -100,6 +111,9 @@ declare namespace _default {
         export { readOnly_1 as readOnly };
         let invert_1: boolean;
         export { invert_1 as invert };
+        export let popOutOfOverflowHiddenParent: boolean;
+        let alignDropdown_1: string;
+        export { alignDropdown_1 as alignDropdown };
     }
     namespace parameters {
         namespace docs {

package/dist/stories/Oolib/components/Dropdowns.stories.js

@@ -129,7 +129,12 @@ exports.default = {
         },
         showColorInSelectArea: {
             name: "Show Color in Select Area"
-        }
+        },
+        alignDropdown: {
+            name: "Align Dropdown",
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
     },
     args: {
         // label: "This is a label",
@@ -147,6 +152,8 @@ exports.default = {
         disabled: false,
         readOnly: false,
         invert: false,
+        popOutOfOverflowHiddenParent: false,
+        alignDropdown: "left",
     },
     parameters: {
         docs: {
@@ -243,7 +250,7 @@ var Dropdowns = function (args) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
                         });
-                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type" }))))));
+                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))))));
 };
 exports.Dropdowns = Dropdowns;
 // export const Button_Primary = (args) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.149.4",
+  "version": "2.149.5",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",