first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
+4921
View File
File diff suppressed because it is too large Load Diff
+1851
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-focus
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+15
View File
@@ -0,0 +1,15 @@
# @fluentui/react-focus
**Focus management components for [Fluent UI React](https://dev.microsoft.com/fabric)**
This package contains various components that deal with focus management to be leveraged when building applications using Fluent UI.
At the moment, these components include:
- `FocusZone`
To import a component from the `@fluentui/react-focus` package:
```js
import { ComponentName } from '@fluentui/react-focus';
```
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "@fluentui/scripts-api-extractor/api-extractor.common.json"
}
+1
View File
@@ -0,0 +1 @@
/** Jest test setup file. */
+392
View File
@@ -0,0 +1,392 @@
import type { IRefObject } from '@fluentui/utilities';
import { MergeStylesShadowRootContextValue } from '@fluentui/utilities';
import type { Point } from '@fluentui/utilities';
import * as React_2 from 'react';
export declare class FocusZone extends React_2.Component<IFocusZoneProps> implements IFocusZone {
static defaultProps: IFocusZoneProps;
static contextType: React_2.Context<MergeStylesShadowRootContextValue | undefined>;
context: any;
private _root;
private _mergedRef;
private _id;
/** The most recently focused child element. */
private _activeElement;
/**
* The index path to the last focused child element.
*/
private _lastIndexPath;
/**
* Flag to define when we've intentionally parked focus on the root element to temporarily
* hold focus until items appear within the zone.
*/
private _isParked;
/** The child element with tabindex=0. */
private _defaultFocusElement;
private _focusAlignment;
private _isInnerZone;
private _parkedTabIndex;
/** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */
private _processingTabKey;
/** Provides granular control over `shouldRaiseClicks` and should be preferred over `props.shouldRaiseClicks`. */
private _shouldRaiseClicksOnEnter;
private _shouldRaiseClicksOnSpace;
private _inShadowRoot;
/** Used for testing purposes only. */
static getOuterZones(): number;
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
* HEADS UP: This must not be an arrow function in order to be referentially equal among instances
* for ref counting to work correctly!
*/
private static _onKeyDownCapture;
constructor(props: IFocusZoneProps);
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
render(): React_2.ReactNode;
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param element - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(element: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,
* rather than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
get defaultFocusElement(): HTMLElement | null;
get activeElement(): HTMLElement | null;
private _evaluateFocusBeforeRender;
private _onFocus;
/**
* When focus is in the zone at render time but then all focusable elements are removed,
* we "park" focus temporarily on the root. Once we update with focusable children, we restore
* focus to the closest path from previous. If the user tabs away from the parked container,
* we restore focusability to the pre-parked state.
*/
private _setParkedFocus;
private _onBlur;
private _onMouseDown;
private _setActiveElement;
private _preventDefaultWhenHandled;
/**
* Handle the keystrokes.
*/
private _onKeyDown;
/**
* Walk up the dom try to find a focusable element.
*/
private _tryInvokeClickForFocusable;
/**
* Traverse to find first child zone.
*/
private _getFirstInnerZone;
private _moveFocus;
private _moveFocusDown;
private _moveFocusUp;
private _moveFocusLeft;
private _moveFocusRight;
private _getHorizontalDistanceFromCenter;
private _moveFocusPaging;
private _setFocusAlignment;
private _isImmediateDescendantOfZone;
private _getOwnerZone;
private _updateTabIndexes;
private _isContentEditableElement;
private _isElementInput;
private _shouldInputLoseFocus;
private _shouldWrapFocus;
/**
* Returns true if the element is a descendant of the FocusZone through a React portal.
*/
private _portalContainsElement;
private _getDocument;
}
/**
* {@docCategory FocusZone}
*/
export declare enum FocusZoneDirection {
/** Only react to up/down arrows. */
vertical = 0,
/** Only react to left/right arrows. */
horizontal = 1,
/** React to all arrows. */
bidirectional = 2,
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
domOrder = 3
}
/**
* {@docCategory FocusZone}
*/
export declare const FocusZoneTabbableElements: {
/** Tabbing is not allowed */
none: 0;
/** All tabbing action is allowed */
all: 1;
/** Tabbing is allowed only on input elements */
inputOnly: 2;
};
/**
* {@docCategory FocusZone}
*/
export declare type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
/**
* FocusZone component class interface.
* {@docCategory FocusZone}
*/
export declare interface IFocusZone {
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param childElement - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather
* than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
}
/**
* FocusZone component props.
* {@docCategory FocusZone}
*/
export declare interface IFocusZoneProps extends React_2.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IFocusZone>;
/**
* Optional callback to access the root DOM element.
* @deprecated Temporary solution which will be replaced with ref in the V8 release.
*/
elementRef?: React_2.Ref<HTMLElement>;
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
className?: string;
/**
* Defines which arrows to react to.
* @defaultvalue FocusZoneDirection.bidirectional
*/
direction?: FocusZoneDirection;
/**
* Optionally defines the initial tabbable element inside the FocusZone.
* If a string is passed then it is treated as a selector for identifying the initial tabbable element.
* If a function is passed then it uses the root element as a parameter to return the initial tabbable element.
*/
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
/**
* Optionally provide a selector for identifying the initial active element.
* @deprecated Use `defaultTabbableElement` instead.
*/
defaultActiveElement?: string;
/**
* Determines if a default tabbable element should be force focused on FocusZone mount.
* @default false
*/
shouldFocusOnMount?: boolean;
/**
* If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
* This does not affect disabled attribute of any child.
*/
disabled?: boolean;
/**
* Element type the root element will use. Default is "div".
* @deprecated Use `as` instead.
*/
elementType?: any;
/**
* A component that should be used as the root element of the FocusZone component.
*/
as?: React_2.ElementType;
/**
* If set, will cycle to the beginning of the targets once the user navigates to the
* next target while at the end, and to the end when navigate to the previous at the beginning.
*/
isCircularNavigation?: boolean;
/**
* If provided, this callback will be executed on keypresses to determine if the user
* intends to navigate into the inner zone. Returning true will ask the first inner zone to
* set focus.
* @deprecated Use `shouldEnterInnerZone` instead.
*/
isInnerZoneKeystroke?: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
/**
* Callback function that will be executed on keypresses to determine if the user intends to navigate into
* the inner (nested) zone. Returning true will ask the first inner zone to set focus.
*/
shouldEnterInnerZone?: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
/**
* Sets the aria-labelledby attribute.
* @deprecated Directly use the `aria-labelledby` attribute instead
*/
ariaLabelledBy?: string;
/**
* Sets the aria-describedby attribute.
* @deprecated Directly use the `aria-describedby` attribute instead
*/
ariaDescribedBy?: string;
/**
* Callback for when one of immediate children elements gets active by getting focused
* or by having one of its respective children elements focused.
*/
onActiveElementChanged?: (element?: HTMLElement, ev?: React_2.FocusEvent<HTMLElement>) => void;
/**
* @deprecated Div props provided to the FocusZone will be mixed into the root element.
* Deprecated at v1.12.1.
*/
rootProps?: React_2.HTMLAttributes<HTMLDivElement>;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
* @deprecated Use `shouldReceiveFocus` instead.
*/
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
*/
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
/** Allows focus to park on root when focus is in the `FocusZone` at render time. */
allowFocusRoot?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
* @deprecated Use `handleTabKey` instead.
*
*/
allowTabKey?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
*/
handleTabKey?: FocusZoneTabbableElements;
/**
* If true and FocusZone's root element (container) receives focus, the focus will land either on the
* defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.
* Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.
*/
shouldFocusInnerElementWhenReceivedFocus?: boolean;
/**
* If true and TAB key is not handled by FocusZone, resets current active element to null value.
* For example, when roving index is not desirable and focus should always reset to the default tabbable element.
*/
shouldResetActiveElementWhenTabFromZone?: boolean;
/**
* Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on
* Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.
* @defaultvalue true
*/
shouldRaiseClicks?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Enter" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnEnter?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Space" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnSpace?: boolean;
/**
* A callback method to determine if an input or textarea element should lose focus on arrow keys
* @param inputElement - The input or textarea element which is to lose focus.
* @returns True if input element should loose focus or false otherwise.
*/
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
/**
* Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.
* @defaultvalue false
*/
pagingSupportDisabled?: boolean;
/**
* Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
* when determining how to move focus
* @defaultvalue false
*/
checkForNoWrap?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
* @deprecated Use `stopFocusPropagation` instead.
*/
doNotAllowFocusEventToPropagate?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
*/
stopFocusPropagation?: boolean;
/**
* Callback to notify creators that focus has been set on the FocusZone
* @deprecated Use `onFocus` instead.
*/
onFocusNotification?: () => void;
/**
* Callback called when "focus" event triggered in FocusZone.
* @param event - React's original FocusEvent.
*/
onFocus?: (event: React_2.FocusEvent<HTMLElement>) => void;
/**
* If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.
* @defaultvalue false
*/
preventDefaultWhenHandled?: boolean;
/**
* If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
* root element after componentDidUpdate.
* @defaultvalue false
*/
preventFocusRestoration?: boolean;
}
export { }
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+119
View File
@@ -0,0 +1,119 @@
## API Report File for "@fluentui/react-focus"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import type { IRefObject } from '@fluentui/utilities';
import { MergeStylesShadowRootContextValue } from '@fluentui/utilities';
import type { Point } from '@fluentui/utilities';
import * as React_2 from 'react';
// @public (undocumented)
export class FocusZone extends React_2.Component<IFocusZoneProps> implements IFocusZone {
constructor(props: IFocusZoneProps);
// (undocumented)
get activeElement(): HTMLElement | null;
// (undocumented)
componentDidMount(): void;
// (undocumented)
componentDidUpdate(): void;
// (undocumented)
componentWillUnmount(): void;
// (undocumented)
context: any;
// (undocumented)
static contextType: React_2.Context<MergeStylesShadowRootContextValue | undefined>;
// (undocumented)
get defaultFocusElement(): HTMLElement | null;
// (undocumented)
static defaultProps: IFocusZoneProps;
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
focusElement(element: HTMLElement, forceAlignment?: boolean): boolean;
focusLast(): boolean;
static getOuterZones(): number;
// (undocumented)
render(): React_2.ReactNode;
setFocusAlignment(point: Point): void;
}
// @public (undocumented)
export enum FocusZoneDirection {
bidirectional = 2,
domOrder = 3,
horizontal = 1,
vertical = 0
}
// @public (undocumented)
export const FocusZoneTabbableElements: {
none: 0;
all: 1;
inputOnly: 2;
};
// @public (undocumented)
export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
// @public
export interface IFocusZone {
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
focusLast(): boolean;
setFocusAlignment(point: Point): void;
}
// @public
export interface IFocusZoneProps extends React_2.HTMLAttributes<HTMLElement> {
allowFocusRoot?: boolean;
// @deprecated
allowTabKey?: boolean;
// @deprecated
ariaDescribedBy?: string;
// @deprecated
ariaLabelledBy?: string;
as?: React_2.ElementType;
checkForNoWrap?: boolean;
className?: string;
componentRef?: IRefObject<IFocusZone>;
// @deprecated
defaultActiveElement?: string;
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
direction?: FocusZoneDirection;
disabled?: boolean;
// @deprecated
doNotAllowFocusEventToPropagate?: boolean;
// @deprecated
elementRef?: React_2.Ref<HTMLElement>;
// @deprecated
elementType?: any;
handleTabKey?: FocusZoneTabbableElements;
isCircularNavigation?: boolean;
// @deprecated
isInnerZoneKeystroke?: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
onActiveElementChanged?: (element?: HTMLElement, ev?: React_2.FocusEvent<HTMLElement>) => void;
// @deprecated
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
onFocus?: (event: React_2.FocusEvent<HTMLElement>) => void;
// @deprecated
onFocusNotification?: () => void;
pagingSupportDisabled?: boolean;
preventDefaultWhenHandled?: boolean;
preventFocusRestoration?: boolean;
// @deprecated (undocumented)
rootProps?: React_2.HTMLAttributes<HTMLDivElement>;
shouldEnterInnerZone?: (ev: React_2.KeyboardEvent<HTMLElement>) => boolean;
shouldFocusInnerElementWhenReceivedFocus?: boolean;
shouldFocusOnMount?: boolean;
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
shouldRaiseClicks?: boolean;
shouldRaiseClicksOnEnter?: boolean;
shouldRaiseClicksOnSpace?: boolean;
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
shouldResetActiveElementWhenTabFromZone?: boolean;
stopFocusPropagation?: boolean;
}
// (No @packageDocumentation comment for this package)
```
+5
View File
@@ -0,0 +1,5 @@
import { preset, task } from '@fluentui/scripts-tasks';
preset();
task('build', 'build:react-with-umd');
+4
View File
@@ -0,0 +1,4 @@
import type { IsConformantOptions } from '@fluentui/react-conformance';
export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
componentPath?: string;
}): void;
+19
View File
@@ -0,0 +1,19 @@
define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isConformant = isConformant;
function isConformant(testInfo) {
var _a;
var defaultOptions = {
disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],
testOptions: {
'component-has-static-classname': {
prefix: 'ms-',
},
},
componentPath: (_a = require.main) === null || _a === void 0 ? void 0 : _a.filename.replace('.test', ''),
};
(0, react_conformance_1.isConformant)(defaultOptions, testInfo);
}
});
//# sourceMappingURL=isConformant.js.map
@@ -0,0 +1 @@
{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;IAGA,oCAcC;IAdD,SAAgB,YAAY,CAC1B,QAAyF;;QAEzF,IAAM,cAAc,GAAyC;YAC3D,aAAa,EAAE,CAAC,uBAAuB,EAAE,yCAAyC,CAAC;YACnF,WAAW,EAAE;gBACX,gCAAgC,EAAE;oBAChC,MAAM,EAAE,KAAK;iBACd;aACF;YACD,aAAa,EAAE,MAAA,OAAO,CAAC,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC3D,CAAC;QAEF,IAAA,gCAAgB,EAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n): void {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],\n testOptions: {\n 'component-has-static-classname': {\n prefix: 'ms-',\n },\n },\n componentPath: require.main?.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -0,0 +1,121 @@
import * as React from 'react';
import type { IFocusZone, IFocusZoneProps } from './FocusZone.types';
import type { Point } from '@fluentui/utilities';
export declare class FocusZone extends React.Component<IFocusZoneProps> implements IFocusZone {
static defaultProps: IFocusZoneProps;
static contextType: React.Context<import("@fluentui/utilities").MergeStylesShadowRootContextValue | undefined>;
context: any;
private _root;
private _mergedRef;
private _id;
/** The most recently focused child element. */
private _activeElement;
/**
* The index path to the last focused child element.
*/
private _lastIndexPath;
/**
* Flag to define when we've intentionally parked focus on the root element to temporarily
* hold focus until items appear within the zone.
*/
private _isParked;
/** The child element with tabindex=0. */
private _defaultFocusElement;
private _focusAlignment;
private _isInnerZone;
private _parkedTabIndex;
/** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */
private _processingTabKey;
/** Provides granular control over `shouldRaiseClicks` and should be preferred over `props.shouldRaiseClicks`. */
private _shouldRaiseClicksOnEnter;
private _shouldRaiseClicksOnSpace;
private _inShadowRoot;
/** Used for testing purposes only. */
static getOuterZones(): number;
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
* HEADS UP: This must not be an arrow function in order to be referentially equal among instances
* for ref counting to work correctly!
*/
private static _onKeyDownCapture;
constructor(props: IFocusZoneProps);
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
render(): React.ReactNode;
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param element - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(element: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,
* rather than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
get defaultFocusElement(): HTMLElement | null;
get activeElement(): HTMLElement | null;
private _evaluateFocusBeforeRender;
private _onFocus;
/**
* When focus is in the zone at render time but then all focusable elements are removed,
* we "park" focus temporarily on the root. Once we update with focusable children, we restore
* focus to the closest path from previous. If the user tabs away from the parked container,
* we restore focusability to the pre-parked state.
*/
private _setParkedFocus;
private _onBlur;
private _onMouseDown;
private _setActiveElement;
private _preventDefaultWhenHandled;
/**
* Handle the keystrokes.
*/
private _onKeyDown;
/**
* Walk up the dom try to find a focusable element.
*/
private _tryInvokeClickForFocusable;
/**
* Traverse to find first child zone.
*/
private _getFirstInnerZone;
private _moveFocus;
private _moveFocusDown;
private _moveFocusUp;
private _moveFocusLeft;
private _moveFocusRight;
private _getHorizontalDistanceFromCenter;
private _moveFocusPaging;
private _setFocusAlignment;
private _isImmediateDescendantOfZone;
private _getOwnerZone;
private _updateTabIndexes;
private _isContentEditableElement;
private _isElementInput;
private _shouldInputLoseFocus;
private _shouldWrapFocus;
/**
* Returns true if the element is a descendant of the FocusZone through a React portal.
*/
private _portalContainsElement;
private _getDocument;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,264 @@
import * as React from 'react';
import type { IRefObject, Point } from '@fluentui/utilities';
/**
* FocusZone component class interface.
* {@docCategory FocusZone}
*/
export interface IFocusZone {
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param childElement - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather
* than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
}
/**
* FocusZone component props.
* {@docCategory FocusZone}
*/
export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IFocusZone>;
/**
* Optional callback to access the root DOM element.
* @deprecated Temporary solution which will be replaced with ref in the V8 release.
*/
elementRef?: React.Ref<HTMLElement>;
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
className?: string;
/**
* Defines which arrows to react to.
* @defaultvalue FocusZoneDirection.bidirectional
*/
direction?: FocusZoneDirection;
/**
* Optionally defines the initial tabbable element inside the FocusZone.
* If a string is passed then it is treated as a selector for identifying the initial tabbable element.
* If a function is passed then it uses the root element as a parameter to return the initial tabbable element.
*/
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
/**
* Optionally provide a selector for identifying the initial active element.
* @deprecated Use `defaultTabbableElement` instead.
*/
defaultActiveElement?: string;
/**
* Determines if a default tabbable element should be force focused on FocusZone mount.
* @default false
*/
shouldFocusOnMount?: boolean;
/**
* If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
* This does not affect disabled attribute of any child.
*/
disabled?: boolean;
/**
* Element type the root element will use. Default is "div".
* @deprecated Use `as` instead.
*/
elementType?: any;
/**
* A component that should be used as the root element of the FocusZone component.
*/
as?: React.ElementType;
/**
* If set, will cycle to the beginning of the targets once the user navigates to the
* next target while at the end, and to the end when navigate to the previous at the beginning.
*/
isCircularNavigation?: boolean;
/**
* If provided, this callback will be executed on keypresses to determine if the user
* intends to navigate into the inner zone. Returning true will ask the first inner zone to
* set focus.
* @deprecated Use `shouldEnterInnerZone` instead.
*/
isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Callback function that will be executed on keypresses to determine if the user intends to navigate into
* the inner (nested) zone. Returning true will ask the first inner zone to set focus.
*/
shouldEnterInnerZone?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Sets the aria-labelledby attribute.
* @deprecated Directly use the `aria-labelledby` attribute instead
*/
ariaLabelledBy?: string;
/**
* Sets the aria-describedby attribute.
* @deprecated Directly use the `aria-describedby` attribute instead
*/
ariaDescribedBy?: string;
/**
* Callback for when one of immediate children elements gets active by getting focused
* or by having one of its respective children elements focused.
*/
onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
/**
* @deprecated Div props provided to the FocusZone will be mixed into the root element.
* Deprecated at v1.12.1.
*/
rootProps?: React.HTMLAttributes<HTMLDivElement>;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
* @deprecated Use `shouldReceiveFocus` instead.
*/
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
*/
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
/** Allows focus to park on root when focus is in the `FocusZone` at render time. */
allowFocusRoot?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
* @deprecated Use `handleTabKey` instead.
*
*/
allowTabKey?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
*/
handleTabKey?: FocusZoneTabbableElements;
/**
* If true and FocusZone's root element (container) receives focus, the focus will land either on the
* defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.
* Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.
*/
shouldFocusInnerElementWhenReceivedFocus?: boolean;
/**
* If true and TAB key is not handled by FocusZone, resets current active element to null value.
* For example, when roving index is not desirable and focus should always reset to the default tabbable element.
*/
shouldResetActiveElementWhenTabFromZone?: boolean;
/**
* Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on
* Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.
* @defaultvalue true
*/
shouldRaiseClicks?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Enter" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnEnter?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Space" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnSpace?: boolean;
/**
* A callback method to determine if an input or textarea element should lose focus on arrow keys
* @param inputElement - The input or textarea element which is to lose focus.
* @returns True if input element should loose focus or false otherwise.
*/
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
/**
* Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.
* @defaultvalue false
*/
pagingSupportDisabled?: boolean;
/**
* Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
* when determining how to move focus
* @defaultvalue false
*/
checkForNoWrap?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
* @deprecated Use `stopFocusPropagation` instead.
*/
doNotAllowFocusEventToPropagate?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
*/
stopFocusPropagation?: boolean;
/**
* Callback to notify creators that focus has been set on the FocusZone
* @deprecated Use `onFocus` instead.
*/
onFocusNotification?: () => void;
/**
* Callback called when "focus" event triggered in FocusZone.
* @param event - React's original FocusEvent.
*/
onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.
* @defaultvalue false
*/
preventDefaultWhenHandled?: boolean;
/**
* If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
* root element after componentDidUpdate.
* @defaultvalue false
*/
preventFocusRestoration?: boolean;
}
/**
* {@docCategory FocusZone}
*/
export declare const FocusZoneTabbableElements: {
/** Tabbing is not allowed */
none: 0;
/** All tabbing action is allowed */
all: 1;
/** Tabbing is allowed only on input elements */
inputOnly: 2;
};
/**
* {@docCategory FocusZone}
*/
export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
/**
* {@docCategory FocusZone}
*/
export declare enum FocusZoneDirection {
/** Only react to up/down arrows. */
vertical = 0,
/** Only react to left/right arrows. */
horizontal = 1,
/** React to all arrows. */
bidirectional = 2,
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
domOrder = 3
}
@@ -0,0 +1,34 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZoneDirection = exports.FocusZoneTabbableElements = void 0;
/**
* {@docCategory FocusZone}
*/
exports.FocusZoneTabbableElements = {
/** Tabbing is not allowed */
none: 0,
/** All tabbing action is allowed */
all: 1,
/** Tabbing is allowed only on input elements */
inputOnly: 2,
};
/**
* {@docCategory FocusZone}
*/
var FocusZoneDirection;
(function (FocusZoneDirection) {
/** Only react to up/down arrows. */
FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical";
/** Only react to left/right arrows. */
FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal";
/** React to all arrows. */
FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional";
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
FocusZoneDirection[FocusZoneDirection["domOrder"] = 3] = "domOrder";
})(FocusZoneDirection || (exports.FocusZoneDirection = FocusZoneDirection = {}));
});
//# sourceMappingURL=FocusZone.types.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
export * from './FocusZone';
export * from './FocusZone.types';
@@ -0,0 +1,7 @@
define(["require", "exports", "tslib", "./FocusZone", "./FocusZone.types"], function (require, exports, tslib_1, FocusZone_1, FocusZone_types_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tslib_1.__exportStar(FocusZone_1, exports);
tslib_1.__exportStar(FocusZone_types_1, exports);
});
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FocusZone/index.ts"],"names":[],"mappings":";;;IAAA,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './FocusZone';\nexport * from './FocusZone.types';\n"]}
+2
View File
@@ -0,0 +1,2 @@
import './version';
export * from './components/FocusZone/index';
+6
View File
@@ -0,0 +1,6 @@
define(["require", "exports", "tslib", "./components/FocusZone/index", "./version"], function (require, exports, tslib_1, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tslib_1.__exportStar(index_1, exports);
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAEA,uCAA6C","sourcesContent":["import './version';\n\nexport * from './components/FocusZone/index';\n"]}
+1
View File
@@ -0,0 +1 @@
export {};
+6
View File
@@ -0,0 +1,6 @@
define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
(0, set_version_1.setVersion)('@fluentui/react-focus', '8.10.5');
});
//# sourceMappingURL=version.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-focus', '8.10.5');"]}
@@ -0,0 +1,4 @@
import type { IsConformantOptions } from '@fluentui/react-conformance';
export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
componentPath?: string;
}): void;
+18
View File
@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isConformant = isConformant;
var react_conformance_1 = require("@fluentui/react-conformance");
function isConformant(testInfo) {
var _a;
var defaultOptions = {
disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],
testOptions: {
'component-has-static-classname': {
prefix: 'ms-',
},
},
componentPath: (_a = require.main) === null || _a === void 0 ? void 0 : _a.filename.replace('.test', ''),
};
(0, react_conformance_1.isConformant)(defaultOptions, testInfo);
}
//# sourceMappingURL=isConformant.js.map
@@ -0,0 +1 @@
{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;AAGA,oCAcC;AAjBD,iEAA+E;AAG/E,SAAgB,YAAY,CAC1B,QAAyF;;IAEzF,IAAM,cAAc,GAAyC;QAC3D,aAAa,EAAE,CAAC,uBAAuB,EAAE,yCAAyC,CAAC;QACnF,WAAW,EAAE;YACX,gCAAgC,EAAE;gBAChC,MAAM,EAAE,KAAK;aACd;SACF;QACD,aAAa,EAAE,MAAA,OAAO,CAAC,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC3D,CAAC;IAEF,IAAA,gCAAgB,EAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n): void {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],\n testOptions: {\n 'component-has-static-classname': {\n prefix: 'ms-',\n },\n },\n componentPath: require.main?.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -0,0 +1,121 @@
import * as React from 'react';
import type { IFocusZone, IFocusZoneProps } from './FocusZone.types';
import type { Point } from '@fluentui/utilities';
export declare class FocusZone extends React.Component<IFocusZoneProps> implements IFocusZone {
static defaultProps: IFocusZoneProps;
static contextType: React.Context<import("@fluentui/utilities").MergeStylesShadowRootContextValue | undefined>;
context: any;
private _root;
private _mergedRef;
private _id;
/** The most recently focused child element. */
private _activeElement;
/**
* The index path to the last focused child element.
*/
private _lastIndexPath;
/**
* Flag to define when we've intentionally parked focus on the root element to temporarily
* hold focus until items appear within the zone.
*/
private _isParked;
/** The child element with tabindex=0. */
private _defaultFocusElement;
private _focusAlignment;
private _isInnerZone;
private _parkedTabIndex;
/** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */
private _processingTabKey;
/** Provides granular control over `shouldRaiseClicks` and should be preferred over `props.shouldRaiseClicks`. */
private _shouldRaiseClicksOnEnter;
private _shouldRaiseClicksOnSpace;
private _inShadowRoot;
/** Used for testing purposes only. */
static getOuterZones(): number;
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
* HEADS UP: This must not be an arrow function in order to be referentially equal among instances
* for ref counting to work correctly!
*/
private static _onKeyDownCapture;
constructor(props: IFocusZoneProps);
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
render(): React.ReactNode;
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param element - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(element: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,
* rather than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
get defaultFocusElement(): HTMLElement | null;
get activeElement(): HTMLElement | null;
private _evaluateFocusBeforeRender;
private _onFocus;
/**
* When focus is in the zone at render time but then all focusable elements are removed,
* we "park" focus temporarily on the root. Once we update with focusable children, we restore
* focus to the closest path from previous. If the user tabs away from the parked container,
* we restore focusability to the pre-parked state.
*/
private _setParkedFocus;
private _onBlur;
private _onMouseDown;
private _setActiveElement;
private _preventDefaultWhenHandled;
/**
* Handle the keystrokes.
*/
private _onKeyDown;
/**
* Walk up the dom try to find a focusable element.
*/
private _tryInvokeClickForFocusable;
/**
* Traverse to find first child zone.
*/
private _getFirstInnerZone;
private _moveFocus;
private _moveFocusDown;
private _moveFocusUp;
private _moveFocusLeft;
private _moveFocusRight;
private _getHorizontalDistanceFromCenter;
private _moveFocusPaging;
private _setFocusAlignment;
private _isImmediateDescendantOfZone;
private _getOwnerZone;
private _updateTabIndexes;
private _isContentEditableElement;
private _isElementInput;
private _shouldInputLoseFocus;
private _shouldWrapFocus;
/**
* Returns true if the element is a descendant of the FocusZone through a React portal.
*/
private _portalContainsElement;
private _getDocument;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,264 @@
import * as React from 'react';
import type { IRefObject, Point } from '@fluentui/utilities';
/**
* FocusZone component class interface.
* {@docCategory FocusZone}
*/
export interface IFocusZone {
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param childElement - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather
* than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
}
/**
* FocusZone component props.
* {@docCategory FocusZone}
*/
export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IFocusZone>;
/**
* Optional callback to access the root DOM element.
* @deprecated Temporary solution which will be replaced with ref in the V8 release.
*/
elementRef?: React.Ref<HTMLElement>;
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
className?: string;
/**
* Defines which arrows to react to.
* @defaultvalue FocusZoneDirection.bidirectional
*/
direction?: FocusZoneDirection;
/**
* Optionally defines the initial tabbable element inside the FocusZone.
* If a string is passed then it is treated as a selector for identifying the initial tabbable element.
* If a function is passed then it uses the root element as a parameter to return the initial tabbable element.
*/
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
/**
* Optionally provide a selector for identifying the initial active element.
* @deprecated Use `defaultTabbableElement` instead.
*/
defaultActiveElement?: string;
/**
* Determines if a default tabbable element should be force focused on FocusZone mount.
* @default false
*/
shouldFocusOnMount?: boolean;
/**
* If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
* This does not affect disabled attribute of any child.
*/
disabled?: boolean;
/**
* Element type the root element will use. Default is "div".
* @deprecated Use `as` instead.
*/
elementType?: any;
/**
* A component that should be used as the root element of the FocusZone component.
*/
as?: React.ElementType;
/**
* If set, will cycle to the beginning of the targets once the user navigates to the
* next target while at the end, and to the end when navigate to the previous at the beginning.
*/
isCircularNavigation?: boolean;
/**
* If provided, this callback will be executed on keypresses to determine if the user
* intends to navigate into the inner zone. Returning true will ask the first inner zone to
* set focus.
* @deprecated Use `shouldEnterInnerZone` instead.
*/
isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Callback function that will be executed on keypresses to determine if the user intends to navigate into
* the inner (nested) zone. Returning true will ask the first inner zone to set focus.
*/
shouldEnterInnerZone?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Sets the aria-labelledby attribute.
* @deprecated Directly use the `aria-labelledby` attribute instead
*/
ariaLabelledBy?: string;
/**
* Sets the aria-describedby attribute.
* @deprecated Directly use the `aria-describedby` attribute instead
*/
ariaDescribedBy?: string;
/**
* Callback for when one of immediate children elements gets active by getting focused
* or by having one of its respective children elements focused.
*/
onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
/**
* @deprecated Div props provided to the FocusZone will be mixed into the root element.
* Deprecated at v1.12.1.
*/
rootProps?: React.HTMLAttributes<HTMLDivElement>;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
* @deprecated Use `shouldReceiveFocus` instead.
*/
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
*/
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
/** Allows focus to park on root when focus is in the `FocusZone` at render time. */
allowFocusRoot?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
* @deprecated Use `handleTabKey` instead.
*
*/
allowTabKey?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
*/
handleTabKey?: FocusZoneTabbableElements;
/**
* If true and FocusZone's root element (container) receives focus, the focus will land either on the
* defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.
* Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.
*/
shouldFocusInnerElementWhenReceivedFocus?: boolean;
/**
* If true and TAB key is not handled by FocusZone, resets current active element to null value.
* For example, when roving index is not desirable and focus should always reset to the default tabbable element.
*/
shouldResetActiveElementWhenTabFromZone?: boolean;
/**
* Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on
* Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.
* @defaultvalue true
*/
shouldRaiseClicks?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Enter" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnEnter?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Space" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnSpace?: boolean;
/**
* A callback method to determine if an input or textarea element should lose focus on arrow keys
* @param inputElement - The input or textarea element which is to lose focus.
* @returns True if input element should loose focus or false otherwise.
*/
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
/**
* Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.
* @defaultvalue false
*/
pagingSupportDisabled?: boolean;
/**
* Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
* when determining how to move focus
* @defaultvalue false
*/
checkForNoWrap?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
* @deprecated Use `stopFocusPropagation` instead.
*/
doNotAllowFocusEventToPropagate?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
*/
stopFocusPropagation?: boolean;
/**
* Callback to notify creators that focus has been set on the FocusZone
* @deprecated Use `onFocus` instead.
*/
onFocusNotification?: () => void;
/**
* Callback called when "focus" event triggered in FocusZone.
* @param event - React's original FocusEvent.
*/
onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.
* @defaultvalue false
*/
preventDefaultWhenHandled?: boolean;
/**
* If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
* root element after componentDidUpdate.
* @defaultvalue false
*/
preventFocusRestoration?: boolean;
}
/**
* {@docCategory FocusZone}
*/
export declare const FocusZoneTabbableElements: {
/** Tabbing is not allowed */
none: 0;
/** All tabbing action is allowed */
all: 1;
/** Tabbing is allowed only on input elements */
inputOnly: 2;
};
/**
* {@docCategory FocusZone}
*/
export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
/**
* {@docCategory FocusZone}
*/
export declare enum FocusZoneDirection {
/** Only react to up/down arrows. */
vertical = 0,
/** Only react to left/right arrows. */
horizontal = 1,
/** React to all arrows. */
bidirectional = 2,
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
domOrder = 3
}
@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusZoneDirection = exports.FocusZoneTabbableElements = void 0;
/**
* {@docCategory FocusZone}
*/
exports.FocusZoneTabbableElements = {
/** Tabbing is not allowed */
none: 0,
/** All tabbing action is allowed */
all: 1,
/** Tabbing is allowed only on input elements */
inputOnly: 2,
};
/**
* {@docCategory FocusZone}
*/
var FocusZoneDirection;
(function (FocusZoneDirection) {
/** Only react to up/down arrows. */
FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical";
/** Only react to left/right arrows. */
FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal";
/** React to all arrows. */
FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional";
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
FocusZoneDirection[FocusZoneDirection["domOrder"] = 3] = "domOrder";
})(FocusZoneDirection || (exports.FocusZoneDirection = FocusZoneDirection = {}));
//# sourceMappingURL=FocusZone.types.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
export * from './FocusZone';
export * from './FocusZone.types';
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("./FocusZone"), exports);
tslib_1.__exportStar(require("./FocusZone.types"), exports);
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FocusZone/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,4DAAkC","sourcesContent":["export * from './FocusZone';\nexport * from './FocusZone.types';\n"]}
+2
View File
@@ -0,0 +1,2 @@
import './version';
export * from './components/FocusZone/index';
+6
View File
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
require("./version");
tslib_1.__exportStar(require("./components/FocusZone/index"), exports);
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,qBAAmB;AAEnB,uEAA6C","sourcesContent":["import './version';\n\nexport * from './components/FocusZone/index';\n"]}
+1
View File
@@ -0,0 +1 @@
export {};
+7
View File
@@ -0,0 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Do not modify this file; it is generated as part of publish.
// The checked in version is a placeholder only and will not be updated.
var set_version_1 = require("@fluentui/set-version");
(0, set_version_1.setVersion)('@fluentui/react-focus', '8.10.5');
//# sourceMappingURL=version.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-focus', '8.10.5');"]}
+4
View File
@@ -0,0 +1,4 @@
import type { IsConformantOptions } from '@fluentui/react-conformance';
export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
componentPath?: string;
}): void;
+15
View File
@@ -0,0 +1,15 @@
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
export function isConformant(testInfo) {
var _a;
var defaultOptions = {
disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],
testOptions: {
'component-has-static-classname': {
prefix: 'ms-',
},
},
componentPath: (_a = require.main) === null || _a === void 0 ? void 0 : _a.filename.replace('.test', ''),
};
baseIsConformant(defaultOptions, testInfo);
}
//# sourceMappingURL=isConformant.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/E,MAAM,UAAU,YAAY,CAC1B,QAAyF;;IAEzF,IAAM,cAAc,GAAyC;QAC3D,aAAa,EAAE,CAAC,uBAAuB,EAAE,yCAAyC,CAAC;QACnF,WAAW,EAAE;YACX,gCAAgC,EAAE;gBAChC,MAAM,EAAE,KAAK;aACd;SACF;QACD,aAAa,EAAE,MAAA,OAAO,CAAC,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC3D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n): void {\n const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n disabledTests: ['kebab-aria-attributes', 'component-has-static-classname-exported'],\n testOptions: {\n 'component-has-static-classname': {\n prefix: 'ms-',\n },\n },\n componentPath: require.main?.filename.replace('.test', ''),\n };\n\n baseIsConformant(defaultOptions, testInfo);\n}\n"]}
@@ -0,0 +1,121 @@
import * as React from 'react';
import type { IFocusZone, IFocusZoneProps } from './FocusZone.types';
import type { Point } from '@fluentui/utilities';
export declare class FocusZone extends React.Component<IFocusZoneProps> implements IFocusZone {
static defaultProps: IFocusZoneProps;
static contextType: React.Context<import("@fluentui/utilities").MergeStylesShadowRootContextValue | undefined>;
context: any;
private _root;
private _mergedRef;
private _id;
/** The most recently focused child element. */
private _activeElement;
/**
* The index path to the last focused child element.
*/
private _lastIndexPath;
/**
* Flag to define when we've intentionally parked focus on the root element to temporarily
* hold focus until items appear within the zone.
*/
private _isParked;
/** The child element with tabindex=0. */
private _defaultFocusElement;
private _focusAlignment;
private _isInnerZone;
private _parkedTabIndex;
/** Used to allow moving to next focusable element even when we're focusing on a input element when pressing tab */
private _processingTabKey;
/** Provides granular control over `shouldRaiseClicks` and should be preferred over `props.shouldRaiseClicks`. */
private _shouldRaiseClicksOnEnter;
private _shouldRaiseClicksOnSpace;
private _inShadowRoot;
/** Used for testing purposes only. */
static getOuterZones(): number;
/**
* Handle global tab presses so that we can patch tabindexes on the fly.
* HEADS UP: This must not be an arrow function in order to be referentially equal among instances
* for ref counting to work correctly!
*/
private static _onKeyDownCapture;
constructor(props: IFocusZoneProps);
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
render(): React.ReactNode;
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param element - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(element: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,
* rather than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
get defaultFocusElement(): HTMLElement | null;
get activeElement(): HTMLElement | null;
private _evaluateFocusBeforeRender;
private _onFocus;
/**
* When focus is in the zone at render time but then all focusable elements are removed,
* we "park" focus temporarily on the root. Once we update with focusable children, we restore
* focus to the closest path from previous. If the user tabs away from the parked container,
* we restore focusability to the pre-parked state.
*/
private _setParkedFocus;
private _onBlur;
private _onMouseDown;
private _setActiveElement;
private _preventDefaultWhenHandled;
/**
* Handle the keystrokes.
*/
private _onKeyDown;
/**
* Walk up the dom try to find a focusable element.
*/
private _tryInvokeClickForFocusable;
/**
* Traverse to find first child zone.
*/
private _getFirstInnerZone;
private _moveFocus;
private _moveFocusDown;
private _moveFocusUp;
private _moveFocusLeft;
private _moveFocusRight;
private _getHorizontalDistanceFromCenter;
private _moveFocusPaging;
private _setFocusAlignment;
private _isImmediateDescendantOfZone;
private _getOwnerZone;
private _updateTabIndexes;
private _isContentEditableElement;
private _isElementInput;
private _shouldInputLoseFocus;
private _shouldWrapFocus;
/**
* Returns true if the element is a descendant of the FocusZone through a React portal.
*/
private _portalContainsElement;
private _getDocument;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,264 @@
import * as React from 'react';
import type { IRefObject, Point } from '@fluentui/utilities';
/**
* FocusZone component class interface.
* {@docCategory FocusZone}
*/
export interface IFocusZone {
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param childElement - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather
* than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
}
/**
* FocusZone component props.
* {@docCategory FocusZone}
*/
export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IFocusZone>;
/**
* Optional callback to access the root DOM element.
* @deprecated Temporary solution which will be replaced with ref in the V8 release.
*/
elementRef?: React.Ref<HTMLElement>;
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
className?: string;
/**
* Defines which arrows to react to.
* @defaultvalue FocusZoneDirection.bidirectional
*/
direction?: FocusZoneDirection;
/**
* Optionally defines the initial tabbable element inside the FocusZone.
* If a string is passed then it is treated as a selector for identifying the initial tabbable element.
* If a function is passed then it uses the root element as a parameter to return the initial tabbable element.
*/
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
/**
* Optionally provide a selector for identifying the initial active element.
* @deprecated Use `defaultTabbableElement` instead.
*/
defaultActiveElement?: string;
/**
* Determines if a default tabbable element should be force focused on FocusZone mount.
* @default false
*/
shouldFocusOnMount?: boolean;
/**
* If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
* This does not affect disabled attribute of any child.
*/
disabled?: boolean;
/**
* Element type the root element will use. Default is "div".
* @deprecated Use `as` instead.
*/
elementType?: any;
/**
* A component that should be used as the root element of the FocusZone component.
*/
as?: React.ElementType;
/**
* If set, will cycle to the beginning of the targets once the user navigates to the
* next target while at the end, and to the end when navigate to the previous at the beginning.
*/
isCircularNavigation?: boolean;
/**
* If provided, this callback will be executed on keypresses to determine if the user
* intends to navigate into the inner zone. Returning true will ask the first inner zone to
* set focus.
* @deprecated Use `shouldEnterInnerZone` instead.
*/
isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Callback function that will be executed on keypresses to determine if the user intends to navigate into
* the inner (nested) zone. Returning true will ask the first inner zone to set focus.
*/
shouldEnterInnerZone?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Sets the aria-labelledby attribute.
* @deprecated Directly use the `aria-labelledby` attribute instead
*/
ariaLabelledBy?: string;
/**
* Sets the aria-describedby attribute.
* @deprecated Directly use the `aria-describedby` attribute instead
*/
ariaDescribedBy?: string;
/**
* Callback for when one of immediate children elements gets active by getting focused
* or by having one of its respective children elements focused.
*/
onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
/**
* @deprecated Div props provided to the FocusZone will be mixed into the root element.
* Deprecated at v1.12.1.
*/
rootProps?: React.HTMLAttributes<HTMLDivElement>;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
* @deprecated Use `shouldReceiveFocus` instead.
*/
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
*/
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
/** Allows focus to park on root when focus is in the `FocusZone` at render time. */
allowFocusRoot?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
* @deprecated Use `handleTabKey` instead.
*
*/
allowTabKey?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
*/
handleTabKey?: FocusZoneTabbableElements;
/**
* If true and FocusZone's root element (container) receives focus, the focus will land either on the
* defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.
* Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.
*/
shouldFocusInnerElementWhenReceivedFocus?: boolean;
/**
* If true and TAB key is not handled by FocusZone, resets current active element to null value.
* For example, when roving index is not desirable and focus should always reset to the default tabbable element.
*/
shouldResetActiveElementWhenTabFromZone?: boolean;
/**
* Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on
* Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.
* @defaultvalue true
*/
shouldRaiseClicks?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Enter" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnEnter?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Space" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnSpace?: boolean;
/**
* A callback method to determine if an input or textarea element should lose focus on arrow keys
* @param inputElement - The input or textarea element which is to lose focus.
* @returns True if input element should loose focus or false otherwise.
*/
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
/**
* Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.
* @defaultvalue false
*/
pagingSupportDisabled?: boolean;
/**
* Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
* when determining how to move focus
* @defaultvalue false
*/
checkForNoWrap?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
* @deprecated Use `stopFocusPropagation` instead.
*/
doNotAllowFocusEventToPropagate?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
*/
stopFocusPropagation?: boolean;
/**
* Callback to notify creators that focus has been set on the FocusZone
* @deprecated Use `onFocus` instead.
*/
onFocusNotification?: () => void;
/**
* Callback called when "focus" event triggered in FocusZone.
* @param event - React's original FocusEvent.
*/
onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.
* @defaultvalue false
*/
preventDefaultWhenHandled?: boolean;
/**
* If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
* root element after componentDidUpdate.
* @defaultvalue false
*/
preventFocusRestoration?: boolean;
}
/**
* {@docCategory FocusZone}
*/
export declare const FocusZoneTabbableElements: {
/** Tabbing is not allowed */
none: 0;
/** All tabbing action is allowed */
all: 1;
/** Tabbing is allowed only on input elements */
inputOnly: 2;
};
/**
* {@docCategory FocusZone}
*/
export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
/**
* {@docCategory FocusZone}
*/
export declare enum FocusZoneDirection {
/** Only react to up/down arrows. */
vertical = 0,
/** Only react to left/right arrows. */
horizontal = 1,
/** React to all arrows. */
bidirectional = 2,
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
domOrder = 3
}
@@ -0,0 +1,29 @@
/**
* {@docCategory FocusZone}
*/
export var FocusZoneTabbableElements = {
/** Tabbing is not allowed */
none: 0,
/** All tabbing action is allowed */
all: 1,
/** Tabbing is allowed only on input elements */
inputOnly: 2,
};
/**
* {@docCategory FocusZone}
*/
export var FocusZoneDirection;
(function (FocusZoneDirection) {
/** Only react to up/down arrows. */
FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical";
/** Only react to left/right arrows. */
FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal";
/** React to all arrows. */
FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional";
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
FocusZoneDirection[FocusZoneDirection["domOrder"] = 3] = "domOrder";
})(FocusZoneDirection || (FocusZoneDirection = {}));
//# sourceMappingURL=FocusZone.types.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
export * from './FocusZone';
export * from './FocusZone.types';
+3
View File
@@ -0,0 +1,3 @@
export * from './FocusZone';
export * from './FocusZone.types';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FocusZone/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './FocusZone';\nexport * from './FocusZone.types';\n"]}
+2
View File
@@ -0,0 +1,2 @@
import './version';
export * from './components/FocusZone/index';
+3
View File
@@ -0,0 +1,3 @@
import './version';
export * from './components/FocusZone/index';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAC;AAEnB,cAAc,8BAA8B,CAAC","sourcesContent":["import './version';\n\nexport * from './components/FocusZone/index';\n"]}
+1
View File
@@ -0,0 +1 @@
export {};
+5
View File
@@ -0,0 +1,5 @@
// Do not modify this file; it is generated as part of publish.
// The checked in version is a placeholder only and will not be updated.
import { setVersion } from '@fluentui/set-version';
setVersion('@fluentui/react-focus', '8.10.5');
//# sourceMappingURL=version.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-focus', '8.10.5');"]}
+41
View File
@@ -0,0 +1,41 @@
{
"name": "@fluentui/react-focus",
"version": "8.10.5",
"description": "Focus helpers to be used in React applications.",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "lib/index.d.ts",
"sideEffects": [
"lib/version.js"
],
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"scripts": {
"build": "just-scripts build"
},
"dependencies": {
"@fluentui/keyboard-key": "^0.4.23",
"@fluentui/merge-styles": "^8.6.14",
"@fluentui/set-version": "^8.2.24",
"@fluentui/style-utilities": "^8.15.0",
"@fluentui/utilities": "^8.17.2",
"tslib": "^2.1.0"
},
"peerDependencies": {
"@types/react": ">=16.8.0 <20.0.0",
"react": ">=16.8.0 <20.0.0"
},
"publishConfig": {
"access": "public"
},
"exports": {
".": {
"types": "./lib/index.d.ts",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
}
}
}
@@ -0,0 +1,312 @@
import * as React from 'react';
import type { IRefObject, Point } from '@fluentui/utilities';
/**
* FocusZone component class interface.
* {@docCategory FocusZone}
*/
export interface IFocusZone {
/**
* Sets focus to the first tabbable item in the zone.
* @param forceIntoFirstElement - If true, focus will be forced into the first element, even
* if focus is already in the focus zone.
* @param bypassHiddenElements - If true, focus will be not be set on hidden elements.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focus(forceIntoFirstElement?: boolean, bypassHiddenElements?: boolean): boolean;
/**
* Sets focus to the last tabbable item in the zone.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusLast(): boolean;
/**
* Sets focus to a specific child element within the zone. This can be used in conjunction with
* shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct
* location and then focus.)
* @param childElement - The child element within the zone to focus.
* @param forceAlignment - If true, focus alignment will be set according to the element provided.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
focusElement(childElement?: HTMLElement, forceAlignment?: boolean): boolean;
/**
* Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference, rather
* than a center based on the last horizontal motion.
* @param point - the new reference point.
*/
setFocusAlignment(point: Point): void;
}
/**
* FocusZone component props.
* {@docCategory FocusZone}
*/
export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement> {
/**
* Optional callback to access the IFocusZone interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IFocusZone>;
/**
* Optional callback to access the root DOM element.
* @deprecated Temporary solution which will be replaced with ref in the V8 release.
*/
elementRef?: React.Ref<HTMLElement>;
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
className?: string;
/**
* Defines which arrows to react to.
* @defaultvalue FocusZoneDirection.bidirectional
*/
direction?: FocusZoneDirection;
/**
* Optionally defines the initial tabbable element inside the FocusZone.
* If a string is passed then it is treated as a selector for identifying the initial tabbable element.
* If a function is passed then it uses the root element as a parameter to return the initial tabbable element.
*/
defaultTabbableElement?: string | ((root: HTMLElement) => HTMLElement);
/**
* Optionally provide a selector for identifying the initial active element.
* @deprecated Use `defaultTabbableElement` instead.
*/
defaultActiveElement?: string;
/**
* Determines if a default tabbable element should be force focused on FocusZone mount.
* @default false
*/
shouldFocusOnMount?: boolean;
/**
* If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.
* This does not affect disabled attribute of any child.
*/
disabled?: boolean;
/**
* Element type the root element will use. Default is "div".
* @deprecated Use `as` instead.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
elementType?: any /* TODO should be `keyof React.ReactHTML`, tracking with https://github.com/Microsoft/TypeScript/issues/30050 */;
/**
* A component that should be used as the root element of the FocusZone component.
*/
as?: React.ElementType;
/**
* If set, will cycle to the beginning of the targets once the user navigates to the
* next target while at the end, and to the end when navigate to the previous at the beginning.
*/
isCircularNavigation?: boolean;
/**
* If provided, this callback will be executed on keypresses to determine if the user
* intends to navigate into the inner zone. Returning true will ask the first inner zone to
* set focus.
* @deprecated Use `shouldEnterInnerZone` instead.
*/
isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Callback function that will be executed on keypresses to determine if the user intends to navigate into
* the inner (nested) zone. Returning true will ask the first inner zone to set focus.
*/
shouldEnterInnerZone?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;
/**
* Sets the aria-labelledby attribute.
* @deprecated Directly use the `aria-labelledby` attribute instead
*/
ariaLabelledBy?: string;
/**
* Sets the aria-describedby attribute.
* @deprecated Directly use the `aria-describedby` attribute instead
*/
ariaDescribedBy?: string;
/**
* Callback for when one of immediate children elements gets active by getting focused
* or by having one of its respective children elements focused.
*/
onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;
/**
* @deprecated Div props provided to the FocusZone will be mixed into the root element.
* Deprecated at v1.12.1.
*/
rootProps?: React.HTMLAttributes<HTMLDivElement>;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
* @deprecated Use `shouldReceiveFocus` instead.
*/
onBeforeFocus?: (childElement?: HTMLElement) => boolean;
/**
* Callback method for determining if focus should indeed be set on the given element.
* @param element - The child element within the zone to focus.
* @returns True if focus should be set to the given element, false to avoid setting focus.
*/
shouldReceiveFocus?: (childElement?: HTMLElement) => boolean;
/** Allows focus to park on root when focus is in the `FocusZone` at render time. */
allowFocusRoot?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
* @deprecated Use `handleTabKey` instead.
*
*/
allowTabKey?: boolean;
/**
* Allows tab key to be handled to tab through a list of items in the focus zone,
* an unfortunate side effect is that users will not be able to tab out of the focus zone
* and have to hit escape or some other key.
*/
handleTabKey?: FocusZoneTabbableElements;
/**
* If true and FocusZone's root element (container) receives focus, the focus will land either on the
* defaultTabbableElement (if set) or on the first tabbable element of this FocusZone.
* Usually a case for nested focus zones, when the nested focus zone's container is a focusable element.
*/
shouldFocusInnerElementWhenReceivedFocus?: boolean;
/**
* If true and TAB key is not handled by FocusZone, resets current active element to null value.
* For example, when roving index is not desirable and focus should always reset to the default tabbable element.
*/
shouldResetActiveElementWhenTabFromZone?: boolean;
/**
* Determines whether the FocusZone will walk up the DOM trying to invoke click callbacks on focusable elements on
* Enter and Space keydowns to ensure accessibility for tags that don't guarantee this behavior.
* @defaultvalue true
*/
shouldRaiseClicks?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Enter" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnEnter?: boolean;
/**
* Relates to `shouldRaiseClicks`.
* Allows the click event raising for the "Space" key to be set independently from `shouldRaiseClicks`.
* Inherits the value of `shouldRaiseClicks` if not set explicitly.
*/
shouldRaiseClicksOnSpace?: boolean;
/**
* A callback method to determine if an input or textarea element should lose focus on arrow keys
* @param inputElement - The input or textarea element which is to lose focus.
* @returns True if input element should loose focus or false otherwise.
*/
shouldInputLoseFocusOnArrowKey?: (inputElement: HTMLInputElement | HTMLTextAreaElement) => boolean;
/**
* Determines whether to disable the paging support for Page Up and Page Down keyboard scenarios.
* @defaultvalue false
*/
pagingSupportDisabled?: boolean;
/**
* Determines whether to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
* when determining how to move focus
* @defaultvalue false
*/
checkForNoWrap?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
* @deprecated Use `stopFocusPropagation` instead.
*/
doNotAllowFocusEventToPropagate?: boolean;
/**
* Whether the FocusZone should allow focus events to propagate past the FocusZone.
*/
stopFocusPropagation?: boolean;
/**
* Callback to notify creators that focus has been set on the FocusZone
* @deprecated Use `onFocus` instead.
*/
onFocusNotification?: () => void;
/**
* Callback called when "focus" event triggered in FocusZone.
* @param event - React's original FocusEvent.
*/
onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
/**
* If true, FocusZone prevents the default behavior of Keyboard events when changing focus between elements.
* @defaultvalue false
*/
preventDefaultWhenHandled?: boolean;
/**
* If true, prevents the FocusZone from attempting to restore the focus to the inner element when the focus is on the
* root element after componentDidUpdate.
* @defaultvalue false
*/
preventFocusRestoration?: boolean;
}
/**
* {@docCategory FocusZone}
*/
export const FocusZoneTabbableElements = {
/** Tabbing is not allowed */
none: 0 as 0,
/** All tabbing action is allowed */
all: 1 as 1,
/** Tabbing is allowed only on input elements */
inputOnly: 2 as 2,
};
/**
* {@docCategory FocusZone}
*/
export type FocusZoneTabbableElements = (typeof FocusZoneTabbableElements)[keyof typeof FocusZoneTabbableElements];
/**
* {@docCategory FocusZone}
*/
export enum FocusZoneDirection {
/** Only react to up/down arrows. */
vertical = 0,
/** Only react to left/right arrows. */
horizontal = 1,
/** React to all arrows. */
bidirectional = 2,
/**
* React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.
* Right and Left arrow keys are swapped in RTL mode.
*/
domOrder = 3,
}