@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

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

@@ -0,0 +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);
+}
+//# sourceMappingURL=ItemKeyboardNavigator.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +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;
+//# sourceMappingURL=FocusTrap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focustrap/FocusTrap.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgH/B;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,cAAc,EAAE,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,OAAO,CAWvI;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC;IAClE,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,uBAAuB,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;CAC7D;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,sBAoF9C"}

package/lib/esm/core-react/focustrap/FocusTrap.js

@@ -0,0 +1,192 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Popup
+ */
+import * as React from "react";
+import { Logger } from "@itwin/core-bentley";
+import { UiCore } from "../UiCore";
+// cSpell:ignore focusable
+function isFocusable(element) {
+    if (!element || element.tabIndex < 0)
+        return false;
+    if (element.classList && element.classList.contains("core-focus-trap-ignore-initial"))
+        return false;
+    if (element.getAttribute && (typeof element.getAttribute === "function") && element.getAttribute("disabled") !== null)
+        return false;
+    if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute("tabIndex") !== null))
+        return true;
+    switch (element.nodeName) {
+        case "A":
+            const anchorElement = element;
+            return !!anchorElement.href && anchorElement.rel !== "ignore";
+        case "INPUT":
+            const inputElement = element;
+            return inputElement.type !== "hidden" && inputElement.type !== "file";
+        case "BUTTON":
+        case "SELECT":
+        case "TEXTAREA":
+            return true;
+        default:
+            return false;
+    }
+}
+function processFindFocusableDescendant(element) {
+    // istanbul ignore next
+    if (!element)
+        return null;
+    for (const child of element.childNodes) {
+        // istanbul ignore else
+        if (isFocusable(child))
+            return child;
+        const focusable = processFindFocusableDescendant(child);
+        if (focusable)
+            return focusable;
+    }
+    return null;
+}
+function findFirstFocusableDescendant(focusContainer) {
+    return processFindFocusableDescendant(focusContainer);
+}
+function processFindLastFocusableDescendant(element) {
+    for (let i = element.childNodes.length - 1; i >= 0; i--) {
+        const child = element.childNodes[i];
+        const focusable = processFindLastFocusableDescendant(child);
+        // istanbul ignore else
+        if (focusable)
+            return focusable;
+        // istanbul ignore else
+        if (isFocusable(child))
+            return child;
+    }
+    return null;
+}
+function findLastFocusableDescendant(focusContainer) {
+    return processFindLastFocusableDescendant(focusContainer);
+}
+function getInitialFocusElement(focusContainer, initialFocusSpec) {
+    // istanbul ignore next
+    if (!focusContainer)
+        return null;
+    if (initialFocusSpec) {
+        if (typeof initialFocusSpec === "string") {
+            const node = focusContainer.querySelector(initialFocusSpec);
+            if (node) {
+                return node;
+            }
+            else {
+                Logger.logError(`${UiCore.packageName}.FocusTrap`, `Unable to locate element via selector ${initialFocusSpec}`);
+            }
+        }
+        else {
+            return initialFocusSpec.current;
+        }
+    }
+    return findFirstFocusableDescendant(focusContainer);
+}
+function attemptFocus(element, preventScroll) {
+    // istanbul ignore next
+    if (!isFocusable(element))
+        return false;
+    try {
+        // istanbul ignore else
+        if (document.activeElement !== element)
+            element.focus({ preventScroll: preventScroll ? true : /* istanbul ignore next */ false });
+    }
+    catch (e) {
+        // istanbul ignore next
+        return false;
+    }
+    return (document.activeElement === element);
+} // end attemptFocus
+/** Focus into first focusable element of a container.
+ * @internal
+ */
+export function focusIntoContainer(focusContainer, initialFocusElement) {
+    let result = false;
+    const focusElement = getInitialFocusElement(focusContainer, initialFocusElement);
+    if (focusElement) {
+        // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.
+        setTimeout(() => {
+            attemptFocus(focusElement, true);
+        }, 60);
+        result = true;
+    }
+    return result;
+}
+/** Trap Focus in container while trap is active.
+ * @internal
+ */
+export function FocusTrap(props) {
+    const restoreFocusElement = React.useRef(null);
+    const initialFocusElement = React.useRef(null);
+    const focusContainer = React.useRef(null);
+    const isInitialMount = React.useRef(true);
+    const timeoutRef = React.useRef();
+    // Run on initial mount and when dependencies change. which could happen often.
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            if (props.active) {
+                if (props.returnFocusOnDeactivate) {
+                    restoreFocusElement.current = document.activeElement;
+                }
+                initialFocusElement.current = getInitialFocusElement(focusContainer.current, props.initialFocusElement);
+                if (initialFocusElement.current) {
+                    // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.
+                    timeoutRef.current = window.setTimeout(() => {
+                        attemptFocus(initialFocusElement.current, true);
+                    }, 60);
+                }
+            }
+        }
+    }, [props.children, props.initialFocusElement, props.active, props.returnFocusOnDeactivate]);
+    // Return function to run only when FocusTrap is unmounted to restore focus
+    React.useEffect(() => {
+        return () => {
+            window.clearTimeout(timeoutRef.current);
+            if (restoreFocusElement.current)
+                restoreFocusElement.current.focus({ preventScroll: true });
+        };
+    }, []);
+    // this is hit if Shift tab is used.
+    const cycleFocusToEnd = React.useCallback((event) => {
+        // istanbul ignore next
+        if (!props.active)
+            return;
+        if (focusContainer.current && event.target === focusContainer.current) {
+            event.stopPropagation();
+            event.preventDefault();
+            const focusable = findLastFocusableDescendant(focusContainer.current);
+            // istanbul ignore else
+            if (focusable) {
+                focusable.focus();
+            }
+            else {
+                if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)
+                    attemptFocus(initialFocusElement.current, true);
+            }
+        }
+    }, [props.active]);
+    // this is hit if tab is used on last focusable item in child container.
+    const cycleFocusToStart = React.useCallback((event) => {
+        // istanbul ignore next
+        if (!props.active)
+            return;
+        event.stopPropagation();
+        // istanbul ignore else
+        if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)
+            initialFocusElement.current.focus();
+    }, [props.active]);
+    if (!props.children)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { "data-testid": "focus-trap-div", onFocus: cycleFocusToEnd, ref: focusContainer, tabIndex: 0, 
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            style: { outline: "none", WebkitTapHighlightColor: "rgba(0,0,0,0)" } }, props.children),
+        React.createElement("div", { "data-testid": "focus-trap-limit-div", onFocus: cycleFocusToStart, tabIndex: 0 })));
+}
+//# sourceMappingURL=FocusTrap.js.map

package/lib/esm/core-react/focustrap/FocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusTrap.js","sourceRoot":"","sources":["../../../../src/core-react/focustrap/FocusTrap.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 Popup\n */\n\nimport * as React from \"react\";\nimport { Logger } from \"@itwin/core-bentley\";\nimport { UiCore } from \"../UiCore\";\n\n// cSpell:ignore focusable\n\nfunction isFocusable(element: HTMLElement): boolean {\n  if (!element || element.tabIndex < 0)\n    return false;\n\n  if (element.classList && element.classList.contains(\"core-focus-trap-ignore-initial\"))\n    return false;\n\n  if (element.getAttribute && (typeof element.getAttribute === \"function\") && element.getAttribute(\"disabled\") !== null)\n    return false;\n\n  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute(\"tabIndex\") !== null))\n    return true;\n\n  switch (element.nodeName) {\n    case \"A\":\n      const anchorElement = element as HTMLAnchorElement;\n      return !!anchorElement.href && anchorElement.rel !== \"ignore\";\n    case \"INPUT\":\n      const inputElement = element as HTMLInputElement;\n      return inputElement.type !== \"hidden\" && inputElement.type !== \"file\";\n    case \"BUTTON\":\n    case \"SELECT\":\n    case \"TEXTAREA\":\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction processFindFocusableDescendant(element: HTMLElement | null): HTMLElement | null {\n  // istanbul ignore next\n  if (!element)\n    return null;\n\n  for (const child of element.childNodes) {\n    // istanbul ignore else\n    if (isFocusable(child as HTMLElement))\n      return child as HTMLElement;\n\n    const focusable = processFindFocusableDescendant(child as HTMLElement);\n    if (focusable)\n      return focusable;\n  }\n  return null;\n}\n\nfunction findFirstFocusableDescendant(focusContainer: HTMLDivElement | null): HTMLElement | null {\n  return processFindFocusableDescendant(focusContainer);\n}\n\nfunction processFindLastFocusableDescendant(element: HTMLElement): HTMLElement | null {\n  for (let i = element.childNodes.length - 1; i >= 0; i--) {\n    const child = element.childNodes[i] as HTMLElement;\n\n    const focusable = processFindLastFocusableDescendant(child);\n    // istanbul ignore else\n    if (focusable)\n      return focusable;\n\n    // istanbul ignore else\n    if (isFocusable(child))\n      return child;\n  }\n  return null;\n}\n\nfunction findLastFocusableDescendant(focusContainer: HTMLDivElement): HTMLElement | null {\n  return processFindLastFocusableDescendant(focusContainer);\n}\n\nfunction getInitialFocusElement(focusContainer: HTMLDivElement | null, initialFocusSpec: React.RefObject<HTMLElement> | string | undefined): HTMLElement | null {\n  // istanbul ignore next\n  if (!focusContainer)\n    return null;\n\n  if (initialFocusSpec) {\n    if (typeof initialFocusSpec === \"string\") {\n      const node = focusContainer.querySelector(initialFocusSpec);\n      if (node) {\n        return node as HTMLElement;\n      } else {\n        Logger.logError(`${UiCore.packageName}.FocusTrap`, `Unable to locate element via selector ${initialFocusSpec}`);\n      }\n    } else {\n      return initialFocusSpec.current;\n    }\n  }\n  return findFirstFocusableDescendant(focusContainer);\n}\n\nfunction attemptFocus(element: HTMLElement, preventScroll: boolean): boolean {\n  // istanbul ignore next\n  if (!isFocusable(element))\n    return false;\n\n  try {\n    // istanbul ignore else\n    if (document.activeElement !== element)\n      element.focus({ preventScroll: preventScroll ? true : /* istanbul ignore next */ false });\n  } catch (e) {\n    // istanbul ignore next\n    return false;\n  }\n  return (document.activeElement === element);\n} // end attemptFocus\n\n/** Focus into first focusable element of a container.\n * @internal\n */\nexport function focusIntoContainer(focusContainer: HTMLDivElement, initialFocusElement?: React.RefObject<HTMLElement> | string): boolean {\n  let result = false;\n  const focusElement = getInitialFocusElement(focusContainer, initialFocusElement);\n  if (focusElement) {\n    // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.\n    setTimeout(() => {\n      attemptFocus(focusElement, true);\n    }, 60);\n    result = true;\n  }\n  return result;\n}\n\n/** Properties supported by [[FocusTrap]] component.\n * @internal\n */\nexport interface FocusTrapProps extends React.AllHTMLAttributes<any> {\n  /** child components */\n  children: React.ReactNode;\n  /** if active is not true then no trapping of focus is attempted. */\n  active?: boolean;\n  /** restore focus to element that had focus before trap was activated */\n  returnFocusOnDeactivate: boolean;\n  /** Optional reference to element to receive focus when trap is activated. Optionally a CSS Selector\n   * string can be supplied to locate an element in the FocusTrap container. If no specification is defined\n   * the first focusable element is used.\n   */\n  initialFocusElement?: React.RefObject<HTMLElement> | string;\n}\n\n/** Trap Focus in container while trap is active.\n * @internal\n */\nexport function FocusTrap(props: FocusTrapProps) {\n  const restoreFocusElement = React.useRef<Element | null>(null);\n  const initialFocusElement = React.useRef<Element | null>(null);\n  const focusContainer = React.useRef<HTMLDivElement | null>(null);\n  const isInitialMount = React.useRef(true);\n  const timeoutRef = React.useRef<number | undefined>();\n\n  // Run on initial mount and when dependencies change. which could happen often.\n  React.useEffect(() => {\n    // istanbul ignore else\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n      if (props.active) {\n        if (props.returnFocusOnDeactivate) {\n          restoreFocusElement.current = document.activeElement;\n        }\n\n        initialFocusElement.current = getInitialFocusElement(focusContainer.current, props.initialFocusElement);\n        if (initialFocusElement.current) {\n          // delay setting focus immediately because in some browsers other focus events happen when popup is initially opened.\n          timeoutRef.current = window.setTimeout(() => {\n            attemptFocus((initialFocusElement.current as HTMLElement), true);\n          }, 60);\n        }\n      }\n    }\n  }, [props.children, props.initialFocusElement, props.active, props.returnFocusOnDeactivate]);\n\n  // Return function to run only when FocusTrap is unmounted to restore focus\n  React.useEffect(() => {\n    return () => {\n      window.clearTimeout(timeoutRef.current);\n      if (restoreFocusElement.current)\n        (restoreFocusElement.current as HTMLElement).focus({ preventScroll: true });\n    };\n  }, []);\n\n  // this is hit if Shift tab is used.\n  const cycleFocusToEnd = React.useCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    // istanbul ignore next\n    if (!props.active)\n      return;\n\n    if (focusContainer.current && event.target === focusContainer.current) {\n      event.stopPropagation();\n      event.preventDefault();\n      const focusable = findLastFocusableDescendant(focusContainer.current);\n\n      // istanbul ignore else\n      if (focusable) {\n        focusable.focus();\n      } else {\n        if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)\n          attemptFocus((initialFocusElement.current as HTMLElement), true);\n      }\n    }\n  }, [props.active]);\n\n  // this is hit if tab is used on last focusable item in child container.\n  const cycleFocusToStart = React.useCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    // istanbul ignore next\n    if (!props.active)\n      return;\n\n    event.stopPropagation();\n    // istanbul ignore else\n    if (initialFocusElement.current && initialFocusElement.current !== document.activeElement)\n      (initialFocusElement.current as HTMLElement).focus();\n  }, [props.active]);\n\n  if (!props.children)\n    return null;\n  return (\n    <>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div data-testid=\"focus-trap-div\" onFocus={cycleFocusToEnd} ref={focusContainer} tabIndex={0}\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        style={{ outline: \"none\", WebkitTapHighlightColor: \"rgba(0,0,0,0)\" }}>\n        {props.children}\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div data-testid=\"focus-trap-limit-div\" onFocus={cycleFocusToStart} tabIndex={0} />\n    </>\n  );\n}\n"]}

package/lib/esm/core-react/form/Field.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Form
+ */
+import * as React from "react";
+import { FieldDef } from "./Form";
+/** Properties used to create a [[Field]] in a [[Form]]
+ * @public
+ */
+export interface FieldProps extends FieldDef {
+    id: string;
+}
+/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
+ * @public
+ */
+export declare class Field extends React.Component<FieldProps> {
+    constructor(props: FieldProps);
+    private _generateSelectOptions;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Field.d.ts.map

package/lib/esm/core-react/form/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAgDvB"}

package/lib/esm/core-react/form/Field.js

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Form
+ */
+import * as React from "react";
+import { Checkbox, Input, Select, Textarea } from "@itwin/itwinui-react";
+import { FormContext } from "./Form";
+/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
+ * @public
+ */
+export class Field extends React.Component {
+    constructor(props) {
+        super(props);
+        this._generateSelectOptions = (propOptions) => {
+            let selectOptions = [];
+            if (propOptions instanceof Array) {
+                selectOptions = propOptions.map((option) => ({ value: option, label: option }));
+            }
+            else if (propOptions !== undefined) {
+                selectOptions = Object.keys(propOptions).map((key) => ({ value: key, label: propOptions[key] }));
+            }
+            return selectOptions;
+        };
+    }
+    render() {
+        const selectOptions = this._generateSelectOptions(this.props.options);
+        return (React.createElement(FormContext.Consumer, null, (context) => (React.createElement("div", { className: "core-form-group" },
+            this.props.editor.toLowerCase() !== "checkbox" && this.props.label && React.createElement("label", { className: "core-form-label", htmlFor: this.props.id }, this.props.label),
+            this.props.editor.toLowerCase() === "textbox" && (React.createElement(Input, { id: this.props.id, value: context.values[this.props.id], onChange: (event) => context.setValues({ [this.props.id]: event.currentTarget.value }), className: "core-form-input" })),
+            this.props.editor.toLowerCase() === "checkbox" && (React.createElement(Checkbox, { label: this.props.label, id: this.props.id, checked: context.values[this.props.id], onChange: () => context.setValues({ [this.props.id]: !context.values[this.props.id] }) })),
+            this.props.editor.toLowerCase() === "multilinetextbox" && (React.createElement(Textarea, { id: this.props.id, value: context.values[this.props.id], onChange: (event) => context.setValues({ [this.props.id]: event.currentTarget.value }), className: "core-form-textarea" })),
+            this.props.editor.toLowerCase() === "dropdown" && this.props.options && (React.createElement(Select, { id: this.props.id, 
+                // name={this.props.id}
+                value: context.values[this.props.id], onChange: (newValue) => context.setValues({ [this.props.id]: newValue }), options: selectOptions, className: "core-form-select" }))))));
+    }
+}
+//# sourceMappingURL=Field.js.map

package/lib/esm/core-react/form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.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 Form\n */\n\nimport * as React from \"react\";\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\n\n// cSpell:ignore multilinetextbox\n\n/** Properties used to create a [[Field]] in a [[Form]]\n * @public\n */\nexport interface FieldProps extends FieldDef {\n  /* The unique field name */\n  id: string;\n}\n\ntype FieldDefOptions = FieldDef[\"options\"];\n\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\n * @public\n */\nexport class Field extends React.Component<FieldProps> {\n  constructor(props: FieldProps) {\n    super(props);\n  }\n\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\n    let selectOptions: SelectOption<string>[] = [];\n\n    if (propOptions instanceof Array) {\n      selectOptions = propOptions.map((option: string) => (\n        { value: option, label: option }\n      ));\n    } else if (propOptions !== undefined) {\n      selectOptions = Object.keys(propOptions).map((key) => (\n        { value: key, label: propOptions[key] }\n      ));\n    }\n\n    return selectOptions;\n  };\n\n  public override render() {\n    const selectOptions = this._generateSelectOptions(this.props.options);\n\n    return (\n      <FormContext.Consumer>\n        {(context: FormContextState | undefined) => (\n          <div className=\"core-form-group\">\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\n\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\n              <Input\n                id={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\n                className=\"core-form-input\"\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\n              <Checkbox\n                label={this.props.label}\n                id={this.props.id}\n                checked={context!.values[this.props.id]}\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\n              <Textarea\n                id={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\n                className=\"core-form-textarea\"\n              />\n            )}\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\n              <Select\n                id={this.props.id}\n                // name={this.props.id}\n                value={context!.values[this.props.id]}\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\n                options={selectOptions}\n                className=\"core-form-select\"\n              />\n            )}\n          </div>\n        )}\n      </FormContext.Consumer>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/form/Form.d.ts

@@ -0,0 +1,132 @@
+/** @packageDocumentation
+ * @module Form
+ */
+import "./Form.scss";
+import * as React from "react";
+/** The available editors for the fields in a [[Form]].
+ * @public
+ */
+export declare type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox";
+/** Interface used to define each [[Field]] in a [[Form]]
+ * @public
+ */
+export interface FieldDef {
+    label?: string;
+    editor?: FieldEditor;
+    options?: string[] | {
+        [key: string]: string;
+    };
+    value?: any;
+}
+/** Key/value pairs for all the field values with key being the field HTML Id.
+ * @public
+ */
+export interface FieldValues {
+    [key: string]: any;
+}
+/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.
+ * @public
+ */
+interface FormState {
+    values: FieldValues;
+    errorMsg: string;
+    submitSuccess?: boolean;
+}
+/**
+ * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.
+ * @public
+ */
+export interface FormContextState extends FormState {
+    setValues: (values: FieldValues) => void;
+}
+/** React context used by Form as a Provider and by the Fields as Consumers and updaters.
+ * @public
+ */
+export declare const FormContext: React.Context<FormContextState | undefined>;
+/** Key/value pairs for all the field definitions to be displayed in a [[Form]].
+ * @public
+ */
+export interface FieldDefinitions {
+    [key: string]: FieldDef;
+}
+/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.
+ * @public
+ */
+export interface FormProps {
+    /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */
+    handleFormSubmit: (values: FieldValues) => Promise<void>;
+    /** Definition used to create each Field in the Form. */
+    fields: FieldDefinitions;
+    /** Optional label which will override default Submit button label. */
+    submitButtonLabel?: string;
+}
+/** Component used to create a Form using supplied properties to specify the fields of the Form.
+ * @example
+ * // Example of using a form as contents of a modal dialog.
+ * export class ExampleForm extends React.Component {
+ *   public static open() {
+ *   const form = new ExampleForm({});
+ *   ModalDialogManager.openDialog(form.render());
+ * }
+ *
+ * protected async handleSubmit(values: FieldValues): Promise<void> {
+ *   await this.processFormSubmission(values);
+ *   ModalDialogManager.closeDialog();
+ *   const msg = JSON.stringify(values);
+ *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
+ * }
+ *
+ * protected async processFormSubmission(values: FieldValues): Promise<void> {
+ *   // if error occurs during async processing throw an Error and return error message back to form.
+ *   throw new Error("Error processing form");
+ * }
+ *
+ * protected handleCancel() {
+ *   ModalDialogManager.closeDialog();
+ * }
+ *
+ * public render() {
+ *   const fields: FieldDefinitions = {
+ *     Name: {
+ *       label: this._nameLabel,
+ *       editor: "textbox",
+ *       value: "John Smith",
+ *     },
+ *     PickList: {
+ *       label: this._pickListLabel,
+ *       editor: "dropdown",
+ *       value: "one",
+ *       options: ["one", "two", "three", "four"],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Dialog title="Example Form"
+ *         opened={true}
+ *         onClose={() => this.handleCancel()}>
+ *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
+ *           fields={fields}
+ *         />
+ *       </Dialog>
+ *     </div >
+ *   );
+ * }
+ * @public
+ */
+export declare class Form extends React.Component<FormProps, FormState> {
+    private _submitButtonLabel;
+    private _errorPrefix;
+    private _errorSuffix;
+    constructor(props: FormProps);
+    /**
+     * Returns whether there is an errorMsg message in the state/context
+     * @param errorMsg - The form errorMsg
+     */
+    private haveError;
+    private _setValues;
+    private _handleSubmit;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Form.d.ts.map

package/lib/esm/core-react/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}