@pyreon/hooks 0.11.4 → 0.11.6
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.
- package/README.md +5 -5
- package/lib/index.d.ts +6 -6
- package/lib/index.js +4 -6
- package/package.json +24 -24
- package/src/__tests__/useBreakpoint.test.ts +48 -48
- package/src/__tests__/useClickOutside.test.ts +31 -31
- package/src/__tests__/useColorScheme.test.ts +22 -22
- package/src/__tests__/useControllableState.test.ts +18 -18
- package/src/__tests__/useDebouncedCallback.test.ts +19 -19
- package/src/__tests__/useDebouncedValue.test.ts +28 -28
- package/src/__tests__/useElementSize.test.ts +21 -21
- package/src/__tests__/useFocus.test.ts +12 -12
- package/src/__tests__/useFocusTrap.test.ts +36 -36
- package/src/__tests__/useHover.test.ts +13 -13
- package/src/__tests__/useIntersection.test.ts +20 -20
- package/src/__tests__/useInterval.test.ts +7 -7
- package/src/__tests__/useIsomorphicLayoutEffect.test.ts +5 -5
- package/src/__tests__/useKeyboard.test.ts +38 -38
- package/src/__tests__/useLatest.test.ts +11 -11
- package/src/__tests__/useMediaQuery.test.ts +29 -29
- package/src/__tests__/useMergedRef.test.ts +10 -10
- package/src/__tests__/usePrevious.test.ts +20 -20
- package/src/__tests__/useReducedMotion.test.ts +15 -15
- package/src/__tests__/useRootSize.test.ts +9 -9
- package/src/__tests__/useScrollLock.test.ts +33 -33
- package/src/__tests__/useSpacing.test.ts +11 -11
- package/src/__tests__/useThemeValue.test.ts +5 -5
- package/src/__tests__/useThrottledCallback.test.ts +16 -16
- package/src/__tests__/useTimeout.test.ts +8 -8
- package/src/__tests__/useToggle.test.ts +14 -14
- package/src/__tests__/useUpdateEffect.test.ts +8 -8
- package/src/__tests__/useWindowResize.test.ts +34 -34
- package/src/index.ts +56 -56
- package/src/useBreakpoint.ts +6 -6
- package/src/useClickOutside.ts +5 -5
- package/src/useClipboard.ts +2 -2
- package/src/useColorScheme.ts +5 -5
- package/src/useControllableState.ts +2 -2
- package/src/useDebouncedCallback.ts +1 -1
- package/src/useDebouncedValue.ts +2 -2
- package/src/useDialog.ts +4 -4
- package/src/useElementSize.ts +2 -2
- package/src/useEventListener.ts +2 -2
- package/src/useFocus.ts +1 -1
- package/src/useFocusTrap.ts +4 -4
- package/src/useHover.ts +1 -1
- package/src/useInfiniteScroll.ts +10 -10
- package/src/useIntersection.ts +2 -2
- package/src/useInterval.ts +3 -4
- package/src/useIsomorphicLayoutEffect.ts +2 -2
- package/src/useKeyboard.ts +3 -3
- package/src/useMediaQuery.ts +4 -4
- package/src/useMergedRef.ts +1 -1
- package/src/useOnline.ts +6 -6
- package/src/usePrevious.ts +1 -1
- package/src/useReducedMotion.ts +2 -2
- package/src/useRootSize.ts +1 -1
- package/src/useScrollLock.ts +3 -3
- package/src/useSpacing.ts +1 -1
- package/src/useThemeValue.ts +2 -2
- package/src/useThrottledCallback.ts +2 -2
- package/src/useTimeAgo.ts +15 -15
- package/src/useTimeout.ts +3 -4
- package/src/useToggle.ts +1 -1
- package/src/useUpdateEffect.ts +2 -2
- package/src/useWindowResize.ts +6 -6
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { afterEach, beforeEach, describe, expect, it, vi } from
|
|
1
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
2
2
|
|
|
3
3
|
// Mock @pyreon/core partially - keep real exports but stub lifecycle hooks
|
|
4
|
-
vi.mock(
|
|
5
|
-
const actual = await importOriginal<typeof import(
|
|
4
|
+
vi.mock('@pyreon/core', async (importOriginal) => {
|
|
5
|
+
const actual = await importOriginal<typeof import('@pyreon/core')>()
|
|
6
6
|
return {
|
|
7
7
|
...actual,
|
|
8
8
|
onMount: (fn: () => void) => fn(),
|
|
@@ -12,42 +12,42 @@ vi.mock("@pyreon/core", async (importOriginal) => {
|
|
|
12
12
|
}
|
|
13
13
|
})
|
|
14
14
|
|
|
15
|
-
import { useThrottledCallback } from
|
|
15
|
+
import { useThrottledCallback } from '../useThrottledCallback'
|
|
16
16
|
|
|
17
|
-
describe(
|
|
17
|
+
describe('useThrottledCallback', () => {
|
|
18
18
|
beforeEach(() => vi.useFakeTimers())
|
|
19
19
|
afterEach(() => vi.useRealTimers())
|
|
20
20
|
|
|
21
|
-
it(
|
|
21
|
+
it('calls immediately on first invocation (leading)', () => {
|
|
22
22
|
const fn = vi.fn()
|
|
23
23
|
const throttled = useThrottledCallback(fn, 100)
|
|
24
24
|
|
|
25
|
-
throttled(
|
|
25
|
+
throttled('a')
|
|
26
26
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
27
|
-
expect(fn).toHaveBeenCalledWith(
|
|
27
|
+
expect(fn).toHaveBeenCalledWith('a')
|
|
28
28
|
})
|
|
29
29
|
|
|
30
|
-
it(
|
|
30
|
+
it('throttles subsequent calls', () => {
|
|
31
31
|
const fn = vi.fn()
|
|
32
32
|
const throttled = useThrottledCallback(fn, 100)
|
|
33
33
|
|
|
34
|
-
throttled(
|
|
35
|
-
throttled(
|
|
36
|
-
throttled(
|
|
34
|
+
throttled('a')
|
|
35
|
+
throttled('b')
|
|
36
|
+
throttled('c')
|
|
37
37
|
|
|
38
38
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
39
39
|
|
|
40
40
|
vi.advanceTimersByTime(100)
|
|
41
41
|
expect(fn).toHaveBeenCalledTimes(2)
|
|
42
|
-
expect(fn).toHaveBeenLastCalledWith(
|
|
42
|
+
expect(fn).toHaveBeenLastCalledWith('c')
|
|
43
43
|
})
|
|
44
44
|
|
|
45
|
-
it(
|
|
45
|
+
it('cancel stops pending trailing call', () => {
|
|
46
46
|
const fn = vi.fn()
|
|
47
47
|
const throttled = useThrottledCallback(fn, 100)
|
|
48
48
|
|
|
49
|
-
throttled(
|
|
50
|
-
throttled(
|
|
49
|
+
throttled('a')
|
|
50
|
+
throttled('b')
|
|
51
51
|
throttled.cancel()
|
|
52
52
|
|
|
53
53
|
vi.advanceTimersByTime(200)
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { afterEach, beforeEach, describe, expect, it, vi } from
|
|
2
|
-
import { useTimeout } from
|
|
1
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
2
|
+
import { useTimeout } from '../useTimeout'
|
|
3
3
|
|
|
4
4
|
// Mock onUnmount since it requires component lifecycle context
|
|
5
|
-
vi.mock(
|
|
5
|
+
vi.mock('@pyreon/core', () => ({
|
|
6
6
|
onMount: (fn: () => void) => fn(),
|
|
7
7
|
onUnmount: (_fn: () => void) => {
|
|
8
8
|
/* no-op */
|
|
9
9
|
},
|
|
10
10
|
}))
|
|
11
11
|
|
|
12
|
-
describe(
|
|
12
|
+
describe('useTimeout', () => {
|
|
13
13
|
beforeEach(() => vi.useFakeTimers())
|
|
14
14
|
afterEach(() => vi.useRealTimers())
|
|
15
15
|
|
|
16
|
-
it(
|
|
16
|
+
it('calls callback after delay', () => {
|
|
17
17
|
const fn = vi.fn()
|
|
18
18
|
useTimeout(fn, 200)
|
|
19
19
|
|
|
@@ -21,7 +21,7 @@ describe("useTimeout", () => {
|
|
|
21
21
|
expect(fn).toHaveBeenCalledTimes(1)
|
|
22
22
|
})
|
|
23
23
|
|
|
24
|
-
it(
|
|
24
|
+
it('does not call callback when delay is null', () => {
|
|
25
25
|
const fn = vi.fn()
|
|
26
26
|
useTimeout(fn, null)
|
|
27
27
|
|
|
@@ -29,7 +29,7 @@ describe("useTimeout", () => {
|
|
|
29
29
|
expect(fn).not.toHaveBeenCalled()
|
|
30
30
|
})
|
|
31
31
|
|
|
32
|
-
it(
|
|
32
|
+
it('clear() prevents the callback', () => {
|
|
33
33
|
const fn = vi.fn()
|
|
34
34
|
const { clear } = useTimeout(fn, 200)
|
|
35
35
|
|
|
@@ -38,7 +38,7 @@ describe("useTimeout", () => {
|
|
|
38
38
|
expect(fn).not.toHaveBeenCalled()
|
|
39
39
|
})
|
|
40
40
|
|
|
41
|
-
it(
|
|
41
|
+
it('reset() restarts the timer', () => {
|
|
42
42
|
const fn = vi.fn()
|
|
43
43
|
const { reset } = useTimeout(fn, 200)
|
|
44
44
|
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { describe, expect, it } from
|
|
2
|
-
import { useToggle } from
|
|
1
|
+
import { describe, expect, it } from 'vitest'
|
|
2
|
+
import { useToggle } from '../useToggle'
|
|
3
3
|
|
|
4
|
-
describe(
|
|
5
|
-
it(
|
|
4
|
+
describe('useToggle', () => {
|
|
5
|
+
it('defaults to false', () => {
|
|
6
6
|
const { value } = useToggle()
|
|
7
7
|
expect(value()).toBe(false)
|
|
8
8
|
})
|
|
9
9
|
|
|
10
|
-
it(
|
|
10
|
+
it('respects initial value of true', () => {
|
|
11
11
|
const { value } = useToggle(true)
|
|
12
12
|
expect(value()).toBe(true)
|
|
13
13
|
})
|
|
14
14
|
|
|
15
|
-
it(
|
|
15
|
+
it('respects initial value of false', () => {
|
|
16
16
|
const { value } = useToggle(false)
|
|
17
17
|
expect(value()).toBe(false)
|
|
18
18
|
})
|
|
19
19
|
|
|
20
|
-
it(
|
|
20
|
+
it('toggle flips value from false to true', () => {
|
|
21
21
|
const { value, toggle } = useToggle()
|
|
22
22
|
toggle()
|
|
23
23
|
expect(value()).toBe(true)
|
|
24
24
|
})
|
|
25
25
|
|
|
26
|
-
it(
|
|
26
|
+
it('toggle flips value from true to false', () => {
|
|
27
27
|
const { value, toggle } = useToggle(true)
|
|
28
28
|
toggle()
|
|
29
29
|
expect(value()).toBe(false)
|
|
30
30
|
})
|
|
31
31
|
|
|
32
|
-
it(
|
|
32
|
+
it('toggle flips multiple times', () => {
|
|
33
33
|
const { value, toggle } = useToggle()
|
|
34
34
|
toggle()
|
|
35
35
|
expect(value()).toBe(true)
|
|
@@ -39,31 +39,31 @@ describe("useToggle", () => {
|
|
|
39
39
|
expect(value()).toBe(true)
|
|
40
40
|
})
|
|
41
41
|
|
|
42
|
-
it(
|
|
42
|
+
it('setTrue sets value to true', () => {
|
|
43
43
|
const { value, setTrue } = useToggle()
|
|
44
44
|
setTrue()
|
|
45
45
|
expect(value()).toBe(true)
|
|
46
46
|
})
|
|
47
47
|
|
|
48
|
-
it(
|
|
48
|
+
it('setTrue is idempotent', () => {
|
|
49
49
|
const { value, setTrue } = useToggle(true)
|
|
50
50
|
setTrue()
|
|
51
51
|
expect(value()).toBe(true)
|
|
52
52
|
})
|
|
53
53
|
|
|
54
|
-
it(
|
|
54
|
+
it('setFalse sets value to false', () => {
|
|
55
55
|
const { value, setFalse } = useToggle(true)
|
|
56
56
|
setFalse()
|
|
57
57
|
expect(value()).toBe(false)
|
|
58
58
|
})
|
|
59
59
|
|
|
60
|
-
it(
|
|
60
|
+
it('setFalse is idempotent', () => {
|
|
61
61
|
const { value, setFalse } = useToggle(false)
|
|
62
62
|
setFalse()
|
|
63
63
|
expect(value()).toBe(false)
|
|
64
64
|
})
|
|
65
65
|
|
|
66
|
-
it(
|
|
66
|
+
it('combines toggle, setTrue, and setFalse correctly', () => {
|
|
67
67
|
const { value, toggle, setTrue, setFalse } = useToggle()
|
|
68
68
|
expect(value()).toBe(false)
|
|
69
69
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { signal } from
|
|
2
|
-
import { describe, expect, it, vi } from
|
|
1
|
+
import { signal } from '@pyreon/reactivity'
|
|
2
|
+
import { describe, expect, it, vi } from 'vitest'
|
|
3
3
|
|
|
4
4
|
// Mock onUnmount since it requires component lifecycle context
|
|
5
|
-
vi.mock(
|
|
5
|
+
vi.mock('@pyreon/core', () => ({
|
|
6
6
|
onMount: (fn: () => void) => fn(),
|
|
7
7
|
onUnmount: (_fn: () => void) => {
|
|
8
8
|
/* no-op */
|
|
9
9
|
},
|
|
10
10
|
}))
|
|
11
11
|
|
|
12
|
-
import { useUpdateEffect } from
|
|
12
|
+
import { useUpdateEffect } from '../useUpdateEffect'
|
|
13
13
|
|
|
14
|
-
describe(
|
|
15
|
-
it(
|
|
14
|
+
describe('useUpdateEffect', () => {
|
|
15
|
+
it('does not fire on initial setup', () => {
|
|
16
16
|
const callback = vi.fn()
|
|
17
17
|
const source = signal(1)
|
|
18
18
|
|
|
@@ -20,7 +20,7 @@ describe("useUpdateEffect", () => {
|
|
|
20
20
|
expect(callback).not.toHaveBeenCalled()
|
|
21
21
|
})
|
|
22
22
|
|
|
23
|
-
it(
|
|
23
|
+
it('fires when source changes', () => {
|
|
24
24
|
const callback = vi.fn()
|
|
25
25
|
const source = signal(1)
|
|
26
26
|
|
|
@@ -32,7 +32,7 @@ describe("useUpdateEffect", () => {
|
|
|
32
32
|
expect(callback).toHaveBeenCalledWith(2, 1)
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
it(
|
|
35
|
+
it('fires on each subsequent change', () => {
|
|
36
36
|
const callback = vi.fn()
|
|
37
37
|
const source = signal(1)
|
|
38
38
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { afterEach, beforeEach, describe, expect, it, vi } from
|
|
1
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
2
2
|
|
|
3
3
|
let mountCallbacks: Array<() => unknown> = []
|
|
4
4
|
let unmountCallbacks: Array<() => void> = []
|
|
5
5
|
|
|
6
|
-
vi.mock(
|
|
6
|
+
vi.mock('@pyreon/core', () => ({
|
|
7
7
|
onMount: (fn: () => unknown) => {
|
|
8
8
|
mountCallbacks.push(fn)
|
|
9
9
|
},
|
|
@@ -12,9 +12,9 @@ vi.mock("@pyreon/core", () => ({
|
|
|
12
12
|
},
|
|
13
13
|
}))
|
|
14
14
|
|
|
15
|
-
import { useWindowResize } from
|
|
15
|
+
import { useWindowResize } from '../useWindowResize'
|
|
16
16
|
|
|
17
|
-
describe(
|
|
17
|
+
describe('useWindowResize', () => {
|
|
18
18
|
const originalInnerWidth = window.innerWidth
|
|
19
19
|
const originalInnerHeight = window.innerHeight
|
|
20
20
|
|
|
@@ -26,22 +26,22 @@ describe("useWindowResize", () => {
|
|
|
26
26
|
|
|
27
27
|
afterEach(() => {
|
|
28
28
|
vi.useRealTimers()
|
|
29
|
-
Object.defineProperty(window,
|
|
30
|
-
Object.defineProperty(window,
|
|
29
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: originalInnerWidth })
|
|
30
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: originalInnerHeight })
|
|
31
31
|
})
|
|
32
32
|
|
|
33
|
-
it(
|
|
34
|
-
Object.defineProperty(window,
|
|
35
|
-
Object.defineProperty(window,
|
|
33
|
+
it('returns initial window dimensions', () => {
|
|
34
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
|
|
35
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
|
|
36
36
|
|
|
37
37
|
const size = useWindowResize()
|
|
38
38
|
expect(size().width).toBe(1024)
|
|
39
39
|
expect(size().height).toBe(768)
|
|
40
40
|
})
|
|
41
41
|
|
|
42
|
-
it(
|
|
43
|
-
Object.defineProperty(window,
|
|
44
|
-
Object.defineProperty(window,
|
|
42
|
+
it('updates dimensions after resize with throttle', () => {
|
|
43
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
|
|
44
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
|
|
45
45
|
|
|
46
46
|
const size = useWindowResize(200)
|
|
47
47
|
mountCallbacks.forEach((cb) => {
|
|
@@ -49,9 +49,9 @@ describe("useWindowResize", () => {
|
|
|
49
49
|
})
|
|
50
50
|
|
|
51
51
|
// Simulate resize
|
|
52
|
-
Object.defineProperty(window,
|
|
53
|
-
Object.defineProperty(window,
|
|
54
|
-
window.dispatchEvent(new Event(
|
|
52
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
|
|
53
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 600 })
|
|
54
|
+
window.dispatchEvent(new Event('resize'))
|
|
55
55
|
|
|
56
56
|
// Should not update immediately
|
|
57
57
|
expect(size().width).toBe(1024)
|
|
@@ -62,9 +62,9 @@ describe("useWindowResize", () => {
|
|
|
62
62
|
expect(size().height).toBe(600)
|
|
63
63
|
})
|
|
64
64
|
|
|
65
|
-
it(
|
|
66
|
-
Object.defineProperty(window,
|
|
67
|
-
Object.defineProperty(window,
|
|
65
|
+
it('throttles rapid resize events', () => {
|
|
66
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
|
|
67
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
|
|
68
68
|
|
|
69
69
|
const size = useWindowResize(100)
|
|
70
70
|
mountCallbacks.forEach((cb) => {
|
|
@@ -72,12 +72,12 @@ describe("useWindowResize", () => {
|
|
|
72
72
|
})
|
|
73
73
|
|
|
74
74
|
// First resize triggers timer
|
|
75
|
-
window.dispatchEvent(new Event(
|
|
75
|
+
window.dispatchEvent(new Event('resize'))
|
|
76
76
|
|
|
77
77
|
// Second resize within throttle window should be ignored
|
|
78
|
-
Object.defineProperty(window,
|
|
79
|
-
Object.defineProperty(window,
|
|
80
|
-
window.dispatchEvent(new Event(
|
|
78
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 500 })
|
|
79
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 400 })
|
|
80
|
+
window.dispatchEvent(new Event('resize'))
|
|
81
81
|
|
|
82
82
|
// After throttle, should use current window dimensions
|
|
83
83
|
vi.advanceTimersByTime(100)
|
|
@@ -85,17 +85,17 @@ describe("useWindowResize", () => {
|
|
|
85
85
|
expect(size().height).toBe(400)
|
|
86
86
|
})
|
|
87
87
|
|
|
88
|
-
it(
|
|
89
|
-
Object.defineProperty(window,
|
|
90
|
-
Object.defineProperty(window,
|
|
88
|
+
it('uses default throttle of 200ms', () => {
|
|
89
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
|
|
90
|
+
Object.defineProperty(window, 'innerHeight', { writable: true, value: 768 })
|
|
91
91
|
|
|
92
92
|
const size = useWindowResize()
|
|
93
93
|
mountCallbacks.forEach((cb) => {
|
|
94
94
|
cb()
|
|
95
95
|
})
|
|
96
96
|
|
|
97
|
-
Object.defineProperty(window,
|
|
98
|
-
window.dispatchEvent(new Event(
|
|
97
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 800 })
|
|
98
|
+
window.dispatchEvent(new Event('resize'))
|
|
99
99
|
|
|
100
100
|
vi.advanceTimersByTime(100)
|
|
101
101
|
expect(size().width).toBe(1024) // Still throttled
|
|
@@ -104,8 +104,8 @@ describe("useWindowResize", () => {
|
|
|
104
104
|
expect(size().width).toBe(800) // Now updated
|
|
105
105
|
})
|
|
106
106
|
|
|
107
|
-
it(
|
|
108
|
-
const removeSpy = vi.spyOn(window,
|
|
107
|
+
it('cleans up on unmount', () => {
|
|
108
|
+
const removeSpy = vi.spyOn(window, 'removeEventListener')
|
|
109
109
|
useWindowResize()
|
|
110
110
|
mountCallbacks.forEach((cb) => {
|
|
111
111
|
cb()
|
|
@@ -114,13 +114,13 @@ describe("useWindowResize", () => {
|
|
|
114
114
|
cb()
|
|
115
115
|
})
|
|
116
116
|
|
|
117
|
-
expect(removeSpy).toHaveBeenCalledWith(
|
|
117
|
+
expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
|
|
118
118
|
removeSpy.mockRestore()
|
|
119
119
|
})
|
|
120
120
|
|
|
121
|
-
it(
|
|
122
|
-
const clearTimeoutSpy = vi.spyOn(globalThis,
|
|
123
|
-
Object.defineProperty(window,
|
|
121
|
+
it('clears pending timer on unmount', () => {
|
|
122
|
+
const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout')
|
|
123
|
+
Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 })
|
|
124
124
|
|
|
125
125
|
useWindowResize(200)
|
|
126
126
|
mountCallbacks.forEach((cb) => {
|
|
@@ -128,7 +128,7 @@ describe("useWindowResize", () => {
|
|
|
128
128
|
})
|
|
129
129
|
|
|
130
130
|
// Trigger a resize to start the timer
|
|
131
|
-
window.dispatchEvent(new Event(
|
|
131
|
+
window.dispatchEvent(new Event('resize'))
|
|
132
132
|
|
|
133
133
|
unmountCallbacks.forEach((cb) => {
|
|
134
134
|
cb()
|
package/src/index.ts
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
export type { BreakpointMap } from
|
|
2
|
-
export { useBreakpoint } from
|
|
3
|
-
export { useClickOutside } from
|
|
4
|
-
export type { UseClipboardResult } from
|
|
5
|
-
export { useClipboard } from
|
|
6
|
-
export { useColorScheme } from
|
|
7
|
-
export type { UseControllableState } from
|
|
8
|
-
export { useControllableState } from
|
|
9
|
-
export type { UseDebouncedCallback } from
|
|
10
|
-
export { useDebouncedCallback } from
|
|
11
|
-
export { useDebouncedValue } from
|
|
12
|
-
export type { UseDialogResult } from
|
|
13
|
-
export { useDialog } from
|
|
14
|
-
export type { Size } from
|
|
15
|
-
export { useElementSize } from
|
|
16
|
-
export { useEventListener } from
|
|
17
|
-
export type { UseFocusResult } from
|
|
18
|
-
export { useFocus } from
|
|
19
|
-
export { useFocusTrap } from
|
|
20
|
-
export type { UseHoverResult } from
|
|
21
|
-
export { useHover } from
|
|
22
|
-
export type { UseInfiniteScrollOptions, UseInfiniteScrollResult } from
|
|
23
|
-
export { useInfiniteScroll } from
|
|
24
|
-
export { useIntersection } from
|
|
25
|
-
export type { UseInterval } from
|
|
26
|
-
export { useInterval } from
|
|
27
|
-
export type { UseIsomorphicLayoutEffect } from
|
|
28
|
-
export { default as useIsomorphicLayoutEffect } from
|
|
29
|
-
export { useKeyboard } from
|
|
30
|
-
export type { UseLatest } from
|
|
31
|
-
export { useLatest } from
|
|
32
|
-
export { useMediaQuery } from
|
|
33
|
-
export type { UseMergedRef } from
|
|
34
|
-
export { useMergedRef } from
|
|
35
|
-
export { useOnline } from
|
|
36
|
-
export { usePrevious } from
|
|
37
|
-
export { useReducedMotion } from
|
|
38
|
-
export type { UseRootSize } from
|
|
39
|
-
export { useRootSize } from
|
|
40
|
-
export { useScrollLock } from
|
|
41
|
-
export type { UseSpacing } from
|
|
42
|
-
export { useSpacing } from
|
|
43
|
-
export type { UseThemeValue } from
|
|
44
|
-
export { useThemeValue } from
|
|
45
|
-
export type { UseThrottledCallback } from
|
|
46
|
-
export { useThrottledCallback } from
|
|
47
|
-
export type { UseTimeAgoOptions } from
|
|
48
|
-
export { useTimeAgo } from
|
|
49
|
-
export type { UseTimeout } from
|
|
50
|
-
export { useTimeout } from
|
|
51
|
-
export type { UseToggleResult } from
|
|
52
|
-
export { useToggle } from
|
|
53
|
-
export type { UseUpdateEffect } from
|
|
54
|
-
export { useUpdateEffect } from
|
|
55
|
-
export type { WindowSize } from
|
|
56
|
-
export { useWindowResize } from
|
|
1
|
+
export type { BreakpointMap } from './useBreakpoint'
|
|
2
|
+
export { useBreakpoint } from './useBreakpoint'
|
|
3
|
+
export { useClickOutside } from './useClickOutside'
|
|
4
|
+
export type { UseClipboardResult } from './useClipboard'
|
|
5
|
+
export { useClipboard } from './useClipboard'
|
|
6
|
+
export { useColorScheme } from './useColorScheme'
|
|
7
|
+
export type { UseControllableState } from './useControllableState'
|
|
8
|
+
export { useControllableState } from './useControllableState'
|
|
9
|
+
export type { UseDebouncedCallback } from './useDebouncedCallback'
|
|
10
|
+
export { useDebouncedCallback } from './useDebouncedCallback'
|
|
11
|
+
export { useDebouncedValue } from './useDebouncedValue'
|
|
12
|
+
export type { UseDialogResult } from './useDialog'
|
|
13
|
+
export { useDialog } from './useDialog'
|
|
14
|
+
export type { Size } from './useElementSize'
|
|
15
|
+
export { useElementSize } from './useElementSize'
|
|
16
|
+
export { useEventListener } from './useEventListener'
|
|
17
|
+
export type { UseFocusResult } from './useFocus'
|
|
18
|
+
export { useFocus } from './useFocus'
|
|
19
|
+
export { useFocusTrap } from './useFocusTrap'
|
|
20
|
+
export type { UseHoverResult } from './useHover'
|
|
21
|
+
export { useHover } from './useHover'
|
|
22
|
+
export type { UseInfiniteScrollOptions, UseInfiniteScrollResult } from './useInfiniteScroll'
|
|
23
|
+
export { useInfiniteScroll } from './useInfiniteScroll'
|
|
24
|
+
export { useIntersection } from './useIntersection'
|
|
25
|
+
export type { UseInterval } from './useInterval'
|
|
26
|
+
export { useInterval } from './useInterval'
|
|
27
|
+
export type { UseIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
|
|
28
|
+
export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
|
|
29
|
+
export { useKeyboard } from './useKeyboard'
|
|
30
|
+
export type { UseLatest } from './useLatest'
|
|
31
|
+
export { useLatest } from './useLatest'
|
|
32
|
+
export { useMediaQuery } from './useMediaQuery'
|
|
33
|
+
export type { UseMergedRef } from './useMergedRef'
|
|
34
|
+
export { useMergedRef } from './useMergedRef'
|
|
35
|
+
export { useOnline } from './useOnline'
|
|
36
|
+
export { usePrevious } from './usePrevious'
|
|
37
|
+
export { useReducedMotion } from './useReducedMotion'
|
|
38
|
+
export type { UseRootSize } from './useRootSize'
|
|
39
|
+
export { useRootSize } from './useRootSize'
|
|
40
|
+
export { useScrollLock } from './useScrollLock'
|
|
41
|
+
export type { UseSpacing } from './useSpacing'
|
|
42
|
+
export { useSpacing } from './useSpacing'
|
|
43
|
+
export type { UseThemeValue } from './useThemeValue'
|
|
44
|
+
export { useThemeValue } from './useThemeValue'
|
|
45
|
+
export type { UseThrottledCallback } from './useThrottledCallback'
|
|
46
|
+
export { useThrottledCallback } from './useThrottledCallback'
|
|
47
|
+
export type { UseTimeAgoOptions } from './useTimeAgo'
|
|
48
|
+
export { useTimeAgo } from './useTimeAgo'
|
|
49
|
+
export type { UseTimeout } from './useTimeout'
|
|
50
|
+
export { useTimeout } from './useTimeout'
|
|
51
|
+
export type { UseToggleResult } from './useToggle'
|
|
52
|
+
export { useToggle } from './useToggle'
|
|
53
|
+
export type { UseUpdateEffect } from './useUpdateEffect'
|
|
54
|
+
export { useUpdateEffect } from './useUpdateEffect'
|
|
55
|
+
export type { WindowSize } from './useWindowResize'
|
|
56
|
+
export { useWindowResize } from './useWindowResize'
|
package/src/useBreakpoint.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { onMount, onUnmount } from
|
|
2
|
-
import { signal } from
|
|
1
|
+
import { onMount, onUnmount } from '@pyreon/core'
|
|
2
|
+
import { signal } from '@pyreon/reactivity'
|
|
3
3
|
|
|
4
4
|
export type BreakpointMap = Record<string, number>
|
|
5
5
|
|
|
@@ -20,9 +20,9 @@ export function useBreakpoint(breakpoints: BreakpointMap = defaultBreakpoints):
|
|
|
20
20
|
let rafId: number | undefined
|
|
21
21
|
|
|
22
22
|
function getActive(bps: [string, number][]): string {
|
|
23
|
-
if (typeof window ===
|
|
23
|
+
if (typeof window === 'undefined') return bps[0]?.[0] ?? ''
|
|
24
24
|
const w = window.innerWidth
|
|
25
|
-
let result = bps[0]?.[0] ??
|
|
25
|
+
let result = bps[0]?.[0] ?? ''
|
|
26
26
|
for (const [name, min] of bps) {
|
|
27
27
|
if (w >= min) result = name
|
|
28
28
|
else break
|
|
@@ -39,12 +39,12 @@ export function useBreakpoint(breakpoints: BreakpointMap = defaultBreakpoints):
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
onMount(() => {
|
|
42
|
-
window.addEventListener(
|
|
42
|
+
window.addEventListener('resize', onResize)
|
|
43
43
|
return undefined
|
|
44
44
|
})
|
|
45
45
|
|
|
46
46
|
onUnmount(() => {
|
|
47
|
-
window.removeEventListener(
|
|
47
|
+
window.removeEventListener('resize', onResize)
|
|
48
48
|
if (rafId !== undefined) cancelAnimationFrame(rafId)
|
|
49
49
|
})
|
|
50
50
|
|
package/src/useClickOutside.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { onMount, onUnmount } from
|
|
1
|
+
import { onMount, onUnmount } from '@pyreon/core'
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Call handler when a click occurs outside the target element.
|
|
@@ -11,13 +11,13 @@ export function useClickOutside(getEl: () => HTMLElement | null, handler: () =>
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
onMount(() => {
|
|
14
|
-
document.addEventListener(
|
|
15
|
-
document.addEventListener(
|
|
14
|
+
document.addEventListener('mousedown', listener, true)
|
|
15
|
+
document.addEventListener('touchstart', listener, true)
|
|
16
16
|
return undefined
|
|
17
17
|
})
|
|
18
18
|
|
|
19
19
|
onUnmount(() => {
|
|
20
|
-
document.removeEventListener(
|
|
21
|
-
document.removeEventListener(
|
|
20
|
+
document.removeEventListener('mousedown', listener, true)
|
|
21
|
+
document.removeEventListener('touchstart', listener, true)
|
|
22
22
|
})
|
|
23
23
|
}
|
package/src/useClipboard.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { onCleanup, signal } from
|
|
1
|
+
import { onCleanup, signal } from '@pyreon/reactivity'
|
|
2
2
|
|
|
3
3
|
export interface UseClipboardResult {
|
|
4
4
|
/** Copy text to clipboard. Returns true on success. */
|
|
@@ -26,7 +26,7 @@ export interface UseClipboardResult {
|
|
|
26
26
|
export function useClipboard(options?: { timeout?: number }): UseClipboardResult {
|
|
27
27
|
const timeout = options?.timeout ?? 2000
|
|
28
28
|
const copied = signal(false)
|
|
29
|
-
const text = signal(
|
|
29
|
+
const text = signal('')
|
|
30
30
|
let timer: ReturnType<typeof setTimeout> | undefined
|
|
31
31
|
|
|
32
32
|
const copy = async (value: string): Promise<boolean> => {
|
package/src/useColorScheme.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { computed } from
|
|
2
|
-
import { useMediaQuery } from
|
|
1
|
+
import { computed } from '@pyreon/reactivity'
|
|
2
|
+
import { useMediaQuery } from './useMediaQuery'
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Returns the OS color scheme preference as 'light' or 'dark'.
|
|
6
6
|
*/
|
|
7
|
-
export function useColorScheme(): () =>
|
|
8
|
-
const prefersDark = useMediaQuery(
|
|
9
|
-
return computed(() => (prefersDark() ?
|
|
7
|
+
export function useColorScheme(): () => 'light' | 'dark' {
|
|
8
|
+
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
|
|
9
|
+
return computed(() => (prefersDark() ? 'dark' : 'light'))
|
|
10
10
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { signal } from
|
|
1
|
+
import { signal } from '@pyreon/reactivity'
|
|
2
2
|
|
|
3
3
|
type UseControllableStateOptions<T> = {
|
|
4
4
|
value?: T | undefined
|
|
@@ -28,7 +28,7 @@ export const useControllableState: UseControllableState = ({ value, defaultValue
|
|
|
28
28
|
|
|
29
29
|
const setValue = (next: any) => {
|
|
30
30
|
const current = isControlled ? value : internal()
|
|
31
|
-
const nextValue = typeof next ===
|
|
31
|
+
const nextValue = typeof next === 'function' ? next(current) : next
|
|
32
32
|
if (!isControlled) internal.set(nextValue)
|
|
33
33
|
onChangeFn?.(nextValue)
|
|
34
34
|
}
|
package/src/useDebouncedValue.ts
CHANGED