@basic-ui/core 0.0.54 → 0.0.57

package/src/Tooltip/stateMachine.ts

@@ -1,192 +1,192 @@
-import { createSubscription } from '../utils/create-subscription';
-import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
-
-////////////////////////////////////////////////////////////////////////////////
-// Timeouts:
-
-// Manages when the user "rests" on an element. Keeps the interface from being
-// flashing tooltips all the time as the user moves the mouse around the screen.
-let restTimeout: NodeJS.Timeout;
-function startRestTimer() {
-  clearTimeout(restTimeout);
-  restTimeout = setTimeout(() => {
-    send(Rest, undefined);
-  }, 200);
-}
-
-function clearRestTimer() {
-  clearTimeout(restTimeout);
-}
-
-// Manages the delay to hide the tooltip after rest leaves.
-let leavingVisibleTimer: NodeJS.Timeout;
-function startLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = setTimeout(() => send(TimeComplete, undefined), 100);
-}
-
-function clearLeavingVisibleTimer() {
-  clearTimeout(leavingVisibleTimer);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// State machine
-
-export type TooltipStates =
-  | 'IDLE'
-  | 'FOCUSED'
-  | 'VISIBLE'
-  | 'LEAVING_VISIBLE'
-  | 'DISMISSED';
-
-// Nothing goin' on
-export const Idle = 'IDLE' as const;
-// We're considering showing the tooltip, but we're gonna wait a sec
-export const Focused = 'FOCUSED' as const;
-// It's on!
-export const Visible = 'VISIBLE' as const;
-// Focus has left, but we want to keep it visible for a sec
-export const LeavingVisible = 'LEAVING_VISIBLE' as const;
-// The user clicked the tool, so we want to hide the thing, we can't just use
-// IDLE because we need to ignore mousemove, etc.
-export const Dismissed = 'DISMISSED' as const;
-
-export type TooltipEventTypes =
-  | 'BLUR'
-  | 'FOCUS'
-  | 'GLOBAL_MOUSE_MOVE'
-  | 'MOUSE_DOWN'
-  | 'MOUSE_ENTER'
-  | 'MOUSE_LEAVE'
-  | 'MOUSE_MOVE'
-  | 'REST'
-  | 'SELECT_WITH_KEYBOARD'
-  | 'TIME_COMPLETE';
-
-export const Blur = 'BLUR' as const;
-export const Focus = 'FOCUS' as const;
-export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;
-export const MouseDown = 'MOUSE_DOWN' as const;
-export const MouseEnter = 'MOUSE_ENTER' as const;
-export const MouseLeave = 'MOUSE_LEAVE' as const;
-export const MouseMove = 'MOUSE_MOVE' as const;
-export const Rest = 'REST' as const;
-export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;
-export const TimeComplete = 'TIME_COMPLETE' as const;
-
-export const subscription = createSubscription();
-export const state = {
-  current: {
-    state: Idle as TooltipStates,
-    id: '',
-  },
-};
-
-function clearContextId() {
-  state.current.id = '';
-}
-
-const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
-  initial: Idle,
-  states: {
-    [Idle]: {
-      enter: () => {
-        clearContextId();
-      },
-      on: {
-        [MouseEnter]: Focused,
-        [Focus]: Visible,
-      },
-    },
-    [Focused]: {
-      enter: startRestTimer,
-      leave: clearRestTimer,
-      on: {
-        [MouseMove]: Focused,
-        [MouseLeave]: Idle,
-        [MouseDown]: Dismissed,
-        [Blur]: Idle,
-        [Rest]: Visible,
-      },
-    },
-    [Visible]: {
-      on: {
-        [Focus]: Focused,
-        [MouseEnter]: Focused,
-        [MouseLeave]: LeavingVisible,
-        [Blur]: LeavingVisible,
-        [MouseDown]: Dismissed,
-        [SelectWithKeyboard]: Dismissed,
-        [GlobalMouseMove]: LeavingVisible,
-      },
-    },
-    [LeavingVisible]: {
-      enter: () => {
-        startLeavingVisibleTimer();
-      },
-      leave: () => {
-        clearLeavingVisibleTimer();
-        clearContextId();
-      },
-      on: {
-        [MouseEnter]: Visible,
-        [Focus]: Visible,
-        [TimeComplete]: Idle,
-      },
-    },
-    [Dismissed]: {
-      leave: () => {
-        clearContextId();
-      },
-      on: {
-        [MouseLeave]: Idle,
-        [Blur]: Idle,
-      },
-    },
-  },
-};
-
-function transition(
-  currentState: typeof state['current'],
-  event: TooltipEventTypes,
-  payload?: Omit<typeof state['current'], 'state'>
-): typeof state['current'] {
-  const currentStateValue = currentState.state;
-  const stateDef = chart.states[currentState.state];
-  const nextState = stateDef?.on?.[event];
-
-  // Really useful for debugging
-  // console.log({
-  //   event,
-  //   state: state.current.state,
-  //   id: state.current.id,
-  //   nextState,
-  // });
-
-  if (!nextState) {
-    return currentState;
-  }
-
-  if (stateDef && stateDef.leave) {
-    stateDef.leave(currentStateValue, payload);
-  }
-
-  const nextStateValue = nextState;
-  const nextDef = chart.states[nextStateValue];
-  if (nextDef && nextDef.enter) {
-    nextDef.enter(nextStateValue, payload);
-  }
-
-  return { ...currentState, ...payload, state: nextStateValue };
-}
-
-export function send<T extends TooltipEventTypes>(
-  event: T,
-  payload?: Omit<typeof state['current'], 'state'>
-) {
-  const nextState = transition(state.current, event, payload);
-  if (state.current !== nextState) {
-    state.current = nextState;
-    subscription.notify();
-  }
-}
+import { createSubscription } from '../utils/create-subscription';
+import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
+
+////////////////////////////////////////////////////////////////////////////////
+// Timeouts:
+
+// Manages when the user "rests" on an element. Keeps the interface from being
+// flashing tooltips all the time as the user moves the mouse around the screen.
+let restTimeout: NodeJS.Timeout;
+function startRestTimer() {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(() => {
+    send(Rest, undefined);
+  }, 200);
+}
+
+function clearRestTimer() {
+  clearTimeout(restTimeout);
+}
+
+// Manages the delay to hide the tooltip after rest leaves.
+let leavingVisibleTimer: NodeJS.Timeout;
+function startLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(() => send(TimeComplete, undefined), 100);
+}
+
+function clearLeavingVisibleTimer() {
+  clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// State machine
+
+export type TooltipStates =
+  | 'IDLE'
+  | 'FOCUSED'
+  | 'VISIBLE'
+  | 'LEAVING_VISIBLE'
+  | 'DISMISSED';
+
+// Nothing goin' on
+export const Idle = 'IDLE' as const;
+// We're considering showing the tooltip, but we're gonna wait a sec
+export const Focused = 'FOCUSED' as const;
+// It's on!
+export const Visible = 'VISIBLE' as const;
+// Focus has left, but we want to keep it visible for a sec
+export const LeavingVisible = 'LEAVING_VISIBLE' as const;
+// The user clicked the tool, so we want to hide the thing, we can't just use
+// IDLE because we need to ignore mousemove, etc.
+export const Dismissed = 'DISMISSED' as const;
+
+export type TooltipEventTypes =
+  | 'BLUR'
+  | 'FOCUS'
+  | 'GLOBAL_MOUSE_MOVE'
+  | 'MOUSE_DOWN'
+  | 'MOUSE_ENTER'
+  | 'MOUSE_LEAVE'
+  | 'MOUSE_MOVE'
+  | 'REST'
+  | 'SELECT_WITH_KEYBOARD'
+  | 'TIME_COMPLETE';
+
+export const Blur = 'BLUR' as const;
+export const Focus = 'FOCUS' as const;
+export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;
+export const MouseDown = 'MOUSE_DOWN' as const;
+export const MouseEnter = 'MOUSE_ENTER' as const;
+export const MouseLeave = 'MOUSE_LEAVE' as const;
+export const MouseMove = 'MOUSE_MOVE' as const;
+export const Rest = 'REST' as const;
+export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;
+export const TimeComplete = 'TIME_COMPLETE' as const;
+
+export const subscription = createSubscription();
+export const state = {
+  current: {
+    state: Idle as TooltipStates,
+    id: '',
+  },
+};
+
+function clearContextId() {
+  state.current.id = '';
+}
+
+const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
+  initial: Idle,
+  states: {
+    [Idle]: {
+      enter: () => {
+        clearContextId();
+      },
+      on: {
+        [MouseEnter]: Focused,
+        [Focus]: Visible,
+      },
+    },
+    [Focused]: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible,
+      },
+    },
+    [Visible]: {
+      on: {
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible,
+      },
+    },
+    [LeavingVisible]: {
+      enter: () => {
+        startLeavingVisibleTimer();
+      },
+      leave: () => {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle,
+      },
+    },
+    [Dismissed]: {
+      leave: () => {
+        clearContextId();
+      },
+      on: {
+        [MouseLeave]: Idle,
+        [Blur]: Idle,
+      },
+    },
+  },
+};
+
+function transition(
+  currentState: typeof state['current'],
+  event: TooltipEventTypes,
+  payload?: Omit<typeof state['current'], 'state'>
+): typeof state['current'] {
+  const currentStateValue = currentState.state;
+  const stateDef = chart.states[currentState.state];
+  const nextState = stateDef?.on?.[event];
+
+  // Really useful for debugging
+  // console.log({
+  //   event,
+  //   state: state.current.state,
+  //   id: state.current.id,
+  //   nextState,
+  // });
+
+  if (!nextState) {
+    return currentState;
+  }
+
+  if (stateDef && stateDef.leave) {
+    stateDef.leave(currentStateValue, payload);
+  }
+
+  const nextStateValue = nextState;
+  const nextDef = chart.states[nextStateValue];
+  if (nextDef && nextDef.enter) {
+    nextDef.enter(nextStateValue, payload);
+  }
+
+  return { ...currentState, ...payload, state: nextStateValue };
+}
+
+export function send<T extends TooltipEventTypes>(
+  event: T,
+  payload?: Omit<typeof state['current'], 'state'>
+) {
+  const nextState = transition(state.current, event, payload);
+  if (state.current !== nextState) {
+    state.current = nextState;
+    subscription.notify();
+  }
+}

package/src/Tooltip/styles.css

@@ -1,17 +1,17 @@
-[data-hide-child-buttons=""] {
-  background-color: #ddd;
-  display: flex;
-  padding: 20px;
-  min-height: 62px;
-  box-sizing: border-box;
-  border-bottom: 1px solid #aaa;
-  justify-content: flex-end;
-}
-
-[data-hide-child-buttons=""] button {
-  display: none;
-}
-
-[data-hide-child-buttons=""]:hover button {
-  display: block;
-}
+[data-hide-child-buttons=""] {
+  background-color: #ddd;
+  display: flex;
+  padding: 20px;
+  min-height: 62px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #aaa;
+  justify-content: flex-end;
+}
+
+[data-hide-child-buttons=""] button {
+  display: none;
+}
+
+[data-hide-child-buttons=""]:hover button {
+  display: block;
+}