oolib 2.190.3 → 2.191.0

package/dist/stories/v2/components/List.stories.js

@@ -0,0 +1,219 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem_ = exports.List_ = void 0;
+var react_1 = require("react");
+var __1 = require("../../..");
+var themes_1 = require("../../../themes");
+var List_1 = require("../../../v2/components/List");
+var ListItem_1 = require("../../../v2/components/List/comps/ListItem");
+var dropdownOptions_1 = require("./Dropdown/dropdownOptions");
+var availableColors = __spreadArray([undefined], Object.keys(__1.colors2).sort(), true);
+var availableIcons = __spreadArray([undefined], Object.keys(__1.icons).sort(), true);
+var dropdownOptions = [
+    {
+        display: "Option with a slightly longer name",
+        value: "india",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "CirclesFour",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Sri Lanka",
+        value: "sriLanka",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Japan",
+        value: "japan",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Germany",
+        value: "germany",
+        color: themes_1.colors.primaryColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "USA",
+        value: "usa",
+        color: themes_1.colors.greyColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Columbia",
+        value: "columbia",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Brazil",
+        value: "brazil",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Australia",
+        value: "australia",
+        color: themes_1.colors.lightBlue,
+        disabled: true,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+];
+exports.default = {
+    title: "Oolib V 2.0/Components/List",
+    parameters: {
+        docs: {
+            description: {
+                component: "A customizable list component with search and grouping capabilities",
+            },
+        },
+    },
+    argTypes: {
+        isSearchable: {
+            control: "boolean",
+            description: "Enable search functionality",
+            defaultValue: false,
+        },
+        grouped: {
+            control: "boolean",
+            description: "Display options in groups",
+            defaultValue: false,
+        },
+        isMulti: {
+            control: "boolean",
+            description: "Allow multiple selections",
+            defaultValue: false,
+        },
+        isTagsStyle: {
+            control: "boolean",
+            description: "Display selections as tags",
+            defaultValue: false,
+        },
+        searchbarPlaceholder: {
+            control: "text",
+            description: "Placeholder text for the search bar",
+            defaultValue: "Search...",
+        },
+        disableShadow: {
+            control: "boolean",
+            description: "Display selections as tags",
+            defaultValue: false,
+        },
+        enableBorder: {
+            control: "boolean",
+            description: "Display selections as tags",
+            defaultValue: false,
+        }
+    },
+};
+var List_ = function (args) {
+    var _a = (0, react_1.useState)(null), selectedValue = _a[0], setSelectedValue = _a[1];
+    var _b = (0, react_1.useState)(null), focussedOption = _b[0], setFocussedOption = _b[1];
+    var _c = (0, react_1.useState)(""), searchString = _c[0], setSearchString = _c[1];
+    var _d = (0, react_1.useState)(false), searchBarFocus = _d[0], setSearchBarFocus = _d[1];
+    var _e = (0, react_1.useState)(args.grouped ? dropdownOptions_1.dropdownOptionsGroup : dropdownOptions), filteredOptions = _e[0], setFilteredOptions = _e[1];
+    // Filter options based on search string
+    (0, react_1.useEffect)(function () {
+        if (args.isSearchable && searchString) {
+            if (args.grouped) {
+                var filtered = dropdownOptions_1.dropdownOptionsGroup
+                    .map(function (group) { return (__assign(__assign({}, group), { options: group.options.filter(function (option) {
+                        return option.display.toLowerCase().includes(searchString.toLowerCase());
+                    }) })); })
+                    .filter(function (group) { return group.options.length > 0; });
+                setFilteredOptions(filtered);
+            }
+            else {
+                var filtered = dropdownOptions.filter(function (option) {
+                    return option.display.toLowerCase().includes(searchString.toLowerCase());
+                });
+                setFilteredOptions(filtered);
+            }
+        }
+        else {
+            setFilteredOptions(args.grouped ? dropdownOptions_1.dropdownOptionsGroup : dropdownOptions);
+        }
+    }, [searchString, args.isSearchable, args.grouped]);
+    (0, react_1.useEffect)(function () {
+        setFilteredOptions(args.grouped ? dropdownOptions_1.dropdownOptionsGroup : dropdownOptions);
+    }, [args.grouped]);
+    var handleSelect = function (option) {
+        setSelectedValue(option);
+        if (args.onSelect) {
+            args.onSelect(option);
+        }
+    };
+    var scrollFocussedOpIntoView = function (index) {
+        setFocussedOption(index);
+    };
+    return (React.createElement(__1.Container, { style: { background: "#eff" } },
+        React.createElement(__1.PaddingTop40, null),
+        React.createElement(List_1.List, { options: filteredOptions, value: selectedValue, focussedOp: focussedOption, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: handleSelect, isSearchable: args.isSearchable, searchbarPlaceholder: args.searchbarPlaceholder, searchBarFocus: searchBarFocus, searchString: searchString, setSearchString: setSearchString, setSearchBarFocus: setSearchBarFocus, grouped: args.grouped, isMulti: args.isMulti, isTagsStyle: args.isTagsStyle, invert: args.invert, disableShadow: args.disableShadow, enableBorder: args.enableBorder }),
+        React.createElement(__1.PaddingBottom40, null)));
+};
+exports.List_ = List_;
+var ListItem_ = function (args) {
+    args.option = args;
+    return (React.createElement("div", { style: { padding: '10rem', height: "100svh", background: "#eee" } },
+        React.createElement(ListItem_1.ListItem, __assign({}, args))));
+};
+exports.ListItem_ = ListItem_;
+exports.ListItem_.argTypes = {
+    desc: {
+        name: "Description",
+    },
+    icon: {
+        name: "Icon",
+        options: availableIcons,
+        control: { type: "select" }
+    }
+    // color:{
+    //   name: "Color",
+    //   options: availableColors,
+    // }  
+};
+exports.ListItem_.args = {
+    display: "Option with a slightly longer name",
+    desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    icon: "CirclesFour",
+    // color: undefined,
+    loading: false,
+    disabled: false,
+};

package/dist/utils/useStyleUpdateAfterToggleTransition.js

@@ -25,7 +25,11 @@ var useStyleUpdateAfterToggleTransition = function (_a) {
         }
         else {
             // Immediately set to hidden when closing
-            setStyle(initStyle.current);
+            timeoutId = setTimeout(function () {
+                if (!toggleState) {
+                    setStyle(initStyle.current);
+                }
+            }, transitionDuration);
         }
         // Cleanup function to clear timeout if component updates/unmounts
         return function () {
@@ -33,7 +37,7 @@ var useStyleUpdateAfterToggleTransition = function (_a) {
                 clearTimeout(timeoutId);
             }
         };
-    }, [toggleState, transitionDuration]);
+    }, [toggleState, transitionDuration, styleOptions]);
     return ({
         style: style
     });

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

@@ -1,11 +1,10 @@
-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 }: {
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, 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, variant, matchSelectInputWidth }: {
     saveValueAsString: any;
     value: any;
     id: any;
     onChange: any;
     className: any;
     readOnly: any;
-    invert: any;
     selectClassName: any;
     optionsClassName: any;
     selectStyleOverride: any;
@@ -34,5 +33,7 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
     tagColor: any;
     searchbarPlaceholder: any;
     alignDropdown?: string;
+    variant?: string;
+    matchSelectInputWidth?: boolean;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

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

@@ -68,28 +68,28 @@ var getBlockLabelProps_1 = require("../../../../utils/getBlockLabelProps");
 function DropdownMulti(_a) {
     var saveValueAsString = _a.saveValueAsString, valueProp = _a.value, id = _a.id, parentOnChange = _a.onChange, className = _a.className, 
     // injectOtherOption,
-    readOnly = _a.readOnly, invert = _a.invert, selectClassName = _a.selectClassName, //used to override font size in priimary header
+    readOnly = _a.readOnly, selectClassName = _a.selectClassName, //used to override font size in priimary header
     optionsClassName = _a.optionsClassName, //used to override font size in priimary header
     selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig, 
     //props whose existence needs to be questioned:
-    lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b;
+    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, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.matchSelectInputWidth, matchSelectInputWidth = _d === void 0 ? false : _d;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
-    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
+    var _e = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _e.selectRef, dropdownRef = _e.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _f = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
+    }), showOptions = _f.showOptions, handleHideOptions = _f.handleHideOptions, handleShowOptions = _f.handleShowOptions;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     //3 INIT DD FOCUS CUSTOM HOOK
     (0, useHandleClickOutside_1.useHandleClickOutside)(dropdownRef, handleHideOptions, { enabled: screenWidth >= (0, mixins_1.getBreakPoint)('sm') });
     //-- TAG INPUT SPECIFIC
-    var _e = (0, useSearchString_1.useSearchString)({
+    var _g = (0, useSearchString_1.useSearchString)({
         setSearchStringInParent: setSearchStringInParent,
         searchStringInParent: searchStringInParent
-    }), searchString = _e[0], setSearchString = _e[1];
+    }), searchString = _g[0], setSearchString = _g[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -99,13 +99,28 @@ function DropdownMulti(_a) {
         });
         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; }); });
+        var selectedValues = currentValue.map(function (v) { return v.value; });
+        // Check if we're dealing with grouped data
+        var isGrouped = (0, getValue_1.isGroupedData)(ops);
+        if (isGrouped) {
+            // For grouped data, filter out selected options from each group
+            return ops.map(function (group) {
+                // Filter the options within the group to remove selected ones
+                var filteredOptions = group.options.filter(function (option) {
+                    return !selectedValues.includes(option.value);
+                });
+                // Return a new group with filtered options
+                return __assign(__assign({}, group), { options: filteredOptions });
+            }).filter(function (group) { return group.options.length > 0; }); // Remove empty groups
+        }
+        else {
+            // For normal data, filter out selected options directly
+            return ops.filter(function (op) { return !selectedValues.includes(op.value); });
+        }
     }, [
-        JSON.stringify(optionsProp), //we need this cuz options change from 'loading' to actual options in some cases
+        JSON.stringify(optionsProp), // For when options change from 'loading' to actual options
         // showOptions
-        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
-        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
-        value
+        JSON.stringify(value) // Use stringify to properly detect changes in the value array
     ]);
     options = (0, react_1.useMemo)(function () {
         return (!isSearchable && !isTagsStyle)
@@ -119,6 +134,8 @@ function DropdownMulti(_a) {
     }, [
         searchString,
         // showOptions, 
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
+        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args,
         options,
         value
     ]);
@@ -148,13 +165,13 @@ function DropdownMulti(_a) {
     var genDisplayComp = function () {
         if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
             return null;
-        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme, color: tagColor }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, 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, injectComma: i !== value.length - 1, S: S }))); })));
     };
-    var _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[1];
+    var _h = (0, react_1.useState)(false), focusSelectTagsInput = _h[0], setFocusSelectTagsInput = _h[1];
     var genSelectTagsInput = function (ops) {
         if (ops === void 0) { ops = {}; }
-        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString,
+        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, handleSelect: handleSelect, searchString: searchString,
             setSearchString: setSearchString,
             single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled, style: ops.style }));
     };
@@ -165,10 +182,10 @@ function DropdownMulti(_a) {
                     isTagsStyle
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
-                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
-            react_1.default.createElement(OptionsMulti_1.OptionsMulti, { searchbarPlaceholder: searchbarPlaceholder, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown })));
+                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
+            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, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown, matchSelectInputWidth: matchSelectInputWidth, searchbarPlaceholder: searchbarPlaceholder, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString })));
     };
-    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },
+    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp") },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
         readOnly ? genDisplayComp() : genInputComp()));
 }

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

@@ -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, alignDropdown }: {
+export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, 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, variant, matchSelectInputWidth }: {
     optionsAnchor: any;
     lightboxHeight: any;
     lightboxStyle: any;
@@ -12,7 +12,6 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     className: any;
     style: any;
     readOnly: any;
-    invert: any;
     optionsFn: any;
     options: any;
     saveValueAsString: any;
@@ -36,5 +35,7 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
     observerRef: any;
     searchbarPlaceholder: any;
     alignDropdown?: string;
+    variant?: string;
+    matchSelectInputWidth: any;
 }, ...args: any[]): React.JSX.Element;
 import React from "react";

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

@@ -74,7 +74,6 @@ function DropdownSingle(_a) {
     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
@@ -82,16 +81,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, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b;
+    tagColor = _a.tagColor, observerRef = _a.observerRef, searchbarPlaceholder = _a.searchbarPlaceholder, _b = _a.alignDropdown, alignDropdown = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "default" : _c, matchSelectInputWidth = _a.matchSelectInputWidth;
     var theme = (0, styled_components_1.useTheme)();
     var props = arguments[0];
     var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
     //1 INIT REFS
-    var _c = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _c.selectRef, dropdownRef = _c.dropdownRef;
+    var _d = (0, useCreateDropdownRefs_1.useCreateDropdownRefs)(), selectRef = _d.selectRef, dropdownRef = _d.dropdownRef;
     //2 INIT SHOW OPTIONS STATE
-    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
+    var _e = (0, useHideShowOptions_1.useHideShowOptions)({
         broadcastShowOptions: broadcastShowOptions
-    }), showOptions = _d.showOptions, handleHideOptions = _d.handleHideOptions, handleShowOptions = _d.handleShowOptions;
+    }), showOptions = _e.showOptions, handleHideOptions = _e.handleHideOptions, handleShowOptions = _e.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') });
@@ -109,10 +108,10 @@ function DropdownSingle(_a) {
         });
     };
     //-- TAG INPUT SPECIFIC
-    var _e = (0, useSearchString_1.useSearchString)({
+    var _f = (0, useSearchString_1.useSearchString)({
         searchStringInParent: searchStringInParent,
         setSearchStringInParent: setSearchStringInParent
-    }), searchString = _e[0], setSearchString = _e[1];
+    }), searchString = _f[0], setSearchString = _f[1];
     var options = (0, react_1.useMemo)(function () {
         var ops = (0, generateOptions_1.generateOptions)({
             options: optionsProp,
@@ -137,7 +136,7 @@ function DropdownSingle(_a) {
     ]);
     var genSelectTagsInput = function (ops) {
         if (ops === void 0) { ops = {}; }
-        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString, setSearchString: setSearchString, single_multi: 'single', placeholder: placeholder, S: S, disabled: disabled, showOptions: showOptions, S: S, style: ops.style
+        return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, { id: id, value: value, handleSelect: handleSelect, searchString: searchString, setSearchString: setSearchString, single_multi: 'single', placeholder: placeholder, S: S, disabled: disabled, showOptions: showOptions, S: S, style: ops.style
             // forceFocus, comp is expecting this
          }));
     };
@@ -147,17 +146,17 @@ function DropdownSingle(_a) {
                     isTagsStyle
                         ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
                         : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
-                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, genCustomSelectComp: genCustomSelectComp, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
-            react_1.default.createElement(OptionsSingle_1.OptionsSingle, { searchbarPlaceholder: searchbarPlaceholder, observerRef: observerRef, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, searchString: searchString, setSearchString: setSearchString, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, invert: invert, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
+                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { value: value, placeholder: placeholder, genCustomSelectComp: genCustomSelectComp, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled, variant: variant }))),
+            react_1.default.createElement(OptionsSingle_1.OptionsSingle, { observerRef: observerRef, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, id: id, optionsClassName: optionsClassName, label: label, value: value, relativeToRef: selectRef, showOptions: showOptions, handleHideOptions: handleHideOptions, handleSelect: handleSelect, options: options, optionsFn: optionsFn, optionsModalLabel: optionsModalLabel, 
                 //combobox specific
-                isSearchable: isTagsStyle ? false : isSearchable, alignDropdown: alignDropdown, genCreateTagButton: genCreateTagButton, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent })));
+                alignDropdown: alignDropdown, genCreateTagButton: genCreateTagButton, matchSelectInputWidth: matchSelectInputWidth, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), S: S, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, isSearchable: isTagsStyle ? false : isSearchable, searchbarPlaceholder: searchbarPlaceholder, searchString: searchString, setSearchString: setSearchString })));
     };
     var genDisplayComp = function () {
         if (!value)
             return null;
-        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme, color: tagColor }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: value, invert: invert, S: S }));
+        return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, theme: theme, color: tagColor }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: value, S: S }));
     };
-    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : ""), style: style },
+    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp"), style: style },
         react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props) /** in other words, props. */)),
         readOnly ? genDisplayComp() : genInputComp()));
 }

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

@@ -1,5 +1,4 @@
-export function Caret({ invert, showOptions, disabled }: {
-    invert: any;
+export function Caret({ showOptions, disabled }: {
     showOptions: any;
     disabled: any;
 }): React.JSX.Element;

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

@@ -1,19 +1,29 @@
 "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.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 styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
+var CaretDown = icons_1.icons.CaretDown;
+var StyledCaretDown = (0, styled_components_1.default)(CaretDown)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  transform: ", ";\n"], ["\n  ", "\n  transform: ", ";\n"])), (0, mixins_1.transition)("transform"), function (_a) {
+    var showOptions = _a.showOptions;
+    return showOptions ? "rotate(180deg)" : "rotate(0deg)";
+});
 var Caret = function (_a) {
-    var invert = _a.invert, showOptions = _a.showOptions, disabled = _a.disabled;
+    var showOptions = _a.showOptions, disabled = _a.disabled;
     return (react_1.default.createElement(styled_1.StyledCaret, null,
-        showOptions ? (react_1.default.createElement(CaretUp, { size: 12, color: invert ? white : greyColor100, weight: "bold" })) : (react_1.default.createElement(CaretDown, { size: 12, color: disabled ? greyColor40 : invert ? white : greyColor100, weight: "bold" })),
+        react_1.default.createElement(StyledCaretDown, { size: 16, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, weight: "bold", showOptions: showOptions }),
         react_1.default.createElement(styled_1.StyledCaretClickArea, null)));
 };
 exports.Caret = Caret;
+var templateObject_1;

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

@@ -1,6 +1,5 @@
-export function DisplayCompSingle({ value, invert, injectComma, S }: {
+export function DisplayCompSingle({ value, injectComma, S }: {
     value: any;
-    invert: any;
     injectComma: any;
     S: any;
 }): React.JSX.Element;

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

@@ -16,24 +16,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DisplayCompSingle = void 0;
 var react_1 = __importDefault(require("react"));
-var Typo_1 = require("../../../../../components/Typo");
-var OKELink_1 = require("../../../../../components/OKELink");
 var genLinkOrText_1 = require("../../utils/genLinkOrText");
 var styled_components_1 = require("styled-components");
 var genProfileImg_1 = require("../../utils/genProfileImg");
 var genIcon_1 = require("../../utils/genIcon");
+var Typo2_1 = require("../../../Typo2");
+var OKELink_1 = require("../../../OKELink");
 var DisplayCompSingle = function (_a) {
-    var value = _a.value, invert = _a.invert, injectComma = _a.injectComma, S = _a.S;
+    var value = _a.value, injectComma = _a.injectComma, S = _a.S;
     var theme = (0, styled_components_1.useTheme)();
     if (!value)
         return null;
     return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: '1rem' } },
-        (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, invert: invert, S: S }),
-        (value === null || value === void 0 ? void 0 : value.image) && (0, genProfileImg_1.genProfileImg)(__assign(__assign({}, value), { invert: invert, theme: theme })),
-        (0, genLinkOrText_1.genLinkOrText)(value, function (display, link) { return (react_1.default.createElement(Typo_1.SANS_3, { invert: invert },
+        (0, genIcon_1.genIcon)({ icon: value === null || value === void 0 ? void 0 : value.icon, S: S }),
+        (value === null || value === void 0 ? void 0 : value.image) && (0, genProfileImg_1.genProfileImg)(__assign(__assign({}, value), { theme: theme })),
+        (0, genLinkOrText_1.genLinkOrText)(value, function (display, link) { return (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, null,
             link
-                ? react_1.default.createElement(OKELink_1.OKELink, { invert: invert, to: link }, display)
+                ? react_1.default.createElement(OKELink_1.OKELink, { to: link }, display)
                 : display,
-            injectComma && react_1.default.createElement("span", null, ","))); }, { invert: invert })));
+            injectComma && react_1.default.createElement("span", null, ","))); })));
 };
 exports.DisplayCompSingle = DisplayCompSingle;

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

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoOptionResultsComp = void 0;
 var react_1 = __importDefault(require("react"));
-var Typo_1 = require("../../../../../components/Typo");
+var Typo2_1 = require("../../../Typo2");
 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!")));
+    var TYPO_COMP = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_DF;
+    return (react_1.default.createElement("div", { style: { padding: '1.2rem 0.8rem' } },
+        react_1.default.createElement(TYPO_COMP, { style: { fontStyle: "italic" } }, "No Results!")));
 };
 exports.NoOptionResultsComp = NoOptionResultsComp;

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