npm - @siberiacancode/reactuse - Versions diffs - 0.3.1 → 0.3.2 - Mend

@siberiacancode/reactuse 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),d=require("../useRefState/useRefState.cjs"),f=require("../../utils/helpers/isTarget.cjs"),m=require("../../utils/helpers/getElement.cjs"),E=(...u)=>{const r=f.isTarget(u[0])?u[0]:void 0,[o,c]=l.useState(null),s=d.useRefState();return l.useEffect(()=>{const e=(r?m.getElement(r):s.current)??window,i=new MutationObserver(v=>{v.filter(t=>t.removedNodes.length).map(t=>Array.from(t.removedNodes)).flat().forEach(t=>{c(a=>t===a?document.activeElement:a)})});i.observe(e,{childList:!0,subtree:!0});const n=()=>c(document?.activeElement);return e.addEventListener("focus",n,!0),e.addEventListener("blur",n,!0),()=>{i.disconnect(),e.removeEventListener("focus",n,!0),e.removeEventListener("blur",n,!0)}},[r,s.state]),r?o:{ref:s,value:o}};exports.useActiveElement=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),f=require("../useRefState/useRefState.cjs"),v=require("../../utils/helpers/isTarget.cjs"),m=(...u)=>{const r=v.isTarget(u[0])?u[0]:void 0,[o,c]=l.useState(null),s=f.useRefState();return l.useEffect(()=>{const e=(r?v.isTarget.getElement(r):s.current)??window,i=new MutationObserver(d=>{d.filter(t=>t.removedNodes.length).map(t=>Array.from(t.removedNodes)).flat().forEach(t=>{c(a=>t===a?document.activeElement:a)})});i.observe(e,{childList:!0,subtree:!0});const n=()=>c(document?.activeElement);return e.addEventListener("focus",n,!0),e.addEventListener("blur",n,!0),()=>{i.disconnect(),e.removeEventListener("focus",n,!0),e.removeEventListener("blur",n,!0)}},[r,s.state]),r?o:{ref:s,value:o}};exports.useActiveElement=m;
 //# sourceMappingURL=useActiveElement.cjs.map

package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useActiveElement.cjs","sources":["../../../../src/hooks/useActiveElement/useActiveElement.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use active element return type /\nexport type UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> =\n ActiveElement \| null;\n\nexport interface UseActiveElement {\n (): UseActiveElementReturn;\n\n <Target extends Element, ActiveElement extends HTMLElement = HTMLElement>(\n target?: never\n ): {\n ref: StateRef<Target>;\n value: UseActiveElementReturn<ActiveElement>;\n };\n\n <ActiveElement extends HTMLElement = HTMLElement>(\n target: HookTarget\n ): UseActiveElementReturn<ActiveElement>;\n}\n\n/\n @name useActiveElement\n * @description - Hook that returns the active element\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} [target=window] The target element to observe active element changes\n * @returns {ActiveElement \| null} The active element\n \n @example\n * const activeElement = useActiveElement(ref);\n \n @overload\n * @template ActiveElement The active element type\n * @returns {{ ref: StateRef<Element>; activeElement: ActiveElement \| null }} An object containing the ref and active element\n \n @example\n * const { ref, value } = useActiveElement();\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useActiveElement.html}\n */\nexport const useActiveElement = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const [value, setValue] = useState<HTMLElement \| null>(null);\n const internalRef = useRefState();\n\n useEffect(() => {\n const element = ((target ? getElement(target) : internalRef.current) ?? window) as Element;\n\n const observer = new MutationObserver((mutations) => {\n mutations\n .filter((mutation) => mutation.removedNodes.length)\n .map((mutation) => Array.from(mutation.removedNodes))\n .flat()\n .forEach((node) => {\n setValue((prevActiveElement) => {\n if (node === prevActiveElement) return document.activeElement as HTMLElement \| null;\n return prevActiveElement;\n });\n });\n });\n\n observer.observe(element, {\n childList: true,\n subtree: true\n });\n\n const onActiveElementChange = () => setValue(document?.activeElement as HTMLElement \| null);\n\n element.addEventListener('focus', onActiveElementChange, true);\n element.addEventListener('blur', onActiveElementChange, true);\n\n return () => {\n observer.disconnect();\n element.removeEventListener('focus', onActiveElementChange, true);\n element.removeEventListener('blur', onActiveElementChange, true);\n };\n }, [target, internalRef.state]);\n\n if (target) return value;\n return {\n ref: internalRef,\n value\n };\n}) as UseActiveElement;\n"],"names":["useActiveElement","params","target","isTarget","value","setValue","useState","internalRef","useRefState","useEffect","element","~~getElement","~~observer","mutations","mutation","node","prevActiveElement","onActiveElementChange"],"mappings":"~~mPAmDaA~~,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5C,CAACG,EAAOC,CAAQ,EAAIC,EAAAA,SAA6B,IAAI,EACrDC,EAAcC,EAAAA,YAAA,~~EAmCpB~~,~~OAjCAC~~,EAAAA,UAAU,IAAM,CACd,MAAMC,GAAYR,~~EAASS~~,EAAAA,~~WAAWT~~,CAAM,EAAIK,EAAY,~~UAAY~~,~~OAElEK~~,EAAW,IAAI,iBAAkBC,GAAc,CACnDA,EACG,OAAQC,GAAaA,EAAS,aAAa,MAAM,EACjD,IAAKA,GAAa,MAAM,KAAKA,EAAS,YAAY,CAAC,EACnD,OACA,QAASC,GAAS,~~CACjBV~~,~~EAAUW~~,GACJD,IAASC,EAA0B,SAAS,cACzCA,CACR,CAAA,CACF,CAAA,CACJ,EAEDJ,EAAS,~~QAAQF~~,EAAS,CACxB,UAAW,GACX,QAAS,EAAA,CACV,EAED,~~MAAMO~~,EAAwB,~~IAAMZ~~,EAAS,UAAU,aAAmC,EAE1F,OAAAK,EAAQ,iBAAiB,~~QAASO~~,EAAuB,EAAI,~~EAC7DP~~,EAAQ,iBAAiB,~~OAAQO~~,EAAuB,EAAI,EAErD,IAAM,CACXL,EAAS,WAAA,~~EACTF~~,EAAQ,oBAAoB,~~QAASO~~,EAAuB,EAAI,~~EAChEP~~,EAAQ,oBAAoB,~~OAAQO~~,EAAuB,EAAI,CAAA,CACjE,EACC,~~CAACf~~,EAAQK,EAAY,KAAK,CAAC,EAE1BL,EAAeE,EACZ,CACL,IAAKG,EACL,MAAAH,CAAA,CAEJ"}
1	+ {"version":3,"file":"useActiveElement.cjs","sources":["../../../../src/hooks/useActiveElement/useActiveElement.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use active element return type /\nexport type UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> =\n ActiveElement \| null;\n\nexport interface UseActiveElement {\n (): UseActiveElementReturn;\n\n <Target extends Element, ActiveElement extends HTMLElement = HTMLElement>(\n target?: never\n ): {\n ref: StateRef<Target>;\n value: UseActiveElementReturn<ActiveElement>;\n };\n\n <ActiveElement extends HTMLElement = HTMLElement>(\n target: HookTarget\n ): UseActiveElementReturn<ActiveElement>;\n}\n\n/\n @name useActiveElement\n * @description - Hook that returns the active element\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} [target=window] The target element to observe active element changes\n * @returns {ActiveElement \| null} The active element\n \n @example\n * const activeElement = useActiveElement(ref);\n \n @overload\n * @template ActiveElement The active element type\n * @returns {{ ref: StateRef<Element>; activeElement: ActiveElement \| null }} An object containing the ref and active element\n \n @example\n * const { ref, value } = useActiveElement();\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useActiveElement.html}\n */\nexport const useActiveElement = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const [value, setValue] = useState<HTMLElement \| null>(null);\n const internalRef = useRefState();\n\n useEffect(() => {\n const element = ((target ? isTarget.getElement(target) : internalRef.current) ??\n window) as Element;\n\n const observer = new MutationObserver((mutations) => {\n mutations\n .filter((mutation) => mutation.removedNodes.length)\n .map((mutation) => Array.from(mutation.removedNodes))\n .flat()\n .forEach((node) => {\n setValue((prevActiveElement) => {\n if (node === prevActiveElement) return document.activeElement as HTMLElement \| null;\n return prevActiveElement;\n });\n });\n });\n\n observer.observe(element, {\n childList: true,\n subtree: true\n });\n\n const onActiveElementChange = () => setValue(document?.activeElement as HTMLElement \| null);\n\n element.addEventListener('focus', onActiveElementChange, true);\n element.addEventListener('blur', onActiveElementChange, true);\n\n return () => {\n observer.disconnect();\n element.removeEventListener('focus', onActiveElementChange, true);\n element.removeEventListener('blur', onActiveElementChange, true);\n };\n }, [target, internalRef.state]);\n\n if (target) return value;\n return {\n ref: internalRef,\n value\n };\n}) as UseActiveElement;\n"],"names":["useActiveElement","params","target","isTarget","value","setValue","useState","internalRef","useRefState","useEffect","element","observer","mutations","mutation","node","prevActiveElement","onActiveElementChange"],"mappings":"mMAmDaA,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5C,CAACG,EAAOC,CAAQ,EAAIC,EAAAA,SAA6B,IAAI,EACrDC,EAAcC,EAAAA,YAAA,EAoCpB,OAlCAC,EAAAA,UAAU,IAAM,CACd,MAAMC,GAAYR,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIK,EAAY,UACnE,OAEII,EAAW,IAAI,iBAAkBC,GAAc,CACnDA,EACG,OAAQC,GAAaA,EAAS,aAAa,MAAM,EACjD,IAAKA,GAAa,MAAM,KAAKA,EAAS,YAAY,CAAC,EACnD,OACA,QAASC,GAAS,CACjBT,EAAUU,GACJD,IAASC,EAA0B,SAAS,cACzCA,CACR,CAAA,CACF,CAAA,CACJ,EAEDJ,EAAS,QAAQD,EAAS,CACxB,UAAW,GACX,QAAS,EAAA,CACV,EAED,MAAMM,EAAwB,IAAMX,EAAS,UAAU,aAAmC,EAE1F,OAAAK,EAAQ,iBAAiB,QAASM,EAAuB,EAAI,EAC7DN,EAAQ,iBAAiB,OAAQM,EAAuB,EAAI,EAErD,IAAM,CACXL,EAAS,WAAA,EACTD,EAAQ,oBAAoB,QAASM,EAAuB,EAAI,EAChEN,EAAQ,oBAAoB,OAAQM,EAAuB,EAAI,CAAA,CACjE,EACC,CAACd,EAAQK,EAAY,KAAK,CAAC,EAE1BL,EAAeE,EACZ,CACL,IAAKG,EACL,MAAAH,CAAA,CAEJ"}

package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),m=require("../useRefState/useRefState.cjs"),R=require("../../utils/helpers/isTarget.cjs"),q=require("../../utils/helpers/getElement.cjs"),H=(...o)=>{const n=R.isTarget(o[0])?o[0]:void 0,i=o[1]||(typeof o[0]=="object"?o[0]:{}),{enabled:a=!0}=i,s=m.useRefState(),r=b.useRef(i);if(r.current=i,b.useEffect(()=>{if(!a||!n&&!s.state)return;const e=n?q.getElement(n):s.state;if(!e)return;let c=!0,f=0,h=0;const d=()=>{if(r.current.force)return;const{scrollHeight:t,clientHeight:l,scrollTop:u}=e,T=t-l,Y=T/2;u<h?c=!1:T-u<=Y&&(c=!0),h=u},v=t=>{r.current.force||(t.deltaY<0?c=!1:d())},S=t=>{r.current.force||(f=t.touches[0].clientY)},g=t=>{if(r.current.force)return;const l=t.touches[0].clientY;f-l<0?c=!1:d(),f=l},L=()=>{!c&&!r.current.force||e.scrollTo({top:e.scrollHeight})};e.addEventListener("wheel",v),e.addEventListener("touchstart",S),e.addEventListener("touchmove",g);const E=new MutationObserver(L);return E.observe(e,{childList:!0,subtree:!0,characterData:!0}),()=>{E.disconnect(),e.removeEventListener("wheel",v),e.removeEventListener("touchstart",S),e.removeEventListener("touchmove",g)}},[a,n,s.state]),!n)return s};exports.useAutoScroll=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),R=require("../useRefState/useRefState.cjs"),L=require("../../utils/helpers/isTarget.cjs"),H=(...o)=>{const n=L.isTarget(o[0])?o[0]:void 0,i=o[1]||(typeof o[0]=="object"?o[0]:{}),{enabled:a=!0}=i,s=R.useRefState(),r=b.useRef(i);if(r.current=i,b.useEffect(()=>{if(!a||!n&&!s.state)return;const e=n?L.isTarget.getElement(n):s.state;if(!e)return;let c=!0,f=0,h=0;const d=()=>{if(r.current.force)return;const{scrollHeight:t,clientHeight:l,scrollTop:u}=e,E=t-l,m=E/2;u<h?c=!1:E-u<=m&&(c=!0),h=u},v=t=>{r.current.force||(t.deltaY<0?c=!1:d())},S=t=>{r.current.force||(f=t.touches[0].clientY)},g=t=>{if(r.current.force)return;const l=t.touches[0].clientY;f-l<0?c=!1:d(),f=l},Y=()=>{!c&&!r.current.force||e.scrollTo({top:e.scrollHeight})};e.addEventListener("wheel",v),e.addEventListener("touchstart",S),e.addEventListener("touchmove",g);const T=new MutationObserver(Y);return T.observe(e,{childList:!0,subtree:!0,characterData:!0}),()=>{T.disconnect(),e.removeEventListener("wheel",v),e.removeEventListener("touchstart",S),e.removeEventListener("touchmove",g)}},[a,n,s.state]),!n)return s};exports.useAutoScroll=H;
 //# sourceMappingURL=useAutoScroll.cjs.map

package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAutoScroll.cjs","sources":["../../../../src/hooks/useAutoScroll/useAutoScroll.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use auto scroll options type /\nexport interface UseAutoScrollOptions {\n /* Whether auto-scrolling is enabled /\n enabled?: boolean;\n /* Whether to force auto-scrolling regardless of user interactions /\n force?: boolean;\n}\n\nexport interface UseAutoScroll {\n (target: HookTarget, options?: UseAutoScrollOptions): void;\n\n <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;\n}\n\n/\n @name useAutoScroll\n * @description - Hook that automatically scrolls a list element to the bottom\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} target The target element to auto-scroll\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {void}\n \n @example\n * useAutoScroll(ref);\n \n @overload\n * @template Target\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {StateRef<Target>} A React ref to attach to the list element\n \n @example\n * const ref = useAutoScroll();\n */\nexport const useAutoScroll = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const options = (params[1] \|\|\n (typeof params[0] === 'object' ? params[0] : {})) as UseAutoScrollOptions;\n const { enabled = true } = options;\n\n const internalRef = useRefState<HTMLElement>();\n const internalOptionsRef = useRef<UseAutoScrollOptions>(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n\n const element = (target ? getElement(target) : internalRef.state) as HTMLElement;\n\n if (!element) return;\n\n let shouldAutoScroll = true;\n let touchStartY = 0;\n let lastScrollTop = 0;\n\n const onCheckScrollPosition = () => {\n if (internalOptionsRef.current.force) return;\n\n const { scrollHeight, clientHeight, scrollTop } = element;\n const maxScrollHeight = scrollHeight - clientHeight;\n const scrollThreshold = maxScrollHeight / 2;\n\n if (scrollTop < lastScrollTop) shouldAutoScroll = false;\n else if (maxScrollHeight - scrollTop <= scrollThreshold) shouldAutoScroll = true;\n\n lastScrollTop = scrollTop;\n };\n\n const onWheel = (event: WheelEvent) => {\n if (internalOptionsRef.current.force) return;\n\n if (event.deltaY < 0) shouldAutoScroll = false;\n else onCheckScrollPosition();\n };\n\n const onTouchStart = (event: TouchEvent) => {\n if (internalOptionsRef.current.force) return;\n touchStartY = event.touches[0].clientY;\n };\n\n const onTouchMove = (event: TouchEvent) => {\n if (internalOptionsRef.current.force) return;\n\n const touchEndY = event.touches[0].clientY;\n const deltaY = touchStartY - touchEndY;\n\n if (deltaY < 0) shouldAutoScroll = false;\n else onCheckScrollPosition();\n\n touchStartY = touchEndY;\n };\n\n const onMutation = () => {\n if (!shouldAutoScroll && !internalOptionsRef.current.force) return;\n element.scrollTo({ top: element.scrollHeight });\n };\n\n element.addEventListener('wheel', onWheel);\n element.addEventListener('touchstart', onTouchStart);\n element.addEventListener('touchmove', onTouchMove);\n\n const observer = new MutationObserver(onMutation);\n\n observer.observe(element, {\n childList: true,\n subtree: true,\n characterData: true\n });\n\n return () => {\n observer.disconnect();\n element.removeEventListener('wheel', onWheel);\n element.removeEventListener('touchstart', onTouchStart);\n element.removeEventListener('touchmove', onTouchMove);\n };\n }, [enabled, target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseAutoScroll;\n"],"names":["useAutoScroll","params","target","isTarget","options","enabled","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","~~getElement","~~shouldAutoScroll","touchStartY","lastScrollTop","onCheckScrollPosition","scrollHeight","clientHeight","scrollTop","maxScrollHeight","scrollThreshold","onWheel","event","onTouchStart","onTouchMove","touchEndY","onMutation","observer"],"mappings":"~~mPA8CaA~~,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC3CG,EAAWH,EAAO,CAAC,IACtB,OAAOA,EAAO,CAAC,GAAM,SAAWA,EAAO,CAAC,EAAI,CAAA,GACzC,CAAE,QAAAI,EAAU,EAAA,EAASD,EAErBE,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAA6BL,CAAO,EA4E/D,GA3EAI,EAAmB,QAAUJ,EAE7BM,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,GAAY,CAACH,GAAU,CAACI,EAAY,MAAQ,OAEjD,MAAMK,EAAWT,~~EAASU~~,EAAAA,~~WAAWV~~,CAAM,EAAII,EAAY,~~MAE3D~~,GAAI,CAACK,EAAS,OAEd,~~IAAIE~~,EAAmB,GACnBC,EAAc,EACdC,EAAgB,EAEpB,MAAMC,EAAwB,IAAM,CAClC,~~GAAIR~~,EAAmB,QAAQ,MAAO,OAEtC,KAAM,CAAE,~~aAAAS~~,EAAc,aAAAC,EAAc,UAAAC,CAAA,~~EAAcR~~,~~EAC5CS~~,EAAkBH,EAAeC,EACjCG,EAAkBD,EAAkB,EAEtCD,EAAYJ,EAAeF,EAAmB,GACzCO,EAAkBD,GAAaE,IAAiBR,EAAmB,IAE5EE,EAAgBI,CAAA,EAGZG,EAAWC,GAAsB,~~CACjCf~~,EAAmB,QAAQ,~~QAE3Be~~,EAAM,OAAS,EAAGV,EAAmB,GACpCG,EAAA,EAAsB,EAGvBQ,EAAgBD,GAAsB,~~CACtCf~~,EAAmB,QAAQ,QAC/BM,EAAcS,EAAM,QAAQ,CAAC,EAAE,QAAA,EAG3BE,EAAeF,GAAsB,CACzC,~~GAAIf~~,EAAmB,QAAQ,MAAO,OAEtC,~~MAAMkB~~,EAAYH,EAAM,QAAQ,CAAC,EAAE,QACpBT,EAAcY,EAEhB,EAAGb,EAAmB,GAC9BG,EAAA,EAELF,EAAcY,CAAA,EAGVC,EAAa,IAAM,CACnB,CAACd,GAAoB,~~CAACL~~,EAAmB,QAAQ,OACrDG,EAAQ,SAAS,CAAE,IAAKA,EAAQ,aAAc,CAAA,EAGhDA,EAAQ,iBAAiB,~~QAASW~~,CAAO,~~EACzCX~~,EAAQ,iBAAiB,~~aAAca~~,CAAY,~~EACnDb~~,EAAQ,iBAAiB,~~YAAac~~,CAAW,EAEjD,MAAMG,EAAW,IAAI,iBAAiBD,CAAU,EAEhD,OAAAC,EAAS,~~QAAQjB~~,EAAS,CACxB,UAAW,GACX,QAAS,GACT,cAAe,EAAA,CAChB,EAEM,IAAM,~~CACXiB~~,EAAS,WAAA,~~EACTjB~~,EAAQ,oBAAoB,~~QAASW~~,CAAO,~~EAC5CX~~,EAAQ,oBAAoB,~~aAAca~~,CAAY,~~EACtDb~~,EAAQ,oBAAoB,~~YAAac~~,CAAW,CAAA,CACtD,EACC,~~CAACpB~~,EAASH,EAAQI,EAAY,KAAK,CAAC,EAEnC,CAAAJ,EACJ,OAAOI,CACT"}
1	+ {"version":3,"file":"useAutoScroll.cjs","sources":["../../../../src/hooks/useAutoScroll/useAutoScroll.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use auto scroll options type /\nexport interface UseAutoScrollOptions {\n /* Whether auto-scrolling is enabled /\n enabled?: boolean;\n /* Whether to force auto-scrolling regardless of user interactions /\n force?: boolean;\n}\n\nexport interface UseAutoScroll {\n (target: HookTarget, options?: UseAutoScrollOptions): void;\n\n <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;\n}\n\n/\n @name useAutoScroll\n * @description - Hook that automatically scrolls a list element to the bottom\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} target The target element to auto-scroll\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {void}\n \n @example\n * useAutoScroll(ref);\n \n @overload\n * @template Target\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {StateRef<Target>} A React ref to attach to the list element\n \n @example\n * const ref = useAutoScroll();\n */\nexport const useAutoScroll = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const options = (params[1] \|\|\n (typeof params[0] === 'object' ? params[0] : {})) as UseAutoScrollOptions;\n const { enabled = true } = options;\n\n const internalRef = useRefState<HTMLElement>();\n const internalOptionsRef = useRef<UseAutoScrollOptions>(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.state) as HTMLElement;\n\n if (!element) return;\n\n let shouldAutoScroll = true;\n let touchStartY = 0;\n let lastScrollTop = 0;\n\n const onCheckScrollPosition = () => {\n if (internalOptionsRef.current.force) return;\n\n const { scrollHeight, clientHeight, scrollTop } = element;\n const maxScrollHeight = scrollHeight - clientHeight;\n const scrollThreshold = maxScrollHeight / 2;\n\n if (scrollTop < lastScrollTop) shouldAutoScroll = false;\n else if (maxScrollHeight - scrollTop <= scrollThreshold) shouldAutoScroll = true;\n\n lastScrollTop = scrollTop;\n };\n\n const onWheel = (event: WheelEvent) => {\n if (internalOptionsRef.current.force) return;\n\n if (event.deltaY < 0) shouldAutoScroll = false;\n else onCheckScrollPosition();\n };\n\n const onTouchStart = (event: TouchEvent) => {\n if (internalOptionsRef.current.force) return;\n touchStartY = event.touches[0].clientY;\n };\n\n const onTouchMove = (event: TouchEvent) => {\n if (internalOptionsRef.current.force) return;\n\n const touchEndY = event.touches[0].clientY;\n const deltaY = touchStartY - touchEndY;\n\n if (deltaY < 0) shouldAutoScroll = false;\n else onCheckScrollPosition();\n\n touchStartY = touchEndY;\n };\n\n const onMutation = () => {\n if (!shouldAutoScroll && !internalOptionsRef.current.force) return;\n element.scrollTo({ top: element.scrollHeight });\n };\n\n element.addEventListener('wheel', onWheel);\n element.addEventListener('touchstart', onTouchStart);\n element.addEventListener('touchmove', onTouchMove);\n\n const observer = new MutationObserver(onMutation);\n\n observer.observe(element, {\n childList: true,\n subtree: true,\n characterData: true\n });\n\n return () => {\n observer.disconnect();\n element.removeEventListener('wheel', onWheel);\n element.removeEventListener('touchstart', onTouchStart);\n element.removeEventListener('touchmove', onTouchMove);\n };\n }, [enabled, target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseAutoScroll;\n"],"names":["useAutoScroll","params","target","isTarget","options","enabled","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","shouldAutoScroll","touchStartY","lastScrollTop","onCheckScrollPosition","scrollHeight","clientHeight","scrollTop","maxScrollHeight","scrollThreshold","onWheel","event","onTouchStart","onTouchMove","touchEndY","onMutation","observer"],"mappings":"mMA8CaA,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC3CG,EAAWH,EAAO,CAAC,IACtB,OAAOA,EAAO,CAAC,GAAM,SAAWA,EAAO,CAAC,EAAI,CAAA,GACzC,CAAE,QAAAI,EAAU,EAAA,EAASD,EAErBE,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAA6BL,CAAO,EA4E/D,GA3EAI,EAAmB,QAAUJ,EAE7BM,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,GAAY,CAACH,GAAU,CAACI,EAAY,MAAQ,OAEjD,MAAMK,EAAWT,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAII,EAAY,MAEpE,GAAI,CAACK,EAAS,OAEd,IAAIC,EAAmB,GACnBC,EAAc,EACdC,EAAgB,EAEpB,MAAMC,EAAwB,IAAM,CAClC,GAAIP,EAAmB,QAAQ,MAAO,OAEtC,KAAM,CAAE,aAAAQ,EAAc,aAAAC,EAAc,UAAAC,CAAA,EAAcP,EAC5CQ,EAAkBH,EAAeC,EACjCG,EAAkBD,EAAkB,EAEtCD,EAAYJ,EAAeF,EAAmB,GACzCO,EAAkBD,GAAaE,IAAiBR,EAAmB,IAE5EE,EAAgBI,CAAA,EAGZG,EAAWC,GAAsB,CACjCd,EAAmB,QAAQ,QAE3Bc,EAAM,OAAS,EAAGV,EAAmB,GACpCG,EAAA,EAAsB,EAGvBQ,EAAgBD,GAAsB,CACtCd,EAAmB,QAAQ,QAC/BK,EAAcS,EAAM,QAAQ,CAAC,EAAE,QAAA,EAG3BE,EAAeF,GAAsB,CACzC,GAAId,EAAmB,QAAQ,MAAO,OAEtC,MAAMiB,EAAYH,EAAM,QAAQ,CAAC,EAAE,QACpBT,EAAcY,EAEhB,EAAGb,EAAmB,GAC9BG,EAAA,EAELF,EAAcY,CAAA,EAGVC,EAAa,IAAM,CACnB,CAACd,GAAoB,CAACJ,EAAmB,QAAQ,OACrDG,EAAQ,SAAS,CAAE,IAAKA,EAAQ,aAAc,CAAA,EAGhDA,EAAQ,iBAAiB,QAASU,CAAO,EACzCV,EAAQ,iBAAiB,aAAcY,CAAY,EACnDZ,EAAQ,iBAAiB,YAAaa,CAAW,EAEjD,MAAMG,EAAW,IAAI,iBAAiBD,CAAU,EAEhD,OAAAC,EAAS,QAAQhB,EAAS,CACxB,UAAW,GACX,QAAS,GACT,cAAe,EAAA,CAChB,EAEM,IAAM,CACXgB,EAAS,WAAA,EACThB,EAAQ,oBAAoB,QAASU,CAAO,EAC5CV,EAAQ,oBAAoB,aAAcY,CAAY,EACtDZ,EAAQ,oBAAoB,YAAaa,CAAW,CAAA,CACtD,EACC,CAACnB,EAASH,EAAQI,EAAY,KAAK,CAAC,EAEnC,CAAAJ,EACJ,OAAOI,CACT"}

package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),l=require("../useRefState/useRefState.cjs"),a=require("../../utils/helpers/isTarget.cjs"),f=require("../../utils/helpers/getElement.cjs"),d=(...e)=>{const t=a.isTarget(e[0])?e[0]:void 0,r=e[1]?e[1]:e[0],n=l.useRefState(),c=o.useRef(r);if(c.current=r,o.useEffect(()=>{if(!t&&!n.state)return;const i=s=>{const u=t?f.getElement(t):n.current;u&&!u.contains(s.target)&&c.current(s)};return document.addEventListener("click",i),()=>{document.removeEventListener("click",i)}},[t,n.state]),!t)return n};exports.useClickOutside=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),a=require("../useRefState/useRefState.cjs"),l=require("../../utils/helpers/isTarget.cjs"),f=(...e)=>{const t=l.isTarget(e[0])?e[0]:void 0,r=e[1]?e[1]:e[0],n=a.useRefState(),c=o.useRef(r);if(c.current=r,o.useEffect(()=>{if(!t&&!n.state)return;const i=s=>{const u=t?l.isTarget.getElement(t):n.current;u&&!u.contains(s.target)&&c.current(s)};return document.addEventListener("click",i),()=>{document.removeEventListener("click",i)}},[t,n.state]),!t)return n};exports.useClickOutside=f;
 //# sourceMappingURL=useClickOutside.cjs.map

package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useClickOutside.cjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport interface UseClickOutside {\n (target: HookTarget, callback: (event: Event) => void): void;\n\n <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/*\n @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Elements \n * @usage necessary\n\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n \n @example\n * useClickOutside(ref, () => console.log('click outside'));\n \n @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n \n @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const onClick = (event: Event) => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (element && !element.contains(event.target as Node)) {\n internalCallbackRef.current(event);\n }\n };\n\n document.addEventListener('click', onClick);\n\n return () => {\n document.removeEventListener('click', onClick);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element"~~,"getElement"~~],"mappings":"~~mPAwCaA~~,EAAmB,IAAIC,IAAkB,CACpD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYH,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE5CI,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOJ,CAAQ,EAoB3C,GAnBAG,EAAoB,QAAUH,EAE9BK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACG,EAAY,MAAO,OACnC,MAAMK,EAAWC,GAAiB,CAChC,MAAMC,EAAWV,~~EAASW~~,EAAAA,~~WAAWX~~,CAAM,EAAIG,EAAY,~~QAEvDO~~,GAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,GACnDJ,EAAoB,QAAQI,CAAK,CACnC,EAGF,gBAAS,iBAAiB,QAASD,CAAO,EAEnC,IAAM,CACX,SAAS,oBAAoB,QAASA,CAAO,CAAA,CAC/C,EACC,CAACR,EAAQG,EAAY,KAAK,CAAC,EAE1B,CAAAH,EACJ,OAAOG,CACT"}
1	+ {"version":3,"file":"useClickOutside.cjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport interface UseClickOutside {\n (target: HookTarget, callback: (event: Event) => void): void;\n\n <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/*\n @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Elements \n * @usage necessary\n\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n \n @example\n * useClickOutside(ref, () => console.log('click outside'));\n \n @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n \n @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const onClick = (event: Event) => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (element && !element.contains(event.target as Node)) {\n internalCallbackRef.current(event);\n }\n };\n\n document.addEventListener('click', onClick);\n\n return () => {\n document.removeEventListener('click', onClick);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element"],"mappings":"mMAwCaA,EAAmB,IAAIC,IAAkB,CACpD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYH,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE5CI,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOJ,CAAQ,EAoB3C,GAnBAG,EAAoB,QAAUH,EAE9BK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACG,EAAY,MAAO,OACnC,MAAMK,EAAWC,GAAiB,CAChC,MAAMC,EAAWV,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QAEhEO,GAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,GACnDJ,EAAoB,QAAQI,CAAK,CACnC,EAGF,gBAAS,iBAAiB,QAASD,CAAO,EAEnC,IAAM,CACX,SAAS,oBAAoB,QAASA,CAAO,CAAA,CAC/C,EACC,CAACR,EAAQG,EAAY,KAAK,CAAC,EAE1B,CAAAH,EACJ,OAAOG,CACT"}

package/dist/cjs/hooks/useCssVar/useCssVar.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),v=require("../useRefState/useRefState.cjs"),w=require("../../utils/helpers/isTarget.cjs"),d=require("../../utils/helpers/getElement.cjs"),E=(...n)=>{const t=w.isTarget(n[0])?n[0]:void 0,o=t?n[1]:n[0],r=t?n[2]:n[1],[f,u]=i.useState(r??""),c=v.useRefState(),s=i.useRef(null),y=e=>{if(!s.current)return;const l=s.current;l.style&&(l.style.setProperty(o,e),u(e))},m=()=>{if(!s.current)return;const e=s.current;e.style&&(e.style.removeProperty(o),u(""))};return i.useEffect(()=>{if(!r)return;const e=(t?d.getElement(t):c.current)??window.document.documentElement;e.style&&(e.style.setProperty(o,r),u(r))},[]),i.useEffect(()=>{const e=(t?d.getElement(t):c.current)??window.document.documentElement;s.current=e;const l=()=>{const g=window.getComputedStyle(e).getPropertyValue(o)?.trim();u(g??r)},a=new MutationObserver(l);return a.observe(e,{attributeFilter:["style","class"]}),()=>{a.disconnect()}},[t,c.state]),t?{value:f,set:y,remove:m}:{ref:c,value:f,set:y,remove:m}};exports.useCssVar=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),v=require("../useRefState/useRefState.cjs"),f=require("../../utils/helpers/isTarget.cjs"),w=(...r)=>{const t=f.isTarget(r[0])?r[0]:void 0,o=t?r[1]:r[0],n=t?r[2]:r[1],[y,u]=l.useState(n??""),c=v.useRefState(),s=l.useRef(null),a=e=>{if(!s.current)return;const i=s.current;i.style&&(i.style.setProperty(o,e),u(e))},m=()=>{if(!s.current)return;const e=s.current;e.style&&(e.style.removeProperty(o),u(""))};return l.useEffect(()=>{if(!n)return;const e=(t?f.isTarget.getElement(t):c.current)??window.document.documentElement;e.style&&(e.style.setProperty(o,n),u(n))},[]),l.useEffect(()=>{const e=(t?f.isTarget.getElement(t):c.current)??window.document.documentElement;s.current=e;const i=()=>{const g=window.getComputedStyle(e).getPropertyValue(o)?.trim();u(g??n)},d=new MutationObserver(i);return d.observe(e,{attributeFilter:["style","class"]}),()=>{d.disconnect()}},[t,c.state]),t?{value:y,set:a,remove:m}:{ref:c,value:y,set:a,remove:m}};exports.useCssVar=w;
 //# sourceMappingURL=useCssVar.cjs.map

package/dist/cjs/hooks/useCssVar/useCssVar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCssVar.cjs","sources":["../../../../src/hooks/useCssVar/useCssVar.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The css variable return type /\nexport interface UseCssVarReturn {\n /* The value of the CSS variable /\n value: string;\n /* Remove the value of the CSS variable /\n remove: () => void;\n /* Set the value of the CSS variable /\n set: (value: string) => void;\n}\n\nexport interface UseCssVar {\n <Target extends HTMLElement>(\n key: string,\n initialValue?: string\n ): UseCssVarReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, key: string, initialValue?: string): UseCssVarReturn;\n}\n\n/\n @name useCssVar\n * @description - Hook that returns the value of a css variable\n * @category Browser\n * @usage low\n\n * @overload\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn & { ref: StateRef<Element> }} The object containing the value of the CSS variable and ref\n \n @example\n * const { ref, value, set, remove } = useCssVar('--color', 'red');\n \n @overload\n * @param {HookTarget} target The target element\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn} The object containing the value of the CSS variable\n \n @example\n * const { value, set, remove } = useCssVar(ref, '--color', 'red');\n */\nexport const useCssVar = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const key = (target ? params[1] : params[0]) as string;\n const initialValue = (target ? params[2] : params[1]) as string \| undefined;\n\n const [value, setValue] = useState(initialValue ?? '');\n const internalRef = useRefState<HTMLElement>();\n const elementRef = useRef<HTMLElement>(null);\n\n const set = (value: string) => {\n if (!elementRef.current) return;\n const element = elementRef.current;\n\n if (!element.style) return;\n element.style.setProperty(key, value);\n setValue(value);\n };\n\n const remove = () => {\n if (!elementRef.current) return;\n const element = elementRef.current;\n if (!element.style) return;\n\n element.style.removeProperty(key);\n setValue('');\n };\n\n useEffect(() => {\n if (!initialValue) return;\n\n const element =\n ((target ? getElement(target) : internalRef.current) as HTMLElement) ??\n window.document.documentElement;\n\n if (!element.style) return;\n element.style.setProperty(key, initialValue);\n setValue(initialValue);\n }, []);\n\n useEffect(() => {\n const element =\n ((target ? getElement(target) : internalRef.current) as HTMLElement) ??\n window.document.documentElement;\n\n elementRef.current = element;\n\n const onChange = () => {\n const value = window.getComputedStyle(element).getPropertyValue(key)?.trim();\n\n setValue(value ?? initialValue);\n };\n\n const observer = new MutationObserver(onChange);\n\n observer.observe(element, { attributeFilter: ['style', 'class'] });\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state]);\n\n if (target) return { value, set, remove };\n return { ref: internalRef, value, set, remove };\n}) as UseCssVar;\n"],"names":["useCssVar","params","target","isTarget","key","initialValue","value","setValue","useState","internalRef","useRefState","elementRef","useRef","set","element","remove","useEffect","~~getElement","~~onChange","observer"],"mappings":"~~mPAsDaA~~,EAAa,IAAIC,IAAkB,CAC9C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAOF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACpCI,EAAgBH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACK,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAgB,EAAE,EAC/CI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAoB,IAAI,EAErCC,EAAOP,GAAkB,CAC7B,GAAI,CAACK,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAEtBG,EAAQ,QACbA,EAAQ,MAAM,YAAYV,EAAKE,CAAK,EACpCC,EAASD,CAAK,EAAA,EAGVS,EAAS,IAAM,CACnB,GAAI,CAACJ,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QACtBG,EAAQ,QAEbA,EAAQ,MAAM,eAAeV,CAAG,EAChCG,EAAS,EAAE,EAAA,EAqCb,OAlCAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACX,EAAc,OAEnB,MAAMS,GACFZ,~~EAASe~~,~~aAAWf~~,CAAM,EAAIO,EAAY,~~UAC5C~~,OAAO,SAAS,gBAEbK,EAAQ,QACbA,EAAQ,MAAM,YAAYV,EAAKC,CAAY,EAC3CE,EAASF,CAAY,EAAA,EACpB,EAAE,EAELW,EAAAA,UAAU,IAAM,CACd,MAAMF,GACFZ,~~EAASe~~,~~aAAWf~~,CAAM,EAAIO,EAAY,~~UAC5C~~,OAAO,SAAS,gBAElBE,EAAW,QAAUG,EAErB,~~MAAMI~~,EAAW,IAAM,CACrB,~~MAAMZ~~,EAAQ,OAAO,iBAAiBQ,CAAO,EAAE,iBAAiBV,CAAG,GAAG,KAAA,EAEtEG,EAASD,GAASD,CAAY,CAAA,~~EAG1Bc~~,EAAW,IAAI,iBAAiBD,CAAQ,EAE9C,OAAAC,EAAS,~~QAAQL~~,EAAS,CAAE,gBAAiB,CAAC,QAAS,OAAO,EAAG,EAE1D,IAAM,~~CACXK~~,EAAS,WAAA,CAAW,CACtB,EACC,~~CAACjB~~,EAAQO,EAAY,KAAK,CAAC,EAE1BP,EAAe,CAAE,MAAAI,EAAO,IAAAO,EAAK,OAAAE,CAAA,EAC1B,CAAE,IAAKN,EAAa,MAAAH,EAAO,IAAAO,EAAK,OAAAE,CAAA,CACzC"}
1	+ {"version":3,"file":"useCssVar.cjs","sources":["../../../../src/hooks/useCssVar/useCssVar.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The css variable return type /\nexport interface UseCssVarReturn {\n /* The value of the CSS variable /\n value: string;\n /* Remove the value of the CSS variable /\n remove: () => void;\n /* Set the value of the CSS variable /\n set: (value: string) => void;\n}\n\nexport interface UseCssVar {\n <Target extends HTMLElement>(\n key: string,\n initialValue?: string\n ): UseCssVarReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, key: string, initialValue?: string): UseCssVarReturn;\n}\n\n/\n @name useCssVar\n * @description - Hook that returns the value of a css variable\n * @category Browser\n * @usage low\n\n * @overload\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn & { ref: StateRef<Element> }} The object containing the value of the CSS variable and ref\n \n @example\n * const { ref, value, set, remove } = useCssVar('--color', 'red');\n \n @overload\n * @param {HookTarget} target The target element\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn} The object containing the value of the CSS variable\n \n @example\n * const { value, set, remove } = useCssVar(ref, '--color', 'red');\n */\nexport const useCssVar = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const key = (target ? params[1] : params[0]) as string;\n const initialValue = (target ? params[2] : params[1]) as string \| undefined;\n\n const [value, setValue] = useState(initialValue ?? '');\n const internalRef = useRefState<HTMLElement>();\n const elementRef = useRef<HTMLElement>(null);\n\n const set = (value: string) => {\n if (!elementRef.current) return;\n const element = elementRef.current;\n\n if (!element.style) return;\n element.style.setProperty(key, value);\n setValue(value);\n };\n\n const remove = () => {\n if (!elementRef.current) return;\n const element = elementRef.current;\n if (!element.style) return;\n\n element.style.removeProperty(key);\n setValue('');\n };\n\n useEffect(() => {\n if (!initialValue) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as HTMLElement) ??\n window.document.documentElement;\n\n if (!element.style) return;\n element.style.setProperty(key, initialValue);\n setValue(initialValue);\n }, []);\n\n useEffect(() => {\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as HTMLElement) ??\n window.document.documentElement;\n\n elementRef.current = element;\n\n const onChange = () => {\n const value = window.getComputedStyle(element).getPropertyValue(key)?.trim();\n\n setValue(value ?? initialValue);\n };\n\n const observer = new MutationObserver(onChange);\n\n observer.observe(element, { attributeFilter: ['style', 'class'] });\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state]);\n\n if (target) return { value, set, remove };\n return { ref: internalRef, value, set, remove };\n}) as UseCssVar;\n"],"names":["useCssVar","params","target","isTarget","key","initialValue","value","setValue","useState","internalRef","useRefState","elementRef","useRef","set","element","remove","useEffect","onChange","observer"],"mappings":"mMAsDaA,EAAa,IAAIC,IAAkB,CAC9C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAOF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACpCI,EAAgBH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACK,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAgB,EAAE,EAC/CI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAoB,IAAI,EAErCC,EAAOP,GAAkB,CAC7B,GAAI,CAACK,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAEtBG,EAAQ,QACbA,EAAQ,MAAM,YAAYV,EAAKE,CAAK,EACpCC,EAASD,CAAK,EAAA,EAGVS,EAAS,IAAM,CACnB,GAAI,CAACJ,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QACtBG,EAAQ,QAEbA,EAAQ,MAAM,eAAeV,CAAG,EAChCG,EAAS,EAAE,EAAA,EAqCb,OAlCAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACX,EAAc,OAEnB,MAAMS,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,UACrD,OAAO,SAAS,gBAEbK,EAAQ,QACbA,EAAQ,MAAM,YAAYV,EAAKC,CAAY,EAC3CE,EAASF,CAAY,EAAA,EACpB,EAAE,EAELW,EAAAA,UAAU,IAAM,CACd,MAAMF,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,UACrD,OAAO,SAAS,gBAElBE,EAAW,QAAUG,EAErB,MAAMG,EAAW,IAAM,CACrB,MAAMX,EAAQ,OAAO,iBAAiBQ,CAAO,EAAE,iBAAiBV,CAAG,GAAG,KAAA,EAEtEG,EAASD,GAASD,CAAY,CAAA,EAG1Ba,EAAW,IAAI,iBAAiBD,CAAQ,EAE9C,OAAAC,EAAS,QAAQJ,EAAS,CAAE,gBAAiB,CAAC,QAAS,OAAO,EAAG,EAE1D,IAAM,CACXI,EAAS,WAAA,CAAW,CACtB,EACC,CAAChB,EAAQO,EAAY,KAAK,CAAC,EAE1BP,EAAe,CAAE,MAAAI,EAAO,IAAAO,EAAK,OAAAE,CAAA,EAC1B,CAAE,IAAKN,EAAa,MAAAH,EAAO,IAAAO,EAAK,OAAAE,CAAA,CACzC"}

package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),m=require("../useRefState/useRefState.cjs"),y=require("../../utils/helpers/isTarget.cjs"),p=require("../../utils/helpers/getElement.cjs"),D=(...r)=>{const n=typeof navigator<"u"&&"mediaDevices"in navigator&&!!navigator.mediaDevices&&"getDisplayMedia"in navigator.mediaDevices,i=y.isTarget(r[0])?r[0]:void 0,o=r[1]?r[1]:r[0],g=o?.immediately??!1,[d,f]=u.useState(!1),s=u.useRef(null),t=u.useRef(null),a=m.useRefState(),c=()=>{!t.current||!n||!s.current||(f(!1),s.current.srcObject=null,t.current.getTracks().forEach(e=>e.stop()),t.current=null)},l=async()=>{if(!n||!s.current)return;const e=await navigator.mediaDevices.getDisplayMedia({video:o?.video,audio:o?.audio});return f(!0),t.current=e,s.current.srcObject=e,e.getTracks().forEach(v=>v.onended=c),e};return u.useEffect(()=>{if(!n||!i&&!a.state)return;const e=i?p.getElement(i):a.current;if(e&&(s.current=e,!!g))return l(),()=>{c()}},[i,a.state]),i?{stream:t.current,sharing:d,supported:n,start:l,stop:c}:{stream:t.current,sharing:d,supported:n,start:l,stop:c,ref:a}};exports.useDisplayMedia=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),y=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),p=(...r)=>{const n=typeof navigator<"u"&&"mediaDevices"in navigator&&!!navigator.mediaDevices&&"getDisplayMedia"in navigator.mediaDevices,i=g.isTarget(r[0])?r[0]:void 0,o=r[1]?r[1]:r[0],v=o?.immediately??!1,[d,f]=u.useState(!1),s=u.useRef(null),t=u.useRef(null),a=y.useRefState(),c=()=>{!t.current||!n||!s.current||(f(!1),s.current.srcObject=null,t.current.getTracks().forEach(e=>e.stop()),t.current=null)},l=async()=>{if(!n||!s.current)return;const e=await navigator.mediaDevices.getDisplayMedia({video:o?.video,audio:o?.audio});return f(!0),t.current=e,s.current.srcObject=e,e.getTracks().forEach(m=>m.onended=c),e};return u.useEffect(()=>{if(!n||!i&&!a.state)return;const e=i?g.isTarget.getElement(i):a.current;if(e&&(s.current=e,!!v))return l(),()=>{c()}},[i,a.state]),i?{stream:t.current,sharing:d,supported:n,start:l,stop:c}:{stream:t.current,sharing:d,supported:n,start:l,stop:c,ref:a}};exports.useDisplayMedia=p;
 //# sourceMappingURL=useDisplayMedia.cjs.map

package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDisplayMedia.cjs","sources":["../../../../src/hooks/useDisplayMedia/useDisplayMedia.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use display media return type /\nexport interface UseDisplayMediaReturn {\n /* Whether screen sharing is currently active /\n sharing: boolean;\n /* The media stream object /\n stream: MediaStream \| null;\n /* Whether the display media API is supported /\n supported: boolean;\n /* Start screen sharing /\n start: () => Promise<void>;\n /* Stop screen sharing /\n stop: () => void;\n}\n\n/* The use display media options type /\nexport interface UseDisplayMediaOptions {\n /* Whether to enable audio sharing /\n audio?: boolean \| MediaTrackConstraints;\n /* Whether to start immediately /\n immediately?: boolean;\n /* Whether to enable video sharing /\n video?: boolean \| MediaTrackConstraints;\n}\n\nexport interface UseDisplayMedia {\n (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;\n\n <Target extends HTMLVideoElement>(\n options?: UseDisplayMediaOptions,\n target?: never\n ): { ref: StateRef<Target> } & UseDisplayMediaReturn;\n}\n\n/\n @name useDisplayMedia\n * @description - Hook that provides screen sharing functionality\n * @category Browser\n * @usage low\n \n @browserapi mediaDevices.getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n \n @overload\n * @param {HookTarget} target The target video element to display the media stream\n * @param {boolean \| MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean \| MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn} Object containing stream, sharing status and control methods\n \n @example\n * const { stream, sharing, start, stop } = useDisplayMedia(ref);\n \n @overload\n * @template Target The target video element\n * @param {boolean \| MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean \| MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }} Object containing stream, sharing status, control methods and ref\n \n @example\n * const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();\n */\nexport const useDisplayMedia = ((...params: any[]) => {\n const supported =\n typeof navigator !== 'undefined' &&\n 'mediaDevices' in navigator &&\n !!navigator.mediaDevices &&\n 'getDisplayMedia' in navigator.mediaDevices;\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (params[1] ? params[1] : params[0]) as UseDisplayMediaOptions \| undefined;\n const immediately = options?.immediately ?? false;\n\n const [sharing, setSharing] = useState(false);\n\n const elementRef = useRef<HTMLVideoElement>(null);\n const streamRef = useRef<MediaStream>(null);\n const internalRef = useRefState<Element>();\n\n const stop = () => {\n if (!streamRef.current \|\| !supported \|\| !elementRef.current) return;\n\n setSharing(false);\n elementRef.current.srcObject = null;\n streamRef.current.getTracks().forEach((track) => track.stop());\n streamRef.current = null;\n };\n\n const start = async () => {\n if (!supported \|\| !elementRef.current) return;\n\n const displayMedia = await navigator.mediaDevices.getDisplayMedia({\n video: options?.video,\n audio: options?.audio\n });\n\n setSharing(true);\n streamRef.current = displayMedia;\n elementRef.current.srcObject = displayMedia;\n\n displayMedia.getTracks().forEach((track) => (track.onended = stop));\n return displayMedia;\n };\n\n useEffect(() => {\n if (!supported \|\| (!target && !internalRef.state)) return;\n\n const element = (target ? getElement(target) : internalRef.current) as HTMLVideoElement;\n\n if (!element) return;\n\n elementRef.current = element;\n\n if (!immediately) return;\n\n start();\n\n return () => {\n stop();\n };\n }, [target, internalRef.state]);\n\n if (target)\n return {\n stream: streamRef.current,\n sharing,\n supported,\n start,\n stop\n };\n\n return {\n stream: streamRef.current,\n sharing,\n supported,\n start,\n stop,\n ref: internalRef\n };\n}) as UseDisplayMedia;\n"],"names":["useDisplayMedia","params","supported","target","isTarget","options","immediately","sharing","setSharing","useState","elementRef","useRef","streamRef","internalRef","useRefState","stop","track","start","displayMedia","useEffect","element"~~,"getElement"~~],"mappings":"~~mPAuEaA~~,EAAmB,IAAIC,IAAkB,CACpD,MAAMC,EACJ,OAAO,UAAc,KACrB,iBAAkB,WAClB,CAAC,CAAC,UAAU,cACZ,oBAAqB,UAAU,aAC3BC,EAAUC,EAAAA,SAASH,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CI,EAAWJ,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAC3CK,EAAcD,GAAS,aAAe,GAEtC,CAACE,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAEtCC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAYD,EAAAA,OAAoB,IAAI,EACpCE,EAAcC,EAAAA,YAAA,EAEdC,EAAO,IAAM,CACb,CAACH,EAAU,SAAW,CAACV,GAAa,CAACQ,EAAW,UAEpDF,EAAW,EAAK,EAChBE,EAAW,QAAQ,UAAY,KAC/BE,EAAU,QAAQ,YAAY,QAASI,GAAUA,EAAM,MAAM,EAC7DJ,EAAU,QAAU,KAAA,EAGhBK,EAAQ,SAAY,CACxB,GAAI,CAACf,GAAa,CAACQ,EAAW,QAAS,OAEvC,MAAMQ,EAAe,MAAM,UAAU,aAAa,gBAAgB,CAChE,MAAOb,GAAS,MAChB,MAAOA,GAAS,KAAA,CACjB,EAED,OAAAG,EAAW,EAAI,EACfI,EAAU,QAAUM,EACpBR,EAAW,QAAQ,UAAYQ,EAE/BA,EAAa,YAAY,QAASF,GAAWA,EAAM,QAAUD,CAAK,EAC3DG,CAAA,~~EAqBT~~,~~OAlBAC~~,EAAAA,UAAU,IAAM,CACd,GAAI,CAACjB,GAAc,CAACC,GAAU,CAACU,EAAY,MAAQ,OAEnD,MAAMO,~~EAAWjB~~,~~EAASkB~~,EAAAA,~~WAAWlB~~,CAAM,EAAIU,EAAY,~~QAE3D~~,GAAKO,IAELV,EAAW,QAAUU,EAEjB,EAACd,GAEL,OAAAW,EAAA,EAEO,IAAM,CACXF,EAAA,CAAK,CACP,EACC,CAACZ,EAAQU,EAAY,KAAK,CAAC,EAE1BV,EACK,CACL,OAAQS,EAAU,QAClB,QAAAL,EACA,UAAAL,EACA,MAAAe,EACA,KAAAF,CAAA,EAGG,CACL,OAAQH,EAAU,QAClB,QAAAL,EACA,UAAAL,EACA,MAAAe,EACA,KAAAF,EACA,IAAKF,CAAA,CAET"}
1	+ {"version":3,"file":"useDisplayMedia.cjs","sources":["../../../../src/hooks/useDisplayMedia/useDisplayMedia.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use display media return type /\nexport interface UseDisplayMediaReturn {\n /* Whether screen sharing is currently active /\n sharing: boolean;\n /* The media stream object /\n stream: MediaStream \| null;\n /* Whether the display media API is supported /\n supported: boolean;\n /* Start screen sharing /\n start: () => Promise<void>;\n /* Stop screen sharing /\n stop: () => void;\n}\n\n/* The use display media options type /\nexport interface UseDisplayMediaOptions {\n /* Whether to enable audio sharing /\n audio?: boolean \| MediaTrackConstraints;\n /* Whether to start immediately /\n immediately?: boolean;\n /* Whether to enable video sharing /\n video?: boolean \| MediaTrackConstraints;\n}\n\nexport interface UseDisplayMedia {\n (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;\n\n <Target extends HTMLVideoElement>(\n options?: UseDisplayMediaOptions,\n target?: never\n ): { ref: StateRef<Target> } & UseDisplayMediaReturn;\n}\n\n/\n @name useDisplayMedia\n * @description - Hook that provides screen sharing functionality\n * @category Browser\n * @usage low\n \n @browserapi mediaDevices.getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n \n @overload\n * @param {HookTarget} target The target video element to display the media stream\n * @param {boolean \| MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean \| MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn} Object containing stream, sharing status and control methods\n \n @example\n * const { stream, sharing, start, stop } = useDisplayMedia(ref);\n \n @overload\n * @template Target The target video element\n * @param {boolean \| MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean \| MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }} Object containing stream, sharing status, control methods and ref\n \n @example\n * const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();\n */\nexport const useDisplayMedia = ((...params: any[]) => {\n const supported =\n typeof navigator !== 'undefined' &&\n 'mediaDevices' in navigator &&\n !!navigator.mediaDevices &&\n 'getDisplayMedia' in navigator.mediaDevices;\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (params[1] ? params[1] : params[0]) as UseDisplayMediaOptions \| undefined;\n const immediately = options?.immediately ?? false;\n\n const [sharing, setSharing] = useState(false);\n\n const elementRef = useRef<HTMLVideoElement>(null);\n const streamRef = useRef<MediaStream>(null);\n const internalRef = useRefState<Element>();\n\n const stop = () => {\n if (!streamRef.current \|\| !supported \|\| !elementRef.current) return;\n\n setSharing(false);\n elementRef.current.srcObject = null;\n streamRef.current.getTracks().forEach((track) => track.stop());\n streamRef.current = null;\n };\n\n const start = async () => {\n if (!supported \|\| !elementRef.current) return;\n\n const displayMedia = await navigator.mediaDevices.getDisplayMedia({\n video: options?.video,\n audio: options?.audio\n });\n\n setSharing(true);\n streamRef.current = displayMedia;\n elementRef.current.srcObject = displayMedia;\n\n displayMedia.getTracks().forEach((track) => (track.onended = stop));\n return displayMedia;\n };\n\n useEffect(() => {\n if (!supported \|\| (!target && !internalRef.state)) return;\n\n const element = (\n target ? isTarget.getElement(target) : internalRef.current\n ) as HTMLVideoElement;\n\n if (!element) return;\n\n elementRef.current = element;\n\n if (!immediately) return;\n\n start();\n\n return () => {\n stop();\n };\n }, [target, internalRef.state]);\n\n if (target)\n return {\n stream: streamRef.current,\n sharing,\n supported,\n start,\n stop\n };\n\n return {\n stream: streamRef.current,\n sharing,\n supported,\n start,\n stop,\n ref: internalRef\n };\n}) as UseDisplayMedia;\n"],"names":["useDisplayMedia","params","supported","target","isTarget","options","immediately","sharing","setSharing","useState","elementRef","useRef","streamRef","internalRef","useRefState","stop","track","start","displayMedia","useEffect","element"],"mappings":"mMAuEaA,EAAmB,IAAIC,IAAkB,CACpD,MAAMC,EACJ,OAAO,UAAc,KACrB,iBAAkB,WAClB,CAAC,CAAC,UAAU,cACZ,oBAAqB,UAAU,aAC3BC,EAAUC,EAAAA,SAASH,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CI,EAAWJ,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAC3CK,EAAcD,GAAS,aAAe,GAEtC,CAACE,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAEtCC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAYD,EAAAA,OAAoB,IAAI,EACpCE,EAAcC,EAAAA,YAAA,EAEdC,EAAO,IAAM,CACb,CAACH,EAAU,SAAW,CAACV,GAAa,CAACQ,EAAW,UAEpDF,EAAW,EAAK,EAChBE,EAAW,QAAQ,UAAY,KAC/BE,EAAU,QAAQ,YAAY,QAASI,GAAUA,EAAM,MAAM,EAC7DJ,EAAU,QAAU,KAAA,EAGhBK,EAAQ,SAAY,CACxB,GAAI,CAACf,GAAa,CAACQ,EAAW,QAAS,OAEvC,MAAMQ,EAAe,MAAM,UAAU,aAAa,gBAAgB,CAChE,MAAOb,GAAS,MAChB,MAAOA,GAAS,KAAA,CACjB,EAED,OAAAG,EAAW,EAAI,EACfI,EAAU,QAAUM,EACpBR,EAAW,QAAQ,UAAYQ,EAE/BA,EAAa,YAAY,QAASF,GAAWA,EAAM,QAAUD,CAAK,EAC3DG,CAAA,EAuBT,OApBAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACjB,GAAc,CAACC,GAAU,CAACU,EAAY,MAAQ,OAEnD,MAAMO,EACJjB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QAGrD,GAAKO,IAELV,EAAW,QAAUU,EAEjB,EAACd,GAEL,OAAAW,EAAA,EAEO,IAAM,CACXF,EAAA,CAAK,CACP,EACC,CAACZ,EAAQU,EAAY,KAAK,CAAC,EAE1BV,EACK,CACL,OAAQS,EAAU,QAClB,QAAAL,EACA,UAAAL,EACA,MAAAe,EACA,KAAAF,CAAA,EAGG,CACL,OAAQH,EAAU,QAClB,QAAAL,EACA,UAAAL,EACA,MAAAe,EACA,KAAAF,EACA,IAAKF,CAAA,CAET"}

package/dist/cjs/hooks/useDocumentEvent/useDocumentEvent.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../useEventListener/useEventListener.cjs"),r=require("../../utils/helpers/getElement.cjs"),s=(e,t,n)=>u.useEventListener(r.target(document),e,t,n);exports.useDocumentEvent=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../useEventListener/useEventListener.cjs"),s=require("../../utils/helpers/isTarget.cjs"),u=(e,t,n)=>r.useEventListener(s.isTarget.wrap(document),e,t,n);exports.useDocumentEvent=u;
 //# sourceMappingURL=useDocumentEvent.cjs.map

package/dist/cjs/hooks/useDocumentEvent/useDocumentEvent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDocumentEvent.cjs","sources":["../../../../src/hooks/useDocumentEvent/useDocumentEvent.ts"],"sourcesContent":["import { ~~target~~ } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/*\n @name useDocumentEvent\n * @description - Hook attaches an event listener to the document object for the specified event\n * @category Browser\n * @usage low\n\n * @template Event Key of document event map.\n * @param {Event} event The event to listen for.\n * @param {(event: DocumentEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n \n @example\n * useDocumentEvent('click', () => console.log('clicked'));\n */\nexport const useDocumentEvent = <Event extends keyof DocumentEventMap>(\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => any,\n options?: UseEventListenerOptions\n) => useEventListener(~~target~~(document), event, listener, options);\n"],"names":["useDocumentEvent","event","listener","options","useEventListener","~~target~~"],"mappings":"~~4LAqBaA~~,EAAmB,CAC9BC,EACAC,EACAC,IACGC,EAAAA,iBAAiBC,~~EAAAA~~,~~OAAO~~,QAAQ,EAAGJ,EAAOC,EAAUC,CAAO"}
1	+ {"version":3,"file":"useDocumentEvent.cjs","sources":["../../../../src/hooks/useDocumentEvent/useDocumentEvent.ts"],"sourcesContent":["import { isTarget } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/*\n @name useDocumentEvent\n * @description - Hook attaches an event listener to the document object for the specified event\n * @category Browser\n * @usage low\n\n * @template Event Key of document event map.\n * @param {Event} event The event to listen for.\n * @param {(event: DocumentEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n \n @example\n * useDocumentEvent('click', () => console.log('clicked'));\n */\nexport const useDocumentEvent = <Event extends keyof DocumentEventMap>(\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => any,\n options?: UseEventListenerOptions\n) => useEventListener(isTarget.wrap(document), event, listener, options);\n"],"names":["useDocumentEvent","event","listener","options","useEventListener","isTarget"],"mappings":"0LAqBaA,EAAmB,CAC9BC,EACAC,EACAC,IACGC,EAAAA,iBAAiBC,WAAS,KAAK,QAAQ,EAAGJ,EAAOC,EAAUC,CAAO"}

package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("../useRefState/useRefState.cjs"),T=require("../../utils/helpers/isTarget.cjs"),g=require("../../utils/helpers/getElement.cjs"),R=300,k=(...t)=>{const e=T.isTarget(t[0])?t[0]:void 0,l=e?t[1]:t[0],f=e?t[2]:t[1],u=c.useRef(void 0),r=c.useRef(0),o=d.useRefState(),a=c.useRef(l);a.current=l;const i=c.useRef(f);if(i.current=f,c.useEffect(()=>{if(!e&&!o.state)return;const n=e?g.getElement(e):o.current;if(!n)return;const s=E=>{r.current+=1,r.current===1&&(u.current=setTimeout(()=>{i.current?.onSingleClick&&i.current.onSingleClick(E),r.current=0},i.current?.threshold??R)),r.current===2&&(clearTimeout(u.current),a.current(E),r.current=0)};return n.addEventListener("mousedown",s),n.addEventListener("touchstart",s),()=>{n.removeEventListener("mousedown",s),n.removeEventListener("touchstart",s),u.current&&clearTimeout(u.current)}},[e,o.state]),!e)return o};exports.DEFAULT_THRESHOLD_TIME=R;exports.useDoubleClick=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),E=require("../useRefState/useRefState.cjs"),T=require("../../utils/helpers/isTarget.cjs"),d=300,g=(...t)=>{const e=T.isTarget(t[0])?t[0]:void 0,l=e?t[1]:t[0],f=e?t[2]:t[1],u=c.useRef(void 0),r=c.useRef(0),o=E.useRefState(),a=c.useRef(l);a.current=l;const i=c.useRef(f);if(i.current=f,c.useEffect(()=>{if(!e&&!o.state)return;const n=e?T.isTarget.getElement(e):o.current;if(!n)return;const s=R=>{r.current+=1,r.current===1&&(u.current=setTimeout(()=>{i.current?.onSingleClick&&i.current.onSingleClick(R),r.current=0},i.current?.threshold??d)),r.current===2&&(clearTimeout(u.current),a.current(R),r.current=0)};return n.addEventListener("mousedown",s),n.addEventListener("touchstart",s),()=>{n.removeEventListener("mousedown",s),n.removeEventListener("touchstart",s),u.current&&clearTimeout(u.current)}},[e,o.state]),!e)return o};exports.DEFAULT_THRESHOLD_TIME=d;exports.useDoubleClick=g;
 //# sourceMappingURL=useDoubleClick.cjs.map

package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDoubleClick.cjs","sources":["../../../../src/hooks/useDoubleClick/useDoubleClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DoubleClickEvents = MouseEvent \| TouchEvent;\n\n/** The use double click options type /\nexport interface UseDoubleClickOptions {\n /* The threshold time in milliseconds between clicks /\n threshold?: number;\n /* The callback function to be invoked on single click /\n onSingleClick?: (event: DoubleClickEvents) => void;\n}\n\nexport interface UseDoubleClick {\n (\n target: HookTarget,\n callback: (event: DoubleClickEvents) => void,\n options?: UseDoubleClickOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: DoubleClickEvents) => void,\n options?: UseDoubleClickOptions,\n target?: never\n ): StateRef<Target>;\n}\n\nexport const DEFAULT_THRESHOLD_TIME = 300;\n\n/\n @name useDoubleClick\n * @description - Hook that defines the logic when double clicking an element\n * @category Elements\n * @usage medium\n\n * @overload\n * @param {HookTarget} target The target element to be double clicked\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n \n @example\n * useDoubleClick(ref, () => console.log('double clicked'));\n \n @overload\n * @template Target The target element\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n \n @example\n * const ref = useDoubleClick(() => console.log('double clicked'));\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}\n */\nexport const useDoubleClick = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (target ? params[1] : params[0]) as (event: DoubleClickEvents) => void;\n const options = (target ? params[2] : params[1]) as UseDoubleClickOptions \| undefined;\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const clickCountRef = useRef(0);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? getElement(target) : internalRef.current;\n if (!element) return;\n\n const onClick = (event: DoubleClickEvents) => {\n clickCountRef.current += 1;\n\n if (clickCountRef.current === 1) {\n timeoutIdRef.current = setTimeout(() => {\n if (internalOptionsRef.current?.onSingleClick)\n internalOptionsRef.current.onSingleClick(event);\n clickCountRef.current = 0;\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n }\n\n if (clickCountRef.current === 2) {\n clearTimeout(timeoutIdRef.current);\n internalCallbackRef.current(event);\n clickCountRef.current = 0;\n }\n };\n\n element.addEventListener('mousedown', onClick as EventListener);\n element.addEventListener('touchstart', onClick as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onClick as EventListener);\n element.removeEventListener('touchstart', onClick as EventListener);\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseDoubleClick;\n"],"names":["DEFAULT_THRESHOLD_TIME","useDoubleClick","params","target","isTarget","callback","options","timeoutIdRef","useRef","clickCountRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","~~getElement","~~onClick","event"],"mappings":"~~mPAkCaA~~,EAAyB,IA4BzBC,EAAkB,IAAIC,IAAuB,CACxD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAeC,EAAAA,OAAsC,MAAS,EAC9DC,EAAgBD,EAAAA,OAAO,CAAC,EACxBE,EAAcC,EAAAA,YAAA,EAEdC,EAAsBJ,EAAAA,OAAOH,CAAQ,EAC3CO,EAAoB,QAAUP,EAC9B,MAAMQ,EAAqBL,EAAAA,OAAOF,CAAO,EAqCzC,GApCAO,EAAmB,QAAUP,EAE7BQ,EAAAA,UAAU,IAAM,CACd,GAAI,CAACX,GAAU,CAACO,EAAY,MAAO,OAEnC,MAAMK,EAAUZ,~~EAASa~~,EAAAA,~~WAAWb~~,CAAM,EAAIO,EAAY,~~QAC1D~~,GAAI,CAACK,EAAS,OAEd,~~MAAME~~,EAAWC,GAA6B,~~CAC5CT~~,EAAc,SAAW,EAErBA,EAAc,UAAY,IAC5BF,EAAa,QAAU,WAAW,IAAM,CAClCM,EAAmB,SAAS,eAC9BA,EAAmB,QAAQ,~~cAAcK~~,CAAK,~~EAChDT~~,EAAc,QAAU,CAAA,EACvBI,EAAmB,SAAS,WAAab,CAAsB,GAGhES,EAAc,UAAY,IAC5B,aAAaF,EAAa,OAAO,EACjCK,EAAoB,~~QAAQM~~,CAAK,~~EACjCT~~,EAAc,QAAU,EAC1B,EAGF,OAAAM,EAAQ,iBAAiB,~~YAAaE~~,CAAwB,~~EAC9DF~~,EAAQ,iBAAiB,~~aAAcE~~,CAAwB,EAExD,IAAM,~~CACXF~~,EAAQ,oBAAoB,~~YAAaE~~,CAAwB,~~EACjEF~~,EAAQ,oBAAoB,~~aAAcE~~,CAAwB,~~EAC9DV~~,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,CAC7D,EACC,CAACJ,EAAQO,EAAY,KAAK,CAAC,EAE1B,CAAAP,EACJ,OAAOO,CACT"}
1	+ {"version":3,"file":"useDoubleClick.cjs","sources":["../../../../src/hooks/useDoubleClick/useDoubleClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DoubleClickEvents = MouseEvent \| TouchEvent;\n\n/** The use double click options type /\nexport interface UseDoubleClickOptions {\n /* The threshold time in milliseconds between clicks /\n threshold?: number;\n /* The callback function to be invoked on single click /\n onSingleClick?: (event: DoubleClickEvents) => void;\n}\n\nexport interface UseDoubleClick {\n (\n target: HookTarget,\n callback: (event: DoubleClickEvents) => void,\n options?: UseDoubleClickOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: DoubleClickEvents) => void,\n options?: UseDoubleClickOptions,\n target?: never\n ): StateRef<Target>;\n}\n\nexport const DEFAULT_THRESHOLD_TIME = 300;\n\n/\n @name useDoubleClick\n * @description - Hook that defines the logic when double clicking an element\n * @category Elements\n * @usage medium\n\n * @overload\n * @param {HookTarget} target The target element to be double clicked\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n \n @example\n * useDoubleClick(ref, () => console.log('double clicked'));\n \n @overload\n * @template Target The target element\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n \n @example\n * const ref = useDoubleClick(() => console.log('double clicked'));\n \n @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}\n */\nexport const useDoubleClick = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (target ? params[1] : params[0]) as (event: DoubleClickEvents) => void;\n const options = (target ? params[2] : params[1]) as UseDoubleClickOptions \| undefined;\n\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const clickCountRef = useRef(0);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onClick = (event: DoubleClickEvents) => {\n clickCountRef.current += 1;\n\n if (clickCountRef.current === 1) {\n timeoutIdRef.current = setTimeout(() => {\n if (internalOptionsRef.current?.onSingleClick)\n internalOptionsRef.current.onSingleClick(event);\n clickCountRef.current = 0;\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n }\n\n if (clickCountRef.current === 2) {\n clearTimeout(timeoutIdRef.current);\n internalCallbackRef.current(event);\n clickCountRef.current = 0;\n }\n };\n\n element.addEventListener('mousedown', onClick as EventListener);\n element.addEventListener('touchstart', onClick as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onClick as EventListener);\n element.removeEventListener('touchstart', onClick as EventListener);\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseDoubleClick;\n"],"names":["DEFAULT_THRESHOLD_TIME","useDoubleClick","params","target","isTarget","callback","options","timeoutIdRef","useRef","clickCountRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onClick","event"],"mappings":"mMAkCaA,EAAyB,IA4BzBC,EAAkB,IAAIC,IAAuB,CACxD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAeC,EAAAA,OAAsC,MAAS,EAC9DC,EAAgBD,EAAAA,OAAO,CAAC,EACxBE,EAAcC,EAAAA,YAAA,EAEdC,EAAsBJ,EAAAA,OAAOH,CAAQ,EAC3CO,EAAoB,QAAUP,EAC9B,MAAMQ,EAAqBL,EAAAA,OAAOF,CAAO,EAqCzC,GApCAO,EAAmB,QAAUP,EAE7BQ,EAAAA,UAAU,IAAM,CACd,GAAI,CAACX,GAAU,CAACO,EAAY,MAAO,OAEnC,MAAMK,EAAUZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAWC,GAA6B,CAC5CR,EAAc,SAAW,EAErBA,EAAc,UAAY,IAC5BF,EAAa,QAAU,WAAW,IAAM,CAClCM,EAAmB,SAAS,eAC9BA,EAAmB,QAAQ,cAAcI,CAAK,EAChDR,EAAc,QAAU,CAAA,EACvBI,EAAmB,SAAS,WAAab,CAAsB,GAGhES,EAAc,UAAY,IAC5B,aAAaF,EAAa,OAAO,EACjCK,EAAoB,QAAQK,CAAK,EACjCR,EAAc,QAAU,EAC1B,EAGF,OAAAM,EAAQ,iBAAiB,YAAaC,CAAwB,EAC9DD,EAAQ,iBAAiB,aAAcC,CAAwB,EAExD,IAAM,CACXD,EAAQ,oBAAoB,YAAaC,CAAwB,EACjED,EAAQ,oBAAoB,aAAcC,CAAwB,EAC9DT,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,CAC7D,EACC,CAACJ,EAAQO,EAAY,KAAK,CAAC,EAE1B,CAAAP,EACJ,OAAOO,CACT"}

package/dist/cjs/hooks/useDropZone/useDropZone.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),S=require("../useRefState/useRefState.cjs"),R=require("../../utils/helpers/isTarget.cjs"),V=require("../../utils/helpers/getElement.cjs"),b=(...n)=>{const s=R.isTarget(n[0])?n[0]:void 0,o=s?typeof n[1]=="object"?n[1]:{onDrop:n[1]}:typeof n[0]=="object"?n[0]:{onDrop:n[0]},u=S.useRefState(),c=g.useRef(0),[p,D]=g.useState(null),[E,v]=g.useState(!1),a=o.dataTypes,L=e=>{if(!e.dataTransfer)return null;const t=Array.from(e.dataTransfer.files);return o.multiple?t:t.length?[t[0]]:null},m=e=>a?typeof a=="function"?a(e):a.length?e.length?e.every(t=>a.some(i=>t.includes(i))):!1:!0:!0,h=e=>{const t=Array.from(e).map(l=>l.type),i=m(t),f=o.multiple||e.length<=1;return i&&f};return g.useEffect(()=>{if(!s&&!u.state)return;const e=s?V.getElement(s):u.current;if(!e)return;const t=(r,d)=>{if(!r.dataTransfer)return;if(!h(r.dataTransfer.items)){r.dataTransfer.dropEffect="none";return}r.preventDefault(),r.dataTransfer.dropEffect="copy";const y=L(r);if(d==="drop"){c.current=0,v(!1),D(y),o.onDrop?.(y,r);return}if(d==="enter"){c.current+=1,v(!0),o.onEnter?.(r);return}if(d==="leave"){if(c.current-=1,c.current!==0)return;v(!1),o.onLeave?.(r);return}d==="over"&&o.onOver?.(r)},i=r=>t(r,"drop"),f=r=>t(r,"over"),l=r=>t(r,"enter"),T=r=>t(r,"leave");return e.addEventListener("dragenter",l),e.addEventListener("dragover",f),e.addEventListener("dragleave",T),e.addEventListener("drop",i),()=>{e.removeEventListener("dragenter",l),e.removeEventListener("dragover",f),e.removeEventListener("dragleave",T),e.removeEventListener("drop",i)}},[s,u.current]),s?{overed:E,files:p}:{ref:u,overed:E,files:p}};exports.useDropZone=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),R=require("../useRefState/useRefState.cjs"),D=require("../../utils/helpers/isTarget.cjs"),V=(...n)=>{const s=D.isTarget(n[0])?n[0]:void 0,o=s?typeof n[1]=="object"?n[1]:{onDrop:n[1]}:typeof n[0]=="object"?n[0]:{onDrop:n[0]},u=R.useRefState(),c=g.useRef(0),[p,L]=g.useState(null),[E,v]=g.useState(!1),i=o.dataTypes,m=e=>{if(!e.dataTransfer)return null;const t=Array.from(e.dataTransfer.files);return o.multiple?t:t.length?[t[0]]:null},h=e=>i?typeof i=="function"?i(e):i.length?e.length?e.every(t=>i.some(a=>t.includes(a))):!1:!0:!0,S=e=>{const t=Array.from(e).map(l=>l.type),a=h(t),f=o.multiple||e.length<=1;return a&&f};return g.useEffect(()=>{if(!s&&!u.state)return;const e=s?D.isTarget.getElement(s):u.current;if(!e)return;const t=(r,d)=>{if(!r.dataTransfer)return;if(!S(r.dataTransfer.items)){r.dataTransfer.dropEffect="none";return}r.preventDefault(),r.dataTransfer.dropEffect="copy";const y=m(r);if(d==="drop"){c.current=0,v(!1),L(y),o.onDrop?.(y,r);return}if(d==="enter"){c.current+=1,v(!0),o.onEnter?.(r);return}if(d==="leave"){if(c.current-=1,c.current!==0)return;v(!1),o.onLeave?.(r);return}d==="over"&&o.onOver?.(r)},a=r=>t(r,"drop"),f=r=>t(r,"over"),l=r=>t(r,"enter"),T=r=>t(r,"leave");return e.addEventListener("dragenter",l),e.addEventListener("dragover",f),e.addEventListener("dragleave",T),e.addEventListener("drop",a),()=>{e.removeEventListener("dragenter",l),e.removeEventListener("dragover",f),e.removeEventListener("dragleave",T),e.removeEventListener("drop",a)}},[s,u.current]),s?{overed:E,files:p}:{ref:u,overed:E,files:p}};exports.useDropZone=V;
 //# sourceMappingURL=useDropZone.cjs.map

package/dist/cjs/hooks/useDropZone/useDropZone.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDropZone.cjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) \| string[];\n\nexport interface UseDropZoneOptions {\n /** The data types for drop zone /\n dataTypes?: DropZoneDataTypes;\n /* The multiple mode for drop zone /\n multiple?: boolean;\n /* The on drop callback /\n onDrop?: (files: File[] \| null, event: DragEvent) => void;\n /* The on enter callback /\n onEnter?: (event: DragEvent) => void;\n /* The on leave callback /\n onLeave?: (event: DragEvent) => void;\n /* The on over callback /\n onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n /* The files that was dropped in drop zone /\n files: File[] \| null;\n /* The over drop zone status /\n overed: boolean;\n}\n\nexport interface UseDropZone {\n (\n target: HookTarget,\n callback?: (files: File[] \| null, event: DragEvent) => void\n ): UseDropZoneReturn;\n\n <Target extends Element>(\n callback?: (files: File[] \| null, event: DragEvent) => void,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n <Target extends Element>(\n options?: UseDropZoneOptions,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] \| null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n \n @example\n * const { overed, files } = useDropZone(ref, options);\n \n @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] \| null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n \n @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n \n @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] \| null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n \n @example\n * const { ref, overed, files } = useDropZone(options);\n \n @overload\n * @param {(files: File[] \| null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n \n @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\n\nexport const useDropZone = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onDrop: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onDrop: params[0] }\n ) as UseDropZoneOptions;\n\n const internalRef = useRefState<Element>();\n\n const counterRef = useRef(0);\n const [files, setFiles] = useState<File[] \| null>(null);\n const [overed, setOvered] = useState(false);\n\n const dataTypes = options.dataTypes;\n\n const getFiles = (event: DragEvent) => {\n if (!event.dataTransfer) return null;\n const list = Array.from(event.dataTransfer.files);\n if (options.multiple) return list;\n if (!list.length) return null;\n return [list[0]];\n };\n\n const checkDataTypes = (types: string[]) => {\n if (!dataTypes) return true;\n if (typeof dataTypes === 'function') return dataTypes(types);\n if (!dataTypes.length) return true;\n if (!types.length) return false;\n\n return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n };\n\n const checkValidity = (items: DataTransferItemList) => {\n const types = Array.from(items).map((item) => item.type);\n const dataTypesValid = checkDataTypes(types);\n const multipleFilesValid = options.multiple \|\| items.length <= 1;\n\n return dataTypesValid && multipleFilesValid;\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? getElement(target) : internalRef.current;\n\n if (!element) return;\n\n const onEvent = (event: DragEvent, type: 'drop' \| 'enter' \| 'leave' \| 'over') => {\n if (!event.dataTransfer) return;\n\n const isValid = checkValidity(event.dataTransfer.items);\n if (!isValid) {\n event.dataTransfer.dropEffect = 'none';\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = 'copy';\n\n const currentFiles = getFiles(event);\n\n if (type === 'drop') {\n counterRef.current = 0;\n setOvered(false);\n setFiles(currentFiles);\n options.onDrop?.(currentFiles, event);\n return;\n }\n\n if (type === 'enter') {\n counterRef.current += 1;\n setOvered(true);\n options.onEnter?.(event);\n return;\n }\n\n if (type === 'leave') {\n counterRef.current -= 1;\n if (counterRef.current !== 0) return;\n setOvered(false);\n options.onLeave?.(event);\n return;\n }\n\n if (type === 'over') options.onOver?.(event);\n };\n\n const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n element.addEventListener('dragenter', onDragEnter);\n element.addEventListener('dragover', onDragOver);\n element.addEventListener('dragleave', onDragLeave);\n element.addEventListener('drop', onDrop);\n\n return () => {\n element.removeEventListener('dragenter', onDragEnter);\n element.removeEventListener('dragover', onDragOver);\n element.removeEventListener('dragleave', onDragLeave);\n element.removeEventListener('drop', onDrop);\n };\n }, [target, internalRef.current]);\n\n if (target) return { overed, files };\n return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","getElement","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":"mPAyGaA,EAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EAGpBI,EAAcC,EAAAA,YAAA,EAEdC,EAAaC,EAAAA,OAAO,CAAC,EACrB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAEpCG,EAAYV,EAAQ,UAEpBW,EAAYC,GAAqB,CACrC,GAAI,CAACA,EAAM,aAAc,OAAO,KAChC,MAAMC,EAAO,MAAM,KAAKD,EAAM,aAAa,KAAK,EAChD,OAAIZ,EAAQ,SAAiBa,EACxBA,EAAK,OACH,CAACA,EAAK,CAAC,CAAC,EADU,IACV,EAGXC,EAAkBC,GACjBL,EACD,OAAOA,GAAc,WAAmBA,EAAUK,CAAK,EACtDL,EAAU,OACVK,EAAM,OAEJA,EAAM,MAAOC,GAASN,EAAU,KAAMO,GAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,EAFxD,GADI,GAFP,GAQnBC,EAAiBC,GAAgC,CACrD,MAAMJ,EAAQ,MAAM,KAAKI,CAAK,EAAE,IAAKC,GAASA,EAAK,IAAI,EACjDC,EAAiBP,EAAeC,CAAK,EACrCO,EAAqBtB,EAAQ,UAAYmB,EAAM,QAAU,EAE/D,OAAOE,GAAkBC,CAAA,EAoE3B,OAjEAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMuB,EAAU1B,EAAS2B,EAAAA,WAAW3B,CAAM,EAAIG,EAAY,QAE1D,GAAI,CAACuB,EAAS,OAEd,MAAME,EAAU,CAACd,EAAkBI,IAA8C,CAC/E,GAAI,CAACJ,EAAM,aAAc,OAGzB,GAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,EACxC,CACZA,EAAM,aAAa,WAAa,OAChC,MAAA,CAGFA,EAAM,eAAA,EACNA,EAAM,aAAa,WAAa,OAEhC,MAAMe,EAAehB,EAASC,CAAK,EAEnC,GAAII,IAAS,OAAQ,CACnBb,EAAW,QAAU,EACrBM,EAAU,EAAK,EACfH,EAASqB,CAAY,EACrB3B,EAAQ,SAAS2B,EAAcf,CAAK,EACpC,MAAA,CAGF,GAAII,IAAS,QAAS,CACpBb,EAAW,SAAW,EACtBM,EAAU,EAAI,EACdT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGF,GAAII,IAAS,QAAS,CAEpB,GADAb,EAAW,SAAW,EAClBA,EAAW,UAAY,EAAG,OAC9BM,EAAU,EAAK,EACfT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGEI,IAAS,QAAQhB,EAAQ,SAASY,CAAK,CAAA,EAGvCgB,EAAWhB,GAAqBc,EAAQd,EAAO,MAAM,EACrDiB,EAAejB,GAAqBc,EAAQd,EAAO,MAAM,EACzDkB,EAAgBlB,GAAqBc,EAAQd,EAAO,OAAO,EAC3DmB,EAAgBnB,GAAqBc,EAAQd,EAAO,OAAO,EAEjE,OAAAY,EAAQ,iBAAiB,YAAaM,CAAW,EACjDN,EAAQ,iBAAiB,WAAYK,CAAU,EAC/CL,EAAQ,iBAAiB,YAAaO,CAAW,EACjDP,EAAQ,iBAAiB,OAAQI,CAAM,EAEhC,IAAM,CACXJ,EAAQ,oBAAoB,YAAaM,CAAW,EACpDN,EAAQ,oBAAoB,WAAYK,CAAU,EAClDL,EAAQ,oBAAoB,YAAaO,CAAW,EACpDP,EAAQ,oBAAoB,OAAQI,CAAM,CAAA,CAC5C,EACC,CAAC9B,EAAQG,EAAY,OAAO,CAAC,EAE5BH,EAAe,CAAE,OAAAU,EAAQ,MAAAH,CAAA,EACtB,CAAE,IAAKJ,EAAa,OAAAO,EAAQ,MAAAH,CAAA,CACrC"}
1	+ {"version":3,"file":"useDropZone.cjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) \| string[];\n\nexport interface UseDropZoneOptions {\n /** The data types for drop zone /\n dataTypes?: DropZoneDataTypes;\n /* The multiple mode for drop zone /\n multiple?: boolean;\n /* The on drop callback /\n onDrop?: (files: File[] \| null, event: DragEvent) => void;\n /* The on enter callback /\n onEnter?: (event: DragEvent) => void;\n /* The on leave callback /\n onLeave?: (event: DragEvent) => void;\n /* The on over callback /\n onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n /* The files that was dropped in drop zone /\n files: File[] \| null;\n /* The over drop zone status /\n overed: boolean;\n}\n\nexport interface UseDropZone {\n (\n target: HookTarget,\n callback?: (files: File[] \| null, event: DragEvent) => void\n ): UseDropZoneReturn;\n\n <Target extends Element>(\n callback?: (files: File[] \| null, event: DragEvent) => void,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n <Target extends Element>(\n options?: UseDropZoneOptions,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] \| null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n \n @example\n * const { overed, files } = useDropZone(ref, options);\n \n @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] \| null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n \n @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n \n @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] \| null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n \n @example\n * const { ref, overed, files } = useDropZone(options);\n \n @overload\n * @param {(files: File[] \| null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n \n @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\n\nexport const useDropZone = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onDrop: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onDrop: params[0] }\n ) as UseDropZoneOptions;\n\n const internalRef = useRefState<Element>();\n\n const counterRef = useRef(0);\n const [files, setFiles] = useState<File[] \| null>(null);\n const [overed, setOvered] = useState(false);\n\n const dataTypes = options.dataTypes;\n\n const getFiles = (event: DragEvent) => {\n if (!event.dataTransfer) return null;\n const list = Array.from(event.dataTransfer.files);\n if (options.multiple) return list;\n if (!list.length) return null;\n return [list[0]];\n };\n\n const checkDataTypes = (types: string[]) => {\n if (!dataTypes) return true;\n if (typeof dataTypes === 'function') return dataTypes(types);\n if (!dataTypes.length) return true;\n if (!types.length) return false;\n\n return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n };\n\n const checkValidity = (items: DataTransferItemList) => {\n const types = Array.from(items).map((item) => item.type);\n const dataTypesValid = checkDataTypes(types);\n const multipleFilesValid = options.multiple \|\| items.length <= 1;\n\n return dataTypesValid && multipleFilesValid;\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n\n if (!element) return;\n\n const onEvent = (event: DragEvent, type: 'drop' \| 'enter' \| 'leave' \| 'over') => {\n if (!event.dataTransfer) return;\n\n const isValid = checkValidity(event.dataTransfer.items);\n if (!isValid) {\n event.dataTransfer.dropEffect = 'none';\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = 'copy';\n\n const currentFiles = getFiles(event);\n\n if (type === 'drop') {\n counterRef.current = 0;\n setOvered(false);\n setFiles(currentFiles);\n options.onDrop?.(currentFiles, event);\n return;\n }\n\n if (type === 'enter') {\n counterRef.current += 1;\n setOvered(true);\n options.onEnter?.(event);\n return;\n }\n\n if (type === 'leave') {\n counterRef.current -= 1;\n if (counterRef.current !== 0) return;\n setOvered(false);\n options.onLeave?.(event);\n return;\n }\n\n if (type === 'over') options.onOver?.(event);\n };\n\n const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n element.addEventListener('dragenter', onDragEnter);\n element.addEventListener('dragover', onDragOver);\n element.addEventListener('dragleave', onDragLeave);\n element.addEventListener('drop', onDrop);\n\n return () => {\n element.removeEventListener('dragenter', onDragEnter);\n element.removeEventListener('dragover', onDragOver);\n element.removeEventListener('dragleave', onDragLeave);\n element.removeEventListener('drop', onDrop);\n };\n }, [target, internalRef.current]);\n\n if (target) return { overed, files };\n return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":"mMAyGaA,EAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EAGpBI,EAAcC,EAAAA,YAAA,EAEdC,EAAaC,EAAAA,OAAO,CAAC,EACrB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAEpCG,EAAYV,EAAQ,UAEpBW,EAAYC,GAAqB,CACrC,GAAI,CAACA,EAAM,aAAc,OAAO,KAChC,MAAMC,EAAO,MAAM,KAAKD,EAAM,aAAa,KAAK,EAChD,OAAIZ,EAAQ,SAAiBa,EACxBA,EAAK,OACH,CAACA,EAAK,CAAC,CAAC,EADU,IACV,EAGXC,EAAkBC,GACjBL,EACD,OAAOA,GAAc,WAAmBA,EAAUK,CAAK,EACtDL,EAAU,OACVK,EAAM,OAEJA,EAAM,MAAOC,GAASN,EAAU,KAAMO,GAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,EAFxD,GADI,GAFP,GAQnBC,EAAiBC,GAAgC,CACrD,MAAMJ,EAAQ,MAAM,KAAKI,CAAK,EAAE,IAAKC,GAASA,EAAK,IAAI,EACjDC,EAAiBP,EAAeC,CAAK,EACrCO,EAAqBtB,EAAQ,UAAYmB,EAAM,QAAU,EAE/D,OAAOE,GAAkBC,CAAA,EAoE3B,OAjEAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMuB,EAAU1B,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QAEnE,GAAI,CAACuB,EAAS,OAEd,MAAMC,EAAU,CAACb,EAAkBI,IAA8C,CAC/E,GAAI,CAACJ,EAAM,aAAc,OAGzB,GAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,EACxC,CACZA,EAAM,aAAa,WAAa,OAChC,MAAA,CAGFA,EAAM,eAAA,EACNA,EAAM,aAAa,WAAa,OAEhC,MAAMc,EAAef,EAASC,CAAK,EAEnC,GAAII,IAAS,OAAQ,CACnBb,EAAW,QAAU,EACrBM,EAAU,EAAK,EACfH,EAASoB,CAAY,EACrB1B,EAAQ,SAAS0B,EAAcd,CAAK,EACpC,MAAA,CAGF,GAAII,IAAS,QAAS,CACpBb,EAAW,SAAW,EACtBM,EAAU,EAAI,EACdT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGF,GAAII,IAAS,QAAS,CAEpB,GADAb,EAAW,SAAW,EAClBA,EAAW,UAAY,EAAG,OAC9BM,EAAU,EAAK,EACfT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGEI,IAAS,QAAQhB,EAAQ,SAASY,CAAK,CAAA,EAGvCe,EAAWf,GAAqBa,EAAQb,EAAO,MAAM,EACrDgB,EAAehB,GAAqBa,EAAQb,EAAO,MAAM,EACzDiB,EAAgBjB,GAAqBa,EAAQb,EAAO,OAAO,EAC3DkB,EAAgBlB,GAAqBa,EAAQb,EAAO,OAAO,EAEjE,OAAAY,EAAQ,iBAAiB,YAAaK,CAAW,EACjDL,EAAQ,iBAAiB,WAAYI,CAAU,EAC/CJ,EAAQ,iBAAiB,YAAaM,CAAW,EACjDN,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,YAAaK,CAAW,EACpDL,EAAQ,oBAAoB,WAAYI,CAAU,EAClDJ,EAAQ,oBAAoB,YAAaM,CAAW,EACpDN,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAAC7B,EAAQG,EAAY,OAAO,CAAC,EAE5BH,EAAe,CAAE,OAAAU,EAAQ,MAAAH,CAAA,EACtB,CAAE,IAAKJ,EAAa,OAAAO,EAAQ,MAAAH,CAAA,CACrC"}

package/dist/cjs/hooks/useElementSize/useElementSize.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),a=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),f=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/getElement.cjs"),m=(...o)=>{const e=o[0],[r,i]=l.useState({width:0,height:0}),n=f.useRefState();return a.useIsomorphicLayoutEffect(()=>{const t=e?d.getElement(e):n.current;if(!t)return;const{width:u,height:c}=t.getBoundingClientRect();i({width:u,height:c});const s=new ResizeObserver(()=>{const{width:h,height:g}=t.getBoundingClientRect();i({width:h,height:g})});return s.observe(t),()=>{s.disconnect()}},[n.current,e]),e?{value:r}:{ref:n,value:r}};exports.useElementSize=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),f=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/isTarget.cjs"),S=(...o)=>{const e=o[0],[n,i]=a.useState({width:0,height:0}),r=f.useRefState();return l.useIsomorphicLayoutEffect(()=>{const t=e?d.isTarget.getElement(e):r.current;if(!t)return;const{width:u,height:c}=t.getBoundingClientRect();i({width:u,height:c});const s=new ResizeObserver(()=>{const{width:h,height:g}=t.getBoundingClientRect();i({width:h,height:g})});return s.observe(t),()=>{s.disconnect()}},[r.current,e]),e?{value:n}:{ref:r,value:n}};exports.useElementSize=S;
 //# sourceMappingURL=useElementSize.cjs.map

package/dist/cjs/hooks/useElementSize/useElementSize.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useElementSize.cjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement~~ } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type /\nexport interface UseElementSizeValue {\n /* The element's height /\n height: number;\n /* The element's width /\n width: number;\n}\n\n/* The use element size return type /\nexport interface UseElementSizeReturn {\n value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n (target: HookTarget): UseElementSizeReturn;\n\n <Target extends Element>(\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseElementSizeReturn;\n}\n\n/\n @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n \n @example\n * const { value } = useElementSize(ref);\n \n @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n \n @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n const target = params[0] as HookTarget \| undefined;\n const [size, setSize] = useState({ width: 0, height: 0 });\n const internalRef = useRefState<Element>();\n\n useIsomorphicLayoutEffect(() => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const { width, height } = element.getBoundingClientRect();\n setSize({\n width,\n height\n });\n\n const observer = new ResizeObserver(() => {\n const { width, height } = element.getBoundingClientRect();\n setSize({ width, height });\n });\n\n observer.observe(element);\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.current, target]);\n\n if (target) return { value: size };\n return {\n ref: internalRef,\n value: size\n };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","~~getElement~~","width","height","observer"],"mappings":"~~6QAqDaA~~,EAAkB,IAAIC,IAAkB,CACnD,MAAMC,EAASD,EAAO,CAAC,EACjB,CAACE,EAAMC,CAAO,EAAIC,EAAAA,SAAS,CAAE,MAAO,EAAG,OAAQ,EAAG,EAClDC,EAAcC,EAAAA,YAAA,EAyBpB,OAvBAC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,EAAWP,EAASQ,EAAAA,WAAWR,CAAM,EAAII,EAAY,~~QAE3D~~,GAAI,CAACG,EAAS,OAEd,KAAM,CAAE,MAAAE,EAAO,OAAAC,GAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CACN,MAAAO,EACA,OAAAC,CAAA,CACD,EAED,MAAMC,EAAW,IAAI,eAAe,IAAM,CACxC,KAAM,CAAE,MAAAF,EAAO,OAAAC,CAAAA,EAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CAAE,MAAAO,EAAO,OAAAC,EAAQ,CAAA,CAC1B,EAED,OAAAC,EAAS,QAAQJ,CAAO,EAEjB,IAAM,CACXI,EAAS,WAAA,CAAW,CACtB,EACC,CAACP,EAAY,QAASJ,CAAM,CAAC,EAE5BA,EAAe,CAAE,MAAOC,CAAA,EACrB,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}
1	+ {"version":3,"file":"useElementSize.cjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type /\nexport interface UseElementSizeValue {\n /* The element's height /\n height: number;\n /* The element's width /\n width: number;\n}\n\n/* The use element size return type /\nexport interface UseElementSizeReturn {\n value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n (target: HookTarget): UseElementSizeReturn;\n\n <Target extends Element>(\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseElementSizeReturn;\n}\n\n/\n @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n \n @example\n * const { value } = useElementSize(ref);\n \n @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n \n @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n const target = params[0] as HookTarget \| undefined;\n const [size, setSize] = useState({ width: 0, height: 0 });\n const internalRef = useRefState<Element>();\n\n useIsomorphicLayoutEffect(() => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const { width, height } = element.getBoundingClientRect();\n setSize({\n width,\n height\n });\n\n const observer = new ResizeObserver(() => {\n const { width, height } = element.getBoundingClientRect();\n setSize({ width, height });\n });\n\n observer.observe(element);\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.current, target]);\n\n if (target) return { value: size };\n return {\n ref: internalRef,\n value: size\n };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height","observer"],"mappings":"2QAqDaA,EAAkB,IAAIC,IAAkB,CACnD,MAAMC,EAASD,EAAO,CAAC,EACjB,CAACE,EAAMC,CAAO,EAAIC,EAAAA,SAAS,CAAE,MAAO,EAAG,OAAQ,EAAG,EAClDC,EAAcC,EAAAA,YAAA,EAyBpB,OAvBAC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,EAAWP,EAASQ,EAAAA,SAAS,WAAWR,CAAM,EAAII,EAAY,QAEpE,GAAI,CAACG,EAAS,OAEd,KAAM,CAAE,MAAAE,EAAO,OAAAC,GAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CACN,MAAAO,EACA,OAAAC,CAAA,CACD,EAED,MAAMC,EAAW,IAAI,eAAe,IAAM,CACxC,KAAM,CAAE,MAAAF,EAAO,OAAAC,CAAAA,EAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CAAE,MAAAO,EAAO,OAAAC,EAAQ,CAAA,CAC1B,EAED,OAAAC,EAAS,QAAQJ,CAAO,EAEjB,IAAM,CACXI,EAAS,WAAA,CAAW,CACtB,EACC,CAACP,EAAY,QAASJ,CAAM,CAAC,EAE5BA,EAAe,CAAE,MAAOC,CAAA,EACrB,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}

package/dist/cjs/hooks/useEventListener/useEventListener.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),g=require("../useRefState/useRefState.cjs"),E=require("../../utils/helpers/isTarget.cjs"),R=require("../../utils/helpers/getElement.cjs"),L=(...e)=>{const t=E.isTarget(e[0])?e[0]:void 0,s=t?e[1]:e[0],o=t?e[2]:e[1],n=t?e[3]:e[2],c=n?.enabled??!0,r=g.useRefState(),u=i.useRef(o);u.current=o;const d=i.useRef(n);if(d.current=n,i.useEffect(()=>{if(!c||!t&&!r.state)return;const l=(t?R.getElement(t):r.current)??window,f=v=>u.current(v);return l.addEventListener(s,f,n),()=>{l.removeEventListener(s,f,n)}},[t,r.state,s,c]),!t)return r};exports.useEventListener=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),R=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/isTarget.cjs"),E=(...e)=>{const t=d.isTarget(e[0])?e[0]:void 0,s=t?e[1]:e[0],o=t?e[2]:e[1],n=t?e[3]:e[2],c=n?.enabled??!0,r=R.useRefState(),u=i.useRef(o);u.current=o;const v=i.useRef(n);if(v.current=n,i.useEffect(()=>{if(!c||!t&&!r.state)return;const f=(t?d.isTarget.getElement(t):r.current)??window,l=g=>u.current(g);return f.addEventListener(s,l,n),()=>{f.removeEventListener(s,l,n)}},[t,r.state,s,c]),!t)return r};exports.useEventListener=E;
 //# sourceMappingURL=useEventListener.cjs.map

package/dist/cjs/hooks/useEventListener/useEventListener.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useEventListener.cjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options /\nexport type UseEventListenerOptions = {\n enabled?: boolean;\n} & AddEventListenerOptions;\n\n/* The use event listener return type /\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n event: Event,\n listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n\n <\n Target extends Element,\n Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n >(\n event: Event,\n listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n}\n\n/\n @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(window, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(document, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(ref, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] \| MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n \n @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const event = (target ? params[1] : params[0]) as string;\n const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined \| void;\n const options = (target ? params[3] : params[2]) as UseEventListenerOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n\n const internalRef = useRefState();\n const internalListenerRef = useRef(listener);\n internalListenerRef.current = listener;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n\n const element = ((target ? getElement(target) : internalRef.current) as Element) ?? window;\n\n const listener = (event: Event) => internalListenerRef.current(event);\n\n element.addEventListener(event, listener, options);\n return () => {\n element.removeEventListener(event, listener, options);\n };\n }, [target, internalRef.state, event, enabled]);\n\n if (target) return;\n return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"~~,"getElement"~~],"mappings":"~~mPA6GaA~~,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAASF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACtCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAUD,GAAS,SAAW,GAE9BE,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAON,CAAQ,EAC3CK,EAAoB,QAAUL,EAC9B,MAAMO,EAAqBD,EAAAA,OAAOL,CAAO,~~EAgBzC~~,~~GAfAM~~,EAAmB,QAAUN,EAE7BO,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,GAAY,CAACL,GAAU,CAACM,EAAY,MAAQ,OAEjD,MAAMM,~~GAAYZ~~,~~EAASa~~,EAAAA,~~WAAWb~~,CAAM,EAAIM,EAAY,UAAwB,~~OAE9EH~~,EAAYD,GAAiBM,EAAoB,QAAQN,CAAK,EAEpE,OAAAU,EAAQ,iBAAiBV,EAAOC,EAAUC,CAAO,EAC1C,IAAM,CACXQ,EAAQ,oBAAoBV,EAAOC,EAAUC,CAAO,CAAA,CACtD,EACC,CAACJ,EAAQM,EAAY,MAAOJ,EAAOG,CAAO,CAAC,EAE1C,CAAAL,EACJ,OAAOM,CACT"}
1	+ {"version":3,"file":"useEventListener.cjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options /\nexport type UseEventListenerOptions = {\n enabled?: boolean;\n} & AddEventListenerOptions;\n\n/* The use event listener return type /\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n event: Event,\n listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n\n <\n Target extends Element,\n Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n >(\n event: Event,\n listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n}\n\n/\n @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(window, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(document, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n \n @example\n * useEventListener(ref, 'click', () => console.log('click'));\n \n @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event \| Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] \| MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n \n @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const event = (target ? params[1] : params[0]) as string;\n const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined \| void;\n const options = (target ? params[3] : params[2]) as UseEventListenerOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n\n const internalRef = useRefState();\n const internalListenerRef = useRef(listener);\n internalListenerRef.current = listener;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n const listener = (event: Event) => internalListenerRef.current(event);\n\n element.addEventListener(event, listener, options);\n return () => {\n element.removeEventListener(event, listener, options);\n };\n }, [target, internalRef.state, event, enabled]);\n\n if (target) return;\n return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":"mMA6GaA,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAASF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACtCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAUD,GAAS,SAAW,GAE9BE,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAON,CAAQ,EAC3CK,EAAoB,QAAUL,EAC9B,MAAMO,EAAqBD,EAAAA,OAAOL,CAAO,EAiBzC,GAhBAM,EAAmB,QAAUN,EAE7BO,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,GAAY,CAACL,GAAU,CAACM,EAAY,MAAQ,OAEjD,MAAMM,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,UAAwB,OAEzEH,EAAYD,GAAiBM,EAAoB,QAAQN,CAAK,EAEpE,OAAAU,EAAQ,iBAAiBV,EAAOC,EAAUC,CAAO,EAC1C,IAAM,CACXQ,EAAQ,oBAAoBV,EAAOC,EAAUC,CAAO,CAAA,CACtD,EACC,CAACJ,EAAQM,EAAY,MAAOJ,EAAOG,CAAO,CAAC,EAE1C,CAAAL,EACJ,OAAOM,CACT"}

package/dist/cjs/hooks/useFocus/useFocus.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),F=require("../useRefState/useRefState.cjs"),R=require("../../utils/helpers/isTarget.cjs"),S=require("../../utils/helpers/getElement.cjs"),q=(...e)=>{const n=R.isTarget(e[0])?e[0]:void 0,u=n?typeof e[1]=="object"?e[1]:{onFocus:e[1]}:typeof e[0]=="object"?e[0]:{onFocus:e[0]},a=u?.enabled??!0,b=u?.initialValue??!1,[d,o]=i.useState(b),s=F.useRefState(),f=i.useRef(u);f.current=u;const r=i.useRef(null),l=()=>{r.current&&(r.current.focus(),o(!0))},g=()=>{r.current&&(r.current.blur(),o(!1))};return i.useEffect(()=>{if(!a||!n&&!s.state)return;const t=n?S.getElement(n):s.current;if(!t)return;r.current=t;const v=c=>{f.current?.onFocus?.(c),(!l||c.target.matches?.(":focus-visible"))&&o(!0)},E=c=>{f.current?.onBlur?.(c),o(!1)};return b&&t.focus(),t.addEventListener("focus",v),t.addEventListener("blur",E),()=>{t.removeEventListener("focus",v),t.removeEventListener("blur",E)}},[n,s.state,a]),n?{focus:l,blur:g,focused:d}:{ref:s,focus:l,blur:g,focused:d}};exports.useFocus=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),E=require("../useRefState/useRefState.cjs"),R=require("../../utils/helpers/isTarget.cjs"),S=(...e)=>{const n=R.isTarget(e[0])?e[0]:void 0,u=n?typeof e[1]=="object"?e[1]:{onFocus:e[1]}:typeof e[0]=="object"?e[0]:{onFocus:e[0]},a=u?.enabled??!0,b=u?.initialValue??!1,[d,o]=i.useState(b),s=E.useRefState(),f=i.useRef(u);f.current=u;const r=i.useRef(null),l=()=>{r.current&&(r.current.focus(),o(!0))},g=()=>{r.current&&(r.current.blur(),o(!1))};return i.useEffect(()=>{if(!a||!n&&!s.state)return;const t=n?R.isTarget.getElement(n):s.current;if(!t)return;r.current=t;const v=c=>{f.current?.onFocus?.(c),(!l||c.target.matches?.(":focus-visible"))&&o(!0)},F=c=>{f.current?.onBlur?.(c),o(!1)};return b&&t.focus(),t.addEventListener("focus",v),t.addEventListener("blur",F),()=>{t.removeEventListener("focus",v),t.removeEventListener("blur",F)}},[n,s.state,a]),n?{focus:l,blur:g,focused:d}:{ref:s,focus:l,blur:g,focused:d}};exports.useFocus=S;
 //# sourceMappingURL=useFocus.cjs.map

package/dist/cjs/hooks/useFocus/useFocus.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFocus.cjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type /\nexport interface UseFocusOptions {\n /* The enabled state of the focus hook /\n enabled?: boolean;\n /* The initial focus state of the target /\n initialValue?: boolean;\n /* The on blur callback /\n onBlur?: (event: FocusEvent) => void;\n /* The on focus callback /\n onFocus?: (event: FocusEvent) => void;\n}\n\n/* The use focus return type /\nexport interface UseFocusReturn {\n /* The boolean state value of the target /\n focused: boolean;\n /* Blur the target /\n blur: () => void;\n /* Focus the target /\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n \n @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n \n @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n \n @example\n * const { focus, blur, focused } = useFocus(ref);\n \n @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n \n @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n \n @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n \n @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions \| undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement \| null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n const element = (target ? getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus \|\| (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","~~getElement","~~onFocus","event","onBlur"],"mappings":"~~mPA4FaA~~,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAErBI,EAAUD,GAAS,SAAW,GAC9BE,EAAeF,GAAS,cAAgB,GAExC,CAACG,EAASC,CAAU,EAAIC,EAAAA,SAASH,CAAY,EAC7CI,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOT,CAAO,EACzCQ,EAAmB,QAAUR,EAE7B,MAAMU,EAAaD,EAAAA,OAA2B,IAAI,EAE5CE,EAAQ,IAAM,CACbD,EAAW,UAChBA,EAAW,QAAQ,MAAA,EACnBN,EAAW,EAAI,EAAA,EAGXQ,EAAO,IAAM,CACZF,EAAW,UAChBA,EAAW,QAAQ,KAAA,EACnBN,EAAW,EAAK,EAAA,EA+BlB,OA5BAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACZ,GAAY,CAACH,GAAU,CAACQ,EAAY,MAAQ,OACjD,MAAMQ,EAAWhB,~~EAASiB~~,EAAAA,~~WAAWjB~~,CAAM,EAAIQ,EAAY,~~QAC3D~~,GAAI,CAACQ,EAAS,OAEdJ,EAAW,QAAUI,EAErB,~~MAAME~~,EAAWC,GAAsB,~~CACrCT~~,EAAmB,SAAS,~~UAAUS~~,CAAK,GACvC,~~CAACN~~,~~GAAUM~~,EAAM,OAAuB,UAAU,gBAAgB,MAAc,EAAI,CAAA,EAGpFC,EAAUD,GAAsB,~~CACpCT~~,EAAmB,SAAS,~~SAASS~~,CAAK,~~EAC1Cb~~,EAAW,EAAK,CAAA,EAGlB,OAAIF,KAAsB,MAAA,EAE1BY,EAAQ,iBAAiB,~~QAASE~~,CAAO,~~EACzCF~~,EAAQ,iBAAiB,~~OAAQI~~,CAAM,EAEhC,IAAM,~~CACXJ~~,EAAQ,oBAAoB,~~QAASE~~,CAAO,~~EAC5CF~~,EAAQ,oBAAoB,~~OAAQI~~,CAAM,CAAA,CAC5C,EACC,~~CAACpB~~,EAAQQ,EAAY,MAAOL,CAAO,CAAC,EAEnCH,EAAe,CAAE,MAAAa,EAAO,KAAAC,EAAM,QAAAT,CAAA,EAC3B,CACL,IAAKG,EACL,MAAAK,EACA,KAAAC,EACA,QAAAT,CAAA,CAEJ"}
1	+ {"version":3,"file":"useFocus.cjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type /\nexport interface UseFocusOptions {\n /* The enabled state of the focus hook /\n enabled?: boolean;\n /* The initial focus state of the target /\n initialValue?: boolean;\n /* The on blur callback /\n onBlur?: (event: FocusEvent) => void;\n /* The on focus callback /\n onFocus?: (event: FocusEvent) => void;\n}\n\n/* The use focus return type /\nexport interface UseFocusReturn {\n /* The boolean state value of the target /\n focused: boolean;\n /* Blur the target /\n blur: () => void;\n /* Focus the target /\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n \n @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n \n @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n \n @example\n * const { focus, blur, focused } = useFocus(ref);\n \n @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n \n @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n \n @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n \n @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions \| undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement \| null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus \|\| (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":"mMA4FaA,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAErBI,EAAUD,GAAS,SAAW,GAC9BE,EAAeF,GAAS,cAAgB,GAExC,CAACG,EAASC,CAAU,EAAIC,EAAAA,SAASH,CAAY,EAC7CI,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOT,CAAO,EACzCQ,EAAmB,QAAUR,EAE7B,MAAMU,EAAaD,EAAAA,OAA2B,IAAI,EAE5CE,EAAQ,IAAM,CACbD,EAAW,UAChBA,EAAW,QAAQ,MAAA,EACnBN,EAAW,EAAI,EAAA,EAGXQ,EAAO,IAAM,CACZF,EAAW,UAChBA,EAAW,QAAQ,KAAA,EACnBN,EAAW,EAAK,EAAA,EA+BlB,OA5BAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACZ,GAAY,CAACH,GAAU,CAACQ,EAAY,MAAQ,OACjD,MAAMQ,EAAWhB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIQ,EAAY,QACpE,GAAI,CAACQ,EAAS,OAEdJ,EAAW,QAAUI,EAErB,MAAMC,EAAWC,GAAsB,CACrCR,EAAmB,SAAS,UAAUQ,CAAK,GACvC,CAACL,GAAUK,EAAM,OAAuB,UAAU,gBAAgB,MAAc,EAAI,CAAA,EAGpFC,EAAUD,GAAsB,CACpCR,EAAmB,SAAS,SAASQ,CAAK,EAC1CZ,EAAW,EAAK,CAAA,EAGlB,OAAIF,KAAsB,MAAA,EAE1BY,EAAQ,iBAAiB,QAASC,CAAO,EACzCD,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,QAASC,CAAO,EAC5CD,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAACnB,EAAQQ,EAAY,MAAOL,CAAO,CAAC,EAEnCH,EAAe,CAAE,MAAAa,EAAO,KAAAC,EAAM,QAAAT,CAAA,EAC3B,CACL,IAAKG,EACL,MAAAK,EACA,KAAAC,EACA,QAAAT,CAAA,CAEJ"}

package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),v=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),h=require("../useRefState/useRefState.cjs"),T=require("../../utils/helpers/isTarget.cjs"),q=require("../../utils/helpers/getElement.cjs"),g="a, input, select, textarea, button, object, [tabindex]",b=e=>Array.from(e.querySelectorAll(g)).filter(o=>{const n=o;return n.tabIndex!==-1&&!n.hidden&&n.style.display!=="none"}),p=e=>{const t=e.querySelector("[data-autofocus]");if(t)return t.focus();const o=b(e);o.length&&o[0].focus()},L=(...e)=>{const t=T.isTarget(e[0])?e[0]:void 0,o=t?e[1]:e[0],[n,c]=S.useState(o),u=h.useRefState(),i=()=>c(!0),l=()=>c(!1),a=()=>c(s=>!s);return v.useIsomorphicLayoutEffect(()=>{if(!n)return;const s=t?q.getElement(t):u.current;if(!s)return;const f=s;p(f);const m=r=>{if(r.key!=="Tab")return;const[E,...d]=b(f);if(!d.length)return;const y=d.at(-1);r.shiftKey&&document.activeElement===E&&(r.preventDefault(),y.focus()),document.activeElement===y&&(r.preventDefault(),E.focus())};return document.addEventListener("keydown",m),()=>{document.removeEventListener("keydown",m)}},[n,t,u.state]),t?{active:n,enable:i,disable:l,toggle:a}:{active:n,enable:i,disable:l,toggle:a,ref:u}};exports.FOCUS_SELECTOR=g;exports.useFocusTrap=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),T=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),h=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),b="a, input, select, textarea, button, object, [tabindex]",S=e=>Array.from(e.querySelectorAll(b)).filter(o=>{const n=o;return n.tabIndex!==-1&&!n.hidden&&n.style.display!=="none"}),p=e=>{const t=e.querySelector("[data-autofocus]");if(t)return t.focus();const o=S(e);o.length&&o[0].focus()},q=(...e)=>{const t=g.isTarget(e[0])?e[0]:void 0,o=t?e[1]:e[0],[n,c]=v.useState(o),u=h.useRefState(),i=()=>c(!0),l=()=>c(!1),a=()=>c(s=>!s);return T.useIsomorphicLayoutEffect(()=>{if(!n)return;const s=t?g.isTarget.getElement(t):u.current;if(!s)return;const f=s;p(f);const m=r=>{if(r.key!=="Tab")return;const[E,...d]=S(f);if(!d.length)return;const y=d.at(-1);r.shiftKey&&document.activeElement===E&&(r.preventDefault(),y.focus()),document.activeElement===y&&(r.preventDefault(),E.focus())};return document.addEventListener("keydown",m),()=>{document.removeEventListener("keydown",m)}},[n,t,u.state]),t?{active:n,enable:i,disable:l,toggle:a}:{active:n,enable:i,disable:l,toggle:a,ref:u}};exports.FOCUS_SELECTOR=b;exports.useFocusTrap=q;
 //# sourceMappingURL=useFocusTrap.cjs.map

package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFocusTrap.cjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type /\nexport interface UseFocusTrapReturn {\n /* Whether focus trap is active /\n active: boolean;\n /* Disable focus trap /\n disable: () => void;\n /* Enable focus trap /\n enable: () => void;\n /* Toggle focus trap /\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n \n @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n \n @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n \n @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","~~getElement","~~htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":"~~2TAWaA~~,EAAiB,yDAExBC,EAAwBC,GACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAQE,GAAY,CAClC,MAAMC,EAASD,EACf,OAAOC,EAAO,WAAa,IAAM,CAACA,EAAO,QAAUA,EAAO,MAAM,UAAY,MAAA,CAC7E,EAGGC,EAAgBF,GAAyB,CAC7C,MAAMG,EAAmBH,EAAQ,cAAc,kBAAkB,EACjE,GAAIG,EAAkB,OAAOA,EAAiB,MAAA,EAC9C,MAAMC,EAAoBL,EAAqBC,CAAO,EAClDI,EAAkB,QAAQA,EAAkB,CAAC,EAAE,MAAA,CACrD,EA+CaC,EAAgB,IAAIC,IAAkB,CACjD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAgBF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAa,EAC5CI,EAAcC,EAAAA,YAAA,EAEdC,EAAS,IAAMJ,EAAU,EAAI,EAC7BK,EAAU,IAAML,EAAU,EAAK,EAC/BM,EAAS,IAAMN,EAAWO,GAAwB,CAACA,CAAU,EAqCnE,OAnCAC,EAAAA,0BAA0B,IAAM,CAC9B,GAAI,CAACT,EAAQ,OAEb,MAAMV,EAAUO,~~EAASa~~,EAAAA,~~WAAWb~~,CAAM,EAAIM,EAAY,~~QAC1D~~,GAAI,CAACb,EAAS,OAEd,~~MAAMqB~~,~~EAAcrB~~,EACpBE,~~EAAamB~~,CAAW,EAExB,MAAMC,EAAaC,GAAyB,CAC1C,GAAIA,EAAM,MAAQ,MAAO,OAEzB,KAAM,CAACC,EAAc,GAAGC,CAAY,~~EAAI1B~~,~~EAAqBsB~~,CAAW,EACxE,GAAI,CAACI,EAAa,OAAQ,OAE1B,MAAMC,EAAcD,EAAa,GAAG,EAAE,EAElCF,EAAM,UAAY,SAAS,gBAAkBC,IAC/CD,EAAM,eAAA,EACNG,EAAY,MAAA,GAGV,SAAS,gBAAkBA,IAC7BH,EAAM,eAAA,EACNC,EAAa,MAAA,EACf,EAGF,gBAAS,iBAAiB,UAAWF,CAAS,EAEvC,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAS,CAAA,CACnD,EACC,~~CAACZ~~,EAAQH,EAAQM,EAAY,KAAK,CAAC,EAElCN,EAAe,CAAE,OAAAG,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EACvC,CAAE,OAAAP,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,IAAKJ,CAAA,CACjD"}
1	+ {"version":3,"file":"useFocusTrap.cjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type /\nexport interface UseFocusTrapReturn {\n /* Whether focus trap is active /\n active: boolean;\n /* Disable focus trap /\n disable: () => void;\n /* Enable focus trap /\n enable: () => void;\n /* Toggle focus trap /\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n \n @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n \n @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n \n @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":"2QAWaA,EAAiB,yDAExBC,EAAwBC,GACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAQE,GAAY,CAClC,MAAMC,EAASD,EACf,OAAOC,EAAO,WAAa,IAAM,CAACA,EAAO,QAAUA,EAAO,MAAM,UAAY,MAAA,CAC7E,EAGGC,EAAgBF,GAAyB,CAC7C,MAAMG,EAAmBH,EAAQ,cAAc,kBAAkB,EACjE,GAAIG,EAAkB,OAAOA,EAAiB,MAAA,EAC9C,MAAMC,EAAoBL,EAAqBC,CAAO,EAClDI,EAAkB,QAAQA,EAAkB,CAAC,EAAE,MAAA,CACrD,EA+CaC,EAAgB,IAAIC,IAAkB,CACjD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAgBF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAa,EAC5CI,EAAcC,EAAAA,YAAA,EAEdC,EAAS,IAAMJ,EAAU,EAAI,EAC7BK,EAAU,IAAML,EAAU,EAAK,EAC/BM,EAAS,IAAMN,EAAWO,GAAwB,CAACA,CAAU,EAqCnE,OAnCAC,EAAAA,0BAA0B,IAAM,CAC9B,GAAI,CAACT,EAAQ,OAEb,MAAMV,EAAUO,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACnE,GAAI,CAACb,EAAS,OAEd,MAAMoB,EAAcpB,EACpBE,EAAakB,CAAW,EAExB,MAAMC,EAAaC,GAAyB,CAC1C,GAAIA,EAAM,MAAQ,MAAO,OAEzB,KAAM,CAACC,EAAc,GAAGC,CAAY,EAAIzB,EAAqBqB,CAAW,EACxE,GAAI,CAACI,EAAa,OAAQ,OAE1B,MAAMC,EAAcD,EAAa,GAAG,EAAE,EAElCF,EAAM,UAAY,SAAS,gBAAkBC,IAC/CD,EAAM,eAAA,EACNG,EAAY,MAAA,GAGV,SAAS,gBAAkBA,IAC7BH,EAAM,eAAA,EACNC,EAAa,MAAA,EACf,EAGF,gBAAS,iBAAiB,UAAWF,CAAS,EAEvC,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAS,CAAA,CACnD,EACC,CAACX,EAAQH,EAAQM,EAAY,KAAK,CAAC,EAElCN,EAAe,CAAE,OAAAG,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EACvC,CAAE,OAAAP,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,IAAKJ,CAAA,CACjD"}

package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),e=require("screenfull"),d=require("../useRefState/useRefState.cjs"),b=require("../../utils/helpers/isTarget.cjs"),q=require("../../utils/helpers/getElement.cjs"),h=(...t)=>{const n=b.isTarget(t[0])?t[0]:void 0,r=n?t[1]:t[0],[s,g]=a.useState(r?.initialValue??!1),l=d.useRefState(),i=()=>{e.isEnabled&&(e.isFullscreen?r?.onEnter?.():(e.off("change",i),r?.onExit?.()),g(e.isFullscreen))},o=()=>{const f=n?q.getElement(n):l.current;if(f&&e.isEnabled)try{e.request(f),e.on("change",i)}catch(E){console.error(E)}},c=()=>{e.isEnabled&&e.exit()},u=()=>{if(s)return c();o()};return a.useEffect(()=>()=>{e.isEnabled&&e.off("change",i)},[]),n?{enter:o,exit:c,toggle:u,value:s}:{ref:l,enter:o,exit:c,toggle:u,value:s}};exports.useFullscreen=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),e=require("screenfull"),b=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),h=(...t)=>{const n=g.isTarget(t[0])?t[0]:void 0,r=n?t[1]:t[0],[s,E]=a.useState(r?.initialValue??!1),l=b.useRefState(),i=()=>{e.isEnabled&&(e.isFullscreen?r?.onEnter?.():(e.off("change",i),r?.onExit?.()),E(e.isFullscreen))},o=()=>{const f=n?g.isTarget.getElement(n):l.current;if(f&&e.isEnabled)try{e.request(f),e.on("change",i)}catch(d){console.error(d)}},c=()=>{e.isEnabled&&e.exit()},u=()=>{if(s)return c();o()};return a.useEffect(()=>()=>{e.isEnabled&&e.off("change",i)},[]),n?{enter:o,exit:c,toggle:u,value:s}:{ref:l,enter:o,exit:c,toggle:u,value:s}};exports.useFullscreen=h;
 //# sourceMappingURL=useFullscreen.cjs.map

package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFullscreen.cjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { ~~getElement,~~ isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use fullscreen options type /\nexport interface UseFullScreenOptions {\n /* initial value /\n initialValue?: boolean;\n /* on enter fullscreen /\n onEnter?: () => void;\n /* on exit fullscreen /\n onExit?: () => void;\n}\n\n/* The use click outside return type /\nexport interface UseFullScreenReturn {\n /* The fullscreen state /\n value: boolean;\n /* The fullscreen enter method /\n enter: () => void;\n /* The fullscreen exit method /\n exit: () => void;\n /* The fullscreen toggle method /\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n \n @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n \n @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n \n @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions \| undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","~~getElement","~~error","exit","toggle","useEffect"],"mappings":"~~2QAoEaA~~,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAS,cAAgB,EAAK,EAC3DI,EAAcC,EAAAA,YAAA,EAEdC,EAAW,IAAM,CAChBC,EAAW,YAEZA,EAAW,aACbP,GAAS,UAAA,GAETO,EAAW,IAAI,SAAUD,CAAQ,EACjCN,GAAS,SAAA,GAGXE,EAASK,EAAW,YAAY,EAAA,EAG5BC,EAAQ,IAAM,CAClB,MAAMC,EAAWX,~~EAASY~~,EAAAA,~~WAAWZ~~,CAAM,EAAIM,EAAY,~~QAC3D~~,GAAKK,GAEDF,EAAW,UACb,GAAI,CACFA,EAAW,QAAQE,CAAO,EAC1BF,EAAW,GAAG,SAAUD,CAAQ,CAAA,~~OACzBK~~,EAAO,CACd,QAAQ,MAAMA,CAAK,CAAA,CAEvB,EAGIC,EAAO,IAAM,~~CACbL~~,EAAW,WAAWA,EAAW,KAAA,CAAK,~~EAGtCM~~,EAAS,IAAM,CACnB,~~GAAIZ~~,~~SAAcW~~,EAAA,~~EAClBJ~~,EAAA,CAAM,EAUR,~~OAPAM~~,EAAAA,UACE,IAAM,IAAM,~~CACNP~~,EAAW,WAAWA,EAAW,IAAI,SAAUD,CAAQ,CAAA,EAE7D,CAAA,CAAC,EAGCR,EACK,CACL,MAAAU,EACA,~~KAAAI~~,EACA,OAAAC,EACA,~~MAAAZ~~,CAAA,EAEG,CACL,IAAKG,EACL,MAAAI,EACA,~~KAAAI~~,EACA,OAAAC,EACA,~~MAAAZ~~,CAAA,CAEJ"}
1	+ {"version":3,"file":"useFullscreen.cjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use fullscreen options type /\nexport interface UseFullScreenOptions {\n /* initial value /\n initialValue?: boolean;\n /* on enter fullscreen /\n onEnter?: () => void;\n /* on exit fullscreen /\n onExit?: () => void;\n}\n\n/* The use click outside return type /\nexport interface UseFullScreenReturn {\n /* The fullscreen state /\n value: boolean;\n /* The fullscreen enter method /\n enter: () => void;\n /* The fullscreen exit method /\n exit: () => void;\n /* The fullscreen toggle method /\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n \n @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n \n @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n \n @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions \| undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":"2NAoEaA,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAS,cAAgB,EAAK,EAC3DI,EAAcC,EAAAA,YAAA,EAEdC,EAAW,IAAM,CAChBC,EAAW,YAEZA,EAAW,aACbP,GAAS,UAAA,GAETO,EAAW,IAAI,SAAUD,CAAQ,EACjCN,GAAS,SAAA,GAGXE,EAASK,EAAW,YAAY,EAAA,EAG5BC,EAAQ,IAAM,CAClB,MAAMC,EAAWX,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACpE,GAAKK,GAEDF,EAAW,UACb,GAAI,CACFA,EAAW,QAAQE,CAAO,EAC1BF,EAAW,GAAG,SAAUD,CAAQ,CAAA,OACzBI,EAAO,CACd,QAAQ,MAAMA,CAAK,CAAA,CAEvB,EAGIC,EAAO,IAAM,CACbJ,EAAW,WAAWA,EAAW,KAAA,CAAK,EAGtCK,EAAS,IAAM,CACnB,GAAIX,SAAcU,EAAA,EAClBH,EAAA,CAAM,EAUR,OAPAK,EAAAA,UACE,IAAM,IAAM,CACNN,EAAW,WAAWA,EAAW,IAAI,SAAUD,CAAQ,CAAA,EAE7D,CAAA,CAAC,EAGCR,EACK,CACL,MAAAU,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,EAEG,CACL,IAAKG,EACL,MAAAI,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,CAEJ"}