oolib 2.57.2 → 2.57.3

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

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * if value has been saved as a string ( tci usecase )
+ * then the appropriate option needs to be found and set as
+ * value in the format of { display: ..., value: ... }
+ *
+ * Because thats the only format our dropdowns understand
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValue_MULTI = exports.getValue_SINGLE = void 0;
+var getAllOptionsFns_1 = require("./getAllOptionsFns");
+var getValue_SINGLE = function (_a) {
+    var _b;
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
+    return !!valueProp === true && typeof valueProp === 'string'
+        ? (optionsFn ? (_b = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_b, (optionsFn.args || [])) : options).find(function (d) { return d.value === valueProp; })
+        : valueProp;
+};
+exports.getValue_SINGLE = getValue_SINGLE;
+var getValue_MULTI = function (_a) {
+    var valueProp = _a.valueProp, optionsFn = _a.optionsFn, options = _a.options, theme = _a.theme;
+    return !!valueProp === true && valueProp.every(function (v) { return typeof v === 'string'; })
+        ? valueProp.map(function (vProp) {
+            var _a;
+            return (optionsFn ? (_a = (0, getAllOptionsFns_1.getAllOptionsFns)(theme))[optionsFn.fn].apply(_a, (optionsFn.args || [])) : options).find(function (d) { return d.value === vProp; });
+        })
+        : valueProp;
+};
+exports.getValue_MULTI = getValue_MULTI;

package/dist/components/Dropdowns/utils/keywordSearchOptions.d.ts

@@ -0,0 +1,6 @@
+export function keywordSearchOptions({ options, searchString, searchFieldsConfig, setFilteredOptionsInParent }: {
+    options: any;
+    searchString: any;
+    searchFieldsConfig: any;
+    setFilteredOptionsInParent: any;
+}): any;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keywordSearchOptions = void 0;
+var isStringMatch_1 = require("../../../utils/isStringMatch");
+var keywordSearchOptions = function (_a) {
+    var options = _a.options, searchString = _a.searchString, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptionsInParent;
+    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;
+};
+exports.keywordSearchOptions = keywordSearchOptions;

package/dist/components/Dropdowns/utils/setDropdownSelectText.d.ts

@@ -0,0 +1,12 @@
+export function setDropdownSelectText({ placeholder, disableSelectTextUpdate, value, isTagsStyle }: {
+    placeholder: any;
+    disableSelectTextUpdate: any;
+    value: any;
+    isTagsStyle: any;
+}): {
+    display: any;
+    desc?: undefined;
+} | {
+    display: any;
+    desc: any;
+};

package/dist/components/Dropdowns/utils/setDropdownSelectText.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setDropdownSelectText = void 0;
+var setDropdownSelectText = function (_a) {
+    var placeholder = _a.placeholder, disableSelectTextUpdate = _a.disableSelectTextUpdate, value = _a.value, isTagsStyle = _a.isTagsStyle;
+    if (disableSelectTextUpdate)
+        return { display: placeholder || "Select" };
+    if (!value ||
+        (Array.isArray(value) && value.length === 0))
+        return { display: placeholder || "Select" }; //else
+    // we dont show 'x' selected or the selected text in tagsStyle
+    if (!isTagsStyle) {
+        return {
+            display: Array.isArray(value) ? "".concat(value.length, " Selected") : value.display,
+            desc: value.desc
+        };
+    }
+};
+exports.setDropdownSelectText = setDropdownSelectText;

package/dist/components/Dropdowns/utils/useCreateDropdownRefs.d.ts

@@ -0,0 +1,5 @@
+export function useCreateDropdownRefs(): {
+    selectRef: any;
+    searchInputRef: any;
+    dropdownRef: any;
+};

package/dist/components/Dropdowns/utils/useCreateDropdownRefs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateDropdownRefs = void 0;
+var react_1 = require("react");
+var useCreateDropdownRefs = function () {
+    var selectRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var searchInputRef = (0, react_1.useRef)(null);
+    return {
+        selectRef: selectRef,
+        searchInputRef: searchInputRef,
+        dropdownRef: dropdownRef
+    };
+};
+exports.useCreateDropdownRefs = useCreateDropdownRefs;

package/dist/components/Dropdowns/utils/useHideShowOptions.d.ts

@@ -0,0 +1,5 @@
+export function useHideShowOptions(options?: {}): {
+    showOptions: any;
+    handleHideOptions: () => void;
+    handleShowOptions: () => any;
+};

package/dist/components/Dropdowns/utils/useHideShowOptions.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHideShowOptions = void 0;
+var react_1 = require("react");
+var useHideShowOptions = function (options) {
+    if (options === void 0) { options = {}; }
+    var broadcastShowOptions = options.broadcastShowOptions;
+    var _a = (0, react_1.useState)(false), showOptions = _a[0], setShowOptions = _a[1];
+    var handleHideOptions = function () {
+        setShowOptions(false);
+    };
+    var handleShowOptions = function () { return setShowOptions(true); };
+    var isFirstMount = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () {
+        !isFirstMount.current && broadcastShowOptions && broadcastShowOptions(showOptions);
+    }, [showOptions]);
+    (0, react_1.useEffect)(function () { return isFirstMount.current = false; }, []);
+    return { showOptions: showOptions, handleHideOptions: handleHideOptions, handleShowOptions: handleShowOptions };
+};
+exports.useHideShowOptions = useHideShowOptions;

package/dist/components/Dropdowns/utils/useKeyboardControl.d.ts

@@ -0,0 +1,12 @@
+export function useKeyboardControl({ showOptions, handleHideOptions, optionsWrapperRef, handleSelect, options, searchString, id }: {
+    showOptions: any;
+    handleHideOptions: any;
+    optionsWrapperRef: any;
+    handleSelect: any;
+    options: any;
+    searchString: any;
+    id: any;
+}): {
+    scrollFocussedOpIntoView: (el: any) => void;
+    focussedOp: any;
+};

package/dist/components/Dropdowns/utils/useKeyboardControl.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardControl = void 0;
+var react_1 = require("react");
+var getKeyCode_1 = require("../../../utils/getKeyCode");
+var useKeyboardControl = function (_a) {
+    var showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, optionsWrapperRef = _a.optionsWrapperRef, handleSelect = _a.handleSelect, options = _a.options, searchString = _a.searchString, id = _a.id;
+    var _b = (0, react_1.useState)(-1), focussedOp = _b[0], setFocussedOp = _b[1];
+    // if search string is not empty, then reset focussedOp to first op
+    // else set it to minus 1
+    (0, react_1.useEffect)(function () {
+        if ((searchString === null || searchString === void 0 ? void 0 : searchString.length) > 0)
+            setFocussedOp(0);
+        else if (focussedOp !== -1)
+            setFocussedOp(-1);
+    }, [searchString]);
+    (0, react_1.useEffect)(function () {
+        //update only when options are shut
+        if (!showOptions)
+            setFocussedOp(-1);
+    }, [showOptions]);
+    (0, react_1.useEffect)(function () {
+        var handleKeyDown = function (e) {
+            if (!showOptions)
+                return;
+            /**
+             * dont prevent default outside the condition, else
+             * all other key actions stop working..
+             */
+            var code = (0, getKeyCode_1.getKeyCode)(e);
+            if (code === 'Enter') {
+                if (options[focussedOp])
+                    handleSelect(options[focussedOp]);
+            }
+            else if (code === 'ArrowDown') {
+                if (showOptions)
+                    e.preventDefault(); //basically disabled page scroll by arrow keys
+                focussedOp !== options.length - 1 && setFocussedOp(function (p) { return p + 1; });
+            }
+            else if (code === 'ArrowUp') {
+                if (showOptions)
+                    e.preventDefault(); //basically disabled page scroll by arrow keys
+                focussedOp !== -1 && setFocussedOp(function (p) { return p - 1; });
+            }
+            else if (code === 'Escape' /*esc*/) {
+                handleHideOptions();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () { return window.removeEventListener('keydown', handleKeyDown); };
+    });
+    var scrollFocussedOpIntoView = function (el) {
+        var _a = el.getBoundingClientRect(), elBottom = _a.bottom, elTop = _a.top;
+        var _b = optionsWrapperRef.current.getBoundingClientRect(), opsWrapperBottom = _b.bottom, opsWrapperTop = _b.top;
+        if (elBottom > opsWrapperBottom) {
+            el.scrollIntoView({
+                behaviour: 'smooth',
+                block: 'nearest',
+            });
+        }
+        else if (elTop < opsWrapperTop) {
+            el.scrollIntoView({
+                behaviour: 'smooth',
+                block: 'nearest',
+            });
+        }
+    };
+    return {
+        scrollFocussedOpIntoView: scrollFocussedOpIntoView,
+        focussedOp: focussedOp
+    };
+};
+exports.useKeyboardControl = useKeyboardControl;

package/dist/components/Dropdowns/utils/useSearchString.d.ts

@@ -0,0 +1,4 @@
+export function useSearchString({ searchStringInParent, setSearchStringInParent, }: {
+    searchStringInParent: any;
+    setSearchStringInParent: any;
+}): any[];

package/dist/components/Dropdowns/utils/useSearchString.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchString = void 0;
+var react_1 = require("react");
+var useSearchString = function (_a) {
+    var 
+    // showOptions,
+    searchStringInParent = _a.searchStringInParent, setSearchStringInParent = _a.setSearchStringInParent;
+    var _b = (0, react_1.useState)(searchStringInParent || ""), searchString = _b[0], _setSearchString = _b[1];
+    var setSearchString = function (string) {
+        _setSearchString(string);
+        setSearchStringInParent && setSearchStringInParent(string);
+    };
+    // useEffect(() => {
+    //   if(searchStringInParent !== searchString){
+    //   }
+    // }, [searchStringInParent]); /**if value is changed from outside the dropdown by the parent, then search string needs to be updated */
+    return [searchString, setSearchString];
+};
+exports.useSearchString = useSearchString;

package/dist/components/Dropdowns/utils/useSetYOrientation.d.ts

@@ -0,0 +1,9 @@
+export function useSetYOrientation({ showOptions, optionsRef, relativeToRef, enabled }: {
+    showOptions: any;
+    optionsRef: any;
+    relativeToRef: any;
+    enabled: any;
+}): {
+    yOrientation: any;
+};
+export function handleSetYOrientation(elemRef: any, anchorRef: any, setYOrientation: any): void;

package/dist/components/Dropdowns/utils/useSetYOrientation.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleSetYOrientation = exports.useSetYOrientation = void 0;
+var react_1 = require("react");
+var useScroll_1 = require("../../../utils/customHooks/useScroll");
+var useSetYOrientation = function (_a) {
+    var showOptions = _a.showOptions, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, enabled = _a.enabled;
+    var _b = (0, react_1.useState)("bottom"), yOrientation = _b[0], setYOrientation = _b[1];
+    var _handleSetYOrientation = function () {
+        if (!enabled)
+            return;
+        (0, exports.handleSetYOrientation)(optionsRef, relativeToRef, setYOrientation);
+    };
+    (0, useScroll_1.useScroll)(_handleSetYOrientation, { detectScrollInAllDivs: true });
+    (0, react_1.useLayoutEffect)(function () {
+        if (showOptions) {
+            _handleSetYOrientation(); //set y orientation
+        }
+    }, [showOptions]);
+    return { yOrientation: yOrientation };
+};
+exports.useSetYOrientation = useSetYOrientation;
+var handleSetYOrientation = function (elemRef, anchorRef, setYOrientation) {
+    if (!anchorRef.current || !elemRef.current)
+        return;
+    // - - we calculate the bottom edge y pos of the options, if it opens downward
+    var viewportHeight = window.innerHeight;
+    var _a = anchorRef.current.getBoundingClientRect(), anchorPoint_YPos_BOTTOM = _a.bottom, anchorPoint_YPos_TOP = _a.top;
+    var elemHeight = elemRef.current.getBoundingClientRect().height;
+    var elemBottomEdge = anchorPoint_YPos_BOTTOM + elemHeight;
+    // - - then we calculate the top edge y pos of the options, if it opens upward
+    var elemTopEdge = anchorPoint_YPos_TOP - elemHeight;
+    // - - if bottom is not popping out of the screen, set open downward (default)
+    if (elemBottomEdge < viewportHeight) {
+        setYOrientation("bottom");
+    }
+    // - - if both of them are popping out the screen, then set open downward (default)
+    else if (elemBottomEdge >= viewportHeight && elemTopEdge <= 0) {
+        setYOrientation("bottom");
+    }
+    // - - only one option left, bottom is popping out of screen, but top is NOT. so set open upward
+    else {
+        setYOrientation("top");
+    }
+};
+exports.handleSetYOrientation = handleSetYOrientation;

package/dist/index.d.ts

@@ -37,5 +37,7 @@ export { default as DatePicker } from "./components/DatePicker";
 export { default as DateRangePicker } from "./components/DateRangePicker";
 export { BarChart } from "./components/dataViz/comps/BarChart";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
+export { DropdownSingle } from "./components/Dropdowns/DropdownSingle";
+export { DropdownMulti } from "./components/Dropdowns/DropdownMulti";
 export { HintsProvider } from "./components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsProvider = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.DropdownMulti = exports.DropdownSingle = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -87,6 +87,10 @@ var BarChart_1 = require("./components/dataViz/comps/BarChart");
 Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
 Object.defineProperty(exports, "TextLoader", { enumerable: true, get: function () { return TextLoader_1.TextLoader; } });
+var DropdownSingle_1 = require("./components/Dropdowns/DropdownSingle");
+Object.defineProperty(exports, "DropdownSingle", { enumerable: true, get: function () { return DropdownSingle_1.DropdownSingle; } });
+var DropdownMulti_1 = require("./components/Dropdowns/DropdownMulti");
+Object.defineProperty(exports, "DropdownMulti", { enumerable: true, get: function () { return DropdownMulti_1.DropdownMulti; } });
 ////// context
 var contextApi_1 = require("./components/Hints/contextApi");
 Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });

package/package.json

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