@react-xp/aeiou 0.1.0-beta.4 → 0.1.0-beta.5

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 (19) hide show
  1. package/dist/cjs/hooks/useInteractiveState/useInteractiveState.native.js +18 -58
  2. package/dist/cjs/hooks/useInteractiveState/useInteractiveState.web.js +33 -42
  3. package/dist/esm/hooks/useInteractiveState/useInteractiveState.native.js +19 -59
  4. package/dist/esm/hooks/useInteractiveState/useInteractiveState.web.js +34 -43
  5. package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.native.js +18 -58
  6. package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.web.js +33 -42
  7. package/dist/native/esm/hooks/useInteractiveState/useInteractiveState.native.js +19 -59
  8. package/dist/native/esm/hooks/useInteractiveState/useInteractiveState.web.js +34 -43
  9. package/dist/native/tsconfig.native.cjs.tsbuildinfo +1 -1
  10. package/dist/native/tsconfig.native.esm.tsbuildinfo +1 -1
  11. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  12. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  13. package/dist/types/hooks/useInteractiveState/useInteractiveState.native.d.ts +14 -2
  14. package/dist/types/hooks/useInteractiveState/useInteractiveState.native.d.ts.map +1 -1
  15. package/dist/types/hooks/useInteractiveState/useInteractiveState.types.d.ts +3 -9
  16. package/dist/types/hooks/useInteractiveState/useInteractiveState.types.d.ts.map +1 -1
  17. package/dist/types/hooks/useInteractiveState/useInteractiveState.web.d.ts +20 -2
  18. package/dist/types/hooks/useInteractiveState/useInteractiveState.web.d.ts.map +1 -1
  19. package/package.json +1 -1
package/dist/cjs/hooks/useInteractiveState/useInteractiveState.native.js CHANGED
@@ -2,70 +2,30 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useInteractiveState = useInteractiveState;
4
4
  const react_1 = require("react");
5
- function computeVisualState(state) {
6
- if (state.disabled)
7
- return 'disabled';
8
- if (state.pressed)
9
- return 'pressed';
10
- if (state.hovered)
11
- return 'hovered';
12
- if (state.focused)
13
- return 'focused';
14
- return 'default';
15
- }
16
- function toDataAttrs(state) {
17
- const visual = computeVisualState(state);
18
- return {
19
- 'data-state': visual,
20
- 'data-hovered': String(state.hovered),
21
- 'data-pressed': String(state.pressed),
22
- 'data-focused': String(state.focused),
23
- 'data-disabled': String(state.disabled),
24
- };
25
- }
26
5
  function useInteractiveState(options = {}) {
27
- const { disabled = false } = options;
28
- const [state, setState] = (0, react_1.useState)({
29
- hovered: false,
30
- pressed: false,
31
- focused: false,
32
- disabled,
33
- });
34
- (0, react_1.useEffect)(() => {
35
- setState((prev) => ({ ...prev, disabled }));
36
- }, [disabled]);
37
- const eventHandlers = (0, react_1.useMemo)(() => ({
38
- onMouseEnter: () => {
39
- if (disabled)
40
- return;
41
- setState((prev) => ({ ...prev, hovered: true }));
42
- },
43
- onMouseLeave: () => {
44
- if (disabled)
45
- return;
46
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
47
- },
48
- onMouseDown: () => {
49
- if (disabled)
50
- return;
51
- setState((prev) => ({ ...prev, pressed: true }));
52
- },
53
- onMouseUp: () => {
54
- if (disabled)
55
- return;
56
- setState((prev) => ({ ...prev, pressed: false }));
57
- },
58
- onFocus: () => {
6
+ const { disabled } = options;
7
+ const [pressed, setPressed] = (0, react_1.useState)(false);
8
+ const state = disabled
9
+ ? 'disabled'
10
+ : pressed
11
+ ? 'pressed'
12
+ : 'idle';
13
+ const dataAttrs = {
14
+ 'data-state': state,
15
+ 'data-pressed': pressed ? 'true' : 'false',
16
+ 'data-disabled': disabled ? 'true' : 'false',
17
+ };
18
+ const eventHandlers = {
19
+ onPressIn: (e) => {
59
20
  if (disabled)
60
21
  return;
61
- setState((prev) => ({ ...prev, focused: true }));
22
+ setPressed(true);
62
23
  },
63
- onBlur: () => {
24
+ onPressOut: (e) => {
64
25
  if (disabled)
65
26
  return;
66
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
27
+ setPressed(false);
67
28
  },
68
- }), [disabled]);
69
- const dataAttrs = toDataAttrs(state);
29
+ };
70
30
  return { state, dataAttrs, eventHandlers };
71
31
  }
package/dist/cjs/hooks/useInteractiveState/useInteractiveState.web.js CHANGED
@@ -2,70 +2,61 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useInteractiveState = useInteractiveState;
4
4
  const react_1 = require("react");
5
- function computeVisualState(state) {
6
- if (state.disabled)
7
- return 'disabled';
8
- if (state.pressed)
9
- return 'pressed';
10
- if (state.hovered)
11
- return 'hovered';
12
- if (state.focused)
13
- return 'focused';
14
- return 'default';
15
- }
16
- function toDataAttrs(state) {
17
- const visual = computeVisualState(state);
18
- return {
19
- 'data-state': visual,
20
- 'data-hovered': String(state.hovered),
21
- 'data-pressed': String(state.pressed),
22
- 'data-focused': String(state.focused),
23
- 'data-disabled': String(state.disabled),
24
- };
25
- }
26
5
  function useInteractiveState(options = {}) {
27
- const { disabled = false } = options;
28
- const [state, setState] = (0, react_1.useState)({
29
- hovered: false,
30
- pressed: false,
31
- focused: false,
32
- disabled,
33
- });
34
- (0, react_1.useEffect)(() => {
35
- setState((prev) => ({ ...prev, disabled }));
36
- }, [disabled]);
37
- const eventHandlers = (0, react_1.useMemo)(() => ({
6
+ const { disabled } = options;
7
+ const [hovered, setHovered] = (0, react_1.useState)(false);
8
+ const [pressed, setPressed] = (0, react_1.useState)(false);
9
+ const [focused, setFocused] = (0, react_1.useState)(false);
10
+ const state = disabled
11
+ ? 'disabled'
12
+ : pressed
13
+ ? 'pressed'
14
+ : hovered
15
+ ? 'hovered'
16
+ : focused
17
+ ? 'focused'
18
+ : 'idle';
19
+ const dataAttrs = {
20
+ 'data-state': state,
21
+ 'data-hovered': hovered ? 'true' : 'false',
22
+ 'data-pressed': pressed ? 'true' : 'false',
23
+ 'data-focused': focused ? 'true' : 'false',
24
+ 'data-disabled': disabled ? 'true' : 'false',
25
+ };
26
+ const eventHandlers = {
38
27
  onMouseEnter: () => {
39
28
  if (disabled)
40
29
  return;
41
- setState((prev) => ({ ...prev, hovered: true }));
30
+ setHovered(true);
42
31
  },
43
32
  onMouseLeave: () => {
44
33
  if (disabled)
45
34
  return;
46
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
35
+ setHovered(false);
36
+ setPressed(false);
47
37
  },
48
- onMouseDown: () => {
49
- if (disabled)
38
+ onMouseDown: (e) => {
39
+ if (disabled || e.button !== 0)
50
40
  return;
51
- setState((prev) => ({ ...prev, pressed: true }));
41
+ setPressed(true);
52
42
  },
53
43
  onMouseUp: () => {
54
44
  if (disabled)
55
45
  return;
56
- setState((prev) => ({ ...prev, pressed: false }));
46
+ setPressed(false);
57
47
  },
58
48
  onFocus: () => {
59
49
  if (disabled)
60
50
  return;
61
- setState((prev) => ({ ...prev, focused: true }));
51
+ setFocused(true);
62
52
  },
63
53
  onBlur: () => {
64
54
  if (disabled)
65
55
  return;
66
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
56
+ setFocused(false);
57
+ setPressed(false);
58
+ setHovered(false);
67
59
  },
68
- }), [disabled]);
69
- const dataAttrs = toDataAttrs(state);
60
+ };
70
61
  return { state, dataAttrs, eventHandlers };
71
62
  }
package/dist/esm/hooks/useInteractiveState/useInteractiveState.native.js CHANGED
@@ -1,68 +1,28 @@
1
- import { useEffect, useMemo, useState } from 'react';
2
- function computeVisualState(state) {
3
- if (state.disabled)
4
- return 'disabled';
5
- if (state.pressed)
6
- return 'pressed';
7
- if (state.hovered)
8
- return 'hovered';
9
- if (state.focused)
10
- return 'focused';
11
- return 'default';
12
- }
13
- function toDataAttrs(state) {
14
- const visual = computeVisualState(state);
15
- return {
16
- 'data-state': visual,
17
- 'data-hovered': String(state.hovered),
18
- 'data-pressed': String(state.pressed),
19
- 'data-focused': String(state.focused),
20
- 'data-disabled': String(state.disabled),
21
- };
22
- }
1
+ import { useState } from 'react';
23
2
  export function useInteractiveState(options = {}) {
24
- const { disabled = false } = options;
25
- const [state, setState] = useState({
26
- hovered: false,
27
- pressed: false,
28
- focused: false,
29
- disabled,
30
- });
31
- useEffect(() => {
32
- setState((prev) => ({ ...prev, disabled }));
33
- }, [disabled]);
34
- const eventHandlers = useMemo(() => ({
35
- onMouseEnter: () => {
36
- if (disabled)
37
- return;
38
- setState((prev) => ({ ...prev, hovered: true }));
39
- },
40
- onMouseLeave: () => {
41
- if (disabled)
42
- return;
43
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
44
- },
45
- onMouseDown: () => {
46
- if (disabled)
47
- return;
48
- setState((prev) => ({ ...prev, pressed: true }));
49
- },
50
- onMouseUp: () => {
51
- if (disabled)
52
- return;
53
- setState((prev) => ({ ...prev, pressed: false }));
54
- },
55
- onFocus: () => {
3
+ const { disabled } = options;
4
+ const [pressed, setPressed] = useState(false);
5
+ const state = disabled
6
+ ? 'disabled'
7
+ : pressed
8
+ ? 'pressed'
9
+ : 'idle';
10
+ const dataAttrs = {
11
+ 'data-state': state,
12
+ 'data-pressed': pressed ? 'true' : 'false',
13
+ 'data-disabled': disabled ? 'true' : 'false',
14
+ };
15
+ const eventHandlers = {
16
+ onPressIn: (e) => {
56
17
  if (disabled)
57
18
  return;
58
- setState((prev) => ({ ...prev, focused: true }));
19
+ setPressed(true);
59
20
  },
60
- onBlur: () => {
21
+ onPressOut: (e) => {
61
22
  if (disabled)
62
23
  return;
63
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
24
+ setPressed(false);
64
25
  },
65
- }), [disabled]);
66
- const dataAttrs = toDataAttrs(state);
26
+ };
67
27
  return { state, dataAttrs, eventHandlers };
68
28
  }
package/dist/esm/hooks/useInteractiveState/useInteractiveState.web.js CHANGED
@@ -1,68 +1,59 @@
1
- import { useEffect, useMemo, useState } from 'react';
2
- function computeVisualState(state) {
3
- if (state.disabled)
4
- return 'disabled';
5
- if (state.pressed)
6
- return 'pressed';
7
- if (state.hovered)
8
- return 'hovered';
9
- if (state.focused)
10
- return 'focused';
11
- return 'default';
12
- }
13
- function toDataAttrs(state) {
14
- const visual = computeVisualState(state);
15
- return {
16
- 'data-state': visual,
17
- 'data-hovered': String(state.hovered),
18
- 'data-pressed': String(state.pressed),
19
- 'data-focused': String(state.focused),
20
- 'data-disabled': String(state.disabled),
21
- };
22
- }
1
+ import { useState } from 'react';
23
2
  export function useInteractiveState(options = {}) {
24
- const { disabled = false } = options;
25
- const [state, setState] = useState({
26
- hovered: false,
27
- pressed: false,
28
- focused: false,
29
- disabled,
30
- });
31
- useEffect(() => {
32
- setState((prev) => ({ ...prev, disabled }));
33
- }, [disabled]);
34
- const eventHandlers = useMemo(() => ({
3
+ const { disabled } = options;
4
+ const [hovered, setHovered] = useState(false);
5
+ const [pressed, setPressed] = useState(false);
6
+ const [focused, setFocused] = useState(false);
7
+ const state = disabled
8
+ ? 'disabled'
9
+ : pressed
10
+ ? 'pressed'
11
+ : hovered
12
+ ? 'hovered'
13
+ : focused
14
+ ? 'focused'
15
+ : 'idle';
16
+ const dataAttrs = {
17
+ 'data-state': state,
18
+ 'data-hovered': hovered ? 'true' : 'false',
19
+ 'data-pressed': pressed ? 'true' : 'false',
20
+ 'data-focused': focused ? 'true' : 'false',
21
+ 'data-disabled': disabled ? 'true' : 'false',
22
+ };
23
+ const eventHandlers = {
35
24
  onMouseEnter: () => {
36
25
  if (disabled)
37
26
  return;
38
- setState((prev) => ({ ...prev, hovered: true }));
27
+ setHovered(true);
39
28
  },
40
29
  onMouseLeave: () => {
41
30
  if (disabled)
42
31
  return;
43
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
32
+ setHovered(false);
33
+ setPressed(false);
44
34
  },
45
- onMouseDown: () => {
46
- if (disabled)
35
+ onMouseDown: (e) => {
36
+ if (disabled || e.button !== 0)
47
37
  return;
48
- setState((prev) => ({ ...prev, pressed: true }));
38
+ setPressed(true);
49
39
  },
50
40
  onMouseUp: () => {
51
41
  if (disabled)
52
42
  return;
53
- setState((prev) => ({ ...prev, pressed: false }));
43
+ setPressed(false);
54
44
  },
55
45
  onFocus: () => {
56
46
  if (disabled)
57
47
  return;
58
- setState((prev) => ({ ...prev, focused: true }));
48
+ setFocused(true);
59
49
  },
60
50
  onBlur: () => {
61
51
  if (disabled)
62
52
  return;
63
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
53
+ setFocused(false);
54
+ setPressed(false);
55
+ setHovered(false);
64
56
  },
65
- }), [disabled]);
66
- const dataAttrs = toDataAttrs(state);
57
+ };
67
58
  return { state, dataAttrs, eventHandlers };
68
59
  }
package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.native.js CHANGED
@@ -2,70 +2,30 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useInteractiveState = useInteractiveState;
4
4
  const react_1 = require("react");
5
- function computeVisualState(state) {
6
- if (state.disabled)
7
- return 'disabled';
8
- if (state.pressed)
9
- return 'pressed';
10
- if (state.hovered)
11
- return 'hovered';
12
- if (state.focused)
13
- return 'focused';
14
- return 'default';
15
- }
16
- function toDataAttrs(state) {
17
- const visual = computeVisualState(state);
18
- return {
19
- 'data-state': visual,
20
- 'data-hovered': String(state.hovered),
21
- 'data-pressed': String(state.pressed),
22
- 'data-focused': String(state.focused),
23
- 'data-disabled': String(state.disabled),
24
- };
25
- }
26
5
  function useInteractiveState(options = {}) {
27
- const { disabled = false } = options;
28
- const [state, setState] = (0, react_1.useState)({
29
- hovered: false,
30
- pressed: false,
31
- focused: false,
32
- disabled,
33
- });
34
- (0, react_1.useEffect)(() => {
35
- setState((prev) => ({ ...prev, disabled }));
36
- }, [disabled]);
37
- const eventHandlers = (0, react_1.useMemo)(() => ({
38
- onMouseEnter: () => {
39
- if (disabled)
40
- return;
41
- setState((prev) => ({ ...prev, hovered: true }));
42
- },
43
- onMouseLeave: () => {
44
- if (disabled)
45
- return;
46
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
47
- },
48
- onMouseDown: () => {
49
- if (disabled)
50
- return;
51
- setState((prev) => ({ ...prev, pressed: true }));
52
- },
53
- onMouseUp: () => {
54
- if (disabled)
55
- return;
56
- setState((prev) => ({ ...prev, pressed: false }));
57
- },
58
- onFocus: () => {
6
+ const { disabled } = options;
7
+ const [pressed, setPressed] = (0, react_1.useState)(false);
8
+ const state = disabled
9
+ ? 'disabled'
10
+ : pressed
11
+ ? 'pressed'
12
+ : 'idle';
13
+ const dataAttrs = {
14
+ 'data-state': state,
15
+ 'data-pressed': pressed ? 'true' : 'false',
16
+ 'data-disabled': disabled ? 'true' : 'false',
17
+ };
18
+ const eventHandlers = {
19
+ onPressIn: (e) => {
59
20
  if (disabled)
60
21
  return;
61
- setState((prev) => ({ ...prev, focused: true }));
22
+ setPressed(true);
62
23
  },
63
- onBlur: () => {
24
+ onPressOut: (e) => {
64
25
  if (disabled)
65
26
  return;
66
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
27
+ setPressed(false);
67
28
  },
68
- }), [disabled]);
69
- const dataAttrs = toDataAttrs(state);
29
+ };
70
30
  return { state, dataAttrs, eventHandlers };
71
31
  }
package/dist/native/cjs/hooks/useInteractiveState/useInteractiveState.web.js CHANGED
@@ -2,70 +2,61 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useInteractiveState = useInteractiveState;
4
4
  const react_1 = require("react");
5
- function computeVisualState(state) {
6
- if (state.disabled)
7
- return 'disabled';
8
- if (state.pressed)
9
- return 'pressed';
10
- if (state.hovered)
11
- return 'hovered';
12
- if (state.focused)
13
- return 'focused';
14
- return 'default';
15
- }
16
- function toDataAttrs(state) {
17
- const visual = computeVisualState(state);
18
- return {
19
- 'data-state': visual,
20
- 'data-hovered': String(state.hovered),
21
- 'data-pressed': String(state.pressed),
22
- 'data-focused': String(state.focused),
23
- 'data-disabled': String(state.disabled),
24
- };
25
- }
26
5
  function useInteractiveState(options = {}) {
27
- const { disabled = false } = options;
28
- const [state, setState] = (0, react_1.useState)({
29
- hovered: false,
30
- pressed: false,
31
- focused: false,
32
- disabled,
33
- });
34
- (0, react_1.useEffect)(() => {
35
- setState((prev) => ({ ...prev, disabled }));
36
- }, [disabled]);
37
- const eventHandlers = (0, react_1.useMemo)(() => ({
6
+ const { disabled } = options;
7
+ const [hovered, setHovered] = (0, react_1.useState)(false);
8
+ const [pressed, setPressed] = (0, react_1.useState)(false);
9
+ const [focused, setFocused] = (0, react_1.useState)(false);
10
+ const state = disabled
11
+ ? 'disabled'
12
+ : pressed
13
+ ? 'pressed'
14
+ : hovered
15
+ ? 'hovered'
16
+ : focused
17
+ ? 'focused'
18
+ : 'idle';
19
+ const dataAttrs = {
20
+ 'data-state': state,
21
+ 'data-hovered': hovered ? 'true' : 'false',
22
+ 'data-pressed': pressed ? 'true' : 'false',
23
+ 'data-focused': focused ? 'true' : 'false',
24
+ 'data-disabled': disabled ? 'true' : 'false',
25
+ };
26
+ const eventHandlers = {
38
27
  onMouseEnter: () => {
39
28
  if (disabled)
40
29
  return;
41
- setState((prev) => ({ ...prev, hovered: true }));
30
+ setHovered(true);
42
31
  },
43
32
  onMouseLeave: () => {
44
33
  if (disabled)
45
34
  return;
46
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
35
+ setHovered(false);
36
+ setPressed(false);
47
37
  },
48
- onMouseDown: () => {
49
- if (disabled)
38
+ onMouseDown: (e) => {
39
+ if (disabled || e.button !== 0)
50
40
  return;
51
- setState((prev) => ({ ...prev, pressed: true }));
41
+ setPressed(true);
52
42
  },
53
43
  onMouseUp: () => {
54
44
  if (disabled)
55
45
  return;
56
- setState((prev) => ({ ...prev, pressed: false }));
46
+ setPressed(false);
57
47
  },
58
48
  onFocus: () => {
59
49
  if (disabled)
60
50
  return;
61
- setState((prev) => ({ ...prev, focused: true }));
51
+ setFocused(true);
62
52
  },
63
53
  onBlur: () => {
64
54
  if (disabled)
65
55
  return;
66
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
56
+ setFocused(false);
57
+ setPressed(false);
58
+ setHovered(false);
67
59
  },
68
- }), [disabled]);
69
- const dataAttrs = toDataAttrs(state);
60
+ };
70
61
  return { state, dataAttrs, eventHandlers };
71
62
  }
package/dist/native/esm/hooks/useInteractiveState/useInteractiveState.native.js CHANGED
@@ -1,68 +1,28 @@
1
- import { useEffect, useMemo, useState } from 'react';
2
- function computeVisualState(state) {
3
- if (state.disabled)
4
- return 'disabled';
5
- if (state.pressed)
6
- return 'pressed';
7
- if (state.hovered)
8
- return 'hovered';
9
- if (state.focused)
10
- return 'focused';
11
- return 'default';
12
- }
13
- function toDataAttrs(state) {
14
- const visual = computeVisualState(state);
15
- return {
16
- 'data-state': visual,
17
- 'data-hovered': String(state.hovered),
18
- 'data-pressed': String(state.pressed),
19
- 'data-focused': String(state.focused),
20
- 'data-disabled': String(state.disabled),
21
- };
22
- }
1
+ import { useState } from 'react';
23
2
  export function useInteractiveState(options = {}) {
24
- const { disabled = false } = options;
25
- const [state, setState] = useState({
26
- hovered: false,
27
- pressed: false,
28
- focused: false,
29
- disabled,
30
- });
31
- useEffect(() => {
32
- setState((prev) => ({ ...prev, disabled }));
33
- }, [disabled]);
34
- const eventHandlers = useMemo(() => ({
35
- onMouseEnter: () => {
36
- if (disabled)
37
- return;
38
- setState((prev) => ({ ...prev, hovered: true }));
39
- },
40
- onMouseLeave: () => {
41
- if (disabled)
42
- return;
43
- setState((prev) => ({ ...prev, hovered: false, pressed: false }));
44
- },
45
- onMouseDown: () => {
46
- if (disabled)
47
- return;
48
- setState((prev) => ({ ...prev, pressed: true }));
49
- },
50
- onMouseUp: () => {
51
- if (disabled)
52
- return;
53
- setState((prev) => ({ ...prev, pressed: false }));
54
- },
55
- onFocus: () => {
3
+ const { disabled } = options;
4
+ const [pressed, setPressed] = useState(false);
5
+ const state = disabled
6
+ ? 'disabled'
7
+ : pressed
8
+ ? 'pressed'
9
+ : 'idle';
10
+ const dataAttrs = {
11
+ 'data-state': state,
12
+ 'data-pressed': pressed ? 'true' : 'false',
13
+ 'data-disabled': disabled ? 'true' : 'false',
14
+ };
15
+ const eventHandlers = {
16
+ onPressIn: (e) => {
56
17
  if (disabled)
57
18
  return;
58
- setState((prev) => ({ ...prev, focused: true }));
19
+ setPressed(true);
59
20
  },
60
- onBlur: () => {
21
+ onPressOut: (e) => {
61
22
  if (disabled)
62
23
  return;
63
- setState((prev) => ({ ...prev, focused: false, pressed: false }));
24
+ setPressed(false);
64
25
  },
65
- }), [disabled]);
66
- const dataAttrs = toDataAttrs(state);
26
+ };
67
27
  return { state, dataAttrs, eventHandlers };
68
28
  }