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

package/lib/esm/core-react/contextmenu/GlobalContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/GlobalContextMenu.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAqB9D;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,aAA6D;IAOxG,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAA2B;YACvD,cAAc,EAAE,IAAI;SACrB,CAAC;QAaM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;;YACvD,MAAM,cAAc,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,mCAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC;gBAC1H,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,+BAA+B,CAAmB,CAAC;gBAC1F,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,+BAA+B,CAAC;oBACxC,uBAAuB;oBACvB,CAAC,MAAA,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,qCAAqC,CAAC,mCAAI,cAAc,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACnH;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IA1BF,CAAC;IAEe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,UAAU;YAChE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAqBe,MAAM;;QACpB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACjI,MAAM,gBAAgB,GAAwB;YAC5C,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC;QAEF,MAAM,OAAO,GAAG,oBAAoB,IAAI,WAAW,CAAC,CAAC,2DAA2D;QAEhH,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IACrD,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,6BAAK,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,gBAAgB;gBAC/D,oBAAC,OAAO,OACF,KAAK,GAAI,CACV;YACP,uBAAuB;YACvB,MAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,qCAAqC,CAAC,mCAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAEtH,CACP,CAAC;IACJ,CAAC;CACF","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 ContextMenu\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { ContextMenu, ContextMenuProps } from \"./ContextMenu\";\r\n\r\n/** Properties for the [[GlobalContextMenu]] component\r\n * @public\r\n */\r\nexport interface GlobalContextMenuProps extends ContextMenuProps {\r\n  /** Unique identifier, to distinguish from other GlobalContextMenu components. Needed only if multiple GlobalContextMenus are used simultaneously. */\r\n  identifier?: string;\r\n  /** Specifies the x/horizontal position on the viewport. */\r\n  x: number | string;\r\n  /** Specifies the y/vertical position on the viewport. */\r\n  y: number | string;\r\n  /** Context menu element. Default: ContextMenu */\r\n  contextMenuComponent?: React.ComponentType<ContextMenuProps>;\r\n}\r\n\r\n/** @internal */\r\ninterface GlobalContextMenuState {\r\n  parentDocument: Document | null;\r\n}\r\n\r\n/** GlobalContextMenu React component used to display a [[ContextMenu]] at the cursor\r\n * @public\r\n */\r\nexport class GlobalContextMenu extends React.PureComponent<GlobalContextMenuProps, GlobalContextMenuState> {\r\n  private _container?: HTMLDivElement;\r\n\r\n  public override readonly state: GlobalContextMenuState = {\r\n    parentDocument: null,\r\n  };\r\n\r\n  constructor(props: GlobalContextMenuProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    // istanbul ignore else\r\n    if (this._container && this._container.parentElement) { // cleanup\r\n      this._container.parentElement.removeChild(this._container);\r\n    }\r\n  }\r\n\r\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\r\n    const parentDocument = popupDiv?.ownerDocument ?? null;\r\n    if (parentDocument) {\r\n      this._container = parentDocument.createElement(\"div\");\r\n      this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : \"core-global-context-menu\";\r\n      let rt = parentDocument.getElementById(\"core-global-context-menu-root\") as HTMLDivElement;\r\n      if (!rt) {\r\n        rt = parentDocument.createElement(\"div\");\r\n        rt.id = \"core-global-context-menu-root\";\r\n        // istanbul ignore next\r\n        (parentDocument.body.querySelector('[data-root-container=\"iui-root-id\"]') ?? parentDocument.body).appendChild(rt);\r\n      }\r\n      rt.appendChild(this._container);\r\n\r\n      // used to support component rendering in pop-out window\r\n      this.setState({ parentDocument });\r\n    }\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { x, y, identifier, contextMenuComponent, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    const positioningStyle: React.CSSProperties = {\r\n      left: x,\r\n      top: y,\r\n    };\r\n\r\n    const CtxMenu = contextMenuComponent || ContextMenu; // eslint-disable-line @typescript-eslint/naming-convention\r\n\r\n    return (\r\n      <div ref={this._handleRefSet} style={{ display: \"none\" }}>\r\n        {this.state.parentDocument &&\r\n          ReactDOM.createPortal(\r\n            <div className=\"core-context-menu-global\" style={positioningStyle}>\r\n              <CtxMenu\r\n                {...props} />\r\n            </div >,\r\n            // istanbul ignore next\r\n            this.state.parentDocument.body.querySelector('[data-root-container=\"iui-root-id\"]') ?? this.state.parentDocument.body)\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"GlobalContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/GlobalContextMenu.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAqB9D;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,aAA6D;IAOxG,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAA2B;YACvD,cAAc,EAAE,IAAI;SACrB,CAAC;QAaM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;YACvD,MAAM,cAAc,GAAG,QAAQ,EAAE,aAAa,IAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC;gBAC1H,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,+BAA+B,CAAmB,CAAC;gBAC1F,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,+BAA+B,CAAC;oBACxC,uBAAuB;oBACvB,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,qCAAqC,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACnH;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IA1BF,CAAC;IAEe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,UAAU;YAChE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAqBe,MAAM;QACpB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACjI,MAAM,gBAAgB,GAAwB;YAC5C,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC;QAEF,MAAM,OAAO,GAAG,oBAAoB,IAAI,WAAW,CAAC,CAAC,2DAA2D;QAEhH,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IACrD,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,6BAAK,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,gBAAgB;gBAC/D,oBAAC,OAAO,OACF,KAAK,GAAI,CACV;YACP,uBAAuB;YACvB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,qCAAqC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAEtH,CACP,CAAC;IACJ,CAAC;CACF","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 ContextMenu\n */\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { ContextMenu, ContextMenuProps } from \"./ContextMenu\";\n\n/** Properties for the [[GlobalContextMenu]] component\n * @public\n */\nexport interface GlobalContextMenuProps extends ContextMenuProps {\n  /** Unique identifier, to distinguish from other GlobalContextMenu components. Needed only if multiple GlobalContextMenus are used simultaneously. */\n  identifier?: string;\n  /** Specifies the x/horizontal position on the viewport. */\n  x: number | string;\n  /** Specifies the y/vertical position on the viewport. */\n  y: number | string;\n  /** Context menu element. Default: ContextMenu */\n  contextMenuComponent?: React.ComponentType<ContextMenuProps>;\n}\n\n/** @internal */\ninterface GlobalContextMenuState {\n  parentDocument: Document | null;\n}\n\n/** GlobalContextMenu React component used to display a [[ContextMenu]] at the cursor\n * @public\n */\nexport class GlobalContextMenu extends React.PureComponent<GlobalContextMenuProps, GlobalContextMenuState> {\n  private _container?: HTMLDivElement;\n\n  public override readonly state: GlobalContextMenuState = {\n    parentDocument: null,\n  };\n\n  constructor(props: GlobalContextMenuProps) {\n    super(props);\n  }\n\n  public override componentWillUnmount() {\n    // istanbul ignore else\n    if (this._container && this._container.parentElement) { // cleanup\n      this._container.parentElement.removeChild(this._container);\n    }\n  }\n\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\n    const parentDocument = popupDiv?.ownerDocument ?? null;\n    if (parentDocument) {\n      this._container = parentDocument.createElement(\"div\");\n      this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : \"core-global-context-menu\";\n      let rt = parentDocument.getElementById(\"core-global-context-menu-root\") as HTMLDivElement;\n      if (!rt) {\n        rt = parentDocument.createElement(\"div\");\n        rt.id = \"core-global-context-menu-root\";\n        // istanbul ignore next\n        (parentDocument.body.querySelector('[data-root-container=\"iui-root-id\"]') ?? parentDocument.body).appendChild(rt);\n      }\n      rt.appendChild(this._container);\n\n      // used to support component rendering in pop-out window\n      this.setState({ parentDocument });\n    }\n  };\n\n  public override render(): React.ReactNode {\n    const { x, y, identifier, contextMenuComponent, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\n    const positioningStyle: React.CSSProperties = {\n      left: x,\n      top: y,\n    };\n\n    const CtxMenu = contextMenuComponent || ContextMenu; // eslint-disable-line @typescript-eslint/naming-convention\n\n    return (\n      <div ref={this._handleRefSet} style={{ display: \"none\" }}>\n        {this.state.parentDocument &&\n          ReactDOM.createPortal(\n            <div className=\"core-context-menu-global\" style={positioningStyle}>\n              <CtxMenu\n                {...props} />\n            </div >,\n            // istanbul ignore next\n            this.state.parentDocument.body.querySelector('[data-root-container=\"iui-root-id\"]') ?? this.state.parentDocument.body)\n        }\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/contextmenu/PopupContextMenu.d.ts

@@ -1,54 +1,54 @@
-/** @packageDocumentation
- * @module ContextMenu
- */
-import * as React from "react";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { CommonProps } from "../utils/Props";
-/** Properties for [[PopupContextMenu]] component
- * @public
- */
-export interface PopupContextMenuProps extends CommonProps {
-    /** Indicates whether the popup is shown or not (defaults to false) */
-    isOpen: boolean;
-    /** Direction (relative to the target) to which the popup is expanded (defaults to Bottom) */
-    position?: RelativePosition;
-    /** Target element to position popup */
-    target?: HTMLElement | null;
-    /** Function called when the popup is opened */
-    onOpen?: () => void;
-    /** Function called when user clicks outside the popup  */
-    onOutsideClick?: (e: MouseEvent) => void;
-    /** Function called when the popup is closed */
-    onClose?: () => void;
-    /** Function called when the popup is closed on Enter */
-    onEnter?: () => void;
-    /** Top position (absolute positioning - defaults to 0) */
-    top?: number;
-    /** Left position (absolute positioning - defaults to 0) */
-    left?: number;
-    /** Offset from the parent (defaults to 4) */
-    offset?: number;
-    /** accessibility label */
-    ariaLabel?: string;
-    /** Indicates whether to use animation for open/close (defaults to true) */
-    animate?: boolean;
-    /** When list item or submenu is selected */
-    onSelect?: (event: React.MouseEvent | undefined) => void;
-    /** when Escape button is pressed */
-    onEsc?: (event: React.KeyboardEvent) => void;
-    /** Whether menu flips directions based on screen edge. Default: true */
-    autoflip?: boolean;
-    /** Whether menu hugs screen edge when autoflip is off. Default: true */
-    edgeLimit?: boolean;
-    /** Whether Hotkey press selects item, or just highlights item. Default: true */
-    hotkeySelect?: boolean;
-    /** starting menu item selected index Default: -1 */
-    selectedIndex?: number;
-    /** ContextMenu items */
-    children?: React.ReactNode;
-}
-/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.
- * @public
- */
-export declare function PopupContextMenu(props: PopupContextMenuProps): JSX.Element;
+/** @packageDocumentation
+ * @module ContextMenu
+ */
+import * as React from "react";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[PopupContextMenu]] component
+ * @public
+ */
+export interface PopupContextMenuProps extends CommonProps {
+    /** Indicates whether the popup is shown or not (defaults to false) */
+    isOpen: boolean;
+    /** Direction (relative to the target) to which the popup is expanded (defaults to Bottom) */
+    position?: RelativePosition;
+    /** Target element to position popup */
+    target?: HTMLElement | null;
+    /** Function called when the popup is opened */
+    onOpen?: () => void;
+    /** Function called when user clicks outside the popup  */
+    onOutsideClick?: (e: MouseEvent) => void;
+    /** Function called when the popup is closed */
+    onClose?: () => void;
+    /** Function called when the popup is closed on Enter */
+    onEnter?: () => void;
+    /** Top position (absolute positioning - defaults to 0) */
+    top?: number;
+    /** Left position (absolute positioning - defaults to 0) */
+    left?: number;
+    /** Offset from the parent (defaults to 4) */
+    offset?: number;
+    /** accessibility label */
+    ariaLabel?: string;
+    /** Indicates whether to use animation for open/close (defaults to true) */
+    animate?: boolean;
+    /** When list item or submenu is selected */
+    onSelect?: (event: React.MouseEvent | undefined) => void;
+    /** when Escape button is pressed */
+    onEsc?: (event: React.KeyboardEvent) => void;
+    /** Whether menu flips directions based on screen edge. Default: true */
+    autoflip?: boolean;
+    /** Whether menu hugs screen edge when autoflip is off. Default: true */
+    edgeLimit?: boolean;
+    /** Whether Hotkey press selects item, or just highlights item. Default: true */
+    hotkeySelect?: boolean;
+    /** starting menu item selected index Default: -1 */
+    selectedIndex?: number;
+    /** ContextMenu items */
+    children?: React.ReactNode;
+}
+/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.
+ * @public
+ */
+export declare function PopupContextMenu(props: PopupContextMenuProps): JSX.Element;
 //# sourceMappingURL=PopupContextMenu.d.ts.map

package/lib/esm/core-react/contextmenu/PopupContextMenu.js

@@ -1,52 +1,52 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ContextMenu
- */
-import * as React from "react";
-import { Popup } from "../popup/Popup";
-import { ContextMenu } from "./ContextMenu";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { ContextMenuDirection } from "./ContextMenuDirection";
-/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.
- * @public
- */
-export function PopupContextMenu(props) {
-    const { style, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, selectedIndex, children, ...popupProps } = props;
-    const menuDirection = getContextMenuDirectionFromRelativePosition(popupProps.position);
-    return (React.createElement(Popup, { ...popupProps, closeOnNestedPopupOutsideClick: true, showShadow: false, showArrow: false, moveFocus: true, style: { ...style, border: "none" } },
-        React.createElement(ContextMenu, { opened: true, onSelect: onSelect, onEsc: onEsc, autoflip: autoflip, edgeLimit: edgeLimit, hotkeySelect: hotkeySelect, selectedIndex: selectedIndex, direction: menuDirection }, children)));
-}
-function getContextMenuDirectionFromRelativePosition(relativePosition) {
-    let menuDirection = ContextMenuDirection.Bottom;
-    switch (relativePosition) {
-        case RelativePosition.Top:
-            menuDirection = ContextMenuDirection.Top;
-            break;
-        case RelativePosition.TopLeft:
-            menuDirection = ContextMenuDirection.TopRight;
-            break;
-        case RelativePosition.TopRight:
-            menuDirection = ContextMenuDirection.TopLeft;
-            break;
-        case RelativePosition.Left:
-            menuDirection = ContextMenuDirection.Left;
-            break;
-        case RelativePosition.Right:
-            menuDirection = ContextMenuDirection.Right;
-            break;
-        case RelativePosition.Bottom:
-            menuDirection = ContextMenuDirection.Bottom;
-            break;
-        case RelativePosition.BottomLeft:
-            menuDirection = ContextMenuDirection.BottomRight;
-            break;
-        case RelativePosition.BottomRight:
-            menuDirection = ContextMenuDirection.BottomLeft;
-            break;
-    }
-    return menuDirection;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContextMenu
+ */
+import * as React from "react";
+import { Popup } from "../popup/Popup";
+import { ContextMenu } from "./ContextMenu";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { ContextMenuDirection } from "./ContextMenuDirection";
+/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.
+ * @public
+ */
+export function PopupContextMenu(props) {
+    const { style, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, selectedIndex, children, ...popupProps } = props;
+    const menuDirection = getContextMenuDirectionFromRelativePosition(popupProps.position);
+    return (React.createElement(Popup, { ...popupProps, closeOnNestedPopupOutsideClick: true, showShadow: false, showArrow: false, moveFocus: true, style: { ...style, border: "none" } },
+        React.createElement(ContextMenu, { opened: true, onSelect: onSelect, onEsc: onEsc, autoflip: autoflip, edgeLimit: edgeLimit, hotkeySelect: hotkeySelect, selectedIndex: selectedIndex, direction: menuDirection }, children)));
+}
+function getContextMenuDirectionFromRelativePosition(relativePosition) {
+    let menuDirection = ContextMenuDirection.Bottom;
+    switch (relativePosition) {
+        case RelativePosition.Top:
+            menuDirection = ContextMenuDirection.Top;
+            break;
+        case RelativePosition.TopLeft:
+            menuDirection = ContextMenuDirection.TopRight;
+            break;
+        case RelativePosition.TopRight:
+            menuDirection = ContextMenuDirection.TopLeft;
+            break;
+        case RelativePosition.Left:
+            menuDirection = ContextMenuDirection.Left;
+            break;
+        case RelativePosition.Right:
+            menuDirection = ContextMenuDirection.Right;
+            break;
+        case RelativePosition.Bottom:
+            menuDirection = ContextMenuDirection.Bottom;
+            break;
+        case RelativePosition.BottomLeft:
+            menuDirection = ContextMenuDirection.BottomRight;
+            break;
+        case RelativePosition.BottomRight:
+            menuDirection = ContextMenuDirection.BottomLeft;
+            break;
+    }
+    return menuDirection;
+}
 //# sourceMappingURL=PopupContextMenu.js.map

package/lib/esm/core-react/contextmenu/PopupContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/PopupContextMenu.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAgD9D;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACpH,MAAM,aAAa,GAAG,2CAA2C,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACvF,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,8BAA8B,QACnD,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EACpD,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;QACnC,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAC9C,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EACxC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EACxD,SAAS,EAAE,aAAa,IAEvB,QAAQ,CACG,CACP,CACV,CAAC;AACJ,CAAC;AAED,SAAS,2CAA2C,CAAC,gBAAmC;IACtF,IAAI,aAAa,GAAG,oBAAoB,CAAC,MAAM,CAAC;IAChD,QAAQ,gBAAgB,EAAE;QACxB,KAAK,gBAAgB,CAAC,GAAG;YACvB,aAAa,GAAG,oBAAoB,CAAC,GAAG,CAAC;YACzC,MAAM;QACR,KAAK,gBAAgB,CAAC,OAAO;YAC3B,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC;YAC9C,MAAM;QACR,KAAK,gBAAgB,CAAC,QAAQ;YAC5B,aAAa,GAAG,oBAAoB,CAAC,OAAO,CAAC;YAC7C,MAAM;QACR,KAAK,gBAAgB,CAAC,IAAI;YACxB,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC;YAC1C,MAAM;QACR,KAAK,gBAAgB,CAAC,KAAK;YACzB,aAAa,GAAG,oBAAoB,CAAC,KAAK,CAAC;YAC3C,MAAM;QACR,KAAK,gBAAgB,CAAC,MAAM;YAC1B,aAAa,GAAG,oBAAoB,CAAC,MAAM,CAAC;YAC5C,MAAM;QACR,KAAK,gBAAgB,CAAC,UAAU;YAC9B,aAAa,GAAG,oBAAoB,CAAC,WAAW,CAAC;YACjD,MAAM;QACR,KAAK,gBAAgB,CAAC,WAAW;YAC/B,aAAa,GAAG,oBAAoB,CAAC,UAAU,CAAC;YAChD,MAAM;KACT;IACD,OAAO,aAAa,CAAC;AACvB,CAAC","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 ContextMenu\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Popup } from \"../popup/Popup\";\r\nimport { ContextMenu } from \"./ContextMenu\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { ContextMenuDirection } from \"./ContextMenuDirection\";\r\n\r\n/** Properties for [[PopupContextMenu]] component\r\n * @public\r\n */\r\nexport interface PopupContextMenuProps extends CommonProps {\r\n  /** Indicates whether the popup is shown or not (defaults to false) */\r\n  isOpen: boolean;\r\n  /** Direction (relative to the target) to which the popup is expanded (defaults to Bottom) */\r\n  position?: RelativePosition;\r\n  /** Target element to position popup */\r\n  target?: HTMLElement | null;\r\n  /** Function called when the popup is opened */\r\n  onOpen?: () => void;\r\n  /** Function called when user clicks outside the popup  */\r\n  onOutsideClick?: (e: MouseEvent) => void;\r\n  /** Function called when the popup is closed */\r\n  onClose?: () => void;\r\n  /** Function called when the popup is closed on Enter */\r\n  onEnter?: () => void;\r\n  /** Top position (absolute positioning - defaults to 0) */\r\n  top?: number;\r\n  /** Left position (absolute positioning - defaults to 0) */\r\n  left?: number;\r\n  /** Offset from the parent (defaults to 4) */\r\n  offset?: number;\r\n  /** accessibility label */\r\n  ariaLabel?: string;\r\n  /** Indicates whether to use animation for open/close (defaults to true) */\r\n  animate?: boolean;\r\n\r\n  /** When list item or submenu is selected */\r\n  onSelect?: (event: React.MouseEvent | undefined) => void;\r\n  /** when Escape button is pressed */\r\n  onEsc?: (event: React.KeyboardEvent) => void;\r\n  /** Whether menu flips directions based on screen edge. Default: true */\r\n  autoflip?: boolean;\r\n  /** Whether menu hugs screen edge when autoflip is off. Default: true */\r\n  edgeLimit?: boolean;\r\n  /** Whether Hotkey press selects item, or just highlights item. Default: true */\r\n  hotkeySelect?: boolean;\r\n  /** starting menu item selected index Default: -1 */\r\n  selectedIndex?: number;\r\n\r\n  /** ContextMenu items */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.\r\n * @public\r\n */\r\nexport function PopupContextMenu(props: PopupContextMenuProps) {\r\n  const { style, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, selectedIndex, children, ...popupProps } = props;\r\n  const menuDirection = getContextMenuDirectionFromRelativePosition(popupProps.position);\r\n  return (\r\n    <Popup {...popupProps} closeOnNestedPopupOutsideClick\r\n      showShadow={false} showArrow={false} moveFocus={true}\r\n      style={{ ...style, border: \"none\" }}>\r\n      <ContextMenu\r\n        opened={true} onSelect={onSelect} onEsc={onEsc}\r\n        autoflip={autoflip} edgeLimit={edgeLimit}\r\n        hotkeySelect={hotkeySelect} selectedIndex={selectedIndex}\r\n        direction={menuDirection}\r\n      >\r\n        {children}\r\n      </ContextMenu>\r\n    </Popup >\r\n  );\r\n}\r\n\r\nfunction getContextMenuDirectionFromRelativePosition(relativePosition?: RelativePosition): ContextMenuDirection {\r\n  let menuDirection = ContextMenuDirection.Bottom;\r\n  switch (relativePosition) {\r\n    case RelativePosition.Top:\r\n      menuDirection = ContextMenuDirection.Top;\r\n      break;\r\n    case RelativePosition.TopLeft:\r\n      menuDirection = ContextMenuDirection.TopRight;\r\n      break;\r\n    case RelativePosition.TopRight:\r\n      menuDirection = ContextMenuDirection.TopLeft;\r\n      break;\r\n    case RelativePosition.Left:\r\n      menuDirection = ContextMenuDirection.Left;\r\n      break;\r\n    case RelativePosition.Right:\r\n      menuDirection = ContextMenuDirection.Right;\r\n      break;\r\n    case RelativePosition.Bottom:\r\n      menuDirection = ContextMenuDirection.Bottom;\r\n      break;\r\n    case RelativePosition.BottomLeft:\r\n      menuDirection = ContextMenuDirection.BottomRight;\r\n      break;\r\n    case RelativePosition.BottomRight:\r\n      menuDirection = ContextMenuDirection.BottomLeft;\r\n      break;\r\n  }\r\n  return menuDirection;\r\n}\r\n"]}
+{"version":3,"file":"PopupContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/PopupContextMenu.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAgD9D;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACpH,MAAM,aAAa,GAAG,2CAA2C,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACvF,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,8BAA8B,QACnD,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EACpD,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;QACnC,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAC9C,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EACxC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EACxD,SAAS,EAAE,aAAa,IAEvB,QAAQ,CACG,CACP,CACV,CAAC;AACJ,CAAC;AAED,SAAS,2CAA2C,CAAC,gBAAmC;IACtF,IAAI,aAAa,GAAG,oBAAoB,CAAC,MAAM,CAAC;IAChD,QAAQ,gBAAgB,EAAE;QACxB,KAAK,gBAAgB,CAAC,GAAG;YACvB,aAAa,GAAG,oBAAoB,CAAC,GAAG,CAAC;YACzC,MAAM;QACR,KAAK,gBAAgB,CAAC,OAAO;YAC3B,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC;YAC9C,MAAM;QACR,KAAK,gBAAgB,CAAC,QAAQ;YAC5B,aAAa,GAAG,oBAAoB,CAAC,OAAO,CAAC;YAC7C,MAAM;QACR,KAAK,gBAAgB,CAAC,IAAI;YACxB,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC;YAC1C,MAAM;QACR,KAAK,gBAAgB,CAAC,KAAK;YACzB,aAAa,GAAG,oBAAoB,CAAC,KAAK,CAAC;YAC3C,MAAM;QACR,KAAK,gBAAgB,CAAC,MAAM;YAC1B,aAAa,GAAG,oBAAoB,CAAC,MAAM,CAAC;YAC5C,MAAM;QACR,KAAK,gBAAgB,CAAC,UAAU;YAC9B,aAAa,GAAG,oBAAoB,CAAC,WAAW,CAAC;YACjD,MAAM;QACR,KAAK,gBAAgB,CAAC,WAAW;YAC/B,aAAa,GAAG,oBAAoB,CAAC,UAAU,CAAC;YAChD,MAAM;KACT;IACD,OAAO,aAAa,CAAC;AACvB,CAAC","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 ContextMenu\n */\n\nimport * as React from \"react\";\nimport { Popup } from \"../popup/Popup\";\nimport { ContextMenu } from \"./ContextMenu\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"../utils/Props\";\nimport { ContextMenuDirection } from \"./ContextMenuDirection\";\n\n/** Properties for [[PopupContextMenu]] component\n * @public\n */\nexport interface PopupContextMenuProps extends CommonProps {\n  /** Indicates whether the popup is shown or not (defaults to false) */\n  isOpen: boolean;\n  /** Direction (relative to the target) to which the popup is expanded (defaults to Bottom) */\n  position?: RelativePosition;\n  /** Target element to position popup */\n  target?: HTMLElement | null;\n  /** Function called when the popup is opened */\n  onOpen?: () => void;\n  /** Function called when user clicks outside the popup  */\n  onOutsideClick?: (e: MouseEvent) => void;\n  /** Function called when the popup is closed */\n  onClose?: () => void;\n  /** Function called when the popup is closed on Enter */\n  onEnter?: () => void;\n  /** Top position (absolute positioning - defaults to 0) */\n  top?: number;\n  /** Left position (absolute positioning - defaults to 0) */\n  left?: number;\n  /** Offset from the parent (defaults to 4) */\n  offset?: number;\n  /** accessibility label */\n  ariaLabel?: string;\n  /** Indicates whether to use animation for open/close (defaults to true) */\n  animate?: boolean;\n\n  /** When list item or submenu is selected */\n  onSelect?: (event: React.MouseEvent | undefined) => void;\n  /** when Escape button is pressed */\n  onEsc?: (event: React.KeyboardEvent) => void;\n  /** Whether menu flips directions based on screen edge. Default: true */\n  autoflip?: boolean;\n  /** Whether menu hugs screen edge when autoflip is off. Default: true */\n  edgeLimit?: boolean;\n  /** Whether Hotkey press selects item, or just highlights item. Default: true */\n  hotkeySelect?: boolean;\n  /** starting menu item selected index Default: -1 */\n  selectedIndex?: number;\n\n  /** ContextMenu items */\n  children?: React.ReactNode;\n}\n\n/** Component that displays a ContextMenu within a Popup component, allowing the target element to be specified.\n * @public\n */\nexport function PopupContextMenu(props: PopupContextMenuProps) {\n  const { style, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, selectedIndex, children, ...popupProps } = props;\n  const menuDirection = getContextMenuDirectionFromRelativePosition(popupProps.position);\n  return (\n    <Popup {...popupProps} closeOnNestedPopupOutsideClick\n      showShadow={false} showArrow={false} moveFocus={true}\n      style={{ ...style, border: \"none\" }}>\n      <ContextMenu\n        opened={true} onSelect={onSelect} onEsc={onEsc}\n        autoflip={autoflip} edgeLimit={edgeLimit}\n        hotkeySelect={hotkeySelect} selectedIndex={selectedIndex}\n        direction={menuDirection}\n      >\n        {children}\n      </ContextMenu>\n    </Popup >\n  );\n}\n\nfunction getContextMenuDirectionFromRelativePosition(relativePosition?: RelativePosition): ContextMenuDirection {\n  let menuDirection = ContextMenuDirection.Bottom;\n  switch (relativePosition) {\n    case RelativePosition.Top:\n      menuDirection = ContextMenuDirection.Top;\n      break;\n    case RelativePosition.TopLeft:\n      menuDirection = ContextMenuDirection.TopRight;\n      break;\n    case RelativePosition.TopRight:\n      menuDirection = ContextMenuDirection.TopLeft;\n      break;\n    case RelativePosition.Left:\n      menuDirection = ContextMenuDirection.Left;\n      break;\n    case RelativePosition.Right:\n      menuDirection = ContextMenuDirection.Right;\n      break;\n    case RelativePosition.Bottom:\n      menuDirection = ContextMenuDirection.Bottom;\n      break;\n    case RelativePosition.BottomLeft:\n      menuDirection = ContextMenuDirection.BottomRight;\n      break;\n    case RelativePosition.BottomRight:\n      menuDirection = ContextMenuDirection.BottomLeft;\n      break;\n  }\n  return menuDirection;\n}\n"]}

package/lib/esm/core-react/contextmenu/TildeFinder.d.ts

@@ -1,19 +1,19 @@
-/** @packageDocumentation
- * @module ContextMenu
- */
-import * as React from "react";
-/** Finds a tilde character in ContextMenu item label for hot key support
- * @internal
- */
-export declare class TildeFinder {
-    /**
-     * Find character following a tilde character within a React.ReactNode.
-     * @param node react node to search within for a tilde.
-     * @returns character that was found, and the same node with tilde removed, and following character with an underline.
-     */
-    static findAfterTilde: (node: React.ReactNode) => {
-        character: string | undefined;
-        node: React.ReactNode;
-    };
-}
+/** @packageDocumentation
+ * @module ContextMenu
+ */
+import * as React from "react";
+/** Finds a tilde character in ContextMenu item label for hot key support
+ * @internal
+ */
+export declare class TildeFinder {
+    /**
+     * Find character following a tilde character within a React.ReactNode.
+     * @param node react node to search within for a tilde.
+     * @returns character that was found, and the same node with tilde removed, and following character with an underline.
+     */
+    static findAfterTilde: (node: React.ReactNode) => {
+        character: string | undefined;
+        node: React.ReactNode;
+    };
+}
 //# sourceMappingURL=TildeFinder.d.ts.map

package/lib/esm/core-react/contextmenu/TildeFinder.js

@@ -1,67 +1,68 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module ContextMenu
- */
-import * as React from "react";
-/** Finds a tilde character in ContextMenu item label for hot key support
- * @internal
- */
-export class TildeFinder {
-}
-/**
- * Find character following a tilde character within a React.ReactNode.
- * @param node react node to search within for a tilde.
- * @returns character that was found, and the same node with tilde removed, and following character with an underline.
- */
-TildeFinder.findAfterTilde = (node) => {
-    if (typeof node === "string") {
-        // String
-        const tildeIndex = node.indexOf("~");
-        if (tildeIndex !== -1 && tildeIndex <= node.length - 2) {
-            const ch = node.charAt(tildeIndex + 1);
-            const s1 = node.substring(0, tildeIndex);
-            const n = React.createElement("u", { key: "hotkey" }, ch);
-            const s2 = node.substring(tildeIndex + 2);
-            return { character: ch.toUpperCase(), node: [s1, n, s2] };
-        }
-    }
-    else if (node && typeof node === "object") {
-        if (Array.isArray(node)) {
-            // Array
-            let ret = { character: undefined, node };
-            node = node.map((child) => {
-                const r = TildeFinder.findAfterTilde(child);
-                if (r.character) { // if character is found, modify node instead of returning unmodified child.
-                    ret = r;
-                    return r.node;
-                }
-                return child;
-            });
-            if (ret.character) {
-                return { character: ret.character, node };
-            }
-        }
-        else if ("props" in node) {
-            // React Node
-            const ret = { character: undefined, node };
-            ret.node = React.cloneElement(node, {
-                children: React.Children.map(node.props.children, (child) => {
-                    const r = TildeFinder.findAfterTilde(child);
-                    if (r.character) { // if character is found, modify node instead of returning unmodified child.
-                        ret.character = r.character;
-                        return r.node;
-                    }
-                    return child;
-                }),
-            });
-            if (ret.character) {
-                return ret;
-            }
-        }
-    }
-    return { character: undefined, node };
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ContextMenu
+ */
+import * as React from "react";
+/** Finds a tilde character in ContextMenu item label for hot key support
+ * @internal
+ */
+class TildeFinder {
+}
+/**
+ * Find character following a tilde character within a React.ReactNode.
+ * @param node react node to search within for a tilde.
+ * @returns character that was found, and the same node with tilde removed, and following character with an underline.
+ */
+TildeFinder.findAfterTilde = (node) => {
+    if (typeof node === "string") {
+        // String
+        const tildeIndex = node.indexOf("~");
+        if (tildeIndex !== -1 && tildeIndex <= node.length - 2) {
+            const ch = node.charAt(tildeIndex + 1);
+            const s1 = node.substring(0, tildeIndex);
+            const n = React.createElement("u", { key: "hotkey" }, ch);
+            const s2 = node.substring(tildeIndex + 2);
+            return { character: ch.toUpperCase(), node: [s1, n, s2] };
+        }
+    }
+    else if (node && typeof node === "object") {
+        if (Array.isArray(node)) {
+            // Array
+            let ret = { character: undefined, node };
+            node = node.map((child) => {
+                const r = TildeFinder.findAfterTilde(child);
+                if (r.character) { // if character is found, modify node instead of returning unmodified child.
+                    ret = r;
+                    return r.node;
+                }
+                return child;
+            });
+            if (ret.character) {
+                return { character: ret.character, node };
+            }
+        }
+        else if ("props" in node) {
+            // React Node
+            const ret = { character: undefined, node };
+            ret.node = React.cloneElement(node, {
+                children: React.Children.map(node.props.children, (child) => {
+                    const r = TildeFinder.findAfterTilde(child);
+                    if (r.character) { // if character is found, modify node instead of returning unmodified child.
+                        ret.character = r.character;
+                        return r.node;
+                    }
+                    return child;
+                }),
+            });
+            if (ret.character) {
+                return ret;
+            }
+        }
+    }
+    return { character: undefined, node };
+};
+export { TildeFinder };
 //# sourceMappingURL=TildeFinder.js.map

package/lib/esm/core-react/contextmenu/TildeFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"TildeFinder.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/TildeFinder.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,WAAW;;AACtB;;;;GAIG;AACW,0BAAc,GAAG,CAAC,IAAqB,EAA4D,EAAE;IACjH,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,SAAS;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtD,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YACvC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;YACzC,MAAM,CAAC,GAAG,2BAAG,GAAG,EAAC,QAAQ,IAAE,EAAE,CAAK,CAAC;YACnC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YAC1C,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;SAC3D;KACF;SAAM,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACvB,QAAQ;YACR,IAAI,GAAG,GAA6D,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACnG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,MAAM,CAAC,GAAG,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBAC5C,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,4EAA4E;oBAC7F,GAAG,GAAG,CAAC,CAAC;oBACR,OAAO,CAAC,CAAC,IAAI,CAAC;iBACf;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;YACH,IAAI,GAAG,CAAC,SAAS,EAAE;gBACjB,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;aAC3C;SACF;aAAM,IAAI,OAAO,IAAI,IAAI,EAAE;YAC1B,aAAa;YACb,MAAM,GAAG,GAA6D,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACrG,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;gBAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAA2B,EAAE,CAAC,KAAsB,EAAE,EAAE;oBAC9F,MAAM,CAAC,GAAG,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;oBAC5C,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,4EAA4E;wBAC7F,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC;wBAC5B,OAAO,CAAC,CAAC,IAAI,CAAC;qBACf;oBACD,OAAO,KAAK,CAAC;gBACf,CAAC,CAAC;aACH,CAAC,CAAC;YACH,IAAI,GAAG,CAAC,SAAS,EAAE;gBACjB,OAAO,GAAG,CAAC;aACZ;SACF;KACF;IACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxC,CAAC,CAAC","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 ContextMenu\r\n */\r\n\r\nimport * as React from \"react\";\r\n\r\n/** Finds a tilde character in ContextMenu item label for hot key support\r\n * @internal\r\n */\r\nexport class TildeFinder {\r\n  /**\r\n   * Find character following a tilde character within a React.ReactNode.\r\n   * @param node react node to search within for a tilde.\r\n   * @returns character that was found, and the same node with tilde removed, and following character with an underline.\r\n   */\r\n  public static findAfterTilde = (node: React.ReactNode): { character: string | undefined, node: React.ReactNode } => {\r\n    if (typeof node === \"string\") {\r\n      // String\r\n      const tildeIndex = node.indexOf(\"~\");\r\n      if (tildeIndex !== -1 && tildeIndex <= node.length - 2) {\r\n        const ch = node.charAt(tildeIndex + 1);\r\n        const s1 = node.substring(0, tildeIndex);\r\n        const n = <u key=\"hotkey\">{ch}</u>;\r\n        const s2 = node.substring(tildeIndex + 2);\r\n        return { character: ch.toUpperCase(), node: [s1, n, s2] };\r\n      }\r\n    } else if (node && typeof node === \"object\") {\r\n      if (Array.isArray(node)) {\r\n        // Array\r\n        let ret: { character: string | undefined, node: React.ReactNode } = { character: undefined, node };\r\n        node = node.map((child) => {\r\n          const r = TildeFinder.findAfterTilde(child);\r\n          if (r.character) { // if character is found, modify node instead of returning unmodified child.\r\n            ret = r;\r\n            return r.node;\r\n          }\r\n          return child;\r\n        });\r\n        if (ret.character) {\r\n          return { character: ret.character, node };\r\n        }\r\n      } else if (\"props\" in node) {\r\n        // React Node\r\n        const ret: { character: string | undefined, node: React.ReactNode } = { character: undefined, node };\r\n        ret.node = React.cloneElement(node, {\r\n          children: React.Children.map(node.props.children as React.ReactNode, (child: React.ReactNode) => {\r\n            const r = TildeFinder.findAfterTilde(child);\r\n            if (r.character) { // if character is found, modify node instead of returning unmodified child.\r\n              ret.character = r.character;\r\n              return r.node;\r\n            }\r\n            return child;\r\n          }),\r\n        });\r\n        if (ret.character) {\r\n          return ret;\r\n        }\r\n      }\r\n    }\r\n    return { character: undefined, node };\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"TildeFinder.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/TildeFinder.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAa,WAAW;;AACtB;;;;GAIG;AACW,0BAAc,GAAG,CAAC,IAAqB,EAA4D,EAAE;IACjH,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,SAAS;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACrC,IAAI,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtD,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YACvC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;YACzC,MAAM,CAAC,GAAG,2BAAG,GAAG,EAAC,QAAQ,IAAE,EAAE,CAAK,CAAC;YACnC,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;YAC1C,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;SAC3D;KACF;SAAM,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACvB,QAAQ;YACR,IAAI,GAAG,GAA6D,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACnG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,MAAM,CAAC,GAAG,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBAC5C,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,4EAA4E;oBAC7F,GAAG,GAAG,CAAC,CAAC;oBACR,OAAO,CAAC,CAAC,IAAI,CAAC;iBACf;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;YACH,IAAI,GAAG,CAAC,SAAS,EAAE;gBACjB,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;aAC3C;SACF;aAAM,IAAI,OAAO,IAAI,IAAI,EAAE;YAC1B,aAAa;YACb,MAAM,GAAG,GAA6D,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;YACrG,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;gBAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAA2B,EAAE,CAAC,KAAsB,EAAE,EAAE;oBAC9F,MAAM,CAAC,GAAG,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;oBAC5C,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,4EAA4E;wBAC7F,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC;wBAC5B,OAAO,CAAC,CAAC,IAAI,CAAC;qBACf;oBACD,OAAO,KAAK,CAAC;gBACf,CAAC,CAAC;aACH,CAAC,CAAC;YACH,IAAI,GAAG,CAAC,SAAS,EAAE;gBACjB,OAAO,GAAG,CAAC;aACZ;SACF;KACF;IACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxC,CAAC,CAAC;SAnDS,WAAW","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 ContextMenu\n */\n\nimport * as React from \"react\";\n\n/** Finds a tilde character in ContextMenu item label for hot key support\n * @internal\n */\nexport class TildeFinder {\n  /**\n   * Find character following a tilde character within a React.ReactNode.\n   * @param node react node to search within for a tilde.\n   * @returns character that was found, and the same node with tilde removed, and following character with an underline.\n   */\n  public static findAfterTilde = (node: React.ReactNode): { character: string | undefined, node: React.ReactNode } => {\n    if (typeof node === \"string\") {\n      // String\n      const tildeIndex = node.indexOf(\"~\");\n      if (tildeIndex !== -1 && tildeIndex <= node.length - 2) {\n        const ch = node.charAt(tildeIndex + 1);\n        const s1 = node.substring(0, tildeIndex);\n        const n = <u key=\"hotkey\">{ch}</u>;\n        const s2 = node.substring(tildeIndex + 2);\n        return { character: ch.toUpperCase(), node: [s1, n, s2] };\n      }\n    } else if (node && typeof node === \"object\") {\n      if (Array.isArray(node)) {\n        // Array\n        let ret: { character: string | undefined, node: React.ReactNode } = { character: undefined, node };\n        node = node.map((child) => {\n          const r = TildeFinder.findAfterTilde(child);\n          if (r.character) { // if character is found, modify node instead of returning unmodified child.\n            ret = r;\n            return r.node;\n          }\n          return child;\n        });\n        if (ret.character) {\n          return { character: ret.character, node };\n        }\n      } else if (\"props\" in node) {\n        // React Node\n        const ret: { character: string | undefined, node: React.ReactNode } = { character: undefined, node };\n        ret.node = React.cloneElement(node, {\n          children: React.Children.map(node.props.children as React.ReactNode, (child: React.ReactNode) => {\n            const r = TildeFinder.findAfterTilde(child);\n            if (r.character) { // if character is found, modify node instead of returning unmodified child.\n              ret.character = r.character;\n              return r.node;\n            }\n            return child;\n          }),\n        });\n        if (ret.character) {\n          return ret;\n        }\n      }\n    }\n    return { character: undefined, node };\n  };\n}\n"]}