chore: move FocusZone components to react-bindings

build/gulp/tasks/docs.ts

@@ -85,8 +85,8 @@ task(
 
 const componentsSrc = [
   `${paths.posix.packageSrc('react')}/components/*/[A-Z]*.tsx`,
+  `${paths.posix.packageSrc('react-bindings')}/FocusZone/[A-Z]!(*.types).tsx`,
   `${paths.posix.packageSrc('react-component-ref')}/[A-Z]*.tsx`,
-  `${paths.posix.packageSrc('react')}/lib/accessibility/FocusZone/[A-Z]!(*.types).tsx`,
 ]
 const behaviorSrc = [`${paths.posix.packageSrc('accessibility')}/behaviors/*/[a-z]*Behavior.ts`]
 const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx

@@ -6,14 +6,14 @@ import {
   ProviderContextPrepared,
   ThemeComponentVariablesPrepared,
 } from '@stardust-ui/react'
+import { callable } from '@stardust-ui/react-bindings'
 import * as _ from 'lodash'
 import * as React from 'react'
 // @ts-ignore
 import { ThemeContext } from 'react-fela'
 
 import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
 import { mergeThemeVariables } from 'src/lib/mergeThemes'
-import callable from 'src/lib/callable'
 
 type ComponentExampleVariablesProps = {
   onChange: ComponentExampleVariableProps['onChange']

docs/src/components/VariableResolver/useEnhancedRenderer.ts

@@ -1,10 +1,9 @@
+import { callable } from '@stardust-ui/react-bindings'
 import { ComponentSlotStylesPrepared, Renderer } from '@stardust-ui/react'
 import flat from 'flat'
 import * as _ from 'lodash'
 import * as React from 'react'
 
-import { callable } from 'src/lib'
-
 export type UsedVariables = Record<string, Record<string, null>>
 
 const variableRegex = /<<variable:(\w+)>>/g

packages/react-bindings/package.json

@@ -5,7 +5,9 @@
   "author": "Oleksandr Fediashov <[email protected]>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2"
+    "@babel/runtime": "^7.1.2",
+    "@stardust-ui/accessibility": "^0.39.0",
+    "@stardust-ui/state": "^0.39.0"
   },
   "devDependencies": {
     "@stardust-ui/internal-tooling": "^0.39.0",
@@ -23,9 +25,6 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
-  "optionalDependencies": {
-    "@stardust-ui/state": "^0.39.0"
-  },
   "publishConfig": {
     "access": "public"
   },

packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx → packages/react-bindings/src/FocusZone/AutoFocusZone.tsx

@@ -1,13 +1,13 @@
-import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
 import { Ref } from '@stardust-ui/react-component-ref'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
-import { getNextElement, focusAsync } from './focusUtilities'
-
+import getElementType from '../utils/getElementType'
+import getUnhandledProps from '../utils/getUnhandledProps'
+import callable from '../utils/callable'
 import { AutoFocusZoneProps } from './AutoFocusZone.types'
-import callable from '../../callable'
+import { getNextElement, focusAsync } from './focusUtilities'
 
 /** AutoFocusZone is used to focus inner element on mount. */
 export default class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
@@ -26,7 +26,6 @@ export default class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
 
   render(): JSX.Element {
     const unhandledProps = getUnhandledProps(AutoFocusZone.handledProps, this.props)
-
     const ElementType = getElementType(this.props)
 
     return (

packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx → packages/react-bindings/src/FocusZone/FocusTrapZone.tsx

@@ -1,10 +1,11 @@
-import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
 import { EventListener } from '@stardust-ui/react-component-event-listener'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
+import getElementType from '../utils/getElementType'
+import getUnhandledProps from '../utils/getUnhandledProps'
 import {
   getNextElement,
   getFirstTabbable,
@@ -14,7 +15,6 @@ import {
   focusAsync,
   HIDDEN_FROM_ACC_TREE,
 } from './focusUtilities'
-
 import { FocusTrapZoneProps } from './FocusTrapZone.types'
 
 /** FocusTrapZone is used to trap the focus in any html element placed in body

packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx → packages/react-bindings/src/FocusZone/FocusZone.tsx

@@ -3,14 +3,15 @@ import {
   FocusZoneTabbableElements,
   IS_FOCUSABLE_ATTRIBUTE,
 } from '@stardust-ui/accessibility'
-import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
 import * as React from 'react'
 import cx from 'classnames'
 import * as _ from 'lodash'
 import * as keyboardKey from 'keyboard-key'
 import * as ReactDOM from 'react-dom'
 import * as PropTypes from 'prop-types'
 
+import getElementType from '../utils/getElementType'
+import getUnhandledProps from '../utils/getUnhandledProps'
 import { FocusZoneProps, IFocusZone } from './FocusZone.types'
 import {
   getNextElement,
@@ -50,7 +51,7 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
     shouldResetActiveElementWhenTabFromZone: PropTypes.bool,
     shouldFocusInnerElementWhenReceivedFocus: PropTypes.bool,
     disabled: PropTypes.bool,
-    as: PropTypes.elementType,
+    as: PropTypes.elementType as PropTypes.Requireable<React.ElementType>,
     isCircularNavigation: PropTypes.bool,
     shouldEnterInnerZone: PropTypes.func,
     onActiveElementChanged: PropTypes.func,

packages/react-bindings/src/hooks/useStateManager.ts

@@ -1,10 +1,4 @@
-import {
-  AnyActions,
-  EnhancedActions,
-  Manager,
-  ManagerFactory,
-  SideEffect,
-} from '@stardust-ui/state'
+import { AnyAction, EnhancedActions, Manager, ManagerFactory, SideEffect } from '@stardust-ui/state'
 import * as React from 'react'
 
 type UseStateManagerOptions<State> = {
@@ -13,9 +7,7 @@ type UseStateManagerOptions<State> = {
   sideEffects?: SideEffect<State>[]
 }
 
-export const getDefinedProps = <Props extends Record<string, any>>(
-  props: Props,
-): Partial<Props> => {
+const getDefinedProps = <Props extends Record<string, any>>(props: Props): Partial<Props> => {
   const definedProps: Partial<Props> = {}
 
   Object.keys(props).forEach(propName => {
@@ -27,7 +19,10 @@ export const getDefinedProps = <Props extends Record<string, any>>(
   return definedProps
 }
 
-const useStateManager = <State extends Record<string, any>, Actions extends AnyActions>(
+const useStateManager = <
+  State extends Record<string, any>,
+  Actions extends Record<string, AnyAction>
+>(
   managerFactory: ManagerFactory<State, Actions>,
   options: UseStateManagerOptions<State> = {},
 ): [Readonly<State>, Readonly<Actions>] => {

packages/react-bindings/src/index.ts

@@ -1,5 +1,14 @@
-export { default as getElementType } from './utils/getElementType'
-export { default as getUnhandledProps } from './utils/getUnhandledProps'
-
 export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
 export { default as useStateManager } from './hooks/useStateManager'
+
+export { default as AutoFocusZone } from './FocusZone/AutoFocusZone'
+export * from './FocusZone/AutoFocusZone.types'
+export { default as FocusTrapZone } from './FocusZone/FocusTrapZone'
+export * from './FocusZone/FocusTrapZone.types'
+export { default as FocusZone } from './FocusZone/FocusZone'
+export * from './FocusZone/FocusZone.types'
+export * from './FocusZone/focusUtilities'
+
+export { default as callable } from './utils/callable'
+export { default as getElementType } from './utils/getElementType'
+export { default as getUnhandledProps } from './utils/getUnhandledProps'

packages/react/src/lib/callable.ts → packages/react-bindings/src/utils/callable.ts

@@ -1,4 +1,3 @@
-// https://jsperf.com/startdust-callable
 const callable = (possibleFunction: any) => (...args: any[]) => {
   return typeof possibleFunction === 'function' ? possibleFunction(...args) : possibleFunction
 }

packages/react/test/specs/lib/AutoFocusZone-test.tsx → packages/react-bindings/test/FocusZone/AutoFocusZone-test.tsx

@@ -1,8 +1,7 @@
+import { FocusZone, AutoFocusZone } from '@stardust-ui/react-bindings'
 import * as React from 'react'
 import * as ReactTestUtils from 'react-dom/test-utils'
 
-import { FocusZone, AutoFocusZone } from '../../../src/lib/accessibility/FocusZone'
-
 // rAF does not exist in node - let's mock it
 window.requestAnimationFrame = (callback: FrameRequestCallback) => {
   const r = window.setTimeout(callback, 0)

packages/react/test/specs/lib/FocusTrapZone-test.tsx → packages/react-bindings/test/FocusZone/FocusTrapZone-test.tsx

@@ -1,14 +1,9 @@
 import { FocusZoneDirection } from '@stardust-ui/accessibility'
+import { FocusTrapZone, FocusZone, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
 import * as React from 'react'
 import * as ReactTestUtils from 'react-dom/test-utils'
 import * as keyboardKey from 'keyboard-key'
 
-import {
-  FocusTrapZone,
-  FocusZone,
-  FocusTrapZoneProps,
-} from '../../../src/lib/accessibility/FocusZone'
-
 // rAF does not exist in node - let's mock it
 window.requestAnimationFrame = (callback: FrameRequestCallback) => {
   const r = window.setTimeout(callback, 0)

packages/react/test/specs/lib/FocusZone-test.tsx → packages/react-bindings/test/FocusZone/FocusZone-test.tsx

@@ -3,13 +3,12 @@ import {
   FocusZoneTabbableElements,
   IS_FOCUSABLE_ATTRIBUTE,
 } from '@stardust-ui/accessibility'
+import { FocusZone } from '@stardust-ui/react-bindings'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as ReactTestUtils from 'react-dom/test-utils'
 import * as keyboardKey from 'keyboard-key'
 
-import { FocusZone } from '../../../src/lib/accessibility/FocusZone'
-
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined
   let host: HTMLElement

packages/react/src/components/Dialog/Dialog.tsx

@@ -1,4 +1,5 @@
 import { Accessibility, dialogBehavior } from '@stardust-ui/accessibility'
+import { FocusTrapZoneProps } from '@stardust-ui/react-bindings'
 import { Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
 import { EventListener } from '@stardust-ui/react-component-event-listener'
 import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
@@ -17,7 +18,6 @@ import {
   applyAccessibilityKeyHandlers,
   getOrGenerateIdFromShorthand,
 } from '../../lib'
-import { FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Button, { ButtonProps } from '../Button/Button'
 import ButtonGroup from '../Button/ButtonGroup'

packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx

@@ -3,6 +3,7 @@ import {
   hierarchicalTreeItemBehavior,
   hierarchicalSubtreeBehavior,
 } from '@stardust-ui/accessibility'
+import { getFirstFocusable } from '@stardust-ui/react-bindings'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import { Ref } from '@stardust-ui/react-component-ref'
 import * as _ from 'lodash'
@@ -30,7 +31,6 @@ import {
   withSafeTypeForAs,
   ShorthandCollection,
 } from '../../types'
-import { getFirstFocusable } from '../../lib/accessibility/FocusZone/focusUtilities'
 
 export interface HierarchicalTreeItemSlotClassNames {
   title: string

packages/react/src/components/Icon/Icon.tsx

@@ -1,9 +1,9 @@
 import { Accessibility, iconBehavior } from '@stardust-ui/accessibility'
+import { callable } from '@stardust-ui/react-bindings'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import {
-  callable,
   UIComponent,
   createShorthandFactory,
   UIComponentProps,

packages/react/src/components/Menu/MenuItem.tsx

@@ -1,4 +1,5 @@
 import { Accessibility, menuItemBehavior, submenuBehavior } from '@stardust-ui/accessibility'
+import { focusAsync } from '@stardust-ui/react-bindings'
 import { EventListener } from '@stardust-ui/react-component-event-listener'
 import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
@@ -30,7 +31,6 @@ import {
   ShorthandCollection,
   withSafeTypeForAs,
 } from '../../types'
-import { focusAsync } from '../../lib/accessibility/FocusZone'
 import { Popper } from '../../lib/positioner'
 
 export interface MenuItemSlotClassNames {

packages/react/src/components/MenuButton/focusUtils.ts

@@ -1,8 +1,4 @@
-import {
-  getFirstFocusable,
-  getLastFocusable,
-  focusAsync,
-} from '../../lib/accessibility/FocusZone/focusUtilities'
+import { getFirstFocusable, getLastFocusable, focusAsync } from '@stardust-ui/react-bindings'
 
 export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
   const element =

packages/react/src/components/Popup/Popup.tsx

@@ -1,4 +1,5 @@
 import { Accessibility, popupBehavior } from '@stardust-ui/accessibility'
+import { AutoFocusZoneProps, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
 import { EventListener } from '@stardust-ui/react-component-event-listener'
 import { NodeRef, Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
 import { handleRef, toRefObject, Ref } from '@stardust-ui/react-component-ref'
@@ -30,7 +31,6 @@ import {
   PopperChildrenProps,
 } from '../../lib/positioner'
 import PopupContent, { PopupContentProps } from './PopupContent'
-import { AutoFocusZoneProps, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 
 import { ReactAccessibilityBehavior } from '../../lib/accessibility/reactTypes'
 import { createShorthandFactory, ShorthandFactory } from '../../lib/factories'

packages/react/src/components/Popup/PopupContent.tsx

@@ -1,3 +1,9 @@
+import {
+  FocusTrapZone,
+  FocusTrapZoneProps,
+  AutoFocusZoneProps,
+  AutoFocusZone,
+} from '@stardust-ui/react-bindings'
 import { Ref } from '@stardust-ui/react-component-ref'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
@@ -17,12 +23,6 @@ import {
   ShorthandFactory,
 } from '../../lib'
 import { Accessibility } from '@stardust-ui/accessibility'
-import {
-  FocusTrapZone,
-  FocusTrapZoneProps,
-  AutoFocusZoneProps,
-  AutoFocusZone,
-} from '../../lib/accessibility/FocusZone'
 import { PopperChildrenProps } from '../../lib/positioner'
 import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
 import Box from '../Box/Box'

packages/react/src/components/Portal/Portal.tsx

@@ -1,4 +1,5 @@
 import { AccessibilityAttributes } from '@stardust-ui/accessibility'
+import { FocusTrapZone, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
 import { EventListener } from '@stardust-ui/react-component-event-listener'
 import { handleRef, Ref, toRefObject } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
@@ -16,7 +17,6 @@ import {
   rtlTextContainer,
 } from '../../lib'
 import PortalInner from './PortalInner'
-import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { AccessibilityHandlerProps } from '../../lib/accessibility/reactTypes'
 
 export type TriggerAccessibility = {

packages/react/src/components/Tree/Tree.tsx

@@ -1,3 +1,5 @@
+import { Accessibility, treeBehavior } from '@stardust-ui/accessibility'
+import { getNextElement } from '@stardust-ui/react-bindings'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -23,8 +25,6 @@ import {
   ShorthandCollection,
   ShorthandValue,
 } from '../../types'
-import { Accessibility, treeBehavior } from '@stardust-ui/accessibility'
-import { getNextElement } from '../../lib/accessibility/FocusZone/focusUtilities'
 import { hasSubtree, removeItemAtIndex } from './lib'
 import { TreeTitleProps } from './TreeTitle'
 import { ReactAccessibilityBehavior } from '../../lib/accessibility/reactTypes'

packages/react/src/components/Tree/TreeItem.tsx

@@ -1,11 +1,11 @@
+import { Accessibility, treeItemBehavior } from '@stardust-ui/accessibility'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { Ref } from '@stardust-ui/react-component-ref'
 import TreeTitle, { TreeTitleProps } from './TreeTitle'
-import { Accessibility, treeItemBehavior } from '@stardust-ui/accessibility'
 import {
   UIComponent,
   childrenExist,

packages/react/src/index.ts

@@ -232,7 +232,7 @@ import {
   getNextElement,
   getPreviousElement,
   focusAsync,
-} from './lib/accessibility/FocusZone/focusUtilities'
+} from '@stardust-ui/react-bindings'
 
 export const FocusZoneUtilities = {
   getFirstTabbable,
@@ -243,10 +243,7 @@ export const FocusZoneUtilities = {
   getPreviousElement,
   focusAsync,
 }
-export * from './lib/accessibility/FocusZone/FocusZone.types'
-export * from './lib/accessibility/FocusZone/FocusTrapZone.types'
-export * from './lib/accessibility/FocusZone/AutoFocusZone.types'
-export * from './lib/accessibility/reactTypes'
 
 export * from '@stardust-ui/accessibility'
 export * from '@stardust-ui/react-component-ref'
+export * from '@stardust-ui/react-bindings'