@vibe/hooks 4.0.1 → 4.0.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useClickOutside/index.ts"],"sourcesContent":["import { useCallback, useRef, type RefObject } from \"react\";\nimport { type GenericEventCallback, isClient, useEventListener } from \"@vibe/shared\";\n\nexport default function useClickOutside({\n ref,\n callback,\n ignoreClasses,\n eventName = \"click\"\n}: {\n ref: RefObject<HTMLElement>;\n callback: GenericEventCallback;\n ignoreClasses?: string[];\n eventName?: keyof HTMLElementEventMap | string;\n}) {\n const onClickOutsideListener = useCallback(\n (event: MouseEvent) => {\n if (!ref || !ref.current || ref.current.contains(event.target as Node)) {\n return;\n }\n\n const shouldIgnoreClasses = ignoreClasses && event.target instanceof HTMLElement;\n if (shouldIgnoreClasses && event.target.closest(ignoreClasses.join(\",\"))) {\n return;\n }\n\n callback(event);\n },\n\n [ref, callback, ignoreClasses]\n );\n\n const documentRef = useRef(isClient() ? document.body : null);\n\n useEventListener({\n eventName,\n ref: documentRef,\n callback: onClickOutsideListener,\n capture: true\n });\n\n useEventListener({\n eventName: \"touchend\",\n ref: documentRef,\n callback: onClickOutsideListener,\n capture: true\n });\n}\n"],"names":["useClickOutside","ref","callback","ignoreClasses","eventName","onClickOutsideListener","useCallback","event","current","contains","target","HTMLElement","closest","join","documentRef","useRef","isClient","document","body","useEventListener","capture"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useClickOutside/index.ts"],"sourcesContent":["import { useCallback, useRef, type RefObject } from \"react\";\nimport { type GenericEventCallback, isClient, useEventListener } from \"@vibe/shared\";\n\nexport default function useClickOutside({\n ref,\n callback,\n ignoreClasses,\n eventName = \"click\"\n}: {\n ref: RefObject<HTMLElement>;\n callback: GenericEventCallback;\n ignoreClasses?: string[];\n eventName?: keyof HTMLElementEventMap | string;\n}) {\n const onClickOutsideListener = useCallback(\n (event: MouseEvent) => {\n if (!ref || !ref.current || ref.current.contains(event.target as Node)) {\n return;\n }\n\n const shouldIgnoreClasses = ignoreClasses && event.target instanceof HTMLElement;\n if (shouldIgnoreClasses && event.target.closest(ignoreClasses.join(\",\"))) {\n return;\n }\n\n callback(event);\n },\n\n [ref, callback, ignoreClasses]\n );\n\n const documentRef = useRef(isClient() ? document.body : null);\n\n useEventListener({\n eventName,\n ref: documentRef,\n callback: onClickOutsideListener,\n capture: true\n });\n\n useEventListener({\n eventName: \"touchend\",\n ref: documentRef,\n callback: onClickOutsideListener,\n capture: true\n });\n}\n"],"names":["useClickOutside","ref","callback","ignoreClasses","eventName","onClickOutsideListener","useCallback","event","current","contains","target","HTMLElement","closest","join","documentRef","useRef","isClient","document","body","useEventListener","capture"],"mappings":"8GAGc,SAAUA,GAAgBC,IACtCA,EAAGC,SACHA,EAAQC,cACRA,EAAaC,UACbA,EAAY,UAOZ,MAAMC,EAAyBC,GAC5BC,IACC,IAAKN,IAAQA,EAAIO,SAAWP,EAAIO,QAAQC,SAASF,EAAMG,QACrD,OAG0BP,GAAiBI,EAAMG,kBAAkBC,aAC1CJ,EAAMG,OAAOE,QAAQT,EAAcU,KAAK,OAInEX,EAASK,EAAM,GAGjB,CAACN,EAAKC,EAAUC,IAGZW,EAAcC,EAAOC,IAAaC,SAASC,KAAO,MAExDC,EAAiB,CACff,YACAH,IAAKa,EACLZ,SAAUG,EACVe,SAAS,IAGXD,EAAiB,CACff,UAAW,WACXH,IAAKa,EACLZ,SAAUG,EACVe,SAAS,GAEb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useIsOverflowing/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useState } from \"react\";\nimport useResizeObserver from \"../useResizeObserver\";\n\nfunction checkOverflow(element: HTMLElement, ignoreHeightOverflow: boolean, heightTolerance = 0, widthTolerance = 0) {\n if (!element) {\n return false;\n }\n const isOverflowingWidth = element.clientWidth + widthTolerance < element.scrollWidth;\n const isOverflowingHeight = !ignoreHeightOverflow && element.clientHeight + heightTolerance < element.scrollHeight;\n return isOverflowingWidth || isOverflowingHeight;\n}\n\nexport default function useIsOverflowing({\n ref,\n ignoreHeightOverflow = false,\n tolerance: heightTolerance,\n widthTolerance\n}: {\n /**\n * The ref of the element to check for overflow.\n */\n ref: RefObject<HTMLElement>;\n /**\n * Whether to ignore height overflow.\n */\n ignoreHeightOverflow?: boolean;\n /**\n * The tolerance value to consider the element as overflowing (height overflow).\n */\n tolerance?: number;\n /**\n * The tolerance value to consider the element as overflowing (width overflow).\n */\n widthTolerance?: number;\n}) {\n const [isOverflowing, setIsOverflowing] = useState<boolean>(() =>\n checkOverflow(ref?.current, ignoreHeightOverflow, heightTolerance, widthTolerance)\n );\n const callback = useCallback(() => {\n const element = ref?.current;\n if (!element) return;\n\n const newOverflowState = checkOverflow(element, ignoreHeightOverflow, heightTolerance, widthTolerance);\n setIsOverflowing(prevState => (prevState !== newOverflowState ? newOverflowState : prevState));\n }, [ignoreHeightOverflow, ref, heightTolerance, widthTolerance]);\n\n useResizeObserver({\n ref,\n callback,\n debounceTime: 0\n });\n\n return isOverflowing;\n}\n"],"names":["checkOverflow","element","ignoreHeightOverflow","heightTolerance","widthTolerance","scrollWidth","clientWidth","scrollHeight","clientHeight","useIsOverflowing","ref","tolerance","isOverflowing","setIsOverflowing","useState","current","callback","useCallback","newOverflowState","prevState","useResizeObserver","debounceTime"],"mappings":"+FAGA,SAASA,EAAcC,EAAsBC,EAA+BC,EAAkB,EAAGC,EAAiB,GAChH,IAAKH,EACH,OAAO,EAIT,OAFkEA,EAAQI,YAA/CJ,EAAQK,YAAcF,IACpBF,GAAiED,EAAQM,aAAjDN,EAAQO,aAAeL,CAE9E,CAEc,SAAUM,GAAiBC,IACvCA,EAAGR,qBACHA,GAAuB,EACvBS,UAAWR,EAAeC,eAC1BA,IAmBA,MAAOQ,EAAeC,GAAoBC,GAAkB,IAC1Dd,EAAcU,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useIsOverflowing/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useState } from \"react\";\nimport useResizeObserver from \"../useResizeObserver\";\n\nfunction checkOverflow(element: HTMLElement, ignoreHeightOverflow: boolean, heightTolerance = 0, widthTolerance = 0) {\n if (!element) {\n return false;\n }\n const isOverflowingWidth = element.clientWidth + widthTolerance < element.scrollWidth;\n const isOverflowingHeight = !ignoreHeightOverflow && element.clientHeight + heightTolerance < element.scrollHeight;\n return isOverflowingWidth || isOverflowingHeight;\n}\n\nexport default function useIsOverflowing({\n ref,\n ignoreHeightOverflow = false,\n tolerance: heightTolerance,\n widthTolerance\n}: {\n /**\n * The ref of the element to check for overflow.\n */\n ref: RefObject<HTMLElement>;\n /**\n * Whether to ignore height overflow.\n */\n ignoreHeightOverflow?: boolean;\n /**\n * The tolerance value to consider the element as overflowing (height overflow).\n */\n tolerance?: number;\n /**\n * The tolerance value to consider the element as overflowing (width overflow).\n */\n widthTolerance?: number;\n}) {\n const [isOverflowing, setIsOverflowing] = useState<boolean>(() =>\n checkOverflow(ref?.current, ignoreHeightOverflow, heightTolerance, widthTolerance)\n );\n const callback = useCallback(() => {\n const element = ref?.current;\n if (!element) return;\n\n const newOverflowState = checkOverflow(element, ignoreHeightOverflow, heightTolerance, widthTolerance);\n setIsOverflowing(prevState => (prevState !== newOverflowState ? newOverflowState : prevState));\n }, [ignoreHeightOverflow, ref, heightTolerance, widthTolerance]);\n\n useResizeObserver({\n ref,\n callback,\n debounceTime: 0\n });\n\n return isOverflowing;\n}\n"],"names":["checkOverflow","element","ignoreHeightOverflow","heightTolerance","widthTolerance","scrollWidth","clientWidth","scrollHeight","clientHeight","useIsOverflowing","ref","tolerance","isOverflowing","setIsOverflowing","useState","current","callback","useCallback","newOverflowState","prevState","useResizeObserver","debounceTime"],"mappings":"+FAGA,SAASA,EAAcC,EAAsBC,EAA+BC,EAAkB,EAAGC,EAAiB,GAChH,IAAKH,EACH,OAAO,EAIT,OAFkEA,EAAQI,YAA/CJ,EAAQK,YAAcF,IACpBF,GAAiED,EAAQM,aAAjDN,EAAQO,aAAeL,CAE9E,CAEc,SAAUM,GAAiBC,IACvCA,EAAGR,qBACHA,GAAuB,EACvBS,UAAWR,EAAeC,eAC1BA,IAmBA,MAAOQ,EAAeC,GAAoBC,GAAkB,IAC1Dd,EAAcU,aAAG,EAAHA,EAAKK,QAASb,EAAsBC,EAAiBC,KAE/DY,EAAWC,GAAY,KAC3B,MAAMhB,EAAUS,aAAG,EAAHA,EAAKK,QACrB,IAAKd,EAAS,OAEd,MAAMiB,EAAmBlB,EAAcC,EAASC,EAAsBC,EAAiBC,GACvFS,GAAiBM,GAAcA,IAAcD,EAAmBA,EAAmBC,GAAW,GAC7F,CAACjB,EAAsBQ,EAAKP,EAAiBC,IAQhD,OANAgB,EAAkB,CAChBV,MACAM,WACAK,aAAc,IAGTT,CACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useResizeObserver/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect } from \"react\";\nimport { debounce } from \"es-toolkit\";\n\ntype ResizeCallback = ({ borderBoxSize }: { borderBoxSize: ResizeObserverSize }) => void;\n\nexport default function useResizeObserver({\n ref,\n callback,\n debounceTime = 200\n}: {\n ref: RefObject<HTMLElement>;\n callback: ResizeCallback;\n debounceTime?: number;\n}) {\n const debouncedCallback = useCallback(debounce<ResizeCallback>(callback, debounceTime), [callback, debounceTime]);\n\n useEffect(() => {\n if (!window.ResizeObserver) {\n return;\n }\n if (!ref?.current) return;\n\n function borderBoxSizeCallback(borderBoxSize: ResizeObserverSize | ReadonlyArray<ResizeObserverSize>): number {\n const value = Array.isArray(borderBoxSize) ? borderBoxSize[0] : borderBoxSize;\n return window.requestAnimationFrame(() => {\n debouncedCallback({ borderBoxSize: value });\n });\n }\n\n let animationFrameId: number | null = null;\n\n const resizeObserver = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry && entry.borderBoxSize) {\n // handle chrome (entry.borderBoxSize[0])\n // handle ff (entry.borderBoxSize)\n if (!Array.isArray(entry.borderBoxSize)) {\n animationFrameId = borderBoxSizeCallback(entry.borderBoxSize);\n } else {\n const borderBoxEntry = entry.borderBoxSize[0];\n animationFrameId = borderBoxSizeCallback(borderBoxEntry);\n }\n } else if (entry.contentRect) {\n // handle safari (entry.contentRect)\n const borderBoxSize = { blockSize: entry.contentRect.height, inlineSize: entry?.contentRect?.width || 0 };\n animationFrameId = borderBoxSizeCallback(borderBoxSize);\n } else {\n return;\n }\n });\n\n resizeObserver.observe(ref?.current);\n\n return () => {\n if (debounceTime !== 0) {\n debouncedCallback.cancel();\n }\n\n if (animationFrameId) {\n window.cancelAnimationFrame(animationFrameId);\n }\n\n resizeObserver.disconnect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref?.current, callback, debounceTime, debouncedCallback]);\n}\n"],"names":["useResizeObserver","ref","callback","debounceTime","debouncedCallback","useCallback","debounce","useEffect","window","ResizeObserver","current","borderBoxSizeCallback","borderBoxSize","value","Array","isArray","requestAnimationFrame","animationFrameId","resizeObserver","entries","entry","contentRect","blockSize","height","inlineSize","_a","width","observe","cancel","cancelAnimationFrame","disconnect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useResizeObserver/index.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect } from \"react\";\nimport { debounce } from \"es-toolkit\";\n\ntype ResizeCallback = ({ borderBoxSize }: { borderBoxSize: ResizeObserverSize }) => void;\n\nexport default function useResizeObserver({\n ref,\n callback,\n debounceTime = 200\n}: {\n ref: RefObject<HTMLElement>;\n callback: ResizeCallback;\n debounceTime?: number;\n}) {\n const debouncedCallback = useCallback(debounce<ResizeCallback>(callback, debounceTime), [callback, debounceTime]);\n\n useEffect(() => {\n if (!window.ResizeObserver) {\n return;\n }\n if (!ref?.current) return;\n\n function borderBoxSizeCallback(borderBoxSize: ResizeObserverSize | ReadonlyArray<ResizeObserverSize>): number {\n const value = Array.isArray(borderBoxSize) ? borderBoxSize[0] : borderBoxSize;\n return window.requestAnimationFrame(() => {\n debouncedCallback({ borderBoxSize: value });\n });\n }\n\n let animationFrameId: number | null = null;\n\n const resizeObserver = new ResizeObserver(entries => {\n const entry = entries[0];\n if (entry && entry.borderBoxSize) {\n // handle chrome (entry.borderBoxSize[0])\n // handle ff (entry.borderBoxSize)\n if (!Array.isArray(entry.borderBoxSize)) {\n animationFrameId = borderBoxSizeCallback(entry.borderBoxSize);\n } else {\n const borderBoxEntry = entry.borderBoxSize[0];\n animationFrameId = borderBoxSizeCallback(borderBoxEntry);\n }\n } else if (entry.contentRect) {\n // handle safari (entry.contentRect)\n const borderBoxSize = { blockSize: entry.contentRect.height, inlineSize: entry?.contentRect?.width || 0 };\n animationFrameId = borderBoxSizeCallback(borderBoxSize);\n } else {\n return;\n }\n });\n\n resizeObserver.observe(ref?.current);\n\n return () => {\n if (debounceTime !== 0) {\n debouncedCallback.cancel();\n }\n\n if (animationFrameId) {\n window.cancelAnimationFrame(animationFrameId);\n }\n\n resizeObserver.disconnect();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref?.current, callback, debounceTime, debouncedCallback]);\n}\n"],"names":["useResizeObserver","ref","callback","debounceTime","debouncedCallback","useCallback","debounce","useEffect","window","ResizeObserver","current","borderBoxSizeCallback","borderBoxSize","value","Array","isArray","requestAnimationFrame","animationFrameId","resizeObserver","entries","entry","contentRect","blockSize","height","inlineSize","_a","width","observe","cancel","cancelAnimationFrame","disconnect"],"mappings":"yFAKc,SAAUA,GAAkBC,IACxCA,EAAGC,SACHA,EAAQC,aACRA,EAAe,MAMf,MAAMC,EAAoBC,EAAYC,EAAyBJ,EAAUC,GAAe,CAACD,EAAUC,IAEnGI,GAAU,KACR,IAAKC,OAAOC,eACV,OAEF,KAAKR,aAAG,EAAHA,EAAKS,SAAS,OAEnB,SAASC,EAAsBC,GAC7B,MAAMC,EAAQC,MAAMC,QAAQH,GAAiBA,EAAc,GAAKA,EAChE,OAAOJ,OAAOQ,uBAAsB,KAClCZ,EAAkB,CAAEQ,cAAeC,GAAQ,GAE/C,CAEA,IAAII,EAAkC,KAEtC,MAAMC,EAAiB,IAAIT,gBAAeU,UACxC,MAAMC,EAAQD,EAAQ,GACtB,GAAIC,GAASA,EAAMR,cAGjB,GAAKE,MAAMC,QAAQK,EAAMR,eAElB,CAELK,EAAmBN,EADIS,EAAMR,cAAc,GAE7C,MAJEK,EAAmBN,EAAsBS,EAAMR,mBAK5C,KAAIQ,EAAMC,YAKf,OAL4B,CAE5B,MAAMT,EAAgB,CAAEU,UAAWF,EAAMC,YAAYE,OAAQC,YAA8B,QAAlBC,EAAAL,aAAK,EAALA,EAAOC,mBAAW,IAAAI,OAAA,EAAAA,EAAEC,QAAS,GACtGT,EAAmBN,EAAsBC,EAC3C,CAEA,KAKF,OAFAM,EAAeS,QAAQ1B,aAAG,EAAHA,EAAKS,SAErB,KACgB,IAAjBP,GACFC,EAAkBwB,SAGhBX,GACFT,OAAOqB,qBAAqBZ,GAG9BC,EAAeY,YAAY,CAC5B,GAEA,CAAC7B,eAAAA,EAAKS,QAASR,EAAUC,EAAcC,GAC5C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibe/hooks",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "Vibe sub-package for React hooks",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@vibe/shared": "4.0.
|
|
36
|
+
"@vibe/shared": "4.0.2",
|
|
37
37
|
"classnames": "^2.5.1",
|
|
38
38
|
"es-toolkit": "^1.39.10"
|
|
39
39
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@testing-library/react": "^12.1.2",
|
|
42
42
|
"@testing-library/react-hooks": "^7.0.2",
|
|
43
43
|
"@testing-library/user-event": "^13.5.0",
|
|
44
|
-
"@vibe/config": "4.0.
|
|
44
|
+
"@vibe/config": "4.0.1",
|
|
45
45
|
"react": "^16.13.0",
|
|
46
46
|
"react-dom": "^16.13.0",
|
|
47
47
|
"react-test-renderer": "16",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"../../node_modules/@vibe/config/.eslintrc.cjs"
|
|
64
64
|
]
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "64963b08a2451e5ca11725e672dbbae9ab54cd83"
|
|
67
67
|
}
|