@itwin/core-react 3.4.0-dev.9 → 3.5.0-dev.4

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,67 @@
-/*---------------------------------------------------------------------------------------------
-* 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
+ */
+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 };
+};
 //# 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,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":["/*---------------------------------------------------------------------------------------------\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"]}