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

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/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