@kws3/ui 1.9.3 → 2.0.0

package/helpers/FloatingUI/Floatie.svelte

@@ -10,7 +10,6 @@
   @param {boolean} [light=false] - Inverted colors for notification box and contents, Default: `false`
   @param {boolean} [dismissable=true] - Determines if notification is dismissable, Default: `true`
   @param {boolean} [persistent=false] - A persistent notification without duration, stays till dismissed, Default: `false`
-  @param {string} [context=""] - Context value, Default: `""`
   @param {object} [component=null] - Custom component, Default: `null`
   @param {function} [beforeClose(props)] - Callback function call before close event
   @param {function} [afterClose(props)] - Callback function call after close event
@@ -66,6 +65,10 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Title/Heading of the notification
    */
@@ -85,7 +88,7 @@
     duration = 3000,
     /**
      * Toast notification background color
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "primary",
     /**
@@ -100,10 +103,6 @@
      * A persistent notification without duration, stays till dismissed
      */
     persistent = false,
-    /**
-     * Context value
-     */
-    context = "",
     /**
      * Custom component
      */
@@ -131,6 +130,7 @@
     let defaults = { text: "Ok", color: "", click: () => {} },
       obj = b;
     if (typeof b == "string") {
+      // @ts-ignore
       obj = { text: b };
     }
     return Object.assign({}, defaults, obj);

package/helpers/FloatingUI/index.js

@@ -1,4 +1,4 @@
-import { FloatingUIOutput } from "@kws3/ui";
+import FloatingUIOutput from "./FloatingUIOutput.svelte";
 import { writable, get } from "svelte/store";
 import {
   defaultToastPlacement,
@@ -19,6 +19,7 @@ function ensureOutputIsOnPage() {
     return;
   }
 
+  //@ts-ignore
   OUTPUT_IS_ON_PAGE = new FloatingUIOutput({
     target: document.body,
   });

package/helpers/Icon.svelte

@@ -2,10 +2,10 @@
   @component
 
 
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
+  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
   @param {string} [icon=""] - The name of the icon that is to be displayed, from the relevant icon family, Default: `""`
-  @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [family=""] - Icon family, can be modified globally in framework settings
+  @param {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'} [family=""] - Icon family, can be modified globally in framework settings
 
 Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
   @param {string} [style=""] - Inline CSS for icon container, Default: `""`
@@ -18,7 +18,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 <span class="icon is-{size} has-text-{color} {klass}" {style}>
   <i
     class="icon-i {familyClass}{icon} {internal_size} {inner_class}"
-    style={inner_style} />
+    style={inner_style}>{inner_icon}</i>
 </span>
 
 <style>
@@ -47,6 +47,19 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
   .icon .uil.fa-3x {
     font-size: 3em;
   }
+
+  .icon .material-icons {
+    font-size: 1.25em;
+  }
+  .icon .material-icons.fa-lg {
+    font-size: 1.5em;
+  }
+  .icon .material-icons.fa-2x {
+    font-size: 2em;
+  }
+  .icon .material-icons.fa-3x {
+    font-size: 3em;
+  }
 </style>
 
 <script>
@@ -54,12 +67,12 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 
   /**
    * Size of the Icon
-   *  @type {''|'small'|'medium'|'large'}
+   *  @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Icon
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
      */
     color = "",
     /**
@@ -70,7 +83,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
      * Icon family, can be modified globally in framework settings
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
-     * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}
+     * @type {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'}
      */
     family = "",
     /**
@@ -97,9 +110,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
     internal_size,
     usedFamily;
 
+  $: inner_icon = family === "material" ? icon : "";
   $: {
-    usedFamily =
-      family && family !== "" ? family : globalFamily ? globalFamily : "fa";
+    usedFamily = family !== "" ? family : globalFamily ? globalFamily : "fa";
 
     switch (usedFamily) {
       case "lar":
@@ -117,6 +130,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
       case "unicons":
         familyClass = "uil uil-";
         break;
+      case "material":
+        familyClass = "material-icons material-symbols-outlined ";
+        break;
       default:
         familyClass = "fa fa-";
         break;

package/helpers/Loader.svelte

@@ -31,20 +31,27 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
 </div>
 
 <script>
+  /**
+
+   * @typedef {import('@kws3/ui/types').SpinnerColorOptions} SpinnerColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
+   *
+   */
   /**
    * Color of the Spinner
    * @link https://bulma.io/documentation/helpers/color-helpers/
-   * @type {'grey' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   * @type {SpinnerColorOptions}
    */
   export let spinner_color = "grey",
     /**
      * Size of the Spinner
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     spinner_size = "medium",
     /**
      * Backgound color of the Spinner container
-     * @type {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     * @type {BGColorOptions}
      */
     background_color = "transparent",
     /**

package/helpers/Message.svelte

@@ -70,12 +70,12 @@ The parent can then decide what to do with the component
 
   /**
    * Size of the Message
-   * @type {''|'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Message box
-     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
      */
     color = "info",
     /**

package/helpers/Modal.svelte

@@ -29,6 +29,7 @@ Only programmatic closing is possible, Default: `true`
     <div
       transition:scale={{
         duration: transitionDuration,
+        // @ts-ignore
         from: 0.8,
         to: 1,
         delay: transitionDelay,
@@ -75,7 +76,7 @@ Only programmatic closing is possible, Default: `true`
   import { hasTransitions } from "../settings";
   /**
    * Size of the modal
-   * @type {'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "small",
     /**

package/helpers/Notification.svelte

@@ -35,7 +35,7 @@ The parent can then decide what to do with the component
 
   /**
    * Color of the Notification box
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'light'|'dark'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "info";
 

package/helpers/Popover.svelte

@@ -3,8 +3,8 @@
 
 
   @param {string} [icon="info-circle"] - Icon used when default slot has no content, Default: `"info-circle"`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Colour of the trigger icon displayed when default slot has no content, Default: `"primary"`
-  @param {''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
+  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Colour of the trigger icon displayed when default slot has no content, Default: `"primary"`
+  @param {string|''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
   @param {string} [trigger="click"] - Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
 
 **Examples:** `click`, `mouseenter`, `mouseenter focus`
@@ -85,12 +85,12 @@ It can be any CSS value associated with `max-width` property, including `"none"`
   export let icon = "info-circle";
   /**
    * Colour of the trigger icon displayed when default slot has no content
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
    */
   export let icon_color = "primary";
   /**
    * Size of the trigger icon displayed when default slot has no content
-   * @type {''|'small'|'medium'|'large'}
+   * @type {import('@kws3/ui/types').SizeOptions}
    */
   export let icon_size = "small";
   /**

package/helpers/ScrollableList.svelte

@@ -8,6 +8,7 @@
   @param {number} [start=0] - First item index rendered inside viewport - readonly, Default: `0`
   @param {number} [end=0] - Last item index rendered inside viewport - readonly, Default: `0`
   @param {number} [end_threshold=10] - `end` event will be fired when the list reaches this many items before the end of the list., Default: `10`
+  @param {number} [padding_threshold=5] - render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling., Default: `5`
   @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
   @param {string} [class=""] - CSS classes for scroller container, Default: `""`
 
@@ -77,10 +78,7 @@ while more items are loading
 <script>
   import { onMount, tick } from "svelte";
   import { createEventDispatcher } from "svelte";
-  import {
-    resizeObserver,
-    hasResizeObserver,
-  } from "@kws3/ui/utils/resizeObserver";
+  import { resizeObserver, hasResizeObserver } from "@kws3/ui/resizeObserver";
 
   const fire = createEventDispatcher();
   /**
@@ -108,6 +106,10 @@ while more items are loading
      *  `end` event will be fired when the list reaches this many items before the end of the list.
      */
     end_threshold = 10,
+    /**
+     *  render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling.
+     */
+    padding_threshold = 5,
     /**
      * Inline CSS for scroller container
      */
@@ -132,9 +134,11 @@ while more items are loading
     average_height,
     items_count = 0;
 
-  $: visible = items.slice(start, end).map((data, i) => {
-    return { index: i + start, data };
-  });
+  $: padStart = start > padding_threshold ? start - padding_threshold : start;
+  $: padEnd = end + padding_threshold;
+  $: visible = items
+    .slice(padStart, padEnd)
+    .map((data, i) => ({ index: i + padStart, data }));
 
   // whenever `items` changes, invalidate the current heightmap
   $: items, viewport_height, item_height, mounted, refresh();
@@ -176,7 +180,7 @@ while more items are loading
       const row_height = height_map[i] || average_height;
       if (y + row_height > scrollTop) {
         start = i;
-        top = y;
+        top = y - row_height * padding_threshold;
         break;
       }
       y += row_height;

package/helpers/Skeleton.svelte

@@ -25,6 +25,9 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
 {/each}
 
 <script>
+  /**
+   * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
+   */
   export let /**
      * Number of lines of text to display.
      */
@@ -51,7 +54,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
     circle = false,
     /**
      * Color of the Skeleton lines
-     * @type {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     * @type {BGColorOptions}
      */
     color = "";
 

package/helpers/Timeline/Timeline.svelte

@@ -16,7 +16,7 @@
 <script>
   /**
    * Alignment of the Timeline child items
-   * @type {'left'|'center'|'right'}
+   * @type {string|'left'|'center'|'right'}
    */
   export let align = "left";
 

package/helpers/Timeline/TimelineItem.svelte

@@ -3,8 +3,8 @@
 
 
   @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of marker and border, Default: `"primary"`
-  @param {string} [marker_icon="null"] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
-  @param {string} [marker_image="null"] - Any image URL, the image will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_icon=""] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_image=""] - Any image URL, the image will be placed inside the marker, Default: `"null"`
   @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
 
   ### Slots
@@ -48,19 +48,19 @@
 
   /**
    * Color of marker and border
-   * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "primary";
   /**
    * Any icon name accepted by the Icon component, icon will be placed inside the marker
    * @type {string}
    */
-  export let marker_icon = null;
+  export let marker_icon = "";
   /**
    * Any image URL, the image will be placed inside the marker
    * @type {string}
    */
-  export let marker_image = null;
+  export let marker_image = "";
 
   /**
    * CSS classes for the TimelineItem container

package/helpers/Tooltip.js

@@ -5,7 +5,7 @@ import tippy, { delegate } from "tippy.js";
  * @param {string} container - CSS selector of container
  * @param {object} opts - tooltip options
  */
-export function activateTooltips(container, opts) {
+export function activateTooltips(container, opts = {}) {
   let _opts = Object.assign(
     {
       target: "[data-tooltip]",

package/index.js

@@ -1,6 +1,6 @@
-export { applySettings } from "./settings";
+export { applySettings } from "./settings.js";
 
-export { activateTooltips, tooltip, popover } from "./helpers/Tooltip";
+export { activateTooltips, tooltip, popover } from "./helpers/Tooltip.js";
 export { default as Popover } from "./helpers/Popover.svelte";
 export { default as Icon } from "./helpers/Icon.svelte";
 export { default as Message } from "./helpers/Message.svelte";
@@ -18,13 +18,18 @@ export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.sve
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
-export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";
+export {
+  alert,
+  confirm,
+  prompt,
+  default as Dialog,
+} from "./helpers/Dialog/index.js";
 export {
   Notifications,
   Toasts,
   Snackbars,
   FloatiesStore,
-} from "./helpers/FloatingUI";
+} from "./helpers/FloatingUI/index.js";
 export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
 export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
 export { portal } from "svelte-portal";
@@ -56,6 +61,7 @@ export { default as MaskedInput } from "./forms/MaskedInput.svelte";
 export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";
 export { default as Datepicker } from "./forms/Datepicker.svelte";
 export { default as Timepicker } from "./forms/Timepicker.svelte";
+export { default as SearchInput } from "./forms/SearchInput.svelte";
 export { datepicker as DatepickerAction } from "./forms/actions.js";
 export { timepicker as TimepickerAction } from "./forms/actions.js";
 export { default as PasswordValidator } from "./forms/PasswordValidator/PasswordValidator.svelte";

package/{utils → internal}/fuzzy.js

@@ -36,7 +36,7 @@
  * This can be configured through opts.analyzeSubTermDepth = 10.
  */
 
-export default function fuzzy(term, query, opts = {}) {
+export function fuzzy(term, query, opts = {}) {
   let analyzeSubTerms = opts.analyzeSubTerms ? opts.analyzeSubTerms : false;
   let analyzeSubTermDepth = opts.analyzeSubTermDepth
     ? opts.analyzeSubTermDepth

package/internal/index.js

@@ -0,0 +1,27 @@
+export { scrollIntoActiveElement } from "./scrollIntoActiveElement";
+export { fuzzy } from "./fuzzy.js";
+
+/**
+ * Detect whether a user has pressed Enter.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEnterKey(e) {
+  return e.keyCode && e.keyCode === 13;
+}
+
+/**
+ * Detect whether a user has pressed Escape key.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEscKey(e) {
+  return e.keyCode && e.keyCode === 27;
+}
+
+export const IS_MAC =
+  "navigator" in window
+    ? /mac/i.test(
+        window.navigator.userAgentData
+          ? window.navigator.userAgentData.platform
+          : window.navigator.platform
+      )
+    : false;

package/internal/scrollIntoActiveElement.js

@@ -0,0 +1,22 @@
+export function scrollIntoActiveElement(listElement, activeElelement) {
+  if (listElement && activeElelement) {
+    const dropdownRect = listElement.getBoundingClientRect();
+    const activeElemRect = activeElelement.getBoundingClientRect();
+    const overScroll = activeElelement.offsetHeight / 3;
+
+    if (activeElemRect.bottom + overScroll > dropdownRect.bottom) {
+      listElement.scrollTop = Math.min(
+        activeElelement.offsetTop +
+          activeElelement.clientHeight -
+          listElement.offsetHeight +
+          overScroll,
+        listElement.scrollHeight
+      );
+    } else if (activeElemRect.top - overScroll < dropdownRect.top) {
+      listElement.scrollTop = Math.max(
+        activeElelement.offsetTop - overScroll,
+        0
+      );
+    }
+  }
+}

package/keyboard/index.js

@@ -0,0 +1,94 @@
+import { IS_MAC } from "../internal";
+const ctrlKeys = {
+  ctrl: "ctrlKey",
+  meta: "metaKey",
+  shift: "shiftKey",
+  alt: "altKey",
+};
+
+/**
+ * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
+ * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
+ * @returns {function} .
+ */
+
+export function makeKeyDefinition(definition, CommandKey = false) {
+  let def = definition;
+  let keys = [];
+
+  if (typeof def === "number") {
+    keys = [def];
+  }
+
+  if (typeof def === "string") {
+    if (CommandKey) {
+      if (IS_MAC) {
+        def = def.replace("ctrl", "meta");
+      }
+    }
+    keys = def.split("+");
+  }
+
+  return function (node, fire) {
+    function keydownHandler(event) {
+      event.preventDefault();
+      let firedCount = 0;
+      let which = event.which || event.keyCode;
+      keys.forEach((key) => {
+        if (event[ctrlKeys[key]]) {
+          firedCount++;
+        }
+        if (
+          key === event.key ||
+          ("key" + key).toLowerCase() === event.code.toLowerCase()
+        ) {
+          firedCount++;
+        }
+        if (key === which) {
+          firedCount++;
+        }
+      });
+
+      let valid = false;
+      if (keys.length === firedCount) {
+        valid = true;
+      }
+
+      if (valid) {
+        fire(event);
+      }
+    }
+
+    node.addEventListener("keydown", keydownHandler, false);
+
+    return {
+      destroy() {
+        node.removeEventListener("keydown", keydownHandler, false);
+      },
+    };
+  };
+}
+
+export let enter = makeKeyDefinition("Enter");
+export let tab = makeKeyDefinition("Tab");
+export let escape = makeKeyDefinition("Escape");
+export let space = makeKeyDefinition(" ");
+export let leftarrow = makeKeyDefinition("ArrowLeft");
+export let rightarrow = makeKeyDefinition("ArrowRight");
+export let downarrow = makeKeyDefinition("ArrowDown");
+export let uparrow = makeKeyDefinition("ArrowUp");
+export let backspace = makeKeyDefinition("Backspace");
+export let del = makeKeyDefinition("Delete");
+
+export default {
+  enter,
+  tab,
+  escape,
+  space,
+  leftarrow,
+  rightarrow,
+  downarrow,
+  uparrow,
+  backspace,
+  del,
+};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@kws3/ui",
-  "version": "1.9.3",
+  "version": "2.0.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
+  "svelte": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,11 +18,13 @@
   "contributors": [
     "Sharif Ahmed <me.sharifahmed@gmail.com>",
     "Sabir <sabirveli@gmail.com>",
-    "Suneesh S K <suneeshsk3@gmail.com>"
+    "Suneesh S K <suneeshsk3@gmail.com>",
+    "Nikeeta <nikeetaa231@gmail.com>"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "types": "types/index.d.ts",
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
@@ -29,5 +32,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "c6a60f59d36f7bb3a6e4475c6c727c036d235581"
+  "gitHead": "9606d798a4c6d550863290f2c0b6baac3a61a09e"
 }

package/search/index.js

@@ -0,0 +1,52 @@
+import { fuzzy } from "../internal";
+
+/**
+ * @typedef {import('@kws3/ui/types').SearchOptions} SearchOptions - contains search options and fuzzy lib options
+ * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take unction take params `needle` and `haystack`.
+ */
+
+/**
+ * @param {SearchOptions} opts
+ */
+export function makeSearchEngine(opts) {
+  let search_key = opts.search_key ? opts.search_key : "value";
+  let scoreThreshold = opts.scoreThreshold ? opts.scoreThreshold : 5;
+  let fuzzyOpts = opts.fuzzyOpts ? opts.fuzzyOpts : {};
+
+  /**
+   * @param {string} needle
+   * @param {array} haystack
+   * @returns {array}
+   */
+  return function (needle, haystack) {
+    let OPTS = haystack.map((option) => {
+      let item = { ...option };
+      item.original = { ...option };
+      if (typeof item === "object") {
+        if (!Array.isArray(search_key)) {
+          search_key = [search_key];
+        }
+
+        search_key.forEach((s_key) => {
+          if (`${s_key}` in item) {
+            let output = fuzzy(option[s_key], needle, fuzzyOpts);
+            item.original[s_key] = output.highlightedTerm;
+            item.score =
+              !item.score || (item.score && item.score < output.score)
+                ? output.score
+                : item.score || 0;
+          }
+        });
+      }
+      return item;
+    });
+
+    let maxScore = Math.max(...OPTS.map((i) => i.score));
+    let calculatedLimit = maxScore - scoreThreshold;
+
+    OPTS = OPTS.filter(
+      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+    );
+    return OPTS.map((i) => i.original);
+  };
+}