@sohanemon/utils 7.2.6 → 7.2.8

package/README.md

@@ -185,12 +185,14 @@ const { scrolledPast, direction } = useScrollTracker({ threshold: 300 });
 ```
 
 #### UI Components
-
 ```tsx
-import { HtmlInjector, ResponsiveIndicator, Iconify } from '@sohanemon/utils';
+import { HtmlInjector, ResponsiveIndicator, Portal, Iconify } from '@sohanemon/utils';
 
 <HtmlInjector html="<p>Injected HTML</p>" />
 <ResponsiveIndicator />
+<Portal container="#modal-root">
+  <Modal />
+</Portal>
 <Iconify icon="mdi:home" />
 ```
 
@@ -487,6 +489,11 @@ ScrollableMarker: React.Component<{
   className?: string;
   children?: React.ReactNode;
 }>
+
+Portal: React.Component<{
+  children: React.ReactNode;
+  container: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
+}>
 ```
 
 ### Types

package/dist/components/index.cjs

@@ -1 +1 @@
-"use client";const e=require(`../hooks-DATf1uhM.cjs`),t=require(`../functions-BbXeio5-.cjs`);let n=require(`react`);n=e.A(n);let r=require(`react/jsx-runtime`),i=require(`@iconify/react`);function a({className:i,html:a,sanitize:o=!1,executeScripts:s=!0,...c}){let l=n.useRef([]),u=n.useRef(null);e.k(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!a))try{let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[a,s]),n.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=n.useMemo(()=>{if(!a)return``;if(o){let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return a},[a,o]);return a?(0,r.jsx)(`div`,{ref:u,className:t.r(i),dangerouslySetInnerHTML:{__html:d},...c}):null}function o({breakpoint:t,as:i=`div`,fallback:a=n.Fragment,className:o,classNameFallback:s,...c}){let l=e.T(t.split(`-`).pop())===t.startsWith(`max`),u=l?a:i,d=l?s:o;return u===n.Fragment?(0,r.jsx)(u,{ref:c.ref,children:c.children},c.key):(0,r.jsx)(u,{className:d,...c})}const s=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],c=({side:t,offset:i=2,unit:a=`rem`})=>{let[o,c]=n.useState(t??`bottom-left`),l=e.T({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[u,d]=n.useState(typeof window<`u`?window.innerWidth:0);n.useEffect(()=>{if(typeof window>`u`)return;let e=()=>d(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f=l===`2xl`&&u>=1792?a===`rem`?`${(u/16).toFixed(1)}rem`:`${u}${a}`:l,p={"bottom-left":{bottom:`${i}${a}`,left:`${i}${a}`},"bottom-right":{bottom:`${i}${a}`,right:`${i}${a}`},"top-right":{top:`${i}${a}`,right:`${i}${a}`},"top-left":{top:`${i}${a}`,left:`${i}${a}`}};return(0,r.jsx)(`button`,{type:`button`,onClick:()=>{c(s[(s.indexOf(o)+1)%s.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...p[o]},children:f})};function l(){return e.k(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}exports.HtmlInjector=a,Object.defineProperty(exports,`Iconify`,{enumerable:!0,get:function(){return i.Icon}}),exports.MediaWrapper=o,exports.ResponsiveIndicator=c,exports.TailwindIndicator=c,exports.ScrollTracker=e.C,exports.ScrollableMarker=l;
+"use client";const e=require(`../hooks-DATf1uhM.cjs`),t=require(`../functions-BbXeio5-.cjs`);let n=require(`react`);n=e.A(n);let r=require(`react/jsx-runtime`),i=require(`@iconify/react`),a=require(`react-dom`);function o({className:i,html:a,sanitize:o=!1,executeScripts:s=!0,...c}){let l=n.useRef([]),u=n.useRef(null);e.k(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!a))try{let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[a,s]),n.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=n.useMemo(()=>{if(!a)return``;if(o){let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return a},[a,o]);return a?(0,r.jsx)(`div`,{ref:u,className:t.r(i),dangerouslySetInnerHTML:{__html:d},...c}):null}function s({breakpoint:t,as:i=`div`,fallback:a=n.Fragment,className:o,classNameFallback:s,...c}){let l=e.T(t.split(`-`).pop())===t.startsWith(`max`),u=l?a:i,d=l?s:o;return u===n.Fragment?(0,r.jsx)(u,{ref:c.ref,children:c.children},c.key):(0,r.jsx)(u,{className:d,...c})}function c({children:e,container:t}){let r=(0,n.useRef)(null);return r.current||=typeof t==`string`?document.querySelector(t):t.current,r.current?(0,a.createPortal)(e,r.current):null}const l=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],u=({side:t,offset:i=2,unit:a=`rem`})=>{let[o,s]=n.useState(t??`bottom-left`),c=e.T({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[u,d]=n.useState(typeof window<`u`?window.innerWidth:0);n.useEffect(()=>{if(typeof window>`u`)return;let e=()=>d(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f=c===`2xl`&&u>=1792?a===`rem`?`${(u/16).toFixed(1)}rem`:`${u}${a}`:c,p={"bottom-left":{bottom:`${i}${a}`,left:`${i}${a}`},"bottom-right":{bottom:`${i}${a}`,right:`${i}${a}`},"top-right":{top:`${i}${a}`,right:`${i}${a}`},"top-left":{top:`${i}${a}`,left:`${i}${a}`}};return(0,r.jsx)(`button`,{type:`button`,onClick:()=>{s(l[(l.indexOf(o)+1)%l.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...p[o]},children:f})};function d(){return e.k(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}exports.HtmlInjector=o,Object.defineProperty(exports,`Iconify`,{enumerable:!0,get:function(){return i.Icon}}),exports.MediaWrapper=s,exports.Portal=c,exports.ResponsiveIndicator=u,exports.TailwindIndicator=u,exports.ScrollTracker=e.C,exports.ScrollableMarker=d;

package/dist/components/index.d.cts

@@ -1,12 +1,12 @@
 import { Icon as Iconify } from "@iconify/react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/components/html-injector.d.ts
 /**
  * Props for the HtmlInjector component
  */
-type HtmlInjectorProps = Omit<React.ComponentProps<'div'>, 'dangerouslySetInnerHTML'> & {
+type HtmlInjectorProps = Omit<React$1.ComponentProps<'div'>, 'dangerouslySetInnerHTML'> & {
   /** The HTML content to inject and render */
   html: string;
   /**
@@ -66,13 +66,13 @@ type BreakPoints = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'max-sm' | 'max-md' | 'ma
 /**
  * Props for the MediaWrapper component.
  */
-type MediaWrapperProps = React.ComponentProps<'div'> & {
+type MediaWrapperProps = React$1.ComponentProps<'div'> & {
   /** The breakpoint at which to switch between the main component and fallback. */
   breakpoint: BreakPoints;
   /** The component to render when the breakpoint matches. Defaults to 'div'. */
-  as?: React.ElementType;
+  as?: React$1.ElementType;
   /** The component to render when the breakpoint doesn't match. Defaults to React.Fragment. */
-  fallback?: React.ElementType;
+  fallback?: React$1.ElementType;
   /** Class name to apply to the fallback component. */
   classNameFallback?: string;
 };
@@ -107,6 +107,45 @@ declare function MediaWrapper({
   ...props
 }: MediaWrapperProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/portal.d.ts
+/**
+ * Renders children into a DOM element at the specified container.
+ *
+ * @param props - The component props.
+ * @param props.children - The content to render in the portal.
+ * @param props.container - The target container selector or ref.
+ *   - Selector string: `#id`, `.class`, or `[attribute]`
+ *   - React ref: A RefObject pointing to an existing DOM element.
+ * @returns The portal component or null if container not found.
+ *
+ * @example
+ * ```tsx
+ * // Using ID selector
+ * <Portal container="#modal-root">
+ *   <Modal />
+ * </Portal>
+ *
+ * // Using class selector
+ * <Portal container=".portal-container">
+ *   <Content />
+ * </Portal>
+ *
+ * // Using ref
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * <Portal container={containerRef}>
+ *   <Content />
+ * </Portal>
+ * ```
+ */
+interface PortalProps {
+  children: React.ReactNode;
+  container: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
+}
+declare function Portal({
+  children,
+  container
+}: PortalProps): React$1.ReactPortal | null;
+//#endregion
 //#region src/components/responsive-indicator.d.ts
 type Side = 'bottom-left' | 'bottom-right' | 'top-right' | 'top-left';
 /**
@@ -138,7 +177,7 @@ interface ResponsiveIndicatorProps {
  * <ResponsiveIndicator side="top-right" offset={1} unit="rem" />
  * ```
  */
-declare const ResponsiveIndicator: React.FC<ResponsiveIndicatorProps>;
+declare const ResponsiveIndicator: React$1.FC<ResponsiveIndicatorProps>;
 //#endregion
 //#region src/components/scroll-tracker.d.ts
 /**
@@ -146,7 +185,7 @@ declare const ResponsiveIndicator: React.FC<ResponsiveIndicatorProps>;
  */
 interface ScrollTrackerProps {
   /** The child elements to render within the scrollable container. */
-  children: React.ReactNode;
+  children: React$1.ReactNode;
 }
 /**
  * A component that provides a scrollable container and context for scroll tracking.
@@ -191,4 +230,4 @@ declare const ScrollTracker: ({
  */
 declare function ScrollableMarker(): null;
 //#endregion
-export { HtmlInjector, Iconify, MediaWrapper, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker };
+export { HtmlInjector, Iconify, MediaWrapper, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker };

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Icon as Iconify } from "@iconify/react";
 
@@ -6,7 +6,7 @@ import { Icon as Iconify } from "@iconify/react";
 /**
  * Props for the HtmlInjector component
  */
-type HtmlInjectorProps = Omit<React.ComponentProps<'div'>, 'dangerouslySetInnerHTML'> & {
+type HtmlInjectorProps = Omit<React$1.ComponentProps<'div'>, 'dangerouslySetInnerHTML'> & {
   /** The HTML content to inject and render */
   html: string;
   /**
@@ -66,13 +66,13 @@ type BreakPoints = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'max-sm' | 'max-md' | 'ma
 /**
  * Props for the MediaWrapper component.
  */
-type MediaWrapperProps = React.ComponentProps<'div'> & {
+type MediaWrapperProps = React$1.ComponentProps<'div'> & {
   /** The breakpoint at which to switch between the main component and fallback. */
   breakpoint: BreakPoints;
   /** The component to render when the breakpoint matches. Defaults to 'div'. */
-  as?: React.ElementType;
+  as?: React$1.ElementType;
   /** The component to render when the breakpoint doesn't match. Defaults to React.Fragment. */
-  fallback?: React.ElementType;
+  fallback?: React$1.ElementType;
   /** Class name to apply to the fallback component. */
   classNameFallback?: string;
 };
@@ -107,6 +107,45 @@ declare function MediaWrapper({
   ...props
 }: MediaWrapperProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/portal.d.ts
+/**
+ * Renders children into a DOM element at the specified container.
+ *
+ * @param props - The component props.
+ * @param props.children - The content to render in the portal.
+ * @param props.container - The target container selector or ref.
+ *   - Selector string: `#id`, `.class`, or `[attribute]`
+ *   - React ref: A RefObject pointing to an existing DOM element.
+ * @returns The portal component or null if container not found.
+ *
+ * @example
+ * ```tsx
+ * // Using ID selector
+ * <Portal container="#modal-root">
+ *   <Modal />
+ * </Portal>
+ *
+ * // Using class selector
+ * <Portal container=".portal-container">
+ *   <Content />
+ * </Portal>
+ *
+ * // Using ref
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * <Portal container={containerRef}>
+ *   <Content />
+ * </Portal>
+ * ```
+ */
+interface PortalProps {
+  children: React.ReactNode;
+  container: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
+}
+declare function Portal({
+  children,
+  container
+}: PortalProps): React$1.ReactPortal | null;
+//#endregion
 //#region src/components/responsive-indicator.d.ts
 type Side = 'bottom-left' | 'bottom-right' | 'top-right' | 'top-left';
 /**
@@ -138,7 +177,7 @@ interface ResponsiveIndicatorProps {
  * <ResponsiveIndicator side="top-right" offset={1} unit="rem" />
  * ```
  */
-declare const ResponsiveIndicator: React.FC<ResponsiveIndicatorProps>;
+declare const ResponsiveIndicator: React$1.FC<ResponsiveIndicatorProps>;
 //#endregion
 //#region src/components/scroll-tracker.d.ts
 /**
@@ -146,7 +185,7 @@ declare const ResponsiveIndicator: React.FC<ResponsiveIndicatorProps>;
  */
 interface ScrollTrackerProps {
   /** The child elements to render within the scrollable container. */
-  children: React.ReactNode;
+  children: React$1.ReactNode;
 }
 /**
  * A component that provides a scrollable container and context for scroll tracking.
@@ -191,4 +230,4 @@ declare const ScrollTracker: ({
  */
 declare function ScrollableMarker(): null;
 //#endregion
-export { HtmlInjector, Iconify, MediaWrapper, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker };
+export { HtmlInjector, Iconify, MediaWrapper, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker };

package/dist/components/index.js

@@ -1 +1 @@
-"use client";import{r as e}from"../functions-NBY7C4F1.js";import{C as t,T as n,k as r}from"../hooks-Bc_So9mz.js";import*as i from"react";import{jsx as a}from"react/jsx-runtime";import{Icon as o}from"@iconify/react";function s({className:t,html:n,sanitize:o=!1,executeScripts:s=!0,...c}){let l=i.useRef([]),u=i.useRef(null);r(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!n))try{let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[n,s]),i.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=i.useMemo(()=>{if(!n)return``;if(o){let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return n},[n,o]);return n?a(`div`,{ref:u,className:e(t),dangerouslySetInnerHTML:{__html:d},...c}):null}function c({breakpoint:e,as:t=`div`,fallback:r=i.Fragment,className:o,classNameFallback:s,...c}){let l=n(e.split(`-`).pop())===e.startsWith(`max`),u=l?r:t,d=l?s:o;return u===i.Fragment?a(u,{ref:c.ref,children:c.children},c.key):a(u,{className:d,...c})}const l=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],u=({side:e,offset:t=2,unit:r=`rem`})=>{let[o,s]=i.useState(e??`bottom-left`),c=n({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[u,d]=i.useState(typeof window<`u`?window.innerWidth:0);i.useEffect(()=>{if(typeof window>`u`)return;let e=()=>d(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f=c===`2xl`&&u>=1792?r===`rem`?`${(u/16).toFixed(1)}rem`:`${u}${r}`:c;return a(`button`,{type:`button`,onClick:()=>{s(l[(l.indexOf(o)+1)%l.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...{"bottom-left":{bottom:`${t}${r}`,left:`${t}${r}`},"bottom-right":{bottom:`${t}${r}`,right:`${t}${r}`},"top-right":{top:`${t}${r}`,right:`${t}${r}`},"top-left":{top:`${t}${r}`,left:`${t}${r}`}}[o]},children:f})};function d(){return r(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}export{s as HtmlInjector,o as Iconify,c as MediaWrapper,u as ResponsiveIndicator,u as TailwindIndicator,t as ScrollTracker,d as ScrollableMarker};
+"use client";import{r as e}from"../functions-NBY7C4F1.js";import{C as t,T as n,k as r}from"../hooks-Bc_So9mz.js";import*as i from"react";import{useRef as a}from"react";import{jsx as o}from"react/jsx-runtime";import{Icon as s}from"@iconify/react";import{createPortal as c}from"react-dom";function l({className:t,html:n,sanitize:a=!1,executeScripts:s=!0,...c}){let l=i.useRef([]),u=i.useRef(null);r(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!n))try{let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[n,s]),i.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=i.useMemo(()=>{if(!n)return``;if(a){let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return n},[n,a]);return n?o(`div`,{ref:u,className:e(t),dangerouslySetInnerHTML:{__html:d},...c}):null}function u({breakpoint:e,as:t=`div`,fallback:r=i.Fragment,className:a,classNameFallback:s,...c}){let l=n(e.split(`-`).pop())===e.startsWith(`max`),u=l?r:t,d=l?s:a;return u===i.Fragment?o(u,{ref:c.ref,children:c.children},c.key):o(u,{className:d,...c})}function d({children:e,container:t}){let n=a(null);return n.current||=typeof t==`string`?document.querySelector(t):t.current,n.current?c(e,n.current):null}const f=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],p=({side:e,offset:t=2,unit:r=`rem`})=>{let[a,s]=i.useState(e??`bottom-left`),c=n({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[l,u]=i.useState(typeof window<`u`?window.innerWidth:0);i.useEffect(()=>{if(typeof window>`u`)return;let e=()=>u(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let d=c===`2xl`&&l>=1792?r===`rem`?`${(l/16).toFixed(1)}rem`:`${l}${r}`:c;return o(`button`,{type:`button`,onClick:()=>{s(f[(f.indexOf(a)+1)%f.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...{"bottom-left":{bottom:`${t}${r}`,left:`${t}${r}`},"bottom-right":{bottom:`${t}${r}`,right:`${t}${r}`},"top-right":{top:`${t}${r}`,right:`${t}${r}`},"top-left":{top:`${t}${r}`,left:`${t}${r}`}}[a]},children:d})};function m(){return r(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}export{l as HtmlInjector,s as Iconify,u as MediaWrapper,d as Portal,p as ResponsiveIndicator,p as TailwindIndicator,t as ScrollTracker,m as ScrollableMarker};

package/package.json

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