feat(Focus): focus indicator for additional documents

CHANGELOG.md

@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Export `FocusTrapZoneProps` and `AutoFocusZoneProps` from the main package @sophieH29 ([#1795](https://github.com/stardust-ui/react/pull/1795))
 - Add `checkable` and `checkableIndicator` to the `Dropdown` and `DropdownItem` components @mnajdova ([#1738](https://github.com/stardust-ui/react/pull/1738))
 - Add unified ramp of category colors and category color schemes: `foreground`, `foreground1`, `background` to the Teams themes @natashamayurshah ([#1711](https://github.com/stardust-ui/react/pull/1711))
+- Focus indicator for additional documents @jurokapsiar ([#1816](https://github.com/stardust-ui/react/pull/1816))
 
 ### Documentation
 - Restore docs for `Ref` component @layershifter ([#1777](https://github.com/stardust-ui/react/pull/1777))

packages/react/src/components/Provider/Provider.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 // @ts-ignore
 import { RendererProvider, ThemeProvider, ThemeContext } from '@stardust-ui/react-fela'
 
-import { felaRenderer, ChildrenComponentProps } from '../../lib'
+import { felaRenderer, ChildrenComponentProps, setUpWhatInput } from '../../lib'
 
 import {
   ThemePrepared,
@@ -136,6 +136,9 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
 
   componentDidMount() {
     this.renderFontFaces()
+    if (this.props.target) {
+      setUpWhatInput(this.props.target)
+    }
   }
 
   render() {

packages/react/src/lib/whatInput.ts

@@ -82,45 +82,45 @@ const setUp = () => {
   // add correct mouse wheel event mapping to `inputMap`
   inputMap[detectWheel()] = 'mouse'
 
-  addListeners()
+  addListeners(window)
   doUpdate()
 }
 
 /*
  * events
  */
 
-const addListeners = () => {
+const addListeners = (eventTarget: Window) => {
   // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
   // can only demonstrate potential, but not actual, interaction
   // and are treated separately
   const options = supportsPassive ? { passive: true, useCapture: true } : true
 
   // pointer events (mouse, pen, touch)
   // @ts-ignore
-  if (window.PointerEvent) {
-    window.addEventListener('pointerdown', setInput)
+  if (eventTarget.PointerEvent) {
+    eventTarget.addEventListener('pointerdown', setInput)
     // @ts-ignore
   } else if (window.MSPointerEvent) {
-    window.addEventListener('MSPointerDown', setInput)
+    eventTarget.addEventListener('MSPointerDown', setInput)
   } else {
     // mouse events
-    window.addEventListener('mousedown', setInput, true)
+    eventTarget.addEventListener('mousedown', setInput, true)
 
     // touch events
-    if ('ontouchstart' in window) {
-      window.addEventListener('touchstart', eventBuffer, options)
-      window.addEventListener('touchend', setInput, true)
+    if ('ontouchstart' in eventTarget) {
+      eventTarget.addEventListener('touchstart', eventBuffer, options)
+      eventTarget.addEventListener('touchend', setInput, true)
     }
   }
 
   // keyboard events
-  window.addEventListener('keydown', eventBuffer, true)
-  window.addEventListener('keyup', eventBuffer, true)
+  eventTarget.addEventListener('keydown', eventBuffer, true)
+  eventTarget.addEventListener('keyup', eventBuffer, true)
 
   // focus events
-  window.addEventListener('focusin', setElement)
-  window.addEventListener('focusout', clearElement)
+  eventTarget.addEventListener('focusin', setElement)
+  eventTarget.addEventListener('focusout', clearElement)
 }
 
 // checks conditions before updating new input
@@ -234,6 +234,29 @@ if (isBrowser() && 'addEventListener' in window && Array.prototype.indexOf) {
   setUp()
 }
 
+/*
+ * set up for document
+ */
+
+export const setUpWhatInput = (target: Document) => {
+  const targetWindow = target.defaultView
+  if (
+    isBrowser() &&
+    targetWindow &&
+    'addEventListener' in targetWindow &&
+    Array.prototype.indexOf
+  ) {
+    const whatInputInitialized = 'whatInputInitialized'
+    if (target[whatInputInitialized] === true) {
+      return
+    }
+    target[whatInputInitialized] = true
+
+    addListeners(targetWindow)
+    doUpdate()
+  }
+}
+
 export const setWhatInputSource = (newInput: 'mouse' | 'keyboard' | 'initial') => {
   currentInput = newInput
 }