handy-scroll 1.1.0 → 1.1.2

package/dist/handy-scroll.d.ts

@@ -0,0 +1,10 @@
+declare namespace handyScroll {
+    export function mount(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function mounted(containerRef: HTMLElement | string): boolean;
+    export function update(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function destroy(containerRef: HTMLElement | NodeList | HTMLCollection | HTMLElement[] | string): void;
+    export function destroyDetached(): void;
+}
+
+export default handyScroll;
+export as namespace handyScroll;

package/dist/handy-scroll.es6.js

@@ -1,7 +1,7 @@
 /*!
-handy-scroll v1.1.0
+handy-scroll v1.1.2
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2023 Amphiluke
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -205,7 +205,7 @@ https://amphiluke.github.io/handy-scroll/
     let handyScroll = {
         /**
          * Mount widgets in the given containers
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         mount(containerRef) {
             dom.$$(containerRef).forEach(container => {
@@ -230,7 +230,7 @@ https://amphiluke.github.io/handy-scroll/
 
         /**
          * Update widget parameters and position
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         update(containerRef) {
             dom.$$(containerRef).forEach(container => {
@@ -246,7 +246,7 @@ https://amphiluke.github.io/handy-scroll/
 
         /**
          * Destroy widgets mounted in the given containers
-         * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+         * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
          */
         destroy(containerRef) {
             dom.$$(containerRef).forEach(container => {

package/dist/handy-scroll.es6.min.js

@@ -1,6 +1,6 @@
 /*!
-handy-scroll v1.1.0
+handy-scroll v1.1.2
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2023 Amphiluke
 */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).handyScroll=t()}(this,(function(){"use strict";let e=Array.prototype.slice,t="object"==typeof document&&!!document.documentElement,i={isDOMAvailable:t,doc:t?document:null,html:t?document.documentElement:null,body:t?document.body:null,ready(e){"loading"===i.doc.readyState?i.doc.addEventListener("DOMContentLoaded",(()=>{e()}),{once:!0}):e()},$:e=>"string"==typeof e?i.body.querySelector(e):e,$$:t=>Array.isArray(t)?t:t.nodeType===Node.ELEMENT_NODE?[t]:"string"==typeof t?e.call(i.body.querySelectorAll(t)):e.call(t)},n={init(e){let t=this,n=i.$$(".handy-scroll-body").filter((t=>t.contains(e)));n.length&&(t.scrollBody=n[0]),t.container=e,t.visible=!0,t.initWidget(),t.update(),t.addEventHandlers(),t.skipSyncContainer=t.skipSyncWidget=!1},initWidget(){let e=this,t=e.widget=i.doc.createElement("div");t.classList.add("handy-scroll");let n=i.doc.createElement("div");n.style.width=`${e.container.scrollWidth}px`,t.appendChild(n),e.container.appendChild(t)},addEventHandlers(){let e=this;(e.eventHandlers=[{el:e.scrollBody||window,handlers:{scroll(){e.checkVisibility()},resize(){e.update()}}},{el:e.widget,handlers:{scroll(){e.visible&&!e.skipSyncContainer&&e.syncContainer(),e.skipSyncContainer=!1}}},{el:e.container,handlers:{scroll(){e.skipSyncWidget||e.syncWidget(),e.skipSyncWidget=!1},focusin(){setTimeout((()=>{e.widget&&e.syncWidget()}),0)}}}]).forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.addEventListener(i,t[i],!1)))}))},checkVisibility(){let e=this,{widget:t,container:n,scrollBody:l}=e,o=t.scrollWidth<=t.offsetWidth;if(!o){let e=n.getBoundingClientRect(),t=l?l.getBoundingClientRect().bottom:window.innerHeight||i.html.clientHeight;o=e.bottom<=t||e.top>t}e.visible===o&&(e.visible=!o,t.classList.toggle("handy-scroll-hidden"))},syncContainer(){let e=this,{scrollLeft:t}=e.widget;e.container.scrollLeft!==t&&(e.skipSyncWidget=!0,e.container.scrollLeft=t)},syncWidget(){let e=this,{scrollLeft:t}=e.container;e.widget.scrollLeft!==t&&(e.skipSyncContainer=!0,e.widget.scrollLeft=t)},update(){let e=this,{widget:t,container:i,scrollBody:n}=e,{clientWidth:l,scrollWidth:o}=i;t.style.width=`${l}px`,n||(t.style.left=`${i.getBoundingClientRect().left}px`),t.firstElementChild.style.width=`${o}px`,o>l&&(t.style.height=t.offsetHeight-t.clientHeight+1+"px"),e.syncWidget(),e.checkVisibility()},destroy(){let e=this;e.eventHandlers.forEach((({el:e,handlers:t})=>{Object.keys(t).forEach((i=>e.removeEventListener(i,t[i],!1)))})),e.widget.parentNode.removeChild(e.widget),e.eventHandlers=e.widget=e.container=e.scrollBody=null}},l=[],o={mount(e){i.$$(e).forEach((e=>{if(o.mounted(e))return;let t=Object.create(n);l.push(t),t.init(e)}))},mounted(e){let t=i.$(e);return l.some((e=>e.container===t))},update(e){i.$$(e).forEach((e=>{l.some((t=>t.container===e&&(t.update(),!0)))}))},destroy(e){i.$$(e).forEach((e=>{l.some(((t,i)=>t.container===e&&(l.splice(i,1)[0].destroy(),!0)))}))},destroyDetached(){l=l.filter((e=>!!i.body.contains(e.container)||(e.destroy(),!1)))}};return i.isDOMAvailable&&i.ready((()=>{o.mount("[data-handy-scroll]")})),o}));

package/dist/handy-scroll.js

@@ -1,7 +1,7 @@
 /*!
-handy-scroll v1.1.0
+handy-scroll v1.1.2
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2023 Amphiluke
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -9,8 +9,9 @@ https://amphiluke.github.io/handy-scroll/
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.handyScroll = factory());
 })(this, (function () { 'use strict';
 
-    var slice = Array.prototype.slice; // Precaution to avoid reference errors when imported for SSR (issue #13)
+    var slice = Array.prototype.slice;
 
+    // Precaution to avoid reference errors when imported for SSR (issue #13)
     var isDOMAvailable = typeof document === "object" && !!document.documentElement;
     var dom = {
       isDOMAvailable: isDOMAvailable,
@@ -33,7 +34,6 @@ https://amphiluke.github.io/handy-scroll/
           // ref is a selector
           return dom.body.querySelector(ref);
         }
-
         return ref; // ref is already an element
       },
       $$: function $$(ref) {
@@ -41,17 +41,14 @@ https://amphiluke.github.io/handy-scroll/
           // ref is an array of elements
           return ref;
         }
-
         if (ref.nodeType === Node.ELEMENT_NODE) {
           // ref is an element
           return [ref];
         }
-
         if (typeof ref === "string") {
           // ref is a selector
           return slice.call(dom.body.querySelectorAll(ref));
         }
-
         return slice.call(ref); // ref is an array-like object (NodeList or HTMLCollection)
       }
     };
@@ -62,18 +59,15 @@ https://amphiluke.github.io/handy-scroll/
         var scrollBodies = dom.$$(".handy-scroll-body").filter(function (node) {
           return node.contains(container);
         });
-
         if (scrollBodies.length) {
           instance.scrollBody = scrollBodies[0];
         }
-
         instance.container = container;
         instance.visible = true;
         instance.initWidget();
         instance.update(); // recalculate scrollbar parameters and set its visibility
-
-        instance.addEventHandlers(); // Set skipSync flags to their initial values (because update() above calls syncWidget())
-
+        instance.addEventHandlers();
+        // Set skipSync flags to their initial values (because update() above calls syncWidget())
         instance.skipSyncContainer = instance.skipSyncWidget = false;
       },
       initWidget: function initWidget() {
@@ -103,10 +97,9 @@ https://amphiluke.github.io/handy-scroll/
             scroll: function scroll() {
               if (instance.visible && !instance.skipSyncContainer) {
                 instance.syncContainer();
-              } // Resume widget->container syncing after the widget scrolling has finished
+              }
+              // Resume widget->container syncing after the widget scrolling has finished
               // (it might be temporally disabled by the container while syncing the widget)
-
-
               instance.skipSyncContainer = false;
             }
           }
@@ -116,10 +109,9 @@ https://amphiluke.github.io/handy-scroll/
             scroll: function scroll() {
               if (!instance.skipSyncWidget) {
                 instance.syncWidget();
-              } // Resume container->widget syncing after the container scrolling has finished
+              }
+              // Resume container->widget syncing after the container scrolling has finished
               // (it might be temporally disabled by the widget while syncing the container)
-
-
               instance.skipSyncWidget = false;
             },
             focusin: function focusin() {
@@ -134,7 +126,7 @@ https://amphiluke.github.io/handy-scroll/
         }];
         eventHandlers.forEach(function (_ref) {
           var el = _ref.el,
-              handlers = _ref.handlers;
+            handlers = _ref.handlers;
           Object.keys(handlers).forEach(function (event) {
             return el.addEventListener(event, handlers[event], false);
           });
@@ -143,41 +135,37 @@ https://amphiluke.github.io/handy-scroll/
       checkVisibility: function checkVisibility() {
         var instance = this;
         var widget = instance.widget,
-            container = instance.container,
-            scrollBody = instance.scrollBody;
+          container = instance.container,
+          scrollBody = instance.scrollBody;
         var mustHide = widget.scrollWidth <= widget.offsetWidth;
-
         if (!mustHide) {
           var containerRect = container.getBoundingClientRect();
           var maxVisibleY = scrollBody ? scrollBody.getBoundingClientRect().bottom : window.innerHeight || dom.html.clientHeight;
           mustHide = containerRect.bottom <= maxVisibleY || containerRect.top > maxVisibleY;
         }
-
         if (instance.visible === mustHide) {
-          instance.visible = !mustHide; // We cannot simply hide the scrollbar since its scrollLeft property will not update in that case
-
+          instance.visible = !mustHide;
+          // We cannot simply hide the scrollbar since its scrollLeft property will not update in that case
           widget.classList.toggle("handy-scroll-hidden");
         }
       },
       syncContainer: function syncContainer() {
         var instance = this;
         var scrollLeft = instance.widget.scrollLeft;
-
         if (instance.container.scrollLeft !== scrollLeft) {
           // Prevents container’s “scroll” event handler from syncing back again widget scroll position
-          instance.skipSyncWidget = true; // Note that this makes container’s “scroll” event handlers execute
-
+          instance.skipSyncWidget = true;
+          // Note that this makes container’s “scroll” event handlers execute
           instance.container.scrollLeft = scrollLeft;
         }
       },
       syncWidget: function syncWidget() {
         var instance = this;
         var scrollLeft = instance.container.scrollLeft;
-
         if (instance.widget.scrollLeft !== scrollLeft) {
           // Prevents widget’s “scroll” event handler from syncing back again container scroll position
-          instance.skipSyncContainer = true; // Note that this makes widget’s “scroll” event handlers execute
-
+          instance.skipSyncContainer = true;
+          // Note that this makes widget’s “scroll” event handlers execute
           instance.widget.scrollLeft = scrollLeft;
         }
       },
@@ -185,18 +173,16 @@ https://amphiluke.github.io/handy-scroll/
       update: function update() {
         var instance = this;
         var widget = instance.widget,
-            container = instance.container,
-            scrollBody = instance.scrollBody;
+          container = instance.container,
+          scrollBody = instance.scrollBody;
         var clientWidth = container.clientWidth,
-            scrollWidth = container.scrollWidth;
+          scrollWidth = container.scrollWidth;
         widget.style.width = clientWidth + "px";
-
         if (!scrollBody) {
           widget.style.left = container.getBoundingClientRect().left + "px";
         }
-
-        widget.firstElementChild.style.width = scrollWidth + "px"; // Fit widget height to the native scroll bar height if needed
-
+        widget.firstElementChild.style.width = scrollWidth + "px";
+        // Fit widget height to the native scroll bar height if needed
         if (scrollWidth > clientWidth) {
           widget.style.height = widget.offsetHeight - widget.clientHeight + 1 + "px"; // +1px JIC
         }
@@ -209,7 +195,7 @@ https://amphiluke.github.io/handy-scroll/
         var instance = this;
         instance.eventHandlers.forEach(function (_ref2) {
           var el = _ref2.el,
-              handlers = _ref2.handlers;
+            handlers = _ref2.handlers;
           Object.keys(handlers).forEach(function (event) {
             return el.removeEventListener(event, handlers[event], false);
           });
@@ -224,20 +210,18 @@ https://amphiluke.github.io/handy-scroll/
     var handyScroll = {
       /**
        * Mount widgets in the given containers
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       mount: function mount(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
           if (handyScroll.mounted(container)) {
             return;
           }
-
           var instance = Object.create(handyScrollProto);
           instances.push(instance);
           instance.init(container);
         });
       },
-
       /**
        * Check if a widget is already mounted in the given container
        * @param {HTMLElement|String} containerRef - Widget container reference (either an element, or a selector)
@@ -249,10 +233,9 @@ https://amphiluke.github.io/handy-scroll/
           return instance.container === container;
         });
       },
-
       /**
        * Update widget parameters and position
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       update: function update(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
@@ -261,15 +244,13 @@ https://amphiluke.github.io/handy-scroll/
               instance.update();
               return true;
             }
-
             return false;
           });
         });
       },
-
       /**
        * Destroy widgets mounted in the given containers
-       * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+       * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
        */
       destroy: function destroy(containerRef) {
         dom.$$(containerRef).forEach(function (container) {
@@ -278,12 +259,10 @@ https://amphiluke.github.io/handy-scroll/
               instances.splice(index, 1)[0].destroy();
               return true;
             }
-
             return false;
           });
         });
       },
-
       /**
        * Destroy handyScroll widgets whose containers are not in the document anymore
        */
@@ -293,12 +272,10 @@ https://amphiluke.github.io/handy-scroll/
             instance.destroy();
             return false;
           }
-
           return true;
         });
       }
     };
-
     if (dom.isDOMAvailable) {
       dom.ready(function () {
         handyScroll.mount("[data-handy-scroll]");

package/dist/handy-scroll.min.js

@@ -1,6 +1,6 @@
 /*!
-handy-scroll v1.1.0
+handy-scroll v1.1.2
 https://amphiluke.github.io/handy-scroll/
-(c) 2021 Amphiluke
+(c) 2023 Amphiluke
 */
 !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).handyScroll=n()}(this,(function(){"use strict";var t=Array.prototype.slice,n="object"==typeof document&&!!document.documentElement,e={isDOMAvailable:n,doc:n?document:null,html:n?document.documentElement:null,body:n?document.body:null,ready:function(t){"loading"===e.doc.readyState?e.doc.addEventListener("DOMContentLoaded",(function(){t()}),{once:!0}):t()},$:function(t){return"string"==typeof t?e.body.querySelector(t):t},$$:function(n){return Array.isArray(n)?n:n.nodeType===Node.ELEMENT_NODE?[n]:"string"==typeof n?t.call(e.body.querySelectorAll(n)):t.call(n)}},i={init:function(t){var n=this,i=e.$$(".handy-scroll-body").filter((function(n){return n.contains(t)}));i.length&&(n.scrollBody=i[0]),n.container=t,n.visible=!0,n.initWidget(),n.update(),n.addEventHandlers(),n.skipSyncContainer=n.skipSyncWidget=!1},initWidget:function(){var t=this,n=t.widget=e.doc.createElement("div");n.classList.add("handy-scroll");var i=e.doc.createElement("div");i.style.width=t.container.scrollWidth+"px",n.appendChild(i),t.container.appendChild(n)},addEventHandlers:function(){var t=this;(t.eventHandlers=[{el:t.scrollBody||window,handlers:{scroll:function(){t.checkVisibility()},resize:function(){t.update()}}},{el:t.widget,handlers:{scroll:function(){t.visible&&!t.skipSyncContainer&&t.syncContainer(),t.skipSyncContainer=!1}}},{el:t.container,handlers:{scroll:function(){t.skipSyncWidget||t.syncWidget(),t.skipSyncWidget=!1},focusin:function(){setTimeout((function(){t.widget&&t.syncWidget()}),0)}}}]).forEach((function(t){var n=t.el,e=t.handlers;Object.keys(e).forEach((function(t){return n.addEventListener(t,e[t],!1)}))}))},checkVisibility:function(){var t=this,n=t.widget,i=t.container,o=t.scrollBody,c=n.scrollWidth<=n.offsetWidth;if(!c){var r=i.getBoundingClientRect(),l=o?o.getBoundingClientRect().bottom:window.innerHeight||e.html.clientHeight;c=r.bottom<=l||r.top>l}t.visible===c&&(t.visible=!c,n.classList.toggle("handy-scroll-hidden"))},syncContainer:function(){var t=this,n=t.widget.scrollLeft;t.container.scrollLeft!==n&&(t.skipSyncWidget=!0,t.container.scrollLeft=n)},syncWidget:function(){var t=this,n=t.container.scrollLeft;t.widget.scrollLeft!==n&&(t.skipSyncContainer=!0,t.widget.scrollLeft=n)},update:function(){var t=this,n=t.widget,e=t.container,i=t.scrollBody,o=e.clientWidth,c=e.scrollWidth;n.style.width=o+"px",i||(n.style.left=e.getBoundingClientRect().left+"px"),n.firstElementChild.style.width=c+"px",c>o&&(n.style.height=n.offsetHeight-n.clientHeight+1+"px"),t.syncWidget(),t.checkVisibility()},destroy:function(){var t=this;t.eventHandlers.forEach((function(t){var n=t.el,e=t.handlers;Object.keys(e).forEach((function(t){return n.removeEventListener(t,e[t],!1)}))})),t.widget.parentNode.removeChild(t.widget),t.eventHandlers=t.widget=t.container=t.scrollBody=null}},o=[],c={mount:function(t){e.$$(t).forEach((function(t){if(!c.mounted(t)){var n=Object.create(i);o.push(n),n.init(t)}}))},mounted:function(t){var n=e.$(t);return o.some((function(t){return t.container===n}))},update:function(t){e.$$(t).forEach((function(t){o.some((function(n){return n.container===t&&(n.update(),!0)}))}))},destroy:function(t){e.$$(t).forEach((function(t){o.some((function(n,e){return n.container===t&&(o.splice(e,1)[0].destroy(),!0)}))}))},destroyDetached:function(){o=o.filter((function(t){return!!e.body.contains(t.container)||(t.destroy(),!1)}))}};return e.isDOMAvailable&&e.ready((function(){c.mount("[data-handy-scroll]")})),c}));

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "handy-scroll",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Handy dependency-free floating scrollbar widget",
-  "main": "dist/handy-scroll.min.js",
-  "module": "src/handy-scroll.js",
-  "style": "dist/handy-scroll.css",
+  "main": "./dist/handy-scroll.min.js",
+  "module": "./src/handy-scroll.js",
+  "style": "./dist/handy-scroll.css",
+  "types": "./dist/handy-scroll.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/handy-scroll.d.ts",
+      "import": "./src/handy-scroll.js",
+      "require": "./dist/handy-scroll.js"
+    },
+    "./dist/*.css": "./dist/*.css"
+  },
+  "type": "module",
   "files": [
     "dist",
     "src"
@@ -31,14 +41,14 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "clean-css-cli": "^5.4.1",
-    "eslint": "^7.32.0",
-    "husky": "7.0.2",
-    "less": "^4.1.1",
-    "rollup": "^2.58.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-terser": "^0.4.3",
+    "clean-css-cli": "^5.6.2",
+    "eslint": "^8.43.0",
+    "husky": "8.0.3",
+    "less": "^4.1.3",
+    "rollup": "^3.25.2"
   }
 }

package/src/handy-scroll.js

@@ -6,7 +6,7 @@ let instances = []; // if it were not for IE, it would be better to use Map (con
 let handyScroll = {
     /**
      * Mount widgets in the given containers
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     mount(containerRef) {
         dom.$$(containerRef).forEach(container => {
@@ -31,7 +31,7 @@ let handyScroll = {
 
     /**
      * Update widget parameters and position
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     update(containerRef) {
         dom.$$(containerRef).forEach(container => {
@@ -47,7 +47,7 @@ let handyScroll = {
 
     /**
      * Destroy widgets mounted in the given containers
-     * @param {HTMLElement|NodeList|HTMLCollection|Array|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
+     * @param {HTMLElement|NodeList|HTMLCollection|HTMLElement[]|String} containerRef - Widget container reference (either an element, or a list of elements, or a selector)
      */
     destroy(containerRef) {
         dom.$$(containerRef).forEach(container => {