@basic-ui/core 0.0.32 → 0.0.33
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/build/cjs/index.js +53 -57
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Tooltip/stateMachine.d.ts +17 -19
- package/build/esm/Tooltip/stateMachine.js +45 -49
- package/build/esm/Tooltip/stateMachine.js.map +1 -1
- package/build/esm/Tooltip/useTooltip.js +9 -9
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +380 -85
- package/package.json +3 -4
- package/src/Tooltip/Tooltip.story.tsx +17 -1
- package/src/Tooltip/stateMachine.ts +69 -58
- package/src/Tooltip/styles.css +17 -0
- package/src/Tooltip/useTooltip.ts +18 -11
|
@@ -9,7 +9,7 @@ let restTimeout;
|
|
|
9
9
|
function startRestTimer() {
|
|
10
10
|
window.clearTimeout(restTimeout);
|
|
11
11
|
restTimeout = window.setTimeout(() => {
|
|
12
|
-
send(
|
|
12
|
+
send(Rest, undefined);
|
|
13
13
|
}, 200);
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -22,7 +22,7 @@ let leavingVisibleTimer;
|
|
|
22
22
|
|
|
23
23
|
function startLeavingVisibleTimer() {
|
|
24
24
|
window.clearTimeout(leavingVisibleTimer);
|
|
25
|
-
leavingVisibleTimer = window.setTimeout(() => send(
|
|
25
|
+
leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
function clearLeavingVisibleTimer() {
|
|
@@ -31,35 +31,31 @@ function clearLeavingVisibleTimer() {
|
|
|
31
31
|
// State machine
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
// Nothing goin' on
|
|
35
|
+
export const Idle = 'IDLE'; // We're considering showing the tooltip, but we're gonna wait a sec
|
|
35
36
|
|
|
36
|
-
|
|
37
|
-
TooltipStates["Idle"] = "IDLE";
|
|
38
|
-
TooltipStates["Focused"] = "FOCUSED";
|
|
39
|
-
TooltipStates["Visible"] = "VISIBLE";
|
|
40
|
-
TooltipStates["LeavingVisible"] = "LEAVING_VISIBLE";
|
|
41
|
-
TooltipStates["Dismissed"] = "DISMISSED";
|
|
42
|
-
})(TooltipStates || (TooltipStates = {}));
|
|
37
|
+
export const Focused = 'FOCUSED'; // It's on!
|
|
43
38
|
|
|
44
|
-
export
|
|
39
|
+
export const Visible = 'VISIBLE'; // Focus has left, but we want to keep it visible for a sec
|
|
45
40
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
TooltipEventTypes["Focus"] = "FOCUS";
|
|
49
|
-
TooltipEventTypes["GlobalMouseMove"] = "GLOBAL_MOUSE_MOVE";
|
|
50
|
-
TooltipEventTypes["MouseDown"] = "MOUSE_DOWN";
|
|
51
|
-
TooltipEventTypes["MouseEnter"] = "MOUSE_ENTER";
|
|
52
|
-
TooltipEventTypes["MouseLeave"] = "MOUSE_LEAVE";
|
|
53
|
-
TooltipEventTypes["MouseMove"] = "MOUSE_MOVE";
|
|
54
|
-
TooltipEventTypes["Rest"] = "REST";
|
|
55
|
-
TooltipEventTypes["SelectWithKeyboard"] = "SELECT_WITH_KEYBOARD";
|
|
56
|
-
TooltipEventTypes["TimeComplete"] = "TIME_COMPLETE";
|
|
57
|
-
})(TooltipEventTypes || (TooltipEventTypes = {}));
|
|
41
|
+
export const LeavingVisible = 'LEAVING_VISIBLE'; // The user clicked the tool, so we want to hide the thing, we can't just use
|
|
42
|
+
// IDLE because we need to ignore mousemove, etc.
|
|
58
43
|
|
|
44
|
+
export const Dismissed = 'DISMISSED';
|
|
45
|
+
export const Blur = 'BLUR';
|
|
46
|
+
export const Focus = 'FOCUS';
|
|
47
|
+
export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
|
|
48
|
+
export const MouseDown = 'MOUSE_DOWN';
|
|
49
|
+
export const MouseEnter = 'MOUSE_ENTER';
|
|
50
|
+
export const MouseLeave = 'MOUSE_LEAVE';
|
|
51
|
+
export const MouseMove = 'MOUSE_MOVE';
|
|
52
|
+
export const Rest = 'REST';
|
|
53
|
+
export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
|
|
54
|
+
export const TimeComplete = 'TIME_COMPLETE';
|
|
59
55
|
export const subscription = createSubscription();
|
|
60
56
|
export const state = {
|
|
61
57
|
current: {
|
|
62
|
-
state:
|
|
58
|
+
state: Idle,
|
|
63
59
|
id: ''
|
|
64
60
|
}
|
|
65
61
|
};
|
|
@@ -69,40 +65,40 @@ function clearContextId() {
|
|
|
69
65
|
}
|
|
70
66
|
|
|
71
67
|
const chart = {
|
|
72
|
-
initial:
|
|
68
|
+
initial: Idle,
|
|
73
69
|
states: {
|
|
74
|
-
[
|
|
70
|
+
[Idle]: {
|
|
75
71
|
enter: () => {
|
|
76
72
|
clearContextId();
|
|
77
73
|
},
|
|
78
74
|
on: {
|
|
79
|
-
[
|
|
80
|
-
[
|
|
75
|
+
[MouseEnter]: Focused,
|
|
76
|
+
[Focus]: Visible
|
|
81
77
|
}
|
|
82
78
|
},
|
|
83
|
-
[
|
|
79
|
+
[Focused]: {
|
|
84
80
|
enter: startRestTimer,
|
|
85
81
|
leave: clearRestTimer,
|
|
86
82
|
on: {
|
|
87
|
-
[
|
|
88
|
-
[
|
|
89
|
-
[
|
|
90
|
-
[
|
|
91
|
-
[
|
|
83
|
+
[MouseMove]: Focused,
|
|
84
|
+
[MouseLeave]: Idle,
|
|
85
|
+
[MouseDown]: Dismissed,
|
|
86
|
+
[Blur]: Idle,
|
|
87
|
+
[Rest]: Visible
|
|
92
88
|
}
|
|
93
89
|
},
|
|
94
|
-
[
|
|
90
|
+
[Visible]: {
|
|
95
91
|
on: {
|
|
96
|
-
[
|
|
97
|
-
[
|
|
98
|
-
[
|
|
99
|
-
[
|
|
100
|
-
[
|
|
101
|
-
[
|
|
102
|
-
[
|
|
92
|
+
[Focus]: Focused,
|
|
93
|
+
[MouseEnter]: Focused,
|
|
94
|
+
[MouseLeave]: LeavingVisible,
|
|
95
|
+
[Blur]: LeavingVisible,
|
|
96
|
+
[MouseDown]: Dismissed,
|
|
97
|
+
[SelectWithKeyboard]: Dismissed,
|
|
98
|
+
[GlobalMouseMove]: LeavingVisible
|
|
103
99
|
}
|
|
104
100
|
},
|
|
105
|
-
[
|
|
101
|
+
[LeavingVisible]: {
|
|
106
102
|
enter: () => {
|
|
107
103
|
startLeavingVisibleTimer();
|
|
108
104
|
},
|
|
@@ -111,18 +107,18 @@ const chart = {
|
|
|
111
107
|
clearContextId();
|
|
112
108
|
},
|
|
113
109
|
on: {
|
|
114
|
-
[
|
|
115
|
-
[
|
|
116
|
-
[
|
|
110
|
+
[MouseEnter]: Visible,
|
|
111
|
+
[Focus]: Visible,
|
|
112
|
+
[TimeComplete]: Idle
|
|
117
113
|
}
|
|
118
114
|
},
|
|
119
|
-
[
|
|
115
|
+
[Dismissed]: {
|
|
120
116
|
leave: () => {
|
|
121
117
|
clearContextId();
|
|
122
118
|
},
|
|
123
119
|
on: {
|
|
124
|
-
[
|
|
125
|
-
[
|
|
120
|
+
[MouseLeave]: Idle,
|
|
121
|
+
[Blur]: Idle
|
|
126
122
|
}
|
|
127
123
|
}
|
|
128
124
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tooltip/stateMachine.ts"],"names":["createSubscription","restTimeout","startRestTimer","window","clearTimeout","setTimeout","send","TooltipEventTypes","Rest","undefined","clearRestTimer","leavingVisibleTimer","startLeavingVisibleTimer","TimeComplete","clearLeavingVisibleTimer","TooltipStates","subscription","state","current","Idle","id","clearContextId","chart","initial","states","enter","on","MouseEnter","Focused","Focus","Visible","leave","MouseMove","MouseLeave","MouseDown","Dismissed","Blur","LeavingVisible","SelectWithKeyboard","GlobalMouseMove","transition","currentState","event","payload","currentStateValue","stateDef","nextState","nextStateValue","nextDef","notify"],"mappings":"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","sourcesContent":["import { createSubscription } from '../utils/createSubscription';\nimport { StateChart as GenericStateChart } from '../hooks/useReducerMachine';\n\n////////////////////////////////////////////////////////////////////////////////\n// Timeouts:\n\n// Manages when the user \"rests\" on an element. Keeps the interface from being\n// flashing tooltips all the time as the user moves the mouse around the screen.\nlet restTimeout: number;\nfunction startRestTimer() {\n window.clearTimeout(restTimeout);\n restTimeout = window.setTimeout(() => {\n send(TooltipEventTypes.Rest, undefined);\n }, 200);\n}\n\nfunction clearRestTimer() {\n window.clearTimeout(restTimeout);\n}\n\n// Manages the delay to hide the tooltip after rest leaves.\nlet leavingVisibleTimer: number;\n\nfunction startLeavingVisibleTimer() {\n window.clearTimeout(leavingVisibleTimer);\n leavingVisibleTimer = window.setTimeout(\n () => send(TooltipEventTypes.TimeComplete, undefined),\n 100\n );\n}\n\nfunction clearLeavingVisibleTimer() {\n window.clearTimeout(leavingVisibleTimer);\n}\n\n////////////////////////////////////////////////////////////////////////////////\n// State machine\n\nexport enum TooltipStates {\n // Nothing goin' on\n Idle = 'IDLE',\n\n // We're considering showing the tooltip, but we're gonna wait a sec\n Focused = 'FOCUSED',\n\n // It's on!\n Visible = 'VISIBLE',\n\n // Focus has left, but we want to keep it visible for a sec\n LeavingVisible = 'LEAVING_VISIBLE',\n\n // The user clicked the tool, so we want to hide the thing, we can't just use\n // IDLE because we need to ignore mousemove, etc.\n Dismissed = 'DISMISSED',\n}\n\nexport enum TooltipEventTypes {\n Blur = 'BLUR',\n Focus = 'FOCUS',\n GlobalMouseMove = 'GLOBAL_MOUSE_MOVE',\n MouseDown = 'MOUSE_DOWN',\n MouseEnter = 'MOUSE_ENTER',\n MouseLeave = 'MOUSE_LEAVE',\n MouseMove = 'MOUSE_MOVE',\n Rest = 'REST',\n SelectWithKeyboard = 'SELECT_WITH_KEYBOARD',\n TimeComplete = 'TIME_COMPLETE',\n}\n\nexport const subscription = createSubscription();\nexport const state = {\n current: {\n state: TooltipStates.Idle,\n id: '',\n },\n};\n\nfunction clearContextId() {\n state.current.id = '';\n}\n\nconst chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {\n initial: TooltipStates.Idle,\n states: {\n [TooltipStates.Idle]: {\n enter: () => {\n clearContextId();\n },\n on: {\n [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,\n [TooltipEventTypes.Focus]: TooltipStates.Visible,\n },\n },\n [TooltipStates.Focused]: {\n enter: startRestTimer,\n leave: clearRestTimer,\n on: {\n [TooltipEventTypes.MouseMove]: TooltipStates.Focused,\n [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,\n [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,\n [TooltipEventTypes.Blur]: TooltipStates.Idle,\n [TooltipEventTypes.Rest]: TooltipStates.Visible,\n },\n },\n [TooltipStates.Visible]: {\n on: {\n [TooltipEventTypes.Focus]: TooltipStates.Focused,\n [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,\n [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,\n [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,\n [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,\n [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,\n [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible,\n },\n },\n [TooltipStates.LeavingVisible]: {\n enter: () => {\n startLeavingVisibleTimer();\n },\n leave: () => {\n clearLeavingVisibleTimer();\n clearContextId();\n },\n on: {\n [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,\n [TooltipEventTypes.Focus]: TooltipStates.Visible,\n [TooltipEventTypes.TimeComplete]: TooltipStates.Idle,\n },\n },\n [TooltipStates.Dismissed]: {\n leave: () => {\n clearContextId();\n },\n on: {\n [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,\n [TooltipEventTypes.Blur]: TooltipStates.Idle,\n },\n },\n },\n};\n\nfunction transition(\n currentState: typeof state['current'],\n event: TooltipEventTypes,\n payload?: Omit<typeof state['current'], 'state'>\n): typeof state['current'] {\n const currentStateValue = currentState.state;\n const stateDef = chart.states[currentState.state];\n const nextState = stateDef?.on?.[event];\n\n // Really useful for debugging\n // console.log({\n // event,\n // state: state.current.state,\n // id: state.current.id,\n // nextState,\n // });\n\n if (!nextState) {\n return currentState;\n }\n\n if (stateDef && stateDef.leave) {\n stateDef.leave(currentStateValue, payload);\n }\n\n const nextStateValue = nextState;\n const nextDef = chart.states[nextStateValue];\n if (nextDef && nextDef.enter) {\n nextDef.enter(nextStateValue, payload);\n }\n\n return { ...currentState, ...payload, state: nextStateValue };\n}\n\nexport function send<T extends TooltipEventTypes>(\n event: T,\n payload?: Omit<typeof state['current'], 'state'>\n) {\n const nextState = transition(state.current, event, payload);\n if (state.current !== nextState) {\n state.current = nextState;\n subscription.notify();\n }\n}\n"],"file":"stateMachine.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltip/stateMachine.ts"],"names":["createSubscription","restTimeout","startRestTimer","window","clearTimeout","setTimeout","send","Rest","undefined","clearRestTimer","leavingVisibleTimer","startLeavingVisibleTimer","TimeComplete","clearLeavingVisibleTimer","Idle","Focused","Visible","LeavingVisible","Dismissed","Blur","Focus","GlobalMouseMove","MouseDown","MouseEnter","MouseLeave","MouseMove","SelectWithKeyboard","subscription","state","current","id","clearContextId","chart","initial","states","enter","on","leave","transition","currentState","event","payload","currentStateValue","stateDef","nextState","nextStateValue","nextDef","notify"],"mappings":"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","sourcesContent":["import { createSubscription } from '../utils/createSubscription';\nimport { StateChart as GenericStateChart } from '../hooks/useReducerMachine';\n\n////////////////////////////////////////////////////////////////////////////////\n// Timeouts:\n\n// Manages when the user \"rests\" on an element. Keeps the interface from being\n// flashing tooltips all the time as the user moves the mouse around the screen.\nlet restTimeout: number;\nfunction startRestTimer() {\n window.clearTimeout(restTimeout);\n restTimeout = window.setTimeout(() => {\n send(Rest, undefined);\n }, 200);\n}\n\nfunction clearRestTimer() {\n window.clearTimeout(restTimeout);\n}\n\n// Manages the delay to hide the tooltip after rest leaves.\nlet leavingVisibleTimer: number;\n\nfunction startLeavingVisibleTimer() {\n window.clearTimeout(leavingVisibleTimer);\n leavingVisibleTimer = window.setTimeout(\n () => send(TimeComplete, undefined),\n 100\n );\n}\n\nfunction clearLeavingVisibleTimer() {\n window.clearTimeout(leavingVisibleTimer);\n}\n\n////////////////////////////////////////////////////////////////////////////////\n// State machine\n\nexport type TooltipStates =\n | 'IDLE'\n | 'FOCUSED'\n | 'VISIBLE'\n | 'LEAVING_VISIBLE'\n | 'DISMISSED';\n\n// Nothing goin' on\nexport const Idle = 'IDLE' as const;\n// We're considering showing the tooltip, but we're gonna wait a sec\nexport const Focused = 'FOCUSED' as const;\n// It's on!\nexport const Visible = 'VISIBLE' as const;\n// Focus has left, but we want to keep it visible for a sec\nexport const LeavingVisible = 'LEAVING_VISIBLE' as const;\n// The user clicked the tool, so we want to hide the thing, we can't just use\n// IDLE because we need to ignore mousemove, etc.\nexport const Dismissed = 'DISMISSED' as const;\n\nexport type TooltipEventTypes =\n | 'BLUR'\n | 'FOCUS'\n | 'GLOBAL_MOUSE_MOVE'\n | 'MOUSE_DOWN'\n | 'MOUSE_ENTER'\n | 'MOUSE_LEAVE'\n | 'MOUSE_MOVE'\n | 'REST'\n | 'SELECT_WITH_KEYBOARD'\n | 'TIME_COMPLETE';\n\nexport const Blur = 'BLUR' as const;\nexport const Focus = 'FOCUS' as const;\nexport const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;\nexport const MouseDown = 'MOUSE_DOWN' as const;\nexport const MouseEnter = 'MOUSE_ENTER' as const;\nexport const MouseLeave = 'MOUSE_LEAVE' as const;\nexport const MouseMove = 'MOUSE_MOVE' as const;\nexport const Rest = 'REST' as const;\nexport const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;\nexport const TimeComplete = 'TIME_COMPLETE' as const;\n\nexport const subscription = createSubscription();\nexport const state = {\n current: {\n state: Idle as TooltipStates,\n id: '',\n },\n};\n\nfunction clearContextId() {\n state.current.id = '';\n}\n\nconst chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {\n initial: Idle,\n states: {\n [Idle]: {\n enter: () => {\n clearContextId();\n },\n on: {\n [MouseEnter]: Focused,\n [Focus]: Visible,\n },\n },\n [Focused]: {\n enter: startRestTimer,\n leave: clearRestTimer,\n on: {\n [MouseMove]: Focused,\n [MouseLeave]: Idle,\n [MouseDown]: Dismissed,\n [Blur]: Idle,\n [Rest]: Visible,\n },\n },\n [Visible]: {\n on: {\n [Focus]: Focused,\n [MouseEnter]: Focused,\n [MouseLeave]: LeavingVisible,\n [Blur]: LeavingVisible,\n [MouseDown]: Dismissed,\n [SelectWithKeyboard]: Dismissed,\n [GlobalMouseMove]: LeavingVisible,\n },\n },\n [LeavingVisible]: {\n enter: () => {\n startLeavingVisibleTimer();\n },\n leave: () => {\n clearLeavingVisibleTimer();\n clearContextId();\n },\n on: {\n [MouseEnter]: Visible,\n [Focus]: Visible,\n [TimeComplete]: Idle,\n },\n },\n [Dismissed]: {\n leave: () => {\n clearContextId();\n },\n on: {\n [MouseLeave]: Idle,\n [Blur]: Idle,\n },\n },\n },\n};\n\nfunction transition(\n currentState: typeof state['current'],\n event: TooltipEventTypes,\n payload?: Omit<typeof state['current'], 'state'>\n): typeof state['current'] {\n const currentStateValue = currentState.state;\n const stateDef = chart.states[currentState.state];\n const nextState = stateDef?.on?.[event];\n\n // Really useful for debugging\n // console.log({\n // event,\n // state: state.current.state,\n // id: state.current.id,\n // nextState,\n // });\n\n if (!nextState) {\n return currentState;\n }\n\n if (stateDef && stateDef.leave) {\n stateDef.leave(currentStateValue, payload);\n }\n\n const nextStateValue = nextState;\n const nextDef = chart.states[nextStateValue];\n if (nextDef && nextDef.enter) {\n nextDef.enter(nextStateValue, payload);\n }\n\n return { ...currentState, ...payload, state: nextStateValue };\n}\n\nexport function send<T extends TooltipEventTypes>(\n event: T,\n payload?: Omit<typeof state['current'], 'state'>\n) {\n const nextState = transition(state.current, event, payload);\n if (state.current !== nextState) {\n state.current = nextState;\n subscription.notify();\n }\n}\n"],"file":"stateMachine.js"}
|
|
@@ -4,7 +4,7 @@ import { useRef, useEffect, useState } from 'react';
|
|
|
4
4
|
import { assignMultipleRefs } from '../utils/assignRef';
|
|
5
5
|
import { wrapEvent } from '../utils/wrapEvent';
|
|
6
6
|
import { useId } from '../hooks/useId';
|
|
7
|
-
import { send, state, subscription,
|
|
7
|
+
import { send, state, subscription, Blur, Focus, LeavingVisible, MouseDown, MouseEnter, MouseLeave, MouseMove, SelectWithKeyboard, Visible } from './stateMachine';
|
|
8
8
|
export function useTooltip(childProps, childRef, tooltipProps) {
|
|
9
9
|
const {
|
|
10
10
|
onMouseEnter,
|
|
@@ -20,35 +20,35 @@ export function useTooltip(childProps, childRef, tooltipProps) {
|
|
|
20
20
|
const id = useId('');
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
subscription.subscribe(() => {
|
|
23
|
-
setVisible((state.current.state ===
|
|
23
|
+
setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
|
|
24
24
|
});
|
|
25
25
|
}, [id]);
|
|
26
26
|
|
|
27
27
|
function handleMouseEnter() {
|
|
28
|
-
send(
|
|
28
|
+
send(MouseEnter, {
|
|
29
29
|
id
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
function handleMouseMove() {
|
|
34
|
-
send(
|
|
34
|
+
send(MouseMove, {
|
|
35
35
|
id
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
function handleMouseLeave() {
|
|
40
|
-
send(
|
|
40
|
+
send(MouseLeave);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
function handleMouseDown() {
|
|
44
44
|
// Allow quick click from one tool to another
|
|
45
45
|
if (state.current.id === id) {
|
|
46
|
-
send(
|
|
46
|
+
send(MouseDown);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
function handleFocus() {
|
|
51
|
-
send(
|
|
51
|
+
send(Focus, {
|
|
52
52
|
id
|
|
53
53
|
});
|
|
54
54
|
}
|
|
@@ -56,13 +56,13 @@ export function useTooltip(childProps, childRef, tooltipProps) {
|
|
|
56
56
|
function handleBlur() {
|
|
57
57
|
// Allow quick click from one tool to another
|
|
58
58
|
if (state.current.id === id) {
|
|
59
|
-
send(
|
|
59
|
+
send(Blur, undefined);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
function handleKeyDown(event) {
|
|
64
64
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
65
|
-
send(
|
|
65
|
+
send(SelectWithKeyboard);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tooltip/useTooltip.ts"],"names":["useRef","useEffect","useState","assignMultipleRefs","wrapEvent","useId","send","state","subscription","
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltip/useTooltip.ts"],"names":["useRef","useEffect","useState","assignMultipleRefs","wrapEvent","useId","send","state","subscription","Blur","Focus","LeavingVisible","MouseDown","MouseEnter","MouseLeave","MouseMove","SelectWithKeyboard","Visible","useTooltip","childProps","childRef","tooltipProps","onMouseEnter","onMouseLeave","onMouseMove","onMouseDown","onKeyDown","onFocus","onBlur","anchorEl","visible","setVisible","id","subscribe","current","handleMouseEnter","handleMouseMove","handleMouseLeave","handleMouseDown","handleFocus","handleBlur","undefined","handleKeyDown","event","key","label","children","tooltipOnMouseEnter","tooltipOnMouseLeave","tooltipOnMouseMove","otherTooltipProps","tooltipId","ref","role"],"mappings":"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","sourcesContent":["import React, { useRef, RefAttributes, useEffect, useState } from 'react';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useId } from '../hooks/useId';\nimport {\n send,\n state,\n subscription,\n Blur,\n Focus,\n LeavingVisible,\n MouseDown,\n MouseEnter,\n MouseLeave,\n MouseMove,\n SelectWithKeyboard,\n Visible,\n} from './stateMachine';\n\nexport type ChildProps = React.HTMLAttributes<HTMLElement> &\n RefAttributes<HTMLElement>;\n\nexport interface InjectedTooltipProps\n extends React.HTMLAttributes<HTMLElement> {\n anchorEl: React.RefObject<HTMLElement>;\n visible: boolean;\n children?: React.ReactNode;\n}\n\nexport function useTooltip(\n childProps: ChildProps,\n childRef: React.Ref<HTMLElement> | undefined,\n tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }\n): [ChildProps, InjectedTooltipProps] {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onMouseDown,\n onKeyDown,\n onFocus,\n onBlur,\n } = childProps;\n const anchorEl = useRef<HTMLElement>(null);\n const [visible, setVisible] = useState(false);\n const id = useId('');\n\n useEffect(() => {\n subscription.subscribe(() => {\n setVisible(\n (state.current.state === Visible ||\n state.current.state === LeavingVisible) &&\n state.current.id === id\n );\n });\n }, [id]);\n\n function handleMouseEnter() {\n send(MouseEnter, { id });\n }\n\n function handleMouseMove() {\n send(MouseMove, { id });\n }\n\n function handleMouseLeave() {\n send(MouseLeave);\n }\n\n function handleMouseDown() {\n // Allow quick click from one tool to another\n if (state.current.id === id) {\n send(MouseDown);\n }\n }\n\n function handleFocus() {\n send(Focus, { id });\n }\n\n function handleBlur() {\n // Allow quick click from one tool to another\n if (state.current.id === id) {\n send(Blur, undefined);\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n if (event.key === 'Enter' || event.key === ' ') {\n send(SelectWithKeyboard);\n }\n }\n\n const {\n label: children,\n onMouseEnter: tooltipOnMouseEnter,\n onMouseLeave: tooltipOnMouseLeave,\n onMouseMove: tooltipOnMouseMove,\n ...otherTooltipProps\n } = tooltipProps;\n\n const tooltipId = `tooltip-${id}`;\n return [\n {\n ...childProps,\n ref: assignMultipleRefs(childRef, anchorEl),\n ...(visible && { 'aria-describedby': tooltipId }),\n onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),\n onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),\n onMouseMove: wrapEvent(onMouseMove, handleMouseMove),\n onMouseDown: wrapEvent(onMouseDown, handleMouseDown),\n onFocus: wrapEvent(onFocus, handleFocus),\n onBlur: wrapEvent(onBlur, handleBlur),\n onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n },\n {\n id: tooltipId,\n anchorEl,\n visible,\n children,\n onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),\n onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),\n onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),\n role: 'tooltip',\n ...otherTooltipProps,\n },\n ];\n}\n"],"file":"useTooltip.js"}
|