feat(Focus): focus indicator for additional documents (#1816)

* focus indicator for additional documents

* changelog

* use document.defaultView

* fix

(cherry picked from commit 6a8864a)

CHANGELOG.md

@@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update vulnerable version of `lodash` dependency @layershifter ([#1700](https://github.com/stardust-ui/react/pull/1700))
 - Use `target` from `Provider` in `ReactDOM.createPortal()` calls @layershifter ([#1810](https://github.com/stardust-ui/react/pull/1810))
 
+### Features
+- Focus indicator for additional documents @jurokapsiar ([#1816](https://github.com/stardust-ui/react/pull/1816))
+
 <!--------------------------------[ v0.36.1 ]------------------------------- -->
 ## [v0.36.1](https://github.com/stardust-ui/react/tree/v0.36.1) (2019-08-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.36.0...v0.36.1)

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

@@ -6,7 +6,7 @@ import * as React from 'react'
 import { RendererProvider, ThemeProvider, ThemeContext } from '@stardust-ui/react-fela'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 
-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
 }