@sohanemon/utils 5.2.1 → 5.2.3

package/dist/components/index.d.ts

@@ -2,3 +2,4 @@ export { Icon as Iconify } from '@iconify/react';
 export { HtmlInjector } from './html-injector';
 export { MediaWrapper } from './media-wrapper';
 export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
+export { ScrollableMarker } from './scrollable-marker';

package/dist/components/index.js

@@ -1,5 +1,7 @@
 'use client';
+//NOTE: It's currently unsupported to use "export *" in a client boundary
 export { Icon as Iconify } from '@iconify/react';
 export { HtmlInjector } from './html-injector';
 export { MediaWrapper } from './media-wrapper';
 export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';
+export { ScrollableMarker } from './scrollable-marker';

package/dist/components/scrollable-marker.d.ts

@@ -0,0 +1 @@
+export declare function ScrollableMarker(): any;

package/dist/components/scrollable-marker.js

@@ -0,0 +1,56 @@
+'use client';
+import { useScheduledEffect } from '../hooks/schedule';
+export function ScrollableMarker() {
+    useScheduledEffect(() => {
+        const root = document.body;
+        if (!root)
+            return;
+        const isScrollable = (el) => {
+            const style = getComputedStyle(el);
+            if (style.overflow === 'hidden' &&
+                style.overflowY === 'hidden' &&
+                style.overflowX === 'hidden')
+                return false;
+            const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
+                el.scrollHeight > el.clientHeight;
+            const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') &&
+                el.scrollWidth > el.clientWidth;
+            return canScrollY || canScrollX;
+        };
+        const markScrollable = (el) => {
+            if (isScrollable(el))
+                el.dataset.scrollable = 'true';
+            else
+                delete el.dataset.scrollable;
+        };
+        const scanTree = (node) => {
+            markScrollable(node);
+            for (let i = 0; i < node.children.length; i++) {
+                const child = node.children[i];
+                scanTree(child);
+            }
+        };
+        requestIdleCallback(() => scanTree(root));
+        const observer = new MutationObserver((mutations) => {
+            for (const m of mutations) {
+                if (m.type === 'childList') {
+                    m.addedNodes.forEach((n) => {
+                        if (n instanceof HTMLElement)
+                            scanTree(n);
+                    });
+                }
+                else if (m.type === 'attributes' && m.target instanceof HTMLElement) {
+                    markScrollable(m.target);
+                }
+            }
+        });
+        observer.observe(root, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return null;
+}

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export * from './action';
+export * from './schedule';
 /**
  * Hook to detect clicks outside of a referenced element.
  * @param callback - A function to invoke when a click outside is detected.

package/dist/hooks/index.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { copyToClipboard } from '../functions';
 export * from './action';
+export * from './schedule';
 /**
  * Hook to detect clicks outside of a referenced element.
  * @param callback - A function to invoke when a click outside is detected.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",