Merge branches 'feat/compose' and 'master' of https://github.com/stardust-ui/react into feat/compose

� Conflicts:
�	packages/react-bindings/src/styles/getStyles.ts

Author: layershifter

CHANGELOG.md

@@ -20,10 +20,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
 - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
+- `mode` property from `focusZone` configuration in accessibility behaviors is no longer supported - the focus zone will always be in embed mode @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
+- `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
 
 ### Fixes
 - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
+- Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
 
 ### Features
 - Allow `useRef` hook used for storing debugging data to be defined in any order with other hooks in functional components @layershifter, @mnajdova ([#2236](https://github.com/microsoft/fluent-ui-react/pull/2236))

docs/src/views/AccessibilityBehaviors.tsx

@@ -57,7 +57,7 @@ export default () => (
           these navigable components (navigate between Menu and List components by pressing TAB and
           use arrow keys to navigate between their items).{' '}
           <Link to="focus-zone">Read more about FocusZone.</Link>
-          <p>Type: {code('{ mode: FocusZoneMode, props?: FocusZoneProps }')}.</p>
+          <p>Type: {code('{ props?: FocusZoneProps }')}.</p>
         </li>
         <li>
           <b>childBehaviors</b> - {code('{ [childBehaviorSlot: string]: Accessibility }')} are used

packages/accessibility/src/behaviors/Chat/chatBehavior.ts

@@ -2,7 +2,7 @@ import * as keyboardKey from 'keyboard-key'
 
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
 
@@ -11,7 +11,6 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
  * Adds a vertical focus zone navigation with a last message as a default tabbable element, pressing enter key focuses inside a message.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Focus is set initially on the specified default tabbable element.
  * Focused active element of the component is reset when TAB from the component.
@@ -22,7 +21,6 @@ const ChatBehavior: Accessibility = () => ({
     root: {},
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter,
       direction: FocusZoneDirection.vertical,

packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts

@@ -2,7 +2,7 @@ import * as keyboardKey from 'keyboard-key'
 
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 import { Accessibility } from '../../types'
-import { FocusZoneTabbableElements, FocusZoneDirection, FocusZoneMode } from '../../focusZone/types'
+import { FocusZoneTabbableElements, FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
@@ -12,7 +12,6 @@ import { FocusZoneTabbableElements, FocusZoneDirection, FocusZoneMode } from '..
  * Adds an escape key action which focuses the chat message, i.e., moves key handling from inside a message back to the chat list.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Keyboard navigation is circular.
  * Focus is moved within the focusable children of the component using TAB key.
@@ -25,7 +24,6 @@ const chatMessageBehavior: Accessibility = () => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       handleTabKey: FocusZoneTabbableElements.all,
       isCircularNavigation: true,

packages/accessibility/src/behaviors/Grid/gridBehavior.ts

@@ -1,18 +1,16 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
  * Provides navigation between focusable children of Grid component with arrow keys in 4 directions.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectional direction.
  */
 const gridBehavior: Accessibility = () => ({
   attributes: {},
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.bidirectional,
     },

packages/accessibility/src/behaviors/Grid/gridHorizontalBehavior.ts

@@ -1,19 +1,17 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
  * Provides navigation between focusable children of Grid component with arrow keys in horizontal direction (based on DOM order).
  * Right/Down arrow keys move to next item, Up/Left  arrow keys to previous item. Right and Left arrow keys are switched in RTL mode.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const gridHorizontalBehavior: Accessibility = () => ({
   attributes: {},
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.bidirectionalDomOrder,
     },

packages/accessibility/src/behaviors/HierarchicalTree/hierarchicalTreeBehavior.ts

@@ -1,12 +1,11 @@
 import { Accessibility, AccessibilityAttributes } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import hierarchicalSubtreeBehavior from './hierarchicalSubtreeBehavior'
 
 /**
  * @specification
  * Adds role 'tree' to 'root' slot.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Triggers 'expandSiblings' action with '*' on 'root'.
  */
@@ -26,7 +25,6 @@ const hierarchicalTreeBehavior: Accessibility<TreeBehaviorProps> = props => {
       },
     },
     focusZone: {
-      mode: FocusZoneMode.Embed,
       props: {
         direction: FocusZoneDirection.vertical,
       },

packages/accessibility/src/behaviors/List/navigableListBehavior.ts

@@ -1,11 +1,10 @@
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import { Accessibility } from '../../types'
 import { ListBehaviorProps } from './listBehavior'
 
 /**
  * @specification
  * Adds role='menu'.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const navigableListBehavior: Accessibility<ListBehaviorProps> = props => ({
@@ -15,7 +14,6 @@ const navigableListBehavior: Accessibility<ListBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/List/selectableListBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import { ListBehaviorProps } from './listBehavior'
 
 /**
@@ -10,7 +10,6 @@ import { ListBehaviorProps } from './listBehavior'
  * Adds role='listbox'.
  * Adds attribute 'tabIndex=-1' to 'root' slot.
  * Adds attribute 'aria-orientation=horizontal' to 'root' slot if 'horizontal' property is true. Does not set the attribute otherwise.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const selectableListBehavior: Accessibility<ListBehaviorProps> = props => ({
@@ -24,7 +23,6 @@ const selectableListBehavior: Accessibility<ListBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/Menu/menuBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import menuItemBehavior from './menuItemBehavior'
 import menuDividerBehavior from './menuDividerBehavior'
 
@@ -10,7 +10,6 @@ import menuDividerBehavior from './menuDividerBehavior'
  *
  * @specification
  * Adds role='menu'.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in horizontal direction.
  * When 'vertical' prop is used, provides keyboard navigation in vertical direction.
  * Keyboard navigation is circular.
@@ -22,7 +21,6 @@ const menuBehavior: Accessibility<MenuBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       isCircularNavigation: true,
       shouldFocusInnerElementWhenReceivedFocus: true,

packages/accessibility/src/behaviors/Menu/submenuBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import menuItemBehavior from './menuItemBehavior'
 
 /**
@@ -8,7 +8,6 @@ import menuItemBehavior from './menuItemBehavior'
  *
  * @specification
  * Adds role='menu'.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Keyboard navigation is circular.
  * Component will get focus when mounted.
@@ -20,7 +19,6 @@ const submenuBehavior: Accessibility = () => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       isCircularNavigation: true,
       shouldFocusOnMount: true,

packages/accessibility/src/behaviors/Tab/tabListBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import tabBehavior from './tabBehavior'
 
 /**
@@ -8,7 +8,6 @@ import tabBehavior from './tabBehavior'
  * Child item components need to have tabBehavior assigned.
  * @specification
  * Adds role 'tablist' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  * When component's container element receives focus, focus will be set to the default focusable child element of the component.
  */
@@ -19,7 +18,6 @@ const tabListBehavior: Accessibility = () => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/Table/gridCellMultipleFocusableBehavior.ts

@@ -1,13 +1,12 @@
 import { Accessibility } from '../../types'
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import * as keyboardKey from 'keyboard-key'
 
 /**
  * @specification
  * Adds role='gridcell'.
  * Adds attribute 'data-is-focusable=true' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectional direction.
  * Triggers 'focusCell' action with 'Escape' on 'root'.
  */
@@ -19,7 +18,6 @@ const gridCellMultipleFocusableBehavior: Accessibility = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.bidirectional,
     },

packages/accessibility/src/behaviors/Table/gridHeaderRowBehavior.ts

@@ -1,14 +1,13 @@
 import { Accessibility } from '../../types'
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import * as keyboardKey from 'keyboard-key'
 import gridHeaderCellBehavior from './gridHeaderCellBehavior'
 
 /**
  * @specification
  * Adds role='row'.
  * Adds attribute 'data-is-focusable=true' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in horizontal direction.
  * Focused active element of the component is reset when TAB from the component.
  * When component's container element receives focus, focus will be set to the default focusable child element of the component.
@@ -23,7 +22,6 @@ const gridHeaderRowBehavior: Accessibility = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.horizontal,
       shouldFocusInnerElementWhenReceivedFocus: true,

packages/accessibility/src/behaviors/Table/gridNestedBehavior.ts

@@ -1,12 +1,11 @@
 import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import gridRowBehavior from './gridRowBehavior'
 
 /**
  * @specification
  * Adds role='grid'.
- * Embeds component into FocusZone.
  * Focus can be moved inside a child component with embeded inner FocusZone by pressing a specified key.
  * Provides arrow key navigation in vertical direction.
  * Focused active element of the component is reset when TAB from the component.
@@ -21,7 +20,6 @@ const gridNestedBehavior: Accessibility = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.ArrowRight,
       direction: FocusZoneDirection.vertical,

packages/accessibility/src/behaviors/Table/gridRowNestedBehavior.ts

@@ -1,14 +1,13 @@
 import { Accessibility } from '../../types'
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import * as keyboardKey from 'keyboard-key'
 import gridCellBehavior from './gridCellBehavior'
 
 /**
  * @specification
  * Adds role='row'.
  * Adds attribute 'data-is-focusable=true' to 'root' slot.
- * Embeds component into FocusZone.
  * Focus can be moved inside a child component with embeded inner FocusZone by pressing a specified key.
  * Provides arrow key navigation in horizontal direction.
  * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
@@ -23,7 +22,6 @@ const gridRowNestedBehavior: Accessibility = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter,
       direction: FocusZoneDirection.horizontal,

packages/accessibility/src/behaviors/Toolbar/menuAsToolbarBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import menuItemAsToolbarButtonBehavior from './menuItemAsToolbarButtonBehavior'
 
 /**
@@ -8,7 +8,6 @@ import menuItemAsToolbarButtonBehavior from './menuItemAsToolbarButtonBehavior'
  * Child item components need to have menuItemAsToolbarButtonBehavior assigned.
  * @specification
  * Adds role 'toolbar' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  * When component's container element receives focus, focus will be set to the default focusable child element of the component.
  */
@@ -19,7 +18,6 @@ const menuAsToolbarBehavior: Accessibility = () => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/Toolbar/toolbarBehavior.ts

@@ -1,24 +1,22 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
  * Implements ARIA Toolbar design pattern.
  * Child item components need to have toolbarItemBehavior assigned.
  * @specification
  * Adds role 'toolbar' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in horizontal direction.
  * When component's container element receives focus, focus will be set to the default focusable child element of the component.
  */
-const toolbarBehavior: Accessibility = (props: any) => ({
+const toolbarBehavior: Accessibility = props => ({
   attributes: {
     root: {
       role: 'toolbar',
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.horizontal,