From c755b47f6303ecfcb7d9ce871bbbd6e5807e3383 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 24 Sep 2019 17:39:37 +0200 Subject: [PATCH 1/3] chore: move FocusZone to react-bindings --- build/gulp/tasks/docs.ts | 2 +- .../ComponentExampleVariables.tsx | 2 +- .../VariableResolver/useEnhancedRenderer.ts | 3 +- packages/react-bindings/package.json | 7 ++-- .../src}/FocusZone/AutoFocusZone.tsx | 9 +++-- .../src}/FocusZone/AutoFocusZone.types.tsx | 0 .../src}/FocusZone/CHANGELOG.md | 0 .../src}/FocusZone/FocusTrapZone.tsx | 4 +-- .../src}/FocusZone/FocusTrapZone.types.tsx | 0 .../src}/FocusZone/FocusZone.tsx | 5 +-- .../src}/FocusZone/FocusZone.types.ts | 0 .../src}/FocusZone/focusUtilities.ts | 0 .../src/FocusZone/wrapInFocusZone.ts | 36 +++++++++++++++++++ packages/react-bindings/src/index.ts | 15 ++++++-- .../src/utils}/callable.ts | 1 - .../test/FocusZone}/AutoFocusZone-test.tsx | 3 +- .../test/FocusZone}/FocusTrapZone-test.tsx | 7 +--- .../test/FocusZone}/FocusZone-test.tsx | 3 +- .../react/src/components/Dialog/Dialog.tsx | 2 +- .../HierarchicalTree/HierarchicalTreeItem.tsx | 2 +- packages/react/src/components/Icon/Icon.tsx | 2 +- .../react/src/components/Menu/MenuItem.tsx | 2 +- .../src/components/MenuButton/focusUtils.ts | 6 +--- packages/react/src/components/Popup/Popup.tsx | 2 +- .../src/components/Popup/PopupContent.tsx | 12 +++---- .../react/src/components/Portal/Portal.tsx | 2 +- packages/react/src/components/Tree/Tree.tsx | 4 +-- .../react/src/components/Tree/TreeItem.tsx | 2 +- packages/react/src/index.ts | 7 ++-- .../src/lib/accessibility/FocusZone/index.ts | 7 ---- .../src/lib/felaInvokeKeyframesPlugin.ts | 2 +- packages/react/src/lib/index.ts | 1 - packages/react/src/lib/mergeThemes.ts | 2 +- packages/react/src/lib/renderComponent.tsx | 12 ++++--- .../teams/components/Icon/iconStyles.ts | 3 +- .../commonTests/handlesAccessibility.tsx | 3 +- .../test/specs/commonTests/isConformant.tsx | 4 +-- .../react/test/specs/lib/factories-test.tsx | 2 +- 38 files changed, 100 insertions(+), 76 deletions(-) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/AutoFocusZone.tsx (91%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/AutoFocusZone.types.tsx (100%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/CHANGELOG.md (100%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/FocusTrapZone.tsx (99%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/FocusTrapZone.types.tsx (100%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/FocusZone.tsx (99%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/FocusZone.types.ts (100%) rename packages/{react/src/lib/accessibility => react-bindings/src}/FocusZone/focusUtilities.ts (100%) create mode 100644 packages/react-bindings/src/FocusZone/wrapInFocusZone.ts rename packages/{react/src/lib => react-bindings/src/utils}/callable.ts (82%) rename packages/{react/test/specs/lib => react-bindings/test/FocusZone}/AutoFocusZone-test.tsx (97%) rename packages/{react/test/specs/lib => react-bindings/test/FocusZone}/FocusTrapZone-test.tsx (99%) rename packages/{react/test/specs/lib => react-bindings/test/FocusZone}/FocusZone-test.tsx (99%) delete mode 100644 packages/react/src/lib/accessibility/FocusZone/index.ts diff --git a/build/gulp/tasks/docs.ts b/build/gulp/tasks/docs.ts index 28dfa42c75..4e2017b9be 100644 --- a/build/gulp/tasks/docs.ts +++ b/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` diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx index b3c29db88a..4df8958b34 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx @@ -6,6 +6,7 @@ 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 @@ -13,7 +14,6 @@ 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'] diff --git a/docs/src/components/VariableResolver/useEnhancedRenderer.ts b/docs/src/components/VariableResolver/useEnhancedRenderer.ts index 09b0f35b98..a3a8adea58 100644 --- a/docs/src/components/VariableResolver/useEnhancedRenderer.ts +++ b/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> const variableRegex = /<>/g diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json index aa865daead..85eeef92e6 100644 --- a/packages/react-bindings/package.json +++ b/packages/react-bindings/package.json @@ -19,13 +19,14 @@ "license": "MIT", "main": "dist/commonjs/index.js", "module": "dist/es/index.js", + "optionalDependencies": { + "@stardust-ui/accessibility": "^0.39.0", + "@stardust-ui/state": "^0.39.0" + }, "peerDependencies": { "react": "^16.8.0", "react-dom": "^16.8.0" }, - "optionalDependencies": { - "@stardust-ui/state": "^0.39.0" - }, "publishConfig": { "access": "public" }, diff --git a/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx b/packages/react-bindings/src/FocusZone/AutoFocusZone.tsx similarity index 91% rename from packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx rename to packages/react-bindings/src/FocusZone/AutoFocusZone.tsx index 4f0c3d45fc..a284bdcf39 100644 --- a/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx +++ b/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 { @@ -26,7 +26,6 @@ export default class AutoFocusZone extends React.Component { render(): JSX.Element { const unhandledProps = getUnhandledProps(AutoFocusZone.handledProps, this.props) - const ElementType = getElementType(this.props) return ( diff --git a/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.types.tsx b/packages/react-bindings/src/FocusZone/AutoFocusZone.types.tsx similarity index 100% rename from packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.types.tsx rename to packages/react-bindings/src/FocusZone/AutoFocusZone.types.tsx diff --git a/packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md b/packages/react-bindings/src/FocusZone/CHANGELOG.md similarity index 100% rename from packages/react/src/lib/accessibility/FocusZone/CHANGELOG.md rename to packages/react-bindings/src/FocusZone/CHANGELOG.md diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx b/packages/react-bindings/src/FocusZone/FocusTrapZone.tsx similarity index 99% rename from packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx rename to packages/react-bindings/src/FocusZone/FocusTrapZone.tsx index ef86e0e69a..ed9ff25ec9 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx +++ b/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 diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.types.tsx b/packages/react-bindings/src/FocusZone/FocusTrapZone.types.tsx similarity index 100% rename from packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.types.tsx rename to packages/react-bindings/src/FocusZone/FocusTrapZone.types.tsx diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx b/packages/react-bindings/src/FocusZone/FocusZone.tsx similarity index 99% rename from packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx rename to packages/react-bindings/src/FocusZone/FocusZone.tsx index 6a6e886f4d..64b946a10d 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx +++ b/packages/react-bindings/src/FocusZone/FocusZone.tsx @@ -3,7 +3,6 @@ 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' @@ -11,6 +10,8 @@ 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 implement shouldResetActiveElementWhenTabFromZone: PropTypes.bool, shouldFocusInnerElementWhenReceivedFocus: PropTypes.bool, disabled: PropTypes.bool, - as: PropTypes.elementType, + as: PropTypes.elementType as PropTypes.Requireable, isCircularNavigation: PropTypes.bool, shouldEnterInnerZone: PropTypes.func, onActiveElementChanged: PropTypes.func, diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusZone.types.ts b/packages/react-bindings/src/FocusZone/FocusZone.types.ts similarity index 100% rename from packages/react/src/lib/accessibility/FocusZone/FocusZone.types.ts rename to packages/react-bindings/src/FocusZone/FocusZone.types.ts diff --git a/packages/react/src/lib/accessibility/FocusZone/focusUtilities.ts b/packages/react-bindings/src/FocusZone/focusUtilities.ts similarity index 100% rename from packages/react/src/lib/accessibility/FocusZone/focusUtilities.ts rename to packages/react-bindings/src/FocusZone/focusUtilities.ts diff --git a/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts b/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts new file mode 100644 index 0000000000..ae60eb3884 --- /dev/null +++ b/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts @@ -0,0 +1,36 @@ +import { AccessibilityDefinition, FocusZoneMode } from '@stardust-ui/accessibility' +import * as React from 'react' + +import FocusZone from './FocusZone' +import { FocusZoneProps } from './FocusZone.types' +import { FOCUSZONE_WRAP_ATTRIBUTE } from './focusUtilities' + +const wrapInFocusZone = ( + element: React.ReactElement, + accessibility: AccessibilityDefinition, + rtl: boolean, +) => { + if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Wrap) { + return React.createElement( + FocusZone, + { + [FOCUSZONE_WRAP_ATTRIBUTE]: true, + ...accessibility.focusZone.props, + isRtl: rtl, + } as FocusZoneProps & { [FOCUSZONE_WRAP_ATTRIBUTE]: boolean }, + element, + ) + } + + if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Embed) { + return React.createElement(FocusZone, { + ...element.props, + ...accessibility.focusZone.props, + isRtl: rtl, + }) + } + + return element +} + +export default wrapInFocusZone diff --git a/packages/react-bindings/src/index.ts b/packages/react-bindings/src/index.ts index be397cf962..986ab73f30 100644 --- a/packages/react-bindings/src/index.ts +++ b/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' diff --git a/packages/react/src/lib/callable.ts b/packages/react-bindings/src/utils/callable.ts similarity index 82% rename from packages/react/src/lib/callable.ts rename to packages/react-bindings/src/utils/callable.ts index 6e30c3179a..89aa3982ca 100644 --- a/packages/react/src/lib/callable.ts +++ b/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 } diff --git a/packages/react/test/specs/lib/AutoFocusZone-test.tsx b/packages/react-bindings/test/FocusZone/AutoFocusZone-test.tsx similarity index 97% rename from packages/react/test/specs/lib/AutoFocusZone-test.tsx rename to packages/react-bindings/test/FocusZone/AutoFocusZone-test.tsx index 3710090cc6..10f6b94e20 100644 --- a/packages/react/test/specs/lib/AutoFocusZone-test.tsx +++ b/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) diff --git a/packages/react/test/specs/lib/FocusTrapZone-test.tsx b/packages/react-bindings/test/FocusZone/FocusTrapZone-test.tsx similarity index 99% rename from packages/react/test/specs/lib/FocusTrapZone-test.tsx rename to packages/react-bindings/test/FocusZone/FocusTrapZone-test.tsx index 6bae9eef80..474533cc0d 100644 --- a/packages/react/test/specs/lib/FocusTrapZone-test.tsx +++ b/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) diff --git a/packages/react/test/specs/lib/FocusZone-test.tsx b/packages/react-bindings/test/FocusZone/FocusZone-test.tsx similarity index 99% rename from packages/react/test/specs/lib/FocusZone-test.tsx rename to packages/react-bindings/test/FocusZone/FocusZone-test.tsx index 15243c4c1e..eabb8e6554 100644 --- a/packages/react/test/specs/lib/FocusZone-test.tsx +++ b/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 diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx index eb9ed7374e..ec7c4956ee 100644 --- a/packages/react/src/components/Dialog/Dialog.tsx +++ b/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' diff --git a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx b/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx index 8b5cb322c5..54f2421a34 100644 --- a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx +++ b/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 diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index eaaf22bab0..6ff084797d 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/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, diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index a034724bef..6ab0f8aa3f 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/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 { diff --git a/packages/react/src/components/MenuButton/focusUtils.ts b/packages/react/src/components/MenuButton/focusUtils.ts index 078313d1f8..f638999fd3 100644 --- a/packages/react/src/components/MenuButton/focusUtils.ts +++ b/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 = diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx index 33c6d549d9..9fefa35fa8 100644 --- a/packages/react/src/components/Popup/Popup.tsx +++ b/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' diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx index 766688ea03..bffdf751fc 100644 --- a/packages/react/src/components/Popup/PopupContent.tsx +++ b/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' diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx index 803b79c05c..67d615b37b 100644 --- a/packages/react/src/components/Portal/Portal.tsx +++ b/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 = { diff --git a/packages/react/src/components/Tree/Tree.tsx b/packages/react/src/components/Tree/Tree.tsx index f98a9a036c..334e4d5b44 100644 --- a/packages/react/src/components/Tree/Tree.tsx +++ b/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' diff --git a/packages/react/src/components/Tree/TreeItem.tsx b/packages/react/src/components/Tree/TreeItem.tsx index d29a71ca5a..8f0d34348d 100644 --- a/packages/react/src/components/Tree/TreeItem.tsx +++ b/packages/react/src/components/Tree/TreeItem.tsx @@ -1,3 +1,4 @@ +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' @@ -5,7 +6,6 @@ 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, diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 578f7f9963..a196e7358d 100644 --- a/packages/react/src/index.ts +++ b/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' diff --git a/packages/react/src/lib/accessibility/FocusZone/index.ts b/packages/react/src/lib/accessibility/FocusZone/index.ts deleted file mode 100644 index 39fdc5efba..0000000000 --- a/packages/react/src/lib/accessibility/FocusZone/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { default as FocusZone } from './FocusZone' -export * from './FocusZone.types' -export { default as FocusTrapZone } from './FocusTrapZone' -export * from './FocusTrapZone.types' -export * from './focusUtilities' -export { default as AutoFocusZone } from './AutoFocusZone' -export * from './AutoFocusZone.types' diff --git a/packages/react/src/lib/felaInvokeKeyframesPlugin.ts b/packages/react/src/lib/felaInvokeKeyframesPlugin.ts index bfbda0f0bc..c575e343b8 100644 --- a/packages/react/src/lib/felaInvokeKeyframesPlugin.ts +++ b/packages/react/src/lib/felaInvokeKeyframesPlugin.ts @@ -1,4 +1,4 @@ -import callable from './callable' +import { callable } from '@stardust-ui/react-bindings' import * as _ from 'lodash' /** diff --git a/packages/react/src/lib/index.ts b/packages/react/src/lib/index.ts index 025cf65673..f715d25368 100644 --- a/packages/react/src/lib/index.ts +++ b/packages/react/src/lib/index.ts @@ -11,7 +11,6 @@ export { default as stringLiteralsArray } from './stringLiteralsArray' export { default as getOrGenerateIdFromShorthand } from './getOrGenerateIdFromShorthand' export * from './factories' -export { default as callable } from './callable' export { default as constants } from './constants' export { default as mergeThemes } from './mergeThemes' export { default as mergeProviderContexts } from './mergeProviderContexts' diff --git a/packages/react/src/lib/mergeThemes.ts b/packages/react/src/lib/mergeThemes.ts index 91a6aba665..0648000785 100644 --- a/packages/react/src/lib/mergeThemes.ts +++ b/packages/react/src/lib/mergeThemes.ts @@ -1,3 +1,4 @@ +import { callable } from '@stardust-ui/react-bindings' import * as _ from 'lodash' import { ComponentVariablesInput, @@ -18,7 +19,6 @@ import { ComponentSlotStyle, ThemeAnimation, } from '../themes/types' -import callable from './callable' import toCompactArray from './toCompactArray' import deepmerge from './deepmerge' diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx index a94d97533a..2f9cc118c5 100644 --- a/packages/react/src/lib/renderComponent.tsx +++ b/packages/react/src/lib/renderComponent.tsx @@ -4,12 +4,18 @@ import { FocusZoneDefinition, Accessibility, } from '@stardust-ui/accessibility' -import { getElementType, getUnhandledProps } from '@stardust-ui/react-bindings' +import { + callable, + FocusZone, + FocusZoneProps, + FOCUSZONE_WRAP_ATTRIBUTE, + getElementType, + getUnhandledProps, +} from '@stardust-ui/react-bindings' import cx from 'classnames' import * as React from 'react' import * as _ from 'lodash' -import callable from './callable' import logProviderMissingWarning from './providerMissingHandler' import { ComponentStyleFunctionParam, @@ -25,8 +31,6 @@ import { Props, ProviderContextPrepared } from '../types' import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from './accessibility/reactTypes' import getKeyDownHandlers from './getKeyDownHandlers' import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes' -import { FocusZoneProps, FocusZone } from './accessibility/FocusZone' -import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities' import createAnimationStyles from './createAnimationStyles' import Debug, { isEnabled as isDebugEnabled } from './debug' diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 0cbf3ebd3b..724d92ab59 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -1,6 +1,7 @@ +import { callable } from '@stardust-ui/react-bindings' import * as _ from 'lodash' -import { callable, pxToRem, SizeValue } from '../../../../lib' +import { pxToRem, SizeValue } from '../../../../lib' import { ComponentSlotStylesPrepared, ICSSInJSStyle, diff --git a/packages/react/test/specs/commonTests/handlesAccessibility.tsx b/packages/react/test/specs/commonTests/handlesAccessibility.tsx index 740f2d076b..b5dcab52d1 100644 --- a/packages/react/test/specs/commonTests/handlesAccessibility.tsx +++ b/packages/react/test/specs/commonTests/handlesAccessibility.tsx @@ -1,10 +1,9 @@ import { Accessibility, AriaRole, FocusZoneMode } from '@stardust-ui/accessibility' +import { FocusZone, FOCUSZONE_WRAP_ATTRIBUTE } from '@stardust-ui/react-bindings' import * as React from 'react' import * as keyboardKey from 'keyboard-key' import { mountWithProviderAndGetComponent, mountWithProvider } from 'test/utils' -import { FocusZone } from 'src/lib/accessibility/FocusZone' -import { FOCUSZONE_WRAP_ATTRIBUTE } from 'src/lib/accessibility/FocusZone/focusUtilities' import { UIComponent } from 'src/lib' import { EVENT_TARGET_ATTRIBUTE, getEventTargetComponent } from './eventTarget' diff --git a/packages/react/test/specs/commonTests/isConformant.tsx b/packages/react/test/specs/commonTests/isConformant.tsx index 8837a06ab9..fc49531f22 100644 --- a/packages/react/test/specs/commonTests/isConformant.tsx +++ b/packages/react/test/specs/commonTests/isConformant.tsx @@ -1,4 +1,5 @@ import { Accessibility, AriaRole, IS_FOCUSABLE_ATTRIBUTE } from '@stardust-ui/accessibility' +import { FocusZone, FOCUSZONE_WRAP_ATTRIBUTE } from '@stardust-ui/react-bindings' import { Ref, RefFindNode } from '@stardust-ui/react-component-ref' import * as faker from 'faker' import * as _ from 'lodash' @@ -17,9 +18,6 @@ import { import helpers from './commonHelpers' import * as stardust from 'src/index' - -import { FocusZone } from 'src/lib/accessibility/FocusZone' -import { FOCUSZONE_WRAP_ATTRIBUTE } from 'src/lib/accessibility/FocusZone/focusUtilities' import { getEventTargetComponent, EVENT_TARGET_ATTRIBUTE } from './eventTarget' export interface Conformant { diff --git a/packages/react/test/specs/lib/factories-test.tsx b/packages/react/test/specs/lib/factories-test.tsx index f90448aae8..108f386461 100644 --- a/packages/react/test/specs/lib/factories-test.tsx +++ b/packages/react/test/specs/lib/factories-test.tsx @@ -1,10 +1,10 @@ +import { callable } from '@stardust-ui/react-bindings' import * as React from 'react' import * as _ from 'lodash' import { shallow } from 'enzyme' import { createShorthand, createShorthandFactory } from 'src/lib' import { Props, ShorthandValue, ObjectOf, ShorthandRenderFunction } from 'src/types' import { consoleUtil } from 'test/utils' -import callable from '../../../src/lib/callable' // ---------------------------------------- // Utils From 3330983becb208b278ead01c1e4f170d2875cf25 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 4 Oct 2019 13:31:16 +0200 Subject: [PATCH 2/3] cleanups --- packages/react-bindings/package.json | 8 ++--- .../src/FocusZone/wrapInFocusZone.ts | 36 ------------------- .../src/hooks/useStateManager.ts | 4 +-- 3 files changed, 4 insertions(+), 44 deletions(-) delete mode 100644 packages/react-bindings/src/FocusZone/wrapInFocusZone.ts diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json index 85eeef92e6..1e28466e67 100644 --- a/packages/react-bindings/package.json +++ b/packages/react-bindings/package.json @@ -5,7 +5,9 @@ "author": "Oleksandr Fediashov ", "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", @@ -19,10 +21,6 @@ "license": "MIT", "main": "dist/commonjs/index.js", "module": "dist/es/index.js", - "optionalDependencies": { - "@stardust-ui/accessibility": "^0.39.0", - "@stardust-ui/state": "^0.39.0" - }, "peerDependencies": { "react": "^16.8.0", "react-dom": "^16.8.0" diff --git a/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts b/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts deleted file mode 100644 index ae60eb3884..0000000000 --- a/packages/react-bindings/src/FocusZone/wrapInFocusZone.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { AccessibilityDefinition, FocusZoneMode } from '@stardust-ui/accessibility' -import * as React from 'react' - -import FocusZone from './FocusZone' -import { FocusZoneProps } from './FocusZone.types' -import { FOCUSZONE_WRAP_ATTRIBUTE } from './focusUtilities' - -const wrapInFocusZone = ( - element: React.ReactElement, - accessibility: AccessibilityDefinition, - rtl: boolean, -) => { - if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Wrap) { - return React.createElement( - FocusZone, - { - [FOCUSZONE_WRAP_ATTRIBUTE]: true, - ...accessibility.focusZone.props, - isRtl: rtl, - } as FocusZoneProps & { [FOCUSZONE_WRAP_ATTRIBUTE]: boolean }, - element, - ) - } - - if (accessibility.focusZone && accessibility.focusZone.mode === FocusZoneMode.Embed) { - return React.createElement(FocusZone, { - ...element.props, - ...accessibility.focusZone.props, - isRtl: rtl, - }) - } - - return element -} - -export default wrapInFocusZone diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts index 309d6a9ca7..3f455fe884 100644 --- a/packages/react-bindings/src/hooks/useStateManager.ts +++ b/packages/react-bindings/src/hooks/useStateManager.ts @@ -13,9 +13,7 @@ type UseStateManagerOptions = { sideEffects?: SideEffect[] } -export const getDefinedProps = >( - props: Props, -): Partial => { +const getDefinedProps = >(props: Props): Partial => { const definedProps: Partial = {} Object.keys(props).forEach(propName => { From e29883f63f526c5360d796cdf3c9d26f2d6679d0 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 4 Oct 2019 13:50:54 +0200 Subject: [PATCH 3/3] fix TS issues --- .../react-bindings/src/hooks/useStateManager.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts index 3f455fe884..fd304a7102 100644 --- a/packages/react-bindings/src/hooks/useStateManager.ts +++ b/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 = { @@ -25,7 +19,10 @@ const getDefinedProps = >(props: Props): Parti return definedProps } -const useStateManager = , Actions extends AnyActions>( +const useStateManager = < + State extends Record, + Actions extends Record +>( managerFactory: ManagerFactory, options: UseStateManagerOptions = {}, ): [Readonly, Readonly] => {