oolib 2.190.3 → 2.191.0

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

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTagsInput = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
-var themes_1 = require("../../../../themes");
 var toArray_1 = require("../../../../../utils/toArray");
 var utilsOolib_1 = require("../../../../../utilsOolib");
 var Typo_1 = require("../../../../../components/Typo");
@@ -44,10 +43,11 @@ var styled_1 = require("../../styled");
 var genTagComp_1 = require("../../utils/genTagComp");
 var styled_2 = require("./styled");
 var getKeyCode_1 = require("../../../../../utils/getKeyCode");
+var themes_1 = require("../../../../themes");
 var SelectTagsInput = function (_a) {
     var 
     //from root
-    invert = _a.invert, id = _a.id, value = _a.value, disabled = _a.disabled, 
+    id = _a.id, value = _a.value, disabled = _a.disabled, 
     // genCustomSelectComp,
     handleSelect = _a.handleSelect, searchString = _a.searchString, setSearchString = _a.setSearchString, placeholder = _a.placeholder, 
     // minHeight, // standard | wide | actual height in rem
@@ -82,10 +82,8 @@ var SelectTagsInput = function (_a) {
                 alignItems: "center",
             } },
             react_1.default.createElement(TYPO_COMP, { color: disabled
-                    ? themes_1.colors.greyColor40
-                    : invert
-                        ? themes_1.colors.white
-                        : themes_1.colors.greyColor80 }, "".concat(localize('Selected Tags'), ":"))));
+                    ? themes_1.colors.grey40
+                    : themes_1.colors.grey80 }, "".concat(localize('Selected Tags'), ":"))));
     };
     var genSelectComp = function () {
         // const minHeightStyle = minHeight
@@ -97,7 +95,7 @@ var SelectTagsInput = function (_a) {
         //   : "9rem"; //wide by default
         return (react_1.default.createElement(styled_2.StyledSelectTagsInputContainer, { onKeyDown: blurInputOnEscKey, 
             // style={{ minHeight: '9rem' }}
-            style: style, className: "".concat(isFocussed ? "focussed" : ""), invert: invert, disabled: disabled, onFocus: function () {
+            style: style, className: "".concat(isFocussed ? "focussed" : ""), disabled: disabled, onFocus: function () {
                 handleFocus(true);
             }, onBlur: function () { return handleFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(styled_1.StyledTagsInputWrapper, null,
@@ -107,7 +105,6 @@ var SelectTagsInput = function (_a) {
                         return (0, genTagComp_1.genTagComp)(id, d, {
                             handleSelect: handleSelect,
                             single_multi: single_multi,
-                            invert: invert,
                             showOptions: showOptions,
                             theme: theme,
                             S: S,
@@ -115,7 +112,7 @@ var SelectTagsInput = function (_a) {
                         });
                     }),
                 //   isCombobox ? (
-                react_1.default.createElement(styled_2.StyledTagsSelectTextInput, { ref: inputRef, className: S ? "SANS_2" : "SANS_3", style: { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100 }, placeholder: localize(placeholder || "Type to Search"), type: "text", value: searchString, onBlur: function () {
+                react_1.default.createElement(styled_2.StyledTagsSelectTextInput, { ref: inputRef, className: S ? "SANS_2" : "SANS_3", style: { color: themes_1.colors.grey80 }, placeholder: localize(placeholder || "Type to Search"), type: "text", value: searchString, onBlur: function () {
                         return setFocusSelectTagsInput && setFocusSelectTagsInput(false);
                     }, onChange: function (e) { return setSearchString(e.target.value); } }))));
     };

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

@@ -39,14 +39,11 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledSelectTagsInputContainer = exports.StyledTagsSelectTextInput = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-var themes_1 = require("../../../../themes");
 var globalVariables_1 = require("../../../../../globalStyles/globalVariables");
 var mixins_1 = require("../../../../../themes/mixins");
-exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), themes_1.colors.none, globalVariables_1.globalInputElemPadding, themes_1.colors.greyColor40);
-exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"], ["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"])), function (_a) {
-    var invert = _a.invert;
-    return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
-}, function (_a) {
+var themes_1 = require("../../../../themes");
+exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  height: 100%;\n  border: 0;\n  width: 100%;\n  background-color: ", ";\n  \n  // this strange bit is to fix the 'zoom into input' issue on ios\n  margin: 0 -2rem;\n  ", "\n  &:focus {\n    border: 0;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), themes_1.colors.none, globalVariables_1.globalInputElemPadding, themes_1.colors.grey40);
+exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"], ["\n  cursor: pointer;\n  position: relative;\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 1rem 2rem 1rem 2rem;\n  ", "\n\n  ", ";\n\n  ", "\n  ", "\n\n  height: auto;\n  align-items: flex-start;\n"])), themes_1.colors.grey5, function (_a) {
     var disabled = _a.disabled;
     return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, (0, mixins_1.transition)("background-color"), globalVariables_1.globalInputElemFocused, globalVariables_1.globalInputElemHover);

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

@@ -44,6 +44,6 @@ exports.StyledDropdownRefWrapper = styled_components_1.default.div(templateObjec
 exports.StyledTagsInputWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  height: 100%;\n  gap: 1rem;\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  height: 100%;\n  gap: 1rem;\n  ", "\n"])), function (_a) {
     var input_display = _a.input_display;
     return input_display === 'input'
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    max-width: calc(100vw - 10rem); //2+2 for page container padding on mob & 2+4 for the select elem padding\n    "], ["\n    background-color: ", ";\n    max-width: calc(100vw - 10rem); //2+2 for page container padding on mob & 2+4 for the select elem padding\n    "])), themes_1.colors.white) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n    "], ["\n\n    "])));
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      max-width: calc(100vw - 10rem); //2+2 for page container padding on mob & 2+4 for the select elem padding\n    "], ["\n      background-color: ", ";\n      max-width: calc(100vw - 10rem); //2+2 for page container padding on mob & 2+4 for the select elem padding\n    "])), themes_1.colors.white) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n    "], ["\n\n    "])));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/v2/components/Dropdowns/utils/genColor.js

@@ -9,7 +9,7 @@ var genColor = function (_a) {
     var color = _a.color;
     if (!color)
         return null;
-    return (react_1.default.createElement("div", { style: { flex: "0 0 auto" } },
-        react_1.default.createElement("div", { style: { width: '2rem', height: '2rem', background: color, borderRadius: '10%' } })));
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { style: { width: '1.8rem', height: '1.8rem', background: color, borderRadius: '0.4rem' } })));
 };
 exports.genColor = genColor;

package/dist/v2/components/Dropdowns/utils/genIcon.d.ts

@@ -1,7 +1,7 @@
-export function genIcon({ icon, weight, invert, S, color, className }: {
+export function genIcon({ icon, weight, disabled, S, color, className }: {
     icon: any;
-    weight: any;
-    invert: any;
+    weight?: string;
+    disabled: any;
     S: any;
     color: any;
     className?: string;

package/dist/v2/components/Dropdowns/utils/genIcon.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.genIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../icons");
+var themes_1 = require("../../../themes");
+var grey40 = themes_1.colors.grey40;
 var genIcon = function (_a) {
-    var icon = _a.icon, weight = _a.weight, invert = _a.invert, S = _a.S, color = _a.color, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var icon = _a.icon, _b = _a.weight, weight = _b === void 0 ? "bold" : _b, disabled = _a.disabled, S = _a.S, color = _a.color, _c = _a.className, className = _c === void 0 ? '' : _c;
     if (!icon)
         return null;
     var IconComp = icons_1.icons[icon];
     if (!IconComp)
         return null;
-    return react_1.default.createElement(IconComp, { className: className, size: S ? 16 : 20, style: { color: invert ? 'white' : (color || undefined) }, weight: weight });
+    return react_1.default.createElement(IconComp, { className: className, size: S ? 16 : 20, style: { color: disabled ? grey40 : (color || undefined) }, weight: weight });
 };
 exports.genIcon = genIcon;

package/dist/v2/components/Dropdowns/utils/genProfileImg.d.ts

@@ -1,6 +1,5 @@
-export function genProfileImg({ image, display, invert }: {
+export function genProfileImg({ image, display }: {
     image: any;
     display: any;
-    invert: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/Dropdowns/utils/genProfileImg.js

@@ -7,8 +7,8 @@ exports.genProfileImg = void 0;
 var react_1 = __importDefault(require("react"));
 var ProfileImageInput_1 = require("../../../../components/ImageInput/derivedComps/ProfileImageInput");
 var genProfileImg = function (_a) {
-    var image = _a.image, display = _a.display, invert = _a.invert;
+    var image = _a.image, display = _a.display;
     return (react_1.default.createElement("div", { style: { flex: "0 0 auto", display: 'flex', alignItems: 'start' }, id: "test" },
-        react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, imageTitle: display, size: 20, invert: invert })));
+        react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, imageTitle: display, size: 20 })));
 };
 exports.genProfileImg = genProfileImg;

package/dist/v2/components/Dropdowns/utils/genTagComp.js

@@ -14,14 +14,14 @@ var genTagComp = function (id, d, options) {
     switch (true) {
         case !options.display:
             return (react_1.default.createElement("div", { tabIndex: 0, style: { minWidth: 0 }, onFocus: function (e) { return !showOptions && e.stopPropagation(); } },
-                react_1.default.createElement(Tags_1.TagClear, { XS: options.S, grey: true, invert: options.invert, display: d.display, onClick: function (e) {
+                react_1.default.createElement(Tags_1.TagClear, { XS: options.S, grey: true, display: d.display, onClick: function (e) {
                         e.stopPropagation();
                         options.handleSelect(options.single_multi === "single" ? undefined : d);
                     } })));
         case !!link:
-            return react_1.default.createElement(Tags_1.TagLink, { XS: options.S, invert: options.invert, to: link, display: d.display, color: options.color });
+            return react_1.default.createElement(Tags_1.TagLink, { XS: options.S, to: link, display: d.display, color: options.color });
         default:
-            return react_1.default.createElement(Tags_1.TagDisplay, { XS: options.S, invert: options.invert, display: d.display });
+            return react_1.default.createElement(Tags_1.TagDisplay, { XS: options.S, display: d.display });
     }
 };
 exports.genTagComp = genTagComp;

package/dist/v2/components/Dropdowns/utils/getValue.d.ts

@@ -1,3 +1,4 @@
+export function isGroupedData(options: any): boolean;
 export function getValue_SINGLE({ valueProp, optionsFn, options, theme, saveValueAsString }: {
     valueProp: any;
     optionsFn: any;

package/dist/v2/components/Dropdowns/utils/getValue.js

@@ -7,26 +7,80 @@
  * Because thats the only format our dropdowns understand
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValue_MULTI = exports.getValue_SINGLE = void 0;
+exports.getValue_MULTI = exports.getValue_SINGLE = exports.isGroupedData = void 0;
 var toArray_1 = require("../../../../utils/toArray");
 var getAllOptionsFns_1 = require("./getAllOptionsFns");
 // Note: - saveValueAsString can be misleading here, because the value could be a string, integer, boolean values
 // maybe we can rename to saveValueOnly, or some better name
+// export const getValue_SINGLE = ({valueProp, optionsFn, options, theme,saveValueAsString}) => {
+//     return saveValueAsString
+//     ? (optionsFn ? getAllOptionsFns(theme)[optionsFn.fn](...(toArray(optionsFn.args) || [])) : options).find(d => d.value === valueProp)
+//     : valueProp
+// }
+// export const getValue_MULTI = ({valueProp, optionsFn, options, theme,saveValueAsString}) => {
+//     return saveValueAsString
+//     ? valueProp?.map(vProp => (optionsFn ? getAllOptionsFns(theme)[optionsFn.fn](...(toArray(optionsFn.args) || [])) : options).find(d => d.value === vProp))
+//     : valueProp
+// }
+var isGroupedData = function (options) {
+    // If the data is empty or not an array, return false
+    if (!options || !Array.isArray(options) || options.length === 0) {
+        return false;
+    }
+    // Check the first item in the array
+    // If it has an 'options' property that is an array, it's grouped data
+    return (options[0] &&
+        typeof options[0] === "object" &&
+        Array.isArray(options[0].options) &&
+        options[0].options.length > 0);
+};
+exports.isGroupedData = isGroupedData;
 var getValue_SINGLE = function (_a) {
     var _b;
     var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
-    return saveValueAsString
-        ? (optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options).find(function (d) { return d.value === valueProp; })
-        : valueProp;
+    if (!saveValueAsString)
+        return valueProp;
+    var allOptions = optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options;
+    if ((0, exports.isGroupedData)(allOptions)) {
+        // For grouped data, search through all options in all groups
+        for (var _i = 0, allOptions_1 = allOptions; _i < allOptions_1.length; _i++) {
+            var group = allOptions_1[_i];
+            var found = group.options.find(function (d) { return d.value === valueProp; });
+            if (found)
+                return found;
+        }
+        return undefined;
+    }
+    else {
+        // For normal data, search directly
+        return allOptions.find(function (d) { return d.value === valueProp; });
+    }
 };
 exports.getValue_SINGLE = getValue_SINGLE;
 var getValue_MULTI = function (_a) {
+    var _b;
     var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme, saveValueAsString = _a.saveValueAsString;
-    return saveValueAsString
-        ? valueProp === null || valueProp === void 0 ? void 0 : valueProp.map(function (vProp) {
-            var _a;
-            return (optionsFn ? (_a = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_a, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options).find(function (d) { return d.value === vProp; });
-        })
-        : valueProp;
+    if (!saveValueAsString || !valueProp)
+        return valueProp;
+    var allOptions = optionsFn
+        ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, ((0, toArray_1.toArray)(optionsFn.args) || [])) : options;
+    if ((0, exports.isGroupedData)(allOptions)) {
+        // For grouped data, map each value and search through all options in all groups
+        return valueProp.map(function (vProp) {
+            for (var _i = 0, allOptions_2 = allOptions; _i < allOptions_2.length; _i++) {
+                var group = allOptions_2[_i];
+                var found = group.options.find(function (d) { return d.value === vProp; });
+                if (found)
+                    return found;
+            }
+            return undefined;
+        }).filter(Boolean); // Remove any undefined values
+    }
+    else {
+        // For normal data, map directly
+        return valueProp.map(function (vProp) {
+            return allOptions.find(function (d) { return d.value === vProp; });
+        }).filter(Boolean); // Remove any undefined values
+    }
 };
 exports.getValue_MULTI = getValue_MULTI;

package/dist/v2/components/Dropdowns/utils/keywordSearchOptions.js

@@ -1,18 +1,62 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.keywordSearchOptions = void 0;
 var isStringMatch_1 = require("../../../../utils/isStringMatch");
+var getValue_1 = require("./getValue");
 var keywordSearchOptions = function (_a) {
     var options = _a.options, searchString = _a.searchString, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptionsInParent;
+    // If any options are loading, return the original options
     if (options.some(function (d) { return d.loading === true; }))
-        return options; //if any of the options are still loading, then dont even try to do this filter thing
-    //else
-    var toReturn = options.filter(function (d) {
-        return (0, isStringMatch_1.isStringMatch)({ data: d, toMatchPath: searchFieldsConfig || 'display', subString: searchString });
-    });
-    //we want to track filtered options only if a search is being conducted
-    //this will help us to select the most relevant option if user hits 'enter' instead of clicking on option.
-    setFilteredOptionsInParent && searchString && setFilteredOptionsInParent(toReturn);
-    return toReturn;
+        return options;
+    // Check if we're dealing with grouped data
+    var isGrouped = (0, getValue_1.isGroupedData)(options);
+    if (isGrouped) {
+        // Handle grouped data
+        var filteredGroups = options.map(function (group) {
+            // Filter the options within each group
+            var filteredOptions = group.options.filter(function (option) {
+                return (0, isStringMatch_1.isStringMatch)({
+                    data: option,
+                    toMatchPath: searchFieldsConfig || 'display',
+                    subString: searchString
+                });
+            });
+            // Return a new group object with filtered options
+            return __assign(__assign({}, group), { options: filteredOptions });
+        }).filter(function (group) { return group.options.length > 0; }); // Only keep groups that have matching options
+        // Track filtered options if needed
+        if (setFilteredOptionsInParent && searchString) {
+            // Flatten all options from all groups for tracking
+            var allFilteredOptions = filteredGroups.flatMap(function (group) { return group.options; });
+            setFilteredOptionsInParent(allFilteredOptions);
+        }
+        return filteredGroups;
+    }
+    else {
+        // Handle normal data (original logic)
+        var filteredOptions = options.filter(function (option) {
+            return (0, isStringMatch_1.isStringMatch)({
+                data: option,
+                toMatchPath: searchFieldsConfig || 'display',
+                subString: searchString
+            });
+        });
+        // Track filtered options if needed
+        if (setFilteredOptionsInParent && searchString) {
+            setFilteredOptionsInParent(filteredOptions);
+        }
+        return filteredOptions;
+    }
 };
 exports.keywordSearchOptions = keywordSearchOptions;

package/dist/v2/components/List/comps/ListGroup.d.ts

@@ -0,0 +1,20 @@
+export const GroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const GroupDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export function ListGroup({ group, index, value, focussedOp, scrollFocussedOpIntoView, handleSelect, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, setSearchString, setSearchBarFocus, }: {
+    group: any;
+    index: any;
+    value: any;
+    focussedOp: any;
+    scrollFocussedOpIntoView: any;
+    handleSelect: any;
+    optionsClassName: any;
+    invert: any;
+    S: any;
+    observerRef: any;
+    isMulti: any;
+    isTagsStyle: any;
+    setFocusSelectTagsInput: any;
+    setSearchString: any;
+    setSearchBarFocus: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/v2/components/List/comps/ListGroup.js

@@ -0,0 +1,39 @@
+"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.ListGroup = exports.GroupDivider = exports.GroupHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo2_1 = require("../../Typo2");
+var Divider_1 = require("../../Divider");
+var themes_1 = require("../../../themes");
+var styled_components_1 = __importDefault(require("styled-components"));
+var ListItem_1 = require("./ListItem");
+exports.GroupHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"], ["\n  padding: 0.4rem 0.8rem;\n  color: ", ";\n"])), themes_1.colors.grey50);
+exports.GroupDivider = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.4rem 0 0.8rem 0;\n"], ["\n  margin: 0.4rem 0 0.8rem 0;\n"])));
+var ListGroup = function (_a) {
+    var group = _a.group, index = _a.index, value = _a.value, focussedOp = _a.focussedOp, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, optionsClassName = _a.optionsClassName, invert = _a.invert, S = _a.S, observerRef = _a.observerRef, isMulti = _a.isMulti, isTagsStyle = _a.isTagsStyle, setFocusSelectTagsInput = _a.setFocusSelectTagsInput, setSearchString = _a.setSearchString, setSearchBarFocus = _a.setSearchBarFocus;
+    return (react_1.default.createElement("div", null,
+        index > 0 && (react_1.default.createElement(exports.GroupDivider, null,
+            react_1.default.createElement(Divider_1.Divider, null))),
+        react_1.default.createElement(exports.GroupHeader, null,
+            react_1.default.createElement(Typo2_1.UI_TAG, null, group.display)),
+        group.options.map(function (option, idx) { return (react_1.default.createElement(ListItem_1.ListItem, { key: option.value, option: option, isSelected: (!option.loading && (value === null || value === void 0 ? void 0 : value.value) === option.value), isFocussed: focussedOp === idx, index: idx, scrollFocussedOpIntoView: scrollFocussedOpIntoView, handleSelect: function () {
+                if (!option.loading) {
+                    handleSelect(option);
+                    if (setSearchString)
+                        setSearchString("");
+                    if (setSearchBarFocus)
+                        setSearchBarFocus(true);
+                    if (setFocusSelectTagsInput)
+                        setFocusSelectTagsInput(true);
+                }
+            }, optionsClassName: optionsClassName, invert: invert, S: S, observerRef: group.options.length === idx + 1 ? observerRef : null, isMulti: isMulti, isTagsStyle: isTagsStyle, value: value })); })));
+};
+exports.ListGroup = ListGroup;
+var templateObject_1, templateObject_2;

package/dist/v2/components/List/comps/ListItem.d.ts

@@ -0,0 +1,15 @@
+export function ListItem({ option, isSelected, isFocussed, scrollFocussedOpIntoView, handleSelect, setSearchString, optionsClassName, S, observerRef, isTagsStyle, isMulti, value, index, }: {
+    option: any;
+    isSelected: any;
+    isFocussed: any;
+    scrollFocussedOpIntoView: any;
+    handleSelect: any;
+    setSearchString: any;
+    optionsClassName: any;
+    S: any;
+    observerRef: any;
+    isTagsStyle: any;
+    isMulti: any;
+    value: any;
+    index: any;
+}): import("react").JSX.Element;

package/dist/v2/components/List/comps/ListItem.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+var styled_components_1 = require("styled-components");
+var TextLoader_1 = require("../../../../components/LoadersAndProgress/TextLoader");
+// import { genProfileImg } from "../../Dropdowns/utils/genProfileImg";
+var genIcon_1 = require("../../Dropdowns/utils/genIcon");
+var getText_1 = require("../../../../utils/getText");
+var Typo2_1 = require("../../Typo2");
+var themes_1 = require("../../../themes");
+var genColor_1 = require("../../Dropdowns/utils/genColor");
+var RadioAndCheckbox_1 = require("../../RadioAndCheckbox");
+var styled_1 = require("./styled");
+var grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
+var ListItem = function (_a) {
+    var option = _a.option, isSelected = _a.isSelected, isFocussed = _a.isFocussed, scrollFocussedOpIntoView = _a.scrollFocussedOpIntoView, handleSelect = _a.handleSelect, setSearchString = _a.setSearchString, optionsClassName = _a.optionsClassName, S = _a.S, observerRef = _a.observerRef, isTagsStyle = _a.isTagsStyle, isMulti = _a.isMulti, value = _a.value, index = _a.index;
+    var theme = (0, styled_components_1.useTheme)();
+    var TypoComp = S ? Typo2_1.UI_BODY_SM_DF : Typo2_1.UI_BODY_SM_DF;
+    var image = option.image, display = option.display, icon = option.icon, desc = option.desc, color = option.color, loading = option.loading, disabled = option.disabled;
+    var handleClick = function () {
+        if (!loading) {
+            handleSelect(option);
+            setSearchString && setSearchString("");
+        }
+    };
+    if (loading) {
+        return (React.createElement(styled_1.StyledListItemWrapper, { isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", S: S },
+            React.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })));
+    }
+    var opIsSelected = function (thisOpData) {
+        return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
+    };
+    return (React.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none" } },
+        React.createElement("div", { ref: observerRef, style: {
+                display: "flex",
+                alignItems: "flex-start",
+                maxWidth: "36rem",
+                gap: icon ? "0.6rem" : "0.8rem",
+            } },
+            (image || icon || color || isMulti) && (React.createElement("div", { style: {
+                    marginTop: "0.1rem",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem"
+                } },
+                isMulti && !isTagsStyle ? React.createElement(RadioAndCheckbox_1.CheckboxButton, { isSelected: opIsSelected(option) }) : null,
+                icon &&
+                    (0, genIcon_1.genIcon)({
+                        icon: icon,
+                        S: S,
+                        className: "OKE-Dropdown__optionIcon",
+                        disabled: disabled
+                    }),
+                color && (0, genColor_1.genColor)({ color: color }))),
+            React.createElement("div", null,
+                React.createElement(TypoComp, { semibold: desc ? true : false, className: "OKE-Dropdown__optionText ".concat(optionsClassName || ""), style: { color: disabled ? grey40 : grey80 } }, (0, getText_1.getText)(display)),
+                desc && (React.createElement(Typo2_1.UI_CAPTION_DF, { className: "OKE-Dropdown__optionDesc", style: { color: disabled ? grey40 : grey60, marginTop: "0.2rem" } }, (0, getText_1.getText)(desc)))))));
+};
+exports.ListItem = ListItem;

package/dist/v2/components/List/comps/styled.d.ts

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

package/dist/v2/components/List/comps/styled.js

@@ -0,0 +1,71 @@
+"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 __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.StyledListItemWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../themes");
+var getDynamicColors_1 = require("../../../themes/utils/getDynamicColors");
+var grey10 = themes_1.colors.grey10;
+exports.StyledListItemWrapper = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    /* padding: ", "; */\n    padding: 0.8rem;\n    border-radius: 0.4rem;\n    gap: 20rem;\n    ", "\n    \n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", "\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", "\n      } \n\n    &:hover{\n      background-color: ", ";\n\n      .OKE-Dropdown__optionText{\n        color: ", ";\n      } \n\n      .OKE-Dropdown__optionIcon{\n        color: ", ";\n      } \n    }\n\n   \n\n    &:first-of-type {\n      /* margin-top: 0.4rem; */\n    }\n\n    &:last-of-type {\n      /* margin-bottom: 0.4rem; */\n    }\n\n    .OKE-Dropdown__optionDesc {\n      @include kp-clamp-text(2);\n      white-space: normal;\n    }\n\n    .OKE-Dropdown__optionImg {\n      flex: 0 0 auto;\n    }\n\n    .OKE-Dropdown__checkboxClickArea {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n    }\n    .OKE-Dropdown__checkboxClickArea-box {\n      margin-top: 0.2rem;\n      flex-shrink: 0;\n    }\n"])), function (_a) {
+    var S = _a.S;
+    return S ? '0.8rem' : '0.6rem 0.8rem';
+}, function (_a) {
+    var S = _a.S;
+    return !S
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      /* min-height: 3.8rem; */\n      "], ["\n      /* min-height: 3.8rem; */\n      "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      /* height: 3rem; */\n      "], ["\n      /* height: 3rem; */\n      "])));
+}, function (_a) {
+    var isFocussed = _a.isFocussed, isSelected = _a.isSelected, theme = _a.theme;
+    if (isSelected) {
+        var secondaryContainer = (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+        return "".concat(secondaryContainer, " !important"); // 66 in hex is 40% opacity
+    }
+    else {
+        return isFocussed ? themes_1.colors.grey5 : themes_1.colors.white;
+    }
+}, themes_1.colors.grey80, themes_1.colors.grey80, function (_a) {
+    var theme = _a.theme;
+    return "".concat(grey10);
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, getDynamicColors_1.getOnSecondary)(theme === null || theme === void 0 ? void 0 : theme.colors);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/v2/components/List/index.d.ts

@@ -0,0 +1,27 @@
+export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export function List({ options, value, focussedOp, scrollFocussedOpIntoView, handleSelect, optionsClassName, invert, S, observerRef, isMulti, isTagsStyle, setFocusSelectTagsInput, grouped, disableShadow, isSearchable, searchbarPlaceholder, searchBarFocus, searchString, setSearchString, setSearchBarFocus, children, enableBorder, style }: {
+    options?: any[];
+    value: any;
+    focussedOp: any;
+    scrollFocussedOpIntoView: any;
+    handleSelect: any;
+    optionsClassName: any;
+    invert: any;
+    S: any;
+    observerRef: any;
+    isMulti?: boolean;
+    isTagsStyle: any;
+    setFocusSelectTagsInput: any;
+    grouped?: boolean;
+    disableShadow: any;
+    isSearchable: any;
+    searchbarPlaceholder: any;
+    searchBarFocus: any;
+    searchString: any;
+    setSearchString: any;
+    setSearchBarFocus: any;
+    children: any;
+    enableBorder: any;
+    style: any;
+}): React.JSX.Element;
+import React from 'react';