@itwin/core-react 4.0.0-dev.10 → 4.0.0-dev.12

package/lib/esm/core-react/focus/ItemKeyboardNavigator.js

@@ -1,146 +1,146 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Focus
- */
-import { isArrowKey, SpecialKey } from "@itwin/appui-abstract";
-import { Orientation } from "../enums/Orientation";
-/** Keyboard Navigator for parent components
- * @internal
- */
-export class ItemKeyboardNavigator {
-    constructor(onFocusItem, onActivateItem) {
-        this.onFocusItem = onFocusItem;
-        this.onActivateItem = onActivateItem;
-        this._itemCount = 0;
-        this._orientation = Orientation.Horizontal;
-        this._allowWrap = true;
-        this._direction = new Map([
-            [SpecialKey.ArrowLeft, -1],
-            [SpecialKey.ArrowUp, -1],
-            [SpecialKey.ArrowRight, 1],
-            [SpecialKey.ArrowDown, 1],
-        ]);
-    }
-    /** The item count */
-    get itemCount() { return this._itemCount; }
-    set itemCount(count) { this._itemCount = count; }
-    /** The primary orientation */
-    get orientation() { return this._orientation; }
-    set orientation(orientation) { this._orientation = orientation; }
-    /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */
-    get allowWrap() { return this._allowWrap; }
-    set allowWrap(v) { this._allowWrap = v; }
-    /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */
-    get crossAxisArrowKeyHandler() { return this._crossAxisArrowKeyHandler; }
-    set crossAxisArrowKeyHandler(v) { this._crossAxisArrowKeyHandler = v; }
-    /** Handle KeyDown on items */
-    handleKeyDownEvent(event, index) {
-        const key = event.key;
-        switch (key) {
-            case SpecialKey.Home:
-                event.preventDefault();
-                // Activate first item
-                this.focusFirstItem();
-                break;
-            case SpecialKey.End:
-                event.preventDefault();
-                // Activate last item
-                this.focusLastItem();
-                break;
-            // Up and down are in keydown
-            // because we need to prevent page scroll >:)
-            case SpecialKey.ArrowUp:
-            case SpecialKey.ArrowDown:
-                this.determineOrientation(event, index);
-                break;
-            case SpecialKey.Enter:
-            case SpecialKey.Space:
-                this.activateItem(index);
-                break;
-        }
-    }
-    /** Handle KeyUp on items */
-    handleKeyUpEvent(event, index) {
-        const key = event.key;
-        switch (key) {
-            case SpecialKey.ArrowLeft:
-            case SpecialKey.ArrowRight:
-                this.determineOrientation(event, index);
-                break;
-        }
-    }
-    focusFirstItem() {
-        this.onFocusItem(0);
-    }
-    focusLastItem() {
-        const index = this._itemCount - 1;
-        this.onFocusItem(index);
-    }
-    /** When an item list's orientation is set to vertical,
-     * only up and down arrow should function.
-     * In all other cases only left and right arrow function.
-     */
-    determineOrientation(event, index) {
-        const key = event.key;
-        const vertical = this._orientation === Orientation.Vertical;
-        let proceed = false;
-        if (vertical) {
-            if (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown) {
-                event.preventDefault();
-                proceed = true;
-            }
-            else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight)) {
-                this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowRight);
-            }
-        }
-        else {
-            if (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight) {
-                proceed = true;
-            }
-            else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown)) {
-                this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowDown);
-            }
-        }
-        if (proceed) {
-            this.switchItemOnArrowPress(event, index);
-        }
-    }
-    /** Either focus the next, previous, first, or last item depending on key pressed
-     */
-    switchItemOnArrowPress(event, index) {
-        // Add or subtract depending on key pressed
-        const pressed = event.key;
-        const targetDirection = this._direction.get(pressed);
-        // istanbul ignore else
-        if (targetDirection) {
-            const newIndex = index + targetDirection;
-            if (0 <= newIndex && newIndex < this._itemCount) {
-                this.onFocusItem(newIndex);
-            }
-            else {
-                // istanbul ignore else
-                if (this._allowWrap) {
-                    if (pressed === SpecialKey.ArrowLeft || pressed === SpecialKey.ArrowUp) {
-                        this.focusLastItem();
-                    }
-                    else {
-                        this.focusFirstItem();
-                    }
-                }
-            }
-        }
-    }
-    activateItem(index) {
-        this.onActivateItem(index);
-    }
-}
-/** Determines if a KeyboardEvent.key is an Item Navigation key
- * @internal
- */
-export function isNavigationKey(key) {
-    return (isArrowKey(key) || key === SpecialKey.Home || key === SpecialKey.End || key === SpecialKey.Space || key === SpecialKey.Enter);
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Focus
+ */
+import { isArrowKey, SpecialKey } from "@itwin/appui-abstract";
+import { Orientation } from "../enums/Orientation";
+/** Keyboard Navigator for parent components
+ * @internal
+ */
+export class ItemKeyboardNavigator {
+    constructor(onFocusItem, onActivateItem) {
+        this.onFocusItem = onFocusItem;
+        this.onActivateItem = onActivateItem;
+        this._itemCount = 0;
+        this._orientation = Orientation.Horizontal;
+        this._allowWrap = true;
+        this._direction = new Map([
+            [SpecialKey.ArrowLeft, -1],
+            [SpecialKey.ArrowUp, -1],
+            [SpecialKey.ArrowRight, 1],
+            [SpecialKey.ArrowDown, 1],
+        ]);
+    }
+    /** The item count */
+    get itemCount() { return this._itemCount; }
+    set itemCount(count) { this._itemCount = count; }
+    /** The primary orientation */
+    get orientation() { return this._orientation; }
+    set orientation(orientation) { this._orientation = orientation; }
+    /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */
+    get allowWrap() { return this._allowWrap; }
+    set allowWrap(v) { this._allowWrap = v; }
+    /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */
+    get crossAxisArrowKeyHandler() { return this._crossAxisArrowKeyHandler; }
+    set crossAxisArrowKeyHandler(v) { this._crossAxisArrowKeyHandler = v; }
+    /** Handle KeyDown on items */
+    handleKeyDownEvent(event, index) {
+        const key = event.key;
+        switch (key) {
+            case SpecialKey.Home:
+                event.preventDefault();
+                // Activate first item
+                this.focusFirstItem();
+                break;
+            case SpecialKey.End:
+                event.preventDefault();
+                // Activate last item
+                this.focusLastItem();
+                break;
+            // Up and down are in keydown
+            // because we need to prevent page scroll >:)
+            case SpecialKey.ArrowUp:
+            case SpecialKey.ArrowDown:
+                this.determineOrientation(event, index);
+                break;
+            case SpecialKey.Enter:
+            case SpecialKey.Space:
+                this.activateItem(index);
+                break;
+        }
+    }
+    /** Handle KeyUp on items */
+    handleKeyUpEvent(event, index) {
+        const key = event.key;
+        switch (key) {
+            case SpecialKey.ArrowLeft:
+            case SpecialKey.ArrowRight:
+                this.determineOrientation(event, index);
+                break;
+        }
+    }
+    focusFirstItem() {
+        this.onFocusItem(0);
+    }
+    focusLastItem() {
+        const index = this._itemCount - 1;
+        this.onFocusItem(index);
+    }
+    /** When an item list's orientation is set to vertical,
+     * only up and down arrow should function.
+     * In all other cases only left and right arrow function.
+     */
+    determineOrientation(event, index) {
+        const key = event.key;
+        const vertical = this._orientation === Orientation.Vertical;
+        let proceed = false;
+        if (vertical) {
+            if (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown) {
+                event.preventDefault();
+                proceed = true;
+            }
+            else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight)) {
+                this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowRight);
+            }
+        }
+        else {
+            if (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight) {
+                proceed = true;
+            }
+            else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown)) {
+                this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowDown);
+            }
+        }
+        if (proceed) {
+            this.switchItemOnArrowPress(event, index);
+        }
+    }
+    /** Either focus the next, previous, first, or last item depending on key pressed
+     */
+    switchItemOnArrowPress(event, index) {
+        // Add or subtract depending on key pressed
+        const pressed = event.key;
+        const targetDirection = this._direction.get(pressed);
+        // istanbul ignore else
+        if (targetDirection) {
+            const newIndex = index + targetDirection;
+            if (0 <= newIndex && newIndex < this._itemCount) {
+                this.onFocusItem(newIndex);
+            }
+            else {
+                // istanbul ignore else
+                if (this._allowWrap) {
+                    if (pressed === SpecialKey.ArrowLeft || pressed === SpecialKey.ArrowUp) {
+                        this.focusLastItem();
+                    }
+                    else {
+                        this.focusFirstItem();
+                    }
+                }
+            }
+        }
+    }
+    activateItem(index) {
+        this.onActivateItem(index);
+    }
+}
+/** Determines if a KeyboardEvent.key is an Item Navigation key
+ * @internal
+ */
+export function isNavigationKey(key) {
+    return (isArrowKey(key) || key === SpecialKey.Home || key === SpecialKey.End || key === SpecialKey.Space || key === SpecialKey.Enter);
+}
 //# sourceMappingURL=ItemKeyboardNavigator.js.map

package/lib/esm/core-react/focus/ItemKeyboardNavigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemKeyboardNavigator.js","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Focus\n */\n\nimport { isArrowKey, SpecialKey } from \"@itwin/appui-abstract\";\nimport { Orientation } from \"../enums/Orientation\";\n\n/** Cross-Axis Arrow Key Callback\n * @internal\n */\nexport type CrossAxisArrowKeyFunc = (forward: boolean) => void;\n\n/** Keyboard Navigator for parent components\n * @internal\n */\nexport class ItemKeyboardNavigator {\n  private _direction: Map<string, number>;\n  private _itemCount = 0;\n  private _orientation = Orientation.Horizontal;\n  private _allowWrap = true;\n  private _crossAxisArrowKeyHandler?: CrossAxisArrowKeyFunc;\n\n  constructor(public onFocusItem: (index: number) => void, public onActivateItem: (index: number) => void) {\n    this._direction = new Map<string, number>([\n      [SpecialKey.ArrowLeft, -1],\n      [SpecialKey.ArrowUp, -1],\n      [SpecialKey.ArrowRight, 1],\n      [SpecialKey.ArrowDown, 1],\n    ]);\n  }\n\n  /** The item count */\n  public get itemCount(): number { return this._itemCount; }\n  public set itemCount(count: number) { this._itemCount = count; }\n\n  /** The primary orientation */\n  public get orientation(): Orientation { return this._orientation; }\n  public set orientation(orientation: Orientation) { this._orientation = orientation; }\n\n  /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */\n  public get allowWrap(): boolean { return this._allowWrap; }\n  public set allowWrap(v: boolean) { this._allowWrap = v; }\n\n  /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */\n  public get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined { return this._crossAxisArrowKeyHandler; }\n  public set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined) { this._crossAxisArrowKeyHandler = v; }\n\n  /** Handle KeyDown on items */\n  public handleKeyDownEvent(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n\n    switch (key) {\n      case SpecialKey.Home:\n        event.preventDefault();\n        // Activate first item\n        this.focusFirstItem();\n        break;\n      case SpecialKey.End:\n        event.preventDefault();\n        // Activate last item\n        this.focusLastItem();\n        break;\n\n      // Up and down are in keydown\n      // because we need to prevent page scroll >:)\n      case SpecialKey.ArrowUp:\n      case SpecialKey.ArrowDown:\n        this.determineOrientation(event, index);\n        break;\n\n      case SpecialKey.Enter:\n      case SpecialKey.Space:\n        this.activateItem(index);\n        break;\n    }\n  }\n\n  /** Handle KeyUp on items */\n  public handleKeyUpEvent(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n\n    switch (key) {\n      case SpecialKey.ArrowLeft:\n      case SpecialKey.ArrowRight:\n        this.determineOrientation(event, index);\n        break;\n    }\n  }\n\n  private focusFirstItem(): void {\n    this.onFocusItem(0);\n  }\n\n  private focusLastItem(): void {\n    const index = this._itemCount - 1;\n    this.onFocusItem(index);\n  }\n\n  /** When an item list's orientation is set to vertical,\n   * only up and down arrow should function.\n   * In all other cases only left and right arrow function.\n   */\n  private determineOrientation(event: React.KeyboardEvent, index: number): void {\n    const key = event.key;\n    const vertical = this._orientation === Orientation.Vertical;\n    let proceed = false;\n\n    if (vertical) {\n      if (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown) {\n        event.preventDefault();\n        proceed = true;\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight)) {\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowRight);\n      }\n    } else {\n      if (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight) {\n        proceed = true;\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown)) {\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowDown);\n      }\n    }\n\n    if (proceed) {\n      this.switchItemOnArrowPress(event, index);\n    }\n  }\n\n  /** Either focus the next, previous, first, or last item depending on key pressed\n   */\n  private switchItemOnArrowPress(event: React.KeyboardEvent, index: number): void {\n    // Add or subtract depending on key pressed\n    const pressed = event.key;\n    const targetDirection = this._direction.get(pressed);\n\n    // istanbul ignore else\n    if (targetDirection) {\n      const newIndex = index + targetDirection;\n\n      if (0 <= newIndex && newIndex < this._itemCount) {\n        this.onFocusItem(newIndex);\n      } else {\n        // istanbul ignore else\n        if (this._allowWrap) {\n          if (pressed === SpecialKey.ArrowLeft || pressed === SpecialKey.ArrowUp) {\n            this.focusLastItem();\n          } else {\n            this.focusFirstItem();\n          }\n        }\n      }\n    }\n  }\n\n  private activateItem(index: number): void {\n    this.onActivateItem(index);\n  }\n}\n\n/** Determines if a KeyboardEvent.key is an Item Navigation key\n * @internal\n */\nexport function isNavigationKey(key: string): boolean {\n  return (isArrowKey(key) || key === SpecialKey.Home || key === SpecialKey.End || key === SpecialKey.Space || key === SpecialKey.Enter);\n}\n"]}
+{"version":3,"file":"ItemKeyboardNavigator.js","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Focus\r\n */\r\n\r\nimport { isArrowKey, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\n\r\n/** Cross-Axis Arrow Key Callback\r\n * @internal\r\n */\r\nexport type CrossAxisArrowKeyFunc = (forward: boolean) => void;\r\n\r\n/** Keyboard Navigator for parent components\r\n * @internal\r\n */\r\nexport class ItemKeyboardNavigator {\r\n  private _direction: Map<string, number>;\r\n  private _itemCount = 0;\r\n  private _orientation = Orientation.Horizontal;\r\n  private _allowWrap = true;\r\n  private _crossAxisArrowKeyHandler?: CrossAxisArrowKeyFunc;\r\n\r\n  constructor(public onFocusItem: (index: number) => void, public onActivateItem: (index: number) => void) {\r\n    this._direction = new Map<string, number>([\r\n      [SpecialKey.ArrowLeft, -1],\r\n      [SpecialKey.ArrowUp, -1],\r\n      [SpecialKey.ArrowRight, 1],\r\n      [SpecialKey.ArrowDown, 1],\r\n    ]);\r\n  }\r\n\r\n  /** The item count */\r\n  public get itemCount(): number { return this._itemCount; }\r\n  public set itemCount(count: number) { this._itemCount = count; }\r\n\r\n  /** The primary orientation */\r\n  public get orientation(): Orientation { return this._orientation; }\r\n  public set orientation(orientation: Orientation) { this._orientation = orientation; }\r\n\r\n  /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */\r\n  public get allowWrap(): boolean { return this._allowWrap; }\r\n  public set allowWrap(v: boolean) { this._allowWrap = v; }\r\n\r\n  /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */\r\n  public get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined { return this._crossAxisArrowKeyHandler; }\r\n  public set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined) { this._crossAxisArrowKeyHandler = v; }\r\n\r\n  /** Handle KeyDown on items */\r\n  public handleKeyDownEvent(event: React.KeyboardEvent, index: number): void {\r\n    const key = event.key;\r\n\r\n    switch (key) {\r\n      case SpecialKey.Home:\r\n        event.preventDefault();\r\n        // Activate first item\r\n        this.focusFirstItem();\r\n        break;\r\n      case SpecialKey.End:\r\n        event.preventDefault();\r\n        // Activate last item\r\n        this.focusLastItem();\r\n        break;\r\n\r\n      // Up and down are in keydown\r\n      // because we need to prevent page scroll >:)\r\n      case SpecialKey.ArrowUp:\r\n      case SpecialKey.ArrowDown:\r\n        this.determineOrientation(event, index);\r\n        break;\r\n\r\n      case SpecialKey.Enter:\r\n      case SpecialKey.Space:\r\n        this.activateItem(index);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** Handle KeyUp on items */\r\n  public handleKeyUpEvent(event: React.KeyboardEvent, index: number): void {\r\n    const key = event.key;\r\n\r\n    switch (key) {\r\n      case SpecialKey.ArrowLeft:\r\n      case SpecialKey.ArrowRight:\r\n        this.determineOrientation(event, index);\r\n        break;\r\n    }\r\n  }\r\n\r\n  private focusFirstItem(): void {\r\n    this.onFocusItem(0);\r\n  }\r\n\r\n  private focusLastItem(): void {\r\n    const index = this._itemCount - 1;\r\n    this.onFocusItem(index);\r\n  }\r\n\r\n  /** When an item list's orientation is set to vertical,\r\n   * only up and down arrow should function.\r\n   * In all other cases only left and right arrow function.\r\n   */\r\n  private determineOrientation(event: React.KeyboardEvent, index: number): void {\r\n    const key = event.key;\r\n    const vertical = this._orientation === Orientation.Vertical;\r\n    let proceed = false;\r\n\r\n    if (vertical) {\r\n      if (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown) {\r\n        event.preventDefault();\r\n        proceed = true;\r\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight)) {\r\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowRight);\r\n      }\r\n    } else {\r\n      if (key === SpecialKey.ArrowLeft || key === SpecialKey.ArrowRight) {\r\n        proceed = true;\r\n      } else if (this.crossAxisArrowKeyHandler && (key === SpecialKey.ArrowUp || key === SpecialKey.ArrowDown)) {\r\n        this.crossAxisArrowKeyHandler(key === SpecialKey.ArrowDown);\r\n      }\r\n    }\r\n\r\n    if (proceed) {\r\n      this.switchItemOnArrowPress(event, index);\r\n    }\r\n  }\r\n\r\n  /** Either focus the next, previous, first, or last item depending on key pressed\r\n   */\r\n  private switchItemOnArrowPress(event: React.KeyboardEvent, index: number): void {\r\n    // Add or subtract depending on key pressed\r\n    const pressed = event.key;\r\n    const targetDirection = this._direction.get(pressed);\r\n\r\n    // istanbul ignore else\r\n    if (targetDirection) {\r\n      const newIndex = index + targetDirection;\r\n\r\n      if (0 <= newIndex && newIndex < this._itemCount) {\r\n        this.onFocusItem(newIndex);\r\n      } else {\r\n        // istanbul ignore else\r\n        if (this._allowWrap) {\r\n          if (pressed === SpecialKey.ArrowLeft || pressed === SpecialKey.ArrowUp) {\r\n            this.focusLastItem();\r\n          } else {\r\n            this.focusFirstItem();\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private activateItem(index: number): void {\r\n    this.onActivateItem(index);\r\n  }\r\n}\r\n\r\n/** Determines if a KeyboardEvent.key is an Item Navigation key\r\n * @internal\r\n */\r\nexport function isNavigationKey(key: string): boolean {\r\n  return (isArrowKey(key) || key === SpecialKey.Home || key === SpecialKey.End || key === SpecialKey.Space || key === SpecialKey.Enter);\r\n}\r\n"]}

package/lib/esm/core-react/focustrap/FocusTrap.d.ts

@@ -1,29 +1,29 @@
-/** @packageDocumentation
- * @module Popup
- */
-import * as React from "react";
-/** Focus into first focusable element of a container.
- * @internal
- */
-export declare function focusIntoContainer(focusContainer: HTMLDivElement, initialFocusElement?: React.RefObject<HTMLElement> | string): boolean;
-/** Properties supported by [[FocusTrap]] component.
- * @internal
- */
-export interface FocusTrapProps extends React.AllHTMLAttributes<any> {
-    /** child components */
-    children: React.ReactNode;
-    /** if active is not true then no trapping of focus is attempted. */
-    active?: boolean;
-    /** restore focus to element that had focus before trap was activated */
-    returnFocusOnDeactivate: boolean;
-    /** Optional reference to element to receive focus when trap is activated. Optionally a CSS Selector
-     * string can be supplied to locate an element in the FocusTrap container. If no specification is defined
-     * the first focusable element is used.
-     */
-    initialFocusElement?: React.RefObject<HTMLElement> | string;
-}
-/** Trap Focus in container while trap is active.
- * @internal
- */
-export declare function FocusTrap(props: FocusTrapProps): JSX.Element | null;
+/** @packageDocumentation
+ * @module Popup
+ */
+import * as React from "react";
+/** Focus into first focusable element of a container.
+ * @internal
+ */
+export declare function focusIntoContainer(focusContainer: HTMLDivElement, initialFocusElement?: React.RefObject<HTMLElement> | string): boolean;
+/** Properties supported by [[FocusTrap]] component.
+ * @internal
+ */
+export interface FocusTrapProps extends React.AllHTMLAttributes<any> {
+    /** child components */
+    children: React.ReactNode;
+    /** if active is not true then no trapping of focus is attempted. */
+    active?: boolean;
+    /** restore focus to element that had focus before trap was activated */
+    returnFocusOnDeactivate: boolean;
+    /** Optional reference to element to receive focus when trap is activated. Optionally a CSS Selector
+     * string can be supplied to locate an element in the FocusTrap container. If no specification is defined
+     * the first focusable element is used.
+     */
+    initialFocusElement?: React.RefObject<HTMLElement> | string;
+}
+/** Trap Focus in container while trap is active.
+ * @internal
+ */
+export declare function FocusTrap(props: FocusTrapProps): JSX.Element | null;
 //# sourceMappingURL=FocusTrap.d.ts.map