Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit c755b47

Browse files
layershifterlayershifter
committed
chore: move FocusZone to react-bindings
1 parent 77fccb6 commit c755b47

38 files changed

+100
-76
lines changed

‎build/gulp/tasks/docs.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ task(
8585

8686
const componentsSrc = [
8787
`${paths.posix.packageSrc('react')}/components/*/[A-Z]*.tsx`,
88+
`${paths.posix.packageSrc('react-bindings')}/FocusZone/[A-Z]!(*.types).tsx`,
8889
`${paths.posix.packageSrc('react-component-ref')}/[A-Z]*.tsx`,
89-
`${paths.posix.packageSrc('react')}/lib/accessibility/FocusZone/[A-Z]!(*.types).tsx`,
9090
]
9191
const behaviorSrc = [`${paths.posix.packageSrc('accessibility')}/behaviors/*/[a-z]*Behavior.ts`]
9292
const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import {
66
ProviderContextPrepared,
77
ThemeComponentVariablesPrepared,
88
} from '@stardust-ui/react'
9+
import { callable } from '@stardust-ui/react-bindings'
910
import * as _ from 'lodash'
1011
import * as React from 'react'
1112
// @ts-ignore
1213
import { ThemeContext } from 'react-fela'
1314

1415
import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
1516
import { mergeThemeVariables } from 'src/lib/mergeThemes'
16-
import callable from 'src/lib/callable'
1717

1818
type ComponentExampleVariablesProps = {
1919
onChange: ComponentExampleVariableProps['onChange']

‎docs/src/components/VariableResolver/useEnhancedRenderer.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
import { callable } from '@stardust-ui/react-bindings'
12
import { ComponentSlotStylesPrepared, Renderer } from '@stardust-ui/react'
23
import flat from 'flat'
34
import * as _ from 'lodash'
45
import * as React from 'react'
56

6-
import { callable } from 'src/lib'
7-
87
export type UsedVariables = Record<string, Record<string, null>>
98

109
const variableRegex = /<<variable:(\w+)>>/g

‎packages/react-bindings/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@
1919
"license": "MIT",
2020
"main": "dist/commonjs/index.js",
2121
"module": "dist/es/index.js",
22+
"optionalDependencies": {
23+
"@stardust-ui/accessibility": "^0.39.0",
24+
"@stardust-ui/state": "^0.39.0"
25+
},
2226
"peerDependencies": {
2327
"react": "^16.8.0",
2428
"react-dom": "^16.8.0"
2529
},
26-
"optionalDependencies": {
27-
"@stardust-ui/state": "^0.39.0"
28-
},
2930
"publishConfig": {
3031
"access": "public"
3132
},

‎packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx renamed to ‎packages/react-bindings/src/FocusZone/AutoFocusZone.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
21
import { Ref } from '@stardust-ui/react-component-ref'
32
import * as React from 'react'
43
import * as PropTypes from 'prop-types'
54
import * as _ from 'lodash'
65

7-
import { getNextElement, focusAsync } from './focusUtilities'
8-
6+
import getElementType from '../utils/getElementType'
7+
import getUnhandledProps from '../utils/getUnhandledProps'
8+
import callable from '../utils/callable'
99
import { AutoFocusZoneProps } from './AutoFocusZone.types'
10-
import callable from '../../callable'
10+
import { getNextElement, focusAsync } from './focusUtilities'
1111

1212
/** AutoFocusZone is used to focus inner element on mount. */
1313
export default class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
@@ -26,7 +26,6 @@ export default class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
2626

2727
render(): JSX.Element {
2828
const unhandledProps = getUnhandledProps(AutoFocusZone.handledProps, this.props)
29-
3029
const ElementType = getElementType(this.props)
3130

3231
return (

‎packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.types.tsx renamed to ‎packages/react-bindings/src/FocusZone/AutoFocusZone.types.tsx

File renamed without changes.

‎packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md renamed to ‎packages/react-bindings/src/FocusZone/CHANGELOG.md

File renamed without changes.

‎packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx renamed to ‎packages/react-bindings/src/FocusZone/FocusTrapZone.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
21
import { EventListener } from '@stardust-ui/react-component-event-listener'
32
import * as React from 'react'
43
import * as ReactDOM from 'react-dom'
54
import * as PropTypes from 'prop-types'
65
import * as _ from 'lodash'
76

7+
import getElementType from '../utils/getElementType'
8+
import getUnhandledProps from '../utils/getUnhandledProps'
89
import {
910
getNextElement,
1011
getFirstTabbable,
@@ -14,7 +15,6 @@ import {
1415
focusAsync,
1516
HIDDEN_FROM_ACC_TREE,
1617
} from './focusUtilities'
17-
1818
import { FocusTrapZoneProps } from './FocusTrapZone.types'
1919

2020
/** FocusTrapZone is used to trap the focus in any html element placed in body

‎packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.types.tsx renamed to ‎packages/react-bindings/src/FocusZone/FocusTrapZone.types.tsx

File renamed without changes.

‎packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx renamed to ‎packages/react-bindings/src/FocusZone/FocusZone.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import {
33
FocusZoneTabbableElements,
44
IS_FOCUSABLE_ATTRIBUTE,
55
} from '@stardust-ui/accessibility'
6-
import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings'
76
import * as React from 'react'
87
import cx from 'classnames'
98
import * as _ from 'lodash'
109
import * as keyboardKey from 'keyboard-key'
1110
import * as ReactDOM from 'react-dom'
1211
import * as PropTypes from 'prop-types'
1312

13+
import getElementType from '../utils/getElementType'
14+
import getUnhandledProps from '../utils/getUnhandledProps'
1415
import { FocusZoneProps, IFocusZone } from './FocusZone.types'
1516
import {
1617
getNextElement,
@@ -50,7 +51,7 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
5051
shouldResetActiveElementWhenTabFromZone: PropTypes.bool,
5152
shouldFocusInnerElementWhenReceivedFocus: PropTypes.bool,
5253
disabled: PropTypes.bool,
53-
as: PropTypes.elementType,
54+
as: PropTypes.elementType as PropTypes.Requireable<React.ElementType>,
5455
isCircularNavigation: PropTypes.bool,
5556
shouldEnterInnerZone: PropTypes.func,
5657
onActiveElementChanged: PropTypes.func,

‎packages/react/src/lib/accessibility/FocusZone/FocusZone.types.ts renamed to ‎packages/react-bindings/src/FocusZone/FocusZone.types.ts

File renamed without changes.

‎packages/react/src/lib/accessibility/FocusZone/focusUtilities.ts renamed to ‎packages/react-bindings/src/FocusZone/focusUtilities.ts

File renamed without changes.

‎packages/react-bindings/src/FocusZone/wrapInFocusZone.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { AccessibilityDefinition, FocusZoneMode } from '@stardust-ui/accessibility'
2+
import * as React from 'react'
3+
4+
import FocusZone from './FocusZone'
5+
import { FocusZoneProps } from './FocusZone.types'
6+
import { FOCUSZONE_WRAP_ATTRIBUTE } from './focusUtilities'
7+
8+
const wrapInFocusZone = (
9+
element: React.ReactElement,
10+
accessibility: AccessibilityDefinition,
11+
rtl: boolean,
12+
) => {
13+
if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Wrap) {
14+
return React.createElement(
15+
FocusZone,
16+
{
17+
[FOCUSZONE_WRAP_ATTRIBUTE]: true,
18+
...accessibility.focusZone.props,
19+
isRtl: rtl,
20+
} as FocusZoneProps & { [FOCUSZONE_WRAP_ATTRIBUTE]: boolean },
21+
element,
22+
)
23+
}
24+
25+
if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Embed) {
26+
return React.createElement(FocusZone, {
27+
...element.props,
28+
...accessibility.focusZone.props,
29+
isRtl: rtl,
30+
})
31+
}
32+
33+
return element
34+
}
35+
36+
export default wrapInFocusZone

‎packages/react-bindings/src/index.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
export { default as getElementType } from './utils/getElementType'
2-
export { default as getUnhandledProps } from './utils/getUnhandledProps'
3-
41
export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
52
export { default as useStateManager } from './hooks/useStateManager'
3+
4+
export { default as AutoFocusZone } from './FocusZone/AutoFocusZone'
5+
export * from './FocusZone/AutoFocusZone.types'
6+
export { default as FocusTrapZone } from './FocusZone/FocusTrapZone'
7+
export * from './FocusZone/FocusTrapZone.types'
8+
export { default as FocusZone } from './FocusZone/FocusZone'
9+
export * from './FocusZone/FocusZone.types'
10+
export * from './FocusZone/focusUtilities'
11+
12+
export { default as callable } from './utils/callable'
13+
export { default as getElementType } from './utils/getElementType'
14+
export { default as getUnhandledProps } from './utils/getUnhandledProps'

‎packages/react/src/lib/callable.ts renamed to ‎packages/react-bindings/src/utils/callable.ts

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

‎packages/react/test/specs/lib/AutoFocusZone-test.tsx renamed to ‎packages/react-bindings/test/FocusZone/AutoFocusZone-test.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
import { FocusZone, AutoFocusZone } from '@stardust-ui/react-bindings'
12
import * as React from 'react'
23
import * as ReactTestUtils from 'react-dom/test-utils'
34

4-
import { FocusZone, AutoFocusZone } from '../../../src/lib/accessibility/FocusZone'
5-
65
// rAF does not exist in node - let's mock it
76
window.requestAnimationFrame = (callback: FrameRequestCallback) => {
87
const r = window.setTimeout(callback, 0)

‎packages/react/test/specs/lib/FocusTrapZone-test.tsx renamed to ‎packages/react-bindings/test/FocusZone/FocusTrapZone-test.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import { FocusZoneDirection } from '@stardust-ui/accessibility'
2+
import { FocusTrapZone, FocusZone, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
23
import * as React from 'react'
34
import * as ReactTestUtils from 'react-dom/test-utils'
45
import * as keyboardKey from 'keyboard-key'
56

6-
import {
7-
FocusTrapZone,
8-
FocusZone,
9-
FocusTrapZoneProps,
10-
} from '../../../src/lib/accessibility/FocusZone'
11-
127
// rAF does not exist in node - let's mock it
138
window.requestAnimationFrame = (callback: FrameRequestCallback) => {
149
const r = window.setTimeout(callback, 0)

‎packages/react/test/specs/lib/FocusZone-test.tsx renamed to ‎packages/react-bindings/test/FocusZone/FocusZone-test.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import {
33
FocusZoneTabbableElements,
44
IS_FOCUSABLE_ATTRIBUTE,
55
} from '@stardust-ui/accessibility'
6+
import { FocusZone } from '@stardust-ui/react-bindings'
67
import * as React from 'react'
78
import * as ReactDOM from 'react-dom'
89
import * as ReactTestUtils from 'react-dom/test-utils'
910
import * as keyboardKey from 'keyboard-key'
1011

11-
import { FocusZone } from '../../../src/lib/accessibility/FocusZone'
12-
1312
describe('FocusZone', () => {
1413
let lastFocusedElement: HTMLElement | undefined
1514
let host: HTMLElement

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Accessibility, dialogBehavior } from '@stardust-ui/accessibility'
2+
import { FocusTrapZoneProps } from '@stardust-ui/react-bindings'
23
import { Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
34
import { EventListener } from '@stardust-ui/react-component-event-listener'
45
import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
@@ -17,7 +18,6 @@ import {
1718
applyAccessibilityKeyHandlers,
1819
getOrGenerateIdFromShorthand,
1920
} from '../../lib'
20-
import { FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
2121
import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
2222
import Button, { ButtonProps } from '../Button/Button'
2323
import ButtonGroup from '../Button/ButtonGroup'

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
hierarchicalTreeItemBehavior,
44
hierarchicalSubtreeBehavior,
55
} from '@stardust-ui/accessibility'
6+
import { getFirstFocusable } from '@stardust-ui/react-bindings'
67
import * as customPropTypes from '@stardust-ui/react-proptypes'
78
import { Ref } from '@stardust-ui/react-component-ref'
89
import * as _ from 'lodash'
@@ -30,7 +31,6 @@ import {
3031
withSafeTypeForAs,
3132
ShorthandCollection,
3233
} from '../../types'
33-
import { getFirstFocusable } from '../../lib/accessibility/FocusZone/focusUtilities'
3434

3535
export interface HierarchicalTreeItemSlotClassNames {
3636
title: string

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Accessibility, iconBehavior } from '@stardust-ui/accessibility'
2+
import { callable } from '@stardust-ui/react-bindings'
23
import * as customPropTypes from '@stardust-ui/react-proptypes'
34
import * as PropTypes from 'prop-types'
45
import * as React from 'react'
56
import {
6-
callable,
77
UIComponent,
88
createShorthandFactory,
99
UIComponentProps,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Accessibility, menuItemBehavior, submenuBehavior } from '@stardust-ui/accessibility'
2+
import { focusAsync } from '@stardust-ui/react-bindings'
23
import { EventListener } from '@stardust-ui/react-component-event-listener'
34
import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
45
import * as customPropTypes from '@stardust-ui/react-proptypes'
@@ -30,7 +31,6 @@ import {
3031
ShorthandCollection,
3132
withSafeTypeForAs,
3233
} from '../../types'
33-
import { focusAsync } from '../../lib/accessibility/FocusZone'
3434
import { Popper } from '../../lib/positioner'
3535

3636
export interface MenuItemSlotClassNames {

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import {
2-
getFirstFocusable,
3-
getLastFocusable,
4-
focusAsync,
5-
} from '../../lib/accessibility/FocusZone/focusUtilities'
1+
import { getFirstFocusable, getLastFocusable, focusAsync } from '@stardust-ui/react-bindings'
62

73
export const focusMenuItem = (menuRef: HTMLElement, order: 'first' | 'last') => {
84
const element =

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Accessibility, popupBehavior } from '@stardust-ui/accessibility'
2+
import { AutoFocusZoneProps, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
23
import { EventListener } from '@stardust-ui/react-component-event-listener'
34
import { NodeRef, Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
45
import { handleRef, toRefObject, Ref } from '@stardust-ui/react-component-ref'
@@ -30,7 +31,6 @@ import {
3031
PopperChildrenProps,
3132
} from '../../lib/positioner'
3233
import PopupContent, { PopupContentProps } from './PopupContent'
33-
import { AutoFocusZoneProps, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
3434

3535
import { ReactAccessibilityBehavior } from '../../lib/accessibility/reactTypes'
3636
import { createShorthandFactory, ShorthandFactory } from '../../lib/factories'

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import {
2+
FocusTrapZone,
3+
FocusTrapZoneProps,
4+
AutoFocusZoneProps,
5+
AutoFocusZone,
6+
} from '@stardust-ui/react-bindings'
17
import { Ref } from '@stardust-ui/react-component-ref'
28
import * as React from 'react'
39
import * as PropTypes from 'prop-types'
@@ -17,12 +23,6 @@ import {
1723
ShorthandFactory,
1824
} from '../../lib'
1925
import { Accessibility } from '@stardust-ui/accessibility'
20-
import {
21-
FocusTrapZone,
22-
FocusTrapZoneProps,
23-
AutoFocusZoneProps,
24-
AutoFocusZone,
25-
} from '../../lib/accessibility/FocusZone'
2626
import { PopperChildrenProps } from '../../lib/positioner'
2727
import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
2828
import Box from '../Box/Box'

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AccessibilityAttributes } from '@stardust-ui/accessibility'
2+
import { FocusTrapZone, FocusTrapZoneProps } from '@stardust-ui/react-bindings'
23
import { EventListener } from '@stardust-ui/react-component-event-listener'
34
import { handleRef, Ref, toRefObject } from '@stardust-ui/react-component-ref'
45
import * as customPropTypes from '@stardust-ui/react-proptypes'
@@ -16,7 +17,6 @@ import {
1617
rtlTextContainer,
1718
} from '../../lib'
1819
import PortalInner from './PortalInner'
19-
import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
2020
import { AccessibilityHandlerProps } from '../../lib/accessibility/reactTypes'
2121

2222
export type TriggerAccessibility = {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Accessibility, treeBehavior } from '@stardust-ui/accessibility'
2+
import { getNextElement } from '@stardust-ui/react-bindings'
13
import * as customPropTypes from '@stardust-ui/react-proptypes'
24
import * as _ from 'lodash'
35
import * as PropTypes from 'prop-types'
@@ -23,8 +25,6 @@ import {
2325
ShorthandCollection,
2426
ShorthandValue,
2527
} from '../../types'
26-
import { Accessibility, treeBehavior } from '@stardust-ui/accessibility'
27-
import { getNextElement } from '../../lib/accessibility/FocusZone/focusUtilities'
2828
import { hasSubtree, removeItemAtIndex } from './lib'
2929
import { TreeTitleProps } from './TreeTitle'
3030
import { ReactAccessibilityBehavior } from '../../lib/accessibility/reactTypes'

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { Accessibility, treeItemBehavior } from '@stardust-ui/accessibility'
12
import * as customPropTypes from '@stardust-ui/react-proptypes'
23
import * as _ from 'lodash'
34
import * as PropTypes from 'prop-types'
45
import * as React from 'react'
56

67
import { Ref } from '@stardust-ui/react-component-ref'
78
import TreeTitle, { TreeTitleProps } from './TreeTitle'
8-
import { Accessibility, treeItemBehavior } from '@stardust-ui/accessibility'
99
import {
1010
UIComponent,
1111
childrenExist,

‎packages/react/src/index.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ import {
232232
getNextElement,
233233
getPreviousElement,
234234
focusAsync,
235-
} from './lib/accessibility/FocusZone/focusUtilities'
235+
} from '@stardust-ui/react-bindings'
236236

237237
export const FocusZoneUtilities = {
238238
getFirstTabbable,
@@ -243,10 +243,7 @@ export const FocusZoneUtilities = {
243243
getPreviousElement,
244244
focusAsync,
245245
}
246-
export * from './lib/accessibility/FocusZone/FocusZone.types'
247-
export * from './lib/accessibility/FocusZone/FocusTrapZone.types'
248-
export * from './lib/accessibility/FocusZone/AutoFocusZone.types'
249-
export * from './lib/accessibility/reactTypes'
250246

251247
export * from '@stardust-ui/accessibility'
252248
export * from '@stardust-ui/react-component-ref'
249+
export * from '@stardust-ui/react-bindings'

0 commit comments

Comments
 (0)