How to use the @bentley/ui-core.withOnOutsideClick function in @bentley/ui-core

import { withContainIn } from "@src/base/WithContainIn";
import { Splitter } from "@src/stage-panels/Splitter";
import { StagePanel, StagePanelType, StagePanelTypeHelpers } from "@src/stage-panels/StagePanel";
import { StagePanels } from "@src/stage-panels/StagePanels";
import { NestedStagePanelKey } from "@src/stage-panels/manager/NestedStagePanels";
import { NineZoneStagePanelsManagerProps, getDefaultNineZoneStagePanelsManagerProps } from "@src/manager/StagePanels";
import { NineZoneNestedStagePanelsManagerProps } from "@src/manager/NestedStagePanels";
import { NineZoneManager, NineZoneManagerProps } from "@src/manager/NineZone";
import { NineZoneStagePanelManagerProps } from "@src/manager/StagePanel";
import { StagePanelsManager } from "@src/stage-panels/manager/StagePanels";
import "./Zones.scss";

// tslint:disable-next-line:variable-name
const TooltipWithTimeout = withTimeout(Tooltip);
// tslint:disable-next-line:variable-name
const ToolGroupContained = withContainIn(withOnOutsideClick(Group, undefined, false));
// tslint:disable-next-line:variable-name
const NestedToolGroupContained = withContainIn(withOnOutsideClick(NestedGroup, undefined, false));
// tslint:disable-next-line:variable-name
const ItemWithDragInteraction = withDragInteraction(Item);
// tslint:disable-next-line:variable-name
const ToolGroupSelectionContext = React.createContext(false);

// tslint:disable-next-line:variable-name
const BlueButton = (props: ButtonProps & Omit) => (
  <button>
);

// tslint:disable-next-line:variable-name</button>

import { BaseItemState } from "../shared/ItemDefBase";
import { SyncUiEventDispatcher, SyncUiEventArgs } from "../syncui/SyncUiEventDispatcher";
import { UiFramework } from "../UiFramework";
import { KeyboardShortcutManager } from "../keyboardshortcut/KeyboardShortcut";

import "@bentley/ui-ninezone/lib/ui-ninezone/toolbar/item/expandable/group/Panel.scss";
import "./PopupButton.scss";
import { ItemProps } from "../shared/ItemProps";
import { FrontstageManager } from "../frontstage/FrontstageManager";
import { ToolbarDragInteractionContext } from "./DragInteraction";

// cSpell:ignore popupbutton

// tslint:disable-next-line: variable-name
const DivWithOnOutsideClick = withOnOutsideClick((props: React.HTMLProps) =&gt; (<div>), undefined, true);

/** Arguments of [[PopupButtonChildrenRenderProp]].
 * @public
&nbsp;*/
export interface PopupButtonChildrenRenderPropArgs {
  closePanel: () =&gt; void;
}

/** Type of [[PopupButtonProps.children]] when used as render prop.
 * @public
&nbsp;*/
export type PopupButtonChildrenRenderProp = (args: PopupButtonChildrenRenderPropArgs) =&gt; React.ReactNode;

/** Properties for the [[PopupButton]] React component
 * @public
&nbsp;*/
</div>

import { StagePanel, StagePanelType, StagePanelTypeHelpers } from "@src/stage-panels/StagePanel";
import { StagePanels } from "@src/stage-panels/StagePanels";
import { NestedStagePanelKey } from "@src/stage-panels/manager/NestedStagePanels";
import { NineZoneStagePanelsManagerProps, getDefaultNineZoneStagePanelsManagerProps } from "@src/manager/StagePanels";
import { NineZoneNestedStagePanelsManagerProps } from "@src/manager/NestedStagePanels";
import { NineZoneManager, NineZoneManagerProps } from "@src/manager/NineZone";
import { NineZoneStagePanelManagerProps } from "@src/manager/StagePanel";
import { StagePanelsManager } from "@src/stage-panels/manager/StagePanels";
import "./Zones.scss";

// tslint:disable-next-line:variable-name
const TooltipWithTimeout = withTimeout(Tooltip);
// tslint:disable-next-line:variable-name
const ToolGroupContained = withContainIn(withOnOutsideClick(Group, undefined, false));
// tslint:disable-next-line:variable-name
const NestedToolGroupContained = withContainIn(withOnOutsideClick(NestedGroup, undefined, false));
// tslint:disable-next-line:variable-name
const ItemWithDragInteraction = withDragInteraction(Item);
// tslint:disable-next-line:variable-name
const ToolGroupSelectionContext = React.createContext(false);

// tslint:disable-next-line:variable-name
const BlueButton = (props: ButtonProps & Omit) => (
  <button>
);

// tslint:disable-next-line:variable-name
const HollowButton = (props: ButtonProps &amp; Omit) =&gt; (
  </button>

/** @internal */
export class InputSwitchComponent extends React.PureComponent {
  public render(): React.ReactNode {
    const { currentMode, tree, node, onInputStart, onInputCancel, onNodeChange, renderNode, width, showUpDir, delimiter } = this.props;
    switch (currentMode) {
      case BreadcrumbMode.Dropdown:
        return ;
      case BreadcrumbMode.Input:
        return ;
      default:
        return <div data-testid="components-breadcrumb-error-unknown-mode">{UiComponents.translate("breadcrumb.errorUnknownMode")}</div>;
    }
  }
}
/** @internal */
const InputSwitch = withOnOutsideClick(InputSwitchComponent); // tslint:disable-line:variable-name

/** @internal */
export interface BreadcrumbInputProps {
  width: number | string;
  delimiter?: string;

  onCancel: () =&gt; void;
  onNodeChange: (node: TreeNodeItem | undefined) =&gt; void;
  parentsOnly?: boolean;

  tree: BeInspireTree;
  node?: BeInspireTreeNode;

  pathString: string;
}

*--------------------------------------------------------------------------------------------*/
/** @module Notification */

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as classnames from "classnames";
import "./InputField.scss";
import { Div, withOnOutsideClick } from "@bentley/ui-core";
import CommonProps from "@bentley/ui-ninezone/lib/utilities/Props";
import MessageButton from "@bentley/ui-ninezone/lib/footer/message/content/Button";
import Status from "@bentley/ui-ninezone/lib/footer/message/content/status/Status";
import { StatusMessage } from "@bentley/ui-ninezone/lib/footer/message/content/status/Message";
import StatusMessageLayout from "@bentley/ui-ninezone/lib/footer/message/content/status/Layout";

// tslint:disable-next-line:variable-name
const DivWithOnOutsideClick = withOnOutsideClick(Div);

/** Properties of [[InputFieldMessage]] component. */
export interface InputFieldMessageProps extends CommonProps {
  /** Parent of message. */
  target: Element;
  /** Message content. */
  children: React.ReactNode;
  /** Function that will close the message */
  onClose: () => void;
}

/** InputField message is a popup error message that appears under invalid user input. */
export class InputFieldMessage extends React.Component {
  public render(): React.ReactNode {
    return ReactDOM.createPortal(this._getErrorMessage(), this.props.target);
  }

/** @module Picker */

import * as React from "react";
import { CommonProps, withOnOutsideClick, SizeProps } from "@bentley/ui-core";
import {
  Group, Panel, GroupColumn, ExpandableItem, withContainIn, Item, containHorizontally,
} from "@bentley/ui-ninezone";
import * as classnames from "classnames";
import { UiFramework } from "../UiFramework";
import "@bentley/ui-ninezone/lib/ui-ninezone/toolbar/item/expandable/group/tool/Tool.scss";
import "./ListPicker.scss";
import { FrontstageManager } from "../frontstage/FrontstageManager";
import { ToolbarDragInteractionContext } from "../toolbar/DragInteraction";

// tslint:disable-next-line:variable-name
const ContainedGroup = withOnOutsideClick(withContainIn(Group), undefined, false);

/** Enum for the list picker item type
 * @beta
 */
export enum ListItemType {
  Item = 0,
  Separator = 1,
  Container = 2,
}

/** List picker item
 * @beta
 */
export interface ListItem {
  [key: string]: any;
  name?: string;

import { ItemList, ItemMap } from "../shared/ItemMap";
import { SyncUiEventDispatcher, SyncUiEventArgs } from "../syncui/SyncUiEventDispatcher";
import { PropsHelper } from "../utils/PropsHelper";
import { KeyboardShortcutManager } from "../keyboardshortcut/KeyboardShortcut";
import { UiFramework } from "../UiFramework";
import { AnyItemDef } from "../shared/AnyItemDef";
import { GroupItemProps } from "../shared/GroupItemProps";
import { ItemDefFactory } from "../shared/ItemDefFactory";
import { FrontstageManager, ToolActivatedEventArgs } from "../frontstage/FrontstageManager";
import { ToolGroupPanelContext } from "../frontstage/FrontstageComposer";
import { ToolbarDragInteractionContext } from "./DragInteraction";

// tslint:disable-next-line: variable-name
const ToolGroup = withOnOutsideClick(ToolGroupComponent, undefined, false);
// tslint:disable-next-line: variable-name
const NestedToolGroup = withOnOutsideClick(NestedToolGroupComponent, undefined, false);
// tslint:disable-next-line:variable-name
const ItemWithDragInteraction = withDragInteraction(Item);

// -----------------------------------------------------------------------------
// GroupItemDef class
// -----------------------------------------------------------------------------

/** An Item that opens a group of items.
 * @public
 */
export class GroupItemDef extends ActionButtonItemDef {
  private static _sId = 0;
  public static groupIdPrefix = "Group-";

  public groupId: string;
  public direction: Direction;

import { ActionButtonItemDef } from "../shared/ActionButtonItemDef";
import { ItemDefBase, BaseItemState } from "../shared/ItemDefBase";
import { ItemList, ItemMap } from "../shared/ItemMap";
import { SyncUiEventDispatcher, SyncUiEventArgs } from "../syncui/SyncUiEventDispatcher";
import { PropsHelper } from "../utils/PropsHelper";
import { KeyboardShortcutManager } from "../keyboardshortcut/KeyboardShortcut";
import { UiFramework } from "../UiFramework";
import { AnyItemDef } from "../shared/AnyItemDef";
import { GroupItemProps } from "../shared/GroupItemProps";
import { ItemDefFactory } from "../shared/ItemDefFactory";
import { FrontstageManager, ToolActivatedEventArgs } from "../frontstage/FrontstageManager";
import { ToolGroupPanelContext } from "../frontstage/FrontstageComposer";
import { ToolbarDragInteractionContext } from "./DragInteraction";

// tslint:disable-next-line: variable-name
const ToolGroup = withOnOutsideClick(ToolGroupComponent, undefined, false);
// tslint:disable-next-line: variable-name
const NestedToolGroup = withOnOutsideClick(NestedToolGroupComponent, undefined, false);
// tslint:disable-next-line:variable-name
const ItemWithDragInteraction = withDragInteraction(Item);

// -----------------------------------------------------------------------------
// GroupItemDef class
// -----------------------------------------------------------------------------

/** An Item that opens a group of items.
 * @public
 */
export class GroupItemDef extends ActionButtonItemDef {
  private static _sId = 0;
  public static groupIdPrefix = "Group-";