office-ui-fabric-react/lib/components/FocusZone/FocusZone.Props.ts.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport { FocusZone } from './FocusZone';\n\n/**\n * FocusZone component class interface.\n */\nexport interface IFocusZone {\n  /**\n   * Sets focus to the first tabbable item in the zone.\n   * @returns True if focus could be set to an active element, false if no operation was taken.\n   */\n  focus(): boolean;\n\n  /**\n   * Sets focus to a specific child element within the zone. This can be used in conjunction with\n   * onBeforeFocus to created delayed focus scenarios (like animate the scroll position to the correct\n   * location and then focus.)\n   * @param {HTMLElement} element The child element within the zone to focus.\n   * @returns True if focus could be set to an active element, false if no operation was taken.\n   */\n  focusElement(childElement?: HTMLElement): boolean;\n}\n\n/**\n * FocusZone component props.\n */\nexport interface IFocusZoneProps extends React.Props<FocusZone> {\n  /**\n   * Additional class name to provide on the root element, in addition to the ms-FocusZone class.\n   */\n  className?: string;\n\n  /**\n   * Defines which arrows to react to.\n   * @default FocusZoneDirection.bidriectional\n   */\n  direction?: FocusZoneDirection;\n\n  /**\n   * If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.\n   * This does not affect disabled attribute of any child.\n   */\n  disabled?: boolean;\n\n  /**\n   * If set, will cycle to the beginning of the targets once the user navigates to the\n   * next target while at the end, and to the end when navigate to the previous at the beginning.\n   */\n  isCircularNavigation?: boolean;\n\n  /**\n   * If provided, this callback will be executed on keypresses to determine if the user\n   * intends to navigate into the inner zone. Returning true will ask the first inner zone to\n   * set focus.\n   */\n  isInnerZoneKeystroke?: (ev: React.KeyboardEvent<HTMLElement>) => boolean;\n\n  /**\n   * Sets the aria-labelledby attribute.\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Callback for when one of immediate children elements gets active by getting focused\n   * or by having one of its respective children elements focused.\n   */\n  onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;\n\n  /**\n   * Props mixed into the div root element that will be mixed into the root element, *before* other props are applied.\n   * This allows you to extend the root element with additional attributes, such as data-automation-id needed for\n   *  automation. Note that if you provide, for example, \"ariaLabelledBy\" as well as \"rootProps.ariaLabelledBy\", the\n   * former will take precedence over the later.\n   */\n  rootProps?: React.HTMLProps<HTMLDivElement>;\n\n  /**\n   * Callback method for determining if focus should indeed be set on the given element.\n   * @param {HTMLElement} element The child element within the zone to focus.\n   * @returns True if focus should be set to the given element, false to avoid setting focus.\n   */\n  onBeforeFocus?: (childElement?: HTMLElement) => boolean;\n}\n\nexport enum FocusZoneDirection {\n  /** Only react to up/down arrows. */\n  vertical,\n\n  /** Only react to left/right arrows. */\n  horizontal,\n\n  /** React to all arrows. */\n  bidirectional\n}\n";