@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
package/build/cjs/index.js
CHANGED
|
@@ -2755,7 +2755,7 @@ let restTimeout;
|
|
|
2755
2755
|
function startRestTimer() {
|
|
2756
2756
|
window.clearTimeout(restTimeout);
|
|
2757
2757
|
restTimeout = window.setTimeout(() => {
|
|
2758
|
-
send(
|
|
2758
|
+
send(Rest, undefined);
|
|
2759
2759
|
}, 200);
|
|
2760
2760
|
}
|
|
2761
2761
|
|
|
@@ -2768,7 +2768,7 @@ let leavingVisibleTimer;
|
|
|
2768
2768
|
|
|
2769
2769
|
function startLeavingVisibleTimer() {
|
|
2770
2770
|
window.clearTimeout(leavingVisibleTimer);
|
|
2771
|
-
leavingVisibleTimer = window.setTimeout(() => send(
|
|
2771
|
+
leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
|
|
2772
2772
|
}
|
|
2773
2773
|
|
|
2774
2774
|
function clearLeavingVisibleTimer() {
|
|
@@ -2777,35 +2777,31 @@ function clearLeavingVisibleTimer() {
|
|
|
2777
2777
|
// State machine
|
|
2778
2778
|
|
|
2779
2779
|
|
|
2780
|
-
|
|
2780
|
+
// Nothing goin' on
|
|
2781
|
+
const Idle = 'IDLE'; // We're considering showing the tooltip, but we're gonna wait a sec
|
|
2781
2782
|
|
|
2782
|
-
|
|
2783
|
-
TooltipStates["Idle"] = "IDLE";
|
|
2784
|
-
TooltipStates["Focused"] = "FOCUSED";
|
|
2785
|
-
TooltipStates["Visible"] = "VISIBLE";
|
|
2786
|
-
TooltipStates["LeavingVisible"] = "LEAVING_VISIBLE";
|
|
2787
|
-
TooltipStates["Dismissed"] = "DISMISSED";
|
|
2788
|
-
})(TooltipStates || (TooltipStates = {}));
|
|
2783
|
+
const Focused = 'FOCUSED'; // It's on!
|
|
2789
2784
|
|
|
2790
|
-
|
|
2785
|
+
const Visible = 'VISIBLE'; // Focus has left, but we want to keep it visible for a sec
|
|
2791
2786
|
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
TooltipEventTypes["Focus"] = "FOCUS";
|
|
2795
|
-
TooltipEventTypes["GlobalMouseMove"] = "GLOBAL_MOUSE_MOVE";
|
|
2796
|
-
TooltipEventTypes["MouseDown"] = "MOUSE_DOWN";
|
|
2797
|
-
TooltipEventTypes["MouseEnter"] = "MOUSE_ENTER";
|
|
2798
|
-
TooltipEventTypes["MouseLeave"] = "MOUSE_LEAVE";
|
|
2799
|
-
TooltipEventTypes["MouseMove"] = "MOUSE_MOVE";
|
|
2800
|
-
TooltipEventTypes["Rest"] = "REST";
|
|
2801
|
-
TooltipEventTypes["SelectWithKeyboard"] = "SELECT_WITH_KEYBOARD";
|
|
2802
|
-
TooltipEventTypes["TimeComplete"] = "TIME_COMPLETE";
|
|
2803
|
-
})(TooltipEventTypes || (TooltipEventTypes = {}));
|
|
2787
|
+
const LeavingVisible = 'LEAVING_VISIBLE'; // The user clicked the tool, so we want to hide the thing, we can't just use
|
|
2788
|
+
// IDLE because we need to ignore mousemove, etc.
|
|
2804
2789
|
|
|
2790
|
+
const Dismissed = 'DISMISSED';
|
|
2791
|
+
const Blur = 'BLUR';
|
|
2792
|
+
const Focus = 'FOCUS';
|
|
2793
|
+
const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
|
|
2794
|
+
const MouseDown = 'MOUSE_DOWN';
|
|
2795
|
+
const MouseEnter = 'MOUSE_ENTER';
|
|
2796
|
+
const MouseLeave = 'MOUSE_LEAVE';
|
|
2797
|
+
const MouseMove = 'MOUSE_MOVE';
|
|
2798
|
+
const Rest = 'REST';
|
|
2799
|
+
const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
|
|
2800
|
+
const TimeComplete = 'TIME_COMPLETE';
|
|
2805
2801
|
const subscription = createSubscription();
|
|
2806
2802
|
const state = {
|
|
2807
2803
|
current: {
|
|
2808
|
-
state:
|
|
2804
|
+
state: Idle,
|
|
2809
2805
|
id: ''
|
|
2810
2806
|
}
|
|
2811
2807
|
};
|
|
@@ -2815,40 +2811,40 @@ function clearContextId() {
|
|
|
2815
2811
|
}
|
|
2816
2812
|
|
|
2817
2813
|
const chart = {
|
|
2818
|
-
initial:
|
|
2814
|
+
initial: Idle,
|
|
2819
2815
|
states: {
|
|
2820
|
-
[
|
|
2816
|
+
[Idle]: {
|
|
2821
2817
|
enter: () => {
|
|
2822
2818
|
clearContextId();
|
|
2823
2819
|
},
|
|
2824
2820
|
on: {
|
|
2825
|
-
[
|
|
2826
|
-
[
|
|
2821
|
+
[MouseEnter]: Focused,
|
|
2822
|
+
[Focus]: Visible
|
|
2827
2823
|
}
|
|
2828
2824
|
},
|
|
2829
|
-
[
|
|
2825
|
+
[Focused]: {
|
|
2830
2826
|
enter: startRestTimer,
|
|
2831
2827
|
leave: clearRestTimer,
|
|
2832
2828
|
on: {
|
|
2833
|
-
[
|
|
2834
|
-
[
|
|
2835
|
-
[
|
|
2836
|
-
[
|
|
2837
|
-
[
|
|
2829
|
+
[MouseMove]: Focused,
|
|
2830
|
+
[MouseLeave]: Idle,
|
|
2831
|
+
[MouseDown]: Dismissed,
|
|
2832
|
+
[Blur]: Idle,
|
|
2833
|
+
[Rest]: Visible
|
|
2838
2834
|
}
|
|
2839
2835
|
},
|
|
2840
|
-
[
|
|
2836
|
+
[Visible]: {
|
|
2841
2837
|
on: {
|
|
2842
|
-
[
|
|
2843
|
-
[
|
|
2844
|
-
[
|
|
2845
|
-
[
|
|
2846
|
-
[
|
|
2847
|
-
[
|
|
2848
|
-
[
|
|
2838
|
+
[Focus]: Focused,
|
|
2839
|
+
[MouseEnter]: Focused,
|
|
2840
|
+
[MouseLeave]: LeavingVisible,
|
|
2841
|
+
[Blur]: LeavingVisible,
|
|
2842
|
+
[MouseDown]: Dismissed,
|
|
2843
|
+
[SelectWithKeyboard]: Dismissed,
|
|
2844
|
+
[GlobalMouseMove]: LeavingVisible
|
|
2849
2845
|
}
|
|
2850
2846
|
},
|
|
2851
|
-
[
|
|
2847
|
+
[LeavingVisible]: {
|
|
2852
2848
|
enter: () => {
|
|
2853
2849
|
startLeavingVisibleTimer();
|
|
2854
2850
|
},
|
|
@@ -2857,18 +2853,18 @@ const chart = {
|
|
|
2857
2853
|
clearContextId();
|
|
2858
2854
|
},
|
|
2859
2855
|
on: {
|
|
2860
|
-
[
|
|
2861
|
-
[
|
|
2862
|
-
[
|
|
2856
|
+
[MouseEnter]: Visible,
|
|
2857
|
+
[Focus]: Visible,
|
|
2858
|
+
[TimeComplete]: Idle
|
|
2863
2859
|
}
|
|
2864
2860
|
},
|
|
2865
|
-
[
|
|
2861
|
+
[Dismissed]: {
|
|
2866
2862
|
leave: () => {
|
|
2867
2863
|
clearContextId();
|
|
2868
2864
|
},
|
|
2869
2865
|
on: {
|
|
2870
|
-
[
|
|
2871
|
-
[
|
|
2866
|
+
[MouseLeave]: Idle,
|
|
2867
|
+
[Blur]: Idle
|
|
2872
2868
|
}
|
|
2873
2869
|
}
|
|
2874
2870
|
}
|
|
@@ -2931,35 +2927,35 @@ function useTooltip(childProps, childRef, tooltipProps) {
|
|
|
2931
2927
|
const id = useId('');
|
|
2932
2928
|
react.useEffect(() => {
|
|
2933
2929
|
subscription.subscribe(() => {
|
|
2934
|
-
setVisible((state.current.state ===
|
|
2930
|
+
setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
|
|
2935
2931
|
});
|
|
2936
2932
|
}, [id]);
|
|
2937
2933
|
|
|
2938
2934
|
function handleMouseEnter() {
|
|
2939
|
-
send(
|
|
2935
|
+
send(MouseEnter, {
|
|
2940
2936
|
id
|
|
2941
2937
|
});
|
|
2942
2938
|
}
|
|
2943
2939
|
|
|
2944
2940
|
function handleMouseMove() {
|
|
2945
|
-
send(
|
|
2941
|
+
send(MouseMove, {
|
|
2946
2942
|
id
|
|
2947
2943
|
});
|
|
2948
2944
|
}
|
|
2949
2945
|
|
|
2950
2946
|
function handleMouseLeave() {
|
|
2951
|
-
send(
|
|
2947
|
+
send(MouseLeave);
|
|
2952
2948
|
}
|
|
2953
2949
|
|
|
2954
2950
|
function handleMouseDown() {
|
|
2955
2951
|
// Allow quick click from one tool to another
|
|
2956
2952
|
if (state.current.id === id) {
|
|
2957
|
-
send(
|
|
2953
|
+
send(MouseDown);
|
|
2958
2954
|
}
|
|
2959
2955
|
}
|
|
2960
2956
|
|
|
2961
2957
|
function handleFocus() {
|
|
2962
|
-
send(
|
|
2958
|
+
send(Focus, {
|
|
2963
2959
|
id
|
|
2964
2960
|
});
|
|
2965
2961
|
}
|
|
@@ -2967,13 +2963,13 @@ function useTooltip(childProps, childRef, tooltipProps) {
|
|
|
2967
2963
|
function handleBlur() {
|
|
2968
2964
|
// Allow quick click from one tool to another
|
|
2969
2965
|
if (state.current.id === id) {
|
|
2970
|
-
send(
|
|
2966
|
+
send(Blur, undefined);
|
|
2971
2967
|
}
|
|
2972
2968
|
}
|
|
2973
2969
|
|
|
2974
2970
|
function handleKeyDown(event) {
|
|
2975
2971
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
2976
|
-
send(
|
|
2972
|
+
send(SelectWithKeyboard);
|
|
2977
2973
|
}
|
|
2978
2974
|
}
|
|
2979
2975
|
|