Skip to main content
On this pageFunctions

Ui/HoverIntent

Functions

init

functionsource
/** Creates a HoverIntent Model. Pointer entry opens after 200 milliseconds and full disengagement closes after 300 milliseconds by default. */
(config: InitConfig): HoverIntent.Model

update

functionsource
/** Processes a HoverIntent Message and returns the next Model, optional Commands, and an optional OutMessage. */
(
  model: HoverIntent.Model,
  message: {
    _tag: "BlurredPanel"
  } | {
    _tag: "EnteredTrigger"
  } | {
    _tag: "LeftTrigger"
  } | {
    _tag: "EnteredPanel"
  } | {
    _tag: "LeftPanel"
  } | {
    _tag: "FocusedTrigger"
  } | {
    _tag: "BlurredTrigger"
  } | {
    _tag: "FocusedPanel"
  } | {
    _tag: "PressedEscape"
    source: "Trigger" | "Panel"
  } | {
    _tag: "CompletedWaitBeforeOpening"
    version: number
  } | {
    _tag: "CompletedWaitBeforeClosing"
    version: number
  }
): UpdateReturn

Types

InitConfig

typesource
/** Configuration for creating a HoverIntent Model. */
type InitConfig = Readonly<{
  closeDelay: Duration.Input
  openDelay: Duration.Input
}>

RenderInfo

typesource
/**
 * Render-time payload published to the consumer's `toView`.
 * 
 * - `trigger`: event attributes for the element that starts intent.
 * - `panel`: event attributes for the element that remains open while hovered or focused.
 * - `isVisible`: whether the consumer should render its panel.
 */
type RenderInfo = Readonly<{
  isVisible: boolean
  panel: ReadonlyArray<ChildAttribute>
  trigger: ReadonlyArray<ChildAttribute>
}>

ViewInputs

typesource
/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
type ViewInputs = Readonly<{
  focusTriggerSelector: string
  toView: (render: RenderInfo) => Html
}>

Constants

Message

constsource
/** Union of all Messages the HoverIntent component can produce. */
const Message: MessageUnion<{
  BlurredPanel: {}
  BlurredTrigger: {}
  CompletedWaitBeforeClosing: {
    version: Number
  }
  CompletedWaitBeforeOpening: {
    version: Number
  }
  EnteredPanel: {}
  EnteredTrigger: {}
  FocusedPanel: {}
  FocusedTrigger: {}
  LeftPanel: {}
  LeftTrigger: {}
  PressedEscape: {
    source: Literals<readonly ["Trigger", "Panel"]>
  }
}>

Model

constsource
/** Schema for HoverIntent state. It tracks pointer and focus engagement over a trigger and its panel, visibility, delay timers, and Escape dismissal. */
const Model: Struct<{
  closeDelay: DurationFromMillis
  isDismissed: Boolean
  isOpen: Boolean
  isPanelHovered: Boolean
  isTriggerHovered: Boolean
  maybeFocusLocation: Option<Literals<readonly ["Trigger", "Panel"]>>
  openDelay: DurationFromMillis
  pendingCloseVersion: Number
  pendingOpenVersion: Number
}>

OutMessage

constsource
/** Union of visibility-transition OutMessages emitted by HoverIntent. */
const OutMessage: MessageUnion<{
  Closed: {}
  Opened: {}
}>

WaitBeforeClosing

constsource
/** Waits before closing, then emits the version that scheduled the wait. */
const WaitBeforeClosing: CommandDefinitionWithArgs<"WaitBeforeClosing", {
  delay: DurationFromMillis
  version: Number
}, Effect<{
  _tag: "CompletedWaitBeforeClosing"
  version: number
}, never, never>>

WaitBeforeOpening

constsource
/** Waits before opening, then emits the version that scheduled the wait. */
const WaitBeforeOpening: CommandDefinitionWithArgs<"WaitBeforeOpening", {
  delay: DurationFromMillis
  version: Number
}, Effect<{
  _tag: "CompletedWaitBeforeOpening"
  version: number
}, never, never>>

view

constsource
/** Renders headless HoverIntent event bundles. It owns no markup, ARIA semantics, positioning, or styling. */
const view: SubmodelView<HoverIntent.Model, {
  _tag: "BlurredPanel"
} | {
  _tag: "EnteredTrigger"
} | {
  _tag: "LeftTrigger"
} | {
  _tag: "EnteredPanel"
} | {
  _tag: "LeftPanel"
} | {
  _tag: "FocusedTrigger"
} | {
  _tag: "BlurredTrigger"
} | {
  _tag: "FocusedPanel"
} | {
  _tag: "PressedEscape"
  source: "Trigger" | "Panel"
} | {
  _tag: "CompletedWaitBeforeOpening"
  version: number
} | {
  _tag: "CompletedWaitBeforeClosing"
  version: number
}, Readonly<{
  focusTriggerSelector: string
  toView: (render: RenderInfo) => Html
}>>