diff --git a/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json b/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json new file mode 100644 index 00000000000000..5201f21344200e --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "OverflowSet: Allow the OverflowSet to not be contained within a FocusZone", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jspurlin@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index aed2fe8a340f93..cb4678cd7ec80e 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -2,7 +2,10 @@ import * as React from 'react'; import { css, BaseComponent, - createRef + createRef, + getNativeProps, + divProperties, + focusFirstChild } from '../../Utilities'; import { mergeStyles } from '../../Styling'; import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types'; @@ -14,6 +17,17 @@ const styles: any = stylesImport; export class OverflowSet extends BaseComponent implements IOverflowSet { private _focusZone = createRef(); + private _divContainer = createRef(); + + constructor(props: IOverflowSetProps) { + super(props); + + if (props.doNotContainWithinFocusZone) { + this._warnMutuallyExclusive({ + 'doNotContainWithinFocusZone': 'focusZoneProps' + }); + } + } public render() { const { @@ -22,29 +36,54 @@ export class OverflowSet extends BaseComponent implements className, focusZoneProps, vertical = false, - role = 'menubar' + role = 'menubar', + doNotContainWithinFocusZone } = this.props; + let Tag; + let uniqueComponentProps; + + if (doNotContainWithinFocusZone) { + Tag = 'div'; + uniqueComponentProps = { + ...getNativeProps(this.props, divProperties), + ref: this._divContainer + }; + } else { + Tag = FocusZone; + uniqueComponentProps = { + ...focusZoneProps, + componentRef: this._focusZone, + direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal + }; + } + return ( - { items && this._onRenderItems(items) } { overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) } - + ); } public focus() { + if (this.props.doNotContainWithinFocusZone) { + if (this._divContainer.value) { + focusFirstChild(this._divContainer.value); + } + + return; + } + if (this._focusZone.value) { this._focusZone.value.focus(); } diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts index 3930f92d1cf039..0bb8f771dab982 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts @@ -50,9 +50,19 @@ export interface IOverflowSetProps extends React.Props { /** * Custom properties for OverflowSet's FocusZone. + * If doNotContainWithinFocusZone is set to true focusZoneProps will be ignored. + * Use one or the other */ focusZoneProps?: IFocusZoneProps; + /** + * If true do not contain the OverflowSet inside of a FocusZone, + * otherwise the OverflowSet will contain a FocusZone. + * If this is set to true focusZoneProps will be ignored. + * Use one or the other + */ + doNotContainWithinFocusZone?: boolean; + /** * The role for the OverflowSet. * @default 'menubar'