Describe the feature that you would like added

It would be useful to provide a utility function which could standardise whether a component is interactive or not.

What is "interactive"?

For components "interactive" means:

• the styles applied to the component when the user interacts with it or when the component can be interacted with
• functional ability to dispatch events or call functions provided via props

These two aspects are to some degree connected. When the component has some functional behaviour it should represent that visually, at the same time when the component doesn't present itself as interactive users won't expect it to have functionality attached.

Why a utility function?

Ideally we want to standardise the way interactive styles are applied by default, while still giving end users the ability to override it as they see fit. This should cover most use cases with the added flexibility for special cases.

Proposed API

const isComponentInteractive = (state: ComponentState): boolean => {
  // Explicit interactive override.
  if (state.interactive === false) {
    return false
  }
  
  return Boolean(state.interactive ?? state.onClick ?? state.onMouseDown ?? state.onMouseUp ...)
}

This API counts on an interactive prop for components, as well as falling back to looking for standard handlers. If either the interactive prop is true or at least one of the specified handlers are found the component is deemed interactive and we can apply styles or other behaviour.

Handlers

This is a list of handlers that come to my mind when considering interactiveness:

- onAuxClick
- onClick
- onContextMenu
- onDoubleClick
- onDrag
- onFocus
- onMouseDown
- onMouseOver
- onMouseUp
- onPointerDown
- onPointerOver
- onPointerOut
- onTouchEnd
- onTouchStart

This is probably not a final list for now, but a rough approximation of all the possible event handlers a component could have defined to be considered "interactive" visually.

What component or utility would this be added to

Components such as @fluentui/react-card would benefit from this, as would any where we might need to consider stylistic or functional behaviour based on component interactiveness.

Have you discussed this feature with our team, and if so, who

@andrefcdias