oolib 2.207.1 → 2.208.1

package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.d.ts

@@ -0,0 +1,33 @@
+interface PrepareHeatMapDataParams {
+    _data: any[];
+    valuePath: string | string[];
+    tooltipLabelsMapping?: {
+        [key: string]: string;
+    };
+    tooltipLabelsPath?: string | string[];
+    labelPath: string;
+    showPercent: boolean;
+    colorIdx: number;
+}
+interface HeatMapCellData {
+    labels: {
+        count: number;
+        percentage?: number;
+        name: string;
+        tooltipLabel: string;
+        dataIndex: number;
+        hasData: boolean;
+        barColor: string;
+        textColor: string;
+    };
+}
+interface PreparedHeatMapData {
+    tableData: HeatMapCellData[][];
+    columnHeaders: {
+        key: string;
+        displayLabel: string;
+    }[];
+    dataMaxValue: number;
+}
+export declare const usePrepareHeatMapData: ({ _data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx }: PrepareHeatMapDataParams) => PreparedHeatMapData;
+export {};

package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrepareHeatMapData = void 0;
+var react_1 = require("react");
+var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
+var colors_1 = require("../../../../themes/colors");
+var usePrepareHeatMapData = function (_a) {
+    var _data = _a._data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, labelPath = _a.labelPath, showPercent = _a.showPercent, colorIdx = _a.colorIdx;
+    return (0, react_1.useMemo)(function () {
+        if (!_data || _data.length === 0) {
+            return {
+                tableData: [],
+                columnHeaders: [],
+                dataMaxValue: 0
+            };
+        }
+        var valuePathArray = Array.isArray(valuePath) ? valuePath : [valuePath];
+        // Optimized: Single pass to collect all unique columns and pre-calculate row totals
+        var columnMap = new Map(); // columnLabel -> columnIndex
+        var rowTotals = [];
+        var rowData = [];
+        // First pass: collect unique columns and calculate row totals
+        _data.forEach(function (row, rowIndex) {
+            var rowName = (0, _EXPORTS_1.getVal)(row, labelPath);
+            var cellValues = new Map();
+            var rowTotal = 0;
+            valuePathArray.forEach(function (path, pathIndex) {
+                var value = (0, _EXPORTS_1.getVal)(row, path);
+                if (value !== undefined && value !== null) {
+                    // Get column label
+                    var columnLabel = void 0;
+                    if (tooltipLabelsPath) {
+                        if (Array.isArray(tooltipLabelsPath)) {
+                            var labelPath_1 = tooltipLabelsPath[pathIndex];
+                            if (labelPath_1) {
+                                columnLabel = (0, _EXPORTS_1.getVal)(row, labelPath_1) || "Column ".concat(pathIndex);
+                            }
+                            else {
+                                columnLabel = "Column ".concat(pathIndex);
+                            }
+                        }
+                        else {
+                            columnLabel = (0, _EXPORTS_1.getVal)(row, tooltipLabelsPath) || "Column ".concat(pathIndex);
+                        }
+                    }
+                    else if (tooltipLabelsMapping) {
+                        columnLabel = tooltipLabelsMapping[path] || path;
+                    }
+                    else {
+                        columnLabel = path;
+                    }
+                    // Store cell value and add to column map
+                    cellValues.set(columnLabel, value);
+                    if (!columnMap.has(columnLabel)) {
+                        columnMap.set(columnLabel, columnMap.size);
+                    }
+                    rowTotal += value;
+                }
+            });
+            rowTotals.push(rowTotal);
+            rowData.push({ rowName: rowName, cellValues: cellValues });
+        });
+        // Create column headers in order
+        var columnHeaders = Array.from(columnMap.entries())
+            .sort(function (_a, _b) {
+            var a = _a[1];
+            var b = _b[1];
+            return a - b;
+        })
+            .map(function (_a) {
+            var key = _a[0];
+            return ({
+                key: key,
+                displayLabel: key
+            });
+        });
+        // Second pass: build table data efficiently
+        var tableData = rowData.map(function (_a, rowIndex) {
+            var rowName = _a.rowName, cellValues = _a.cellValues;
+            var rowTotal = rowTotals[rowIndex];
+            return columnHeaders.map(function (header, colIndex) {
+                var cellValue = cellValues.get(header.key) || 0;
+                var hasData = cellValues.has(header.key);
+                var percentage = rowTotal > 0 ? (cellValue / rowTotal) * 100 : 0;
+                return {
+                    labels: {
+                        count: cellValue,
+                        percentage: showPercent ? Math.ceil(percentage) : undefined,
+                        name: rowName,
+                        tooltipLabel: header.key,
+                        dataIndex: rowIndex,
+                        hasData: hasData,
+                        barColor: colors_1.dataVizColors[(colorIdx + colIndex) % colors_1.dataVizColors.length],
+                        textColor: colors_1.dataVizColorsText[(colorIdx + colIndex) % colors_1.dataVizColorsText.length]
+                    }
+                };
+            });
+        });
+        // Calculate max value efficiently
+        var dataMaxValue = 1;
+        for (var _i = 0, rowData_1 = rowData; _i < rowData_1.length; _i++) {
+            var cellValues = rowData_1[_i].cellValues;
+            for (var _a = 0, _b = Array.from(cellValues.values()); _a < _b.length; _a++) {
+                var value = _b[_a];
+                if (value > dataMaxValue) {
+                    dataMaxValue = value;
+                }
+            }
+        }
+        return {
+            tableData: tableData,
+            columnHeaders: columnHeaders,
+            dataMaxValue: dataMaxValue
+        };
+    }, [_data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx]);
+};
+exports.usePrepareHeatMapData = usePrepareHeatMapData;

package/package.json

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

package/dist/components/BlockLabel/index.d.ts

@@ -1,2 +0,0 @@
-export function BlockLabel(props: any): React.JSX.Element;
-import React from "react";

package/dist/components/BlockLabel/index.js

@@ -1,75 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockLabel = void 0;
-var react_1 = __importStar(require("react"));
-var Typo_1 = require("../Typo");
-var InlineAlert_1 = require("../InlineAlert");
-var index_styled_1 = require("./index.styled");
-var colors_1 = require("../../themes/colors");
-var toArray_1 = require("../../utils/toArray");
-var Hints_1 = __importDefault(require("../Hints"));
-var Tooltip_1 = require("../Tooltip");
-var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
-var BlockLabel = function (props) {
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip;
-    var shouldCompRender = label ||
-        (!readOnly &&
-            (sublabel ||
-                inputOnlyLabel ||
-                (isRequired === false && hideOptionalLabel !== true) ||
-                (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
-    var optional = readOnly ? false : isRequired === false;
-    var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return (typeof er === "object" ? er.text : er); }).join(", ");
-    //next 2 vars is for 'test link' usecase
-    var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
-    var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
-        ? "danger"
-        : errorMsgs[0].type || "danger";
-    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
-        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
-            (label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, semibold: true, capitalize: true }, label || inputOnlyLabel)),
-            !readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints })) : null,
-            optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
-            !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
-            infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
-        !readOnly &&
-            sublabel &&
-            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo_1.SANS_3, { key: i, color: invert ? greyColor40 : greyColor80 }, subL)); }))));
-};
-exports.BlockLabel = BlockLabel;

package/dist/components/BlockLabel/index.styled.d.ts

@@ -1,2 +0,0 @@
-export const StyledBlockLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledInfoTooltipbutton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/components/BlockLabel/index.styled.js

@@ -1,14 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0rem;\n  margin-bottom: 1rem;\n  position: relative;\n"])));
-exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n"])));
-var templateObject_1, templateObject_2;

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

@@ -1,38 +0,0 @@
-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;
-    onChange: any;
-    className: any;
-    readOnly: any;
-    invert: any;
-    selectClassName: any;
-    optionsClassName: any;
-    selectStyleOverride: any;
-    optionsFn: any;
-    options: any;
-    isTagsStyle: any;
-    isSearchable: any;
-    searchFieldsConfig: any;
-    setFilteredOptions: any;
-    setSearchString: any;
-    searchString: any;
-    label: any;
-    optionsModalLabel: any;
-    genCreateTagButton: any;
-    placeholder: any;
-    genCustomSelectComp: any;
-    disableSelectTextUpdate: any;
-    selectConfig: any;
-    lightboxHeight: any;
-    lightboxStyle: any;
-    optionsAnchor: any;
-    popOutOfOverflowHiddenParent: any;
-    S: any;
-    disabled: any;
-    broadcastShowOptions: any;
-    tagColor: any;
-    searchbarPlaceholder: any;
-    alignDropdown?: string;
-}, ...args: any[]): React.JSX.Element;
-import React from "react";

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

@@ -1,179 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMulti = DropdownMulti;
-var BlockLabel_1 = require("../../../v2/components/BlockLabel");
-var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
-var mixins_1 = require("../../../themes/mixins");
-var useHandleClickOutside_1 = require("../../../utils/customHooks/useHandleClickOutside");
-var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
-var react_1 = __importStar(require("react"));
-var SelectTagsInput_1 = require("../comps/SelectTagsInput");
-var SelectDropdown_1 = require("../comps/SelectDropdown");
-var OptionsMulti_1 = require("../comps/OptionsMulti");
-var DisplayCompSingle_1 = require("../comps/DisplayCompSingle");
-var handlers_1 = require("../handlers");
-var useHideShowOptions_1 = require("../utils/useHideShowOptions");
-var useCreateDropdownRefs_1 = require("../utils/useCreateDropdownRefs");
-var keywordSearchOptions_1 = require("../utils/keywordSearchOptions");
-var getValue_1 = require("../utils/getValue");
-var generateOptions_1 = require("../utils/generateOptions");
-var useSearchString_1 = require("../utils/useSearchString");
-var styled_components_1 = require("styled-components");
-var genTagComp_1 = require("../utils/genTagComp");
-var styled_1 = require("../styled");
-function DropdownMulti(_a) {
-    var saveValueAsString = _a.saveValueAsString, valueProp = _a.value, id = _a.id, parentOnChange = _a.onChange, className = _a.className, 
-    // injectOtherOption,
-    readOnly = _a.readOnly, invert = _a.invert, selectClassName = _a.selectClassName, //used to override font size in priimary header
-    optionsClassName = _a.optionsClassName, //used to override font size in priimary header
-    selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, 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;
-    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;
-    //2 INIT SHOW OPTIONS STATE
-    var _d = (0, useHideShowOptions_1.useHideShowOptions)({
-        broadcastShowOptions: broadcastShowOptions
-    }), 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 _e = (0, useSearchString_1.useSearchString)({
-        setSearchStringInParent: setSearchStringInParent,
-        searchStringInParent: searchStringInParent
-    }), searchString = _e[0], setSearchString = _e[1];
-    console.log({
-        optionsFn: optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
-        argsString: JSON.stringify(optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args),
-    });
-    var options = (0, react_1.useMemo)(function () {
-        var ops = (0, generateOptions_1.generateOptions)({
-            options: optionsProp,
-            optionsFn: optionsFn,
-            theme: theme
-            // injectOtherOption,
-        });
-        console.log({ ops: ops });
-        var currentValue = value || [];
-        // rm the selectedOps from ops list (since they are shown anyway in the selectedops list)
-        return /*isTagsStyle ? ops : */ ops.filter(function (op) { return currentValue.every(function (v) { return v.value !== op.value; }); });
-    }, [
-        JSON.stringify(optionsProp), //we need this cuz options change from 'loading' to actual options in some cases
-        // showOptions
-        optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.fn,
-        JSON.stringify(optionsFn === null || optionsFn === void 0 ? void 0 : optionsFn.args),
-        value
-    ]);
-    options = (0, react_1.useMemo)(function () {
-        return (!isSearchable && !isTagsStyle)
-            ? options
-            : (0, keywordSearchOptions_1.keywordSearchOptions)({
-                options: options,
-                searchString: searchString,
-                searchFieldsConfig: searchFieldsConfig,
-                setFilteredOptionsInParent: setFilteredOptionsInParent,
-            });
-    }, [
-        searchString,
-        // showOptions, 
-        options,
-        value
-    ]);
-    /**
-     * very importnant to understand:
-     * Assume this second useMemo didnt have 'options' in its dependency array
-     * Lets assume initial state of options from previous render is length = 8
-     * If options change because of the first useMemo, (and lets say become of length 5)
-     * and lets say second memo doesnt fire cuz showOptions or searchString dont change,
-     * then the second useMemo sets the 'options' to its previous value in previous render (which is length = 8)
-     *
-     * obviously this causes bugs.
-     * so by putting options in the second useMemo dependency, we force the second one to fire
-     * if the options change
-     */
-    //--
-    //5 PRIMARY CHANGE HANDLER
-    var handleSelect = function (newVal) { return (0, handlers_1.handleSelect_MULTI)({
-        parentOnChange: parentOnChange,
-        id: id,
-        newVal: newVal,
-        prevVal: value,
-        parentOnChange: parentOnChange,
-        // hideShowOtherTextInputOnSelect_MULTI,
-        saveValueAsString: saveValueAsString
-    }); };
-    var genDisplayComp = function () {
-        if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
-            return null;
-        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 _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[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,
-            setSearchString: setSearchString,
-            single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled, style: ops.style }));
-    };
-    var genInputComp = function () {
-        // const SelectComp = isTagsStyle ? SelectTagsInput : SelectDropdown 
-        return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
-            react_1.default.createElement("div", { ref: selectRef, className: "OKE-Dropdown__Select-wrapper", onClick: disabled ? function () { } : function () {
-                    isTagsStyle
-                        ? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
-                        : showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
-                } }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { 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 })));
-    };
-    return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },
-        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
-        readOnly ? genDisplayComp() : genInputComp()));
-}

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

@@ -1,40 +0,0 @@
-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;
-    selectClassName: any;
-    optionsClassName: any;
-    disableSelectTextUpdate: any;
-    selectStyleOverride: any;
-    value: any;
-    id: any;
-    onChange: any;
-    className: any;
-    style: any;
-    readOnly: any;
-    invert: any;
-    optionsFn: any;
-    options: any;
-    saveValueAsString: any;
-    isTagsStyle: any;
-    selectConfig: any;
-    label: any;
-    optionsModalLabel: any;
-    broadcastShowOptions: any;
-    isSearchable: any;
-    searchFieldsConfig: any;
-    setFilteredOptions: any;
-    setSearchString: any;
-    searchString: any;
-    genCustomSelectComp: any;
-    placeholder: any;
-    genCreateTagButton: any;
-    popOutOfOverflowHiddenParent: any;
-    S: any;
-    disabled: any;
-    tagColor: any;
-    observerRef: any;
-    searchbarPlaceholder: any;
-    alignDropdown?: string;
-}, ...args: any[]): React.JSX.Element;
-import React from "react";