@kws3/ui 1.9.2 → 2.0.1

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

@@ -2,20 +2,59 @@
  * fuzzy.js v0.1.0
  * (c) 2016 Ben Ripkens
  * @license: MIT
+ * @params
+ *  term : haystack
+ *  query : needle
+ *  opts: {
+ *   analyzeSubTerms,
+ *   analyzeSubTermDepth
+ *   highlighting
+ *  }
  */
 /**
  *
  * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
  */
 
-var fuzzy = function fuzzy(term, query) {
-  var max = calcFuzzyScore(term, query);
-  var termLength = term.length;
+/*
+ * Whether or not fuzzy.js should analyze sub-terms, i.e. also
+ * check term starting positions != 0.
+ *
+ * Example:
+ * Given the term 'Halleluja' and query 'luja'
+ *
+ * Fuzzy.js scores this combination with an 8, when analyzeSubTerms is
+ * set to false, as the following matching string will be calculated:
+ * Ha[l]lel[uja]
+ *
+ * If you activate sub temr analysis though, the query will reach a score
+ * of 10, as the matching string looks as following:
+ * Halle[luja]
+ *
+ * Naturally, the second version is more expensive than the first one.
+ * You should therefore configure how many sub terms you which to analyse.
+ * This can be configured through opts.analyzeSubTermDepth = 10.
+ */
 
-  if (fuzzy.analyzeSubTerms) {
-    for (var i = 1; i < termLength && i < fuzzy.analyzeSubTermDepth; i++) {
-      var subTerm = term.substring(i);
-      var score = calcFuzzyScore(subTerm, query);
+export function fuzzy(term, query, opts = {}) {
+  let analyzeSubTerms = opts.analyzeSubTerms ? opts.analyzeSubTerms : false;
+  let analyzeSubTermDepth = opts.analyzeSubTermDepth
+    ? opts.analyzeSubTermDepth
+    : 10;
+  let highlighting = opts.highlighting
+    ? opts.highlighting
+    : {
+        before: "<em>",
+        after: "</em>",
+      };
+
+  let max = calcFuzzyScore(term, query, highlighting);
+  let termLength = term.length;
+
+  if (analyzeSubTerms) {
+    for (let i = 1; i < termLength && i < analyzeSubTermDepth; i++) {
+      let subTerm = term.substring(i);
+      let score = calcFuzzyScore(subTerm, query, highlighting);
       if (score.score > max.score) {
         // we need to correct 'term' and 'matchedTerm', as calcFuzzyScore
         // does not now that it operates on a substring. Doing it only for
@@ -28,26 +67,26 @@ var fuzzy = function fuzzy(term, query) {
   }
 
   return max;
-};
-
-var calcFuzzyScore = function calcFuzzyScore(term, query) {
-  var score = 0;
-  var termLength = term.length;
-  var queryLength = query.length;
-  var highlighting = "";
-  var ti = 0;
+}
+
+function calcFuzzyScore(term, query, highlighting) {
+  let score = 0;
+  let termLength = term.length;
+  let queryLength = query.length;
+  let _highlighting = "";
+  let ti = 0;
   // -1 would not work as this would break the calculations of bonus
   // points for subsequent character matches. Something like
   // Number.MIN_VALUE would be more appropriate, but unfortunately
   // Number.MIN_VALUE + 1 equals 1...
-  var previousMatchingCharacter = -2;
+  let previousMatchingCharacter = -2;
 
-  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
-    var qc = query.charAt(qi);
-    var lowerQc = qc.toLowerCase();
+  for (let qi = 0; qi < queryLength && ti < termLength; qi++) {
+    let qc = query.charAt(qi);
+    let lowerQc = qc.toLowerCase();
 
     for (; ti < termLength; ti++) {
-      var tc = term.charAt(ti);
+      let tc = term.charAt(ti);
 
       if (lowerQc === tc.toLowerCase()) {
         score++;
@@ -56,62 +95,22 @@ var calcFuzzyScore = function calcFuzzyScore(term, query) {
           score += 2;
         }
 
-        highlighting +=
-          fuzzy.highlighting.before + tc + fuzzy.highlighting.after;
+        _highlighting += highlighting.before + tc + highlighting.after;
         previousMatchingCharacter = ti;
         ti++;
         break;
       } else {
-        highlighting += tc;
+        _highlighting += tc;
       }
     }
   }
 
-  highlighting += term.substring(ti, term.length);
+  _highlighting += term.substring(ti, term.length);
 
   return {
     score: score,
     term: term,
     query: query,
-    highlightedTerm: highlighting,
+    highlightedTerm: _highlighting,
   };
-};
-
-fuzzy.matchComparator = function matchComparator(m1, m2) {
-  return m2.score - m1.score !== 0
-    ? m2.score - m1.score
-    : m1.term.length - m2.term.length;
-};
-
-/*
- * Whether or not fuzzy.js should analyze sub-terms, i.e. also
- * check term starting positions != 0.
- *
- * Example:
- * Given the term 'Halleluja' and query 'luja'
- *
- * Fuzzy.js scores this combination with an 8, when analyzeSubTerms is
- * set to false, as the following matching string will be calculated:
- * Ha[l]lel[uja]
- *
- * If you activate sub temr analysis though, the query will reach a score
- * of 10, as the matching string looks as following:
- * Halle[luja]
- *
- * Naturally, the second version is more expensive than the first one.
- * You should therefore configure how many sub terms you which to analyse.
- * This can be configured through fuzzy.analyzeSubTermDepth = 10.
- */
-fuzzy.analyzeSubTerms = false;
-
-/*
- * How many sub terms should be analyzed.
- */
-fuzzy.analyzeSubTermDepth = 10;
-
-fuzzy.highlighting = {
-  before: "<em>",
-  after: "</em>",
-};
-
-export default fuzzy;
+}

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
+      );
+    }
+  }
+}