Move deprecated AppUI functionality into mobile-ui-react.

src/mobile-ui-react/ActionSheetButton.tsx

@@ -3,9 +3,10 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
-import { CommonProps, IconSpec } from "@itwin/core-react";
+import { IconSpec } from "@itwin/core-react";
 import { ActionSheetProps, presentActionSheet } from "@itwin/mobile-sdk-core";
 import { NavigationButton } from "./NavigationPanel";
+import { CommonProps } from "./MobileUi";
 
 /**
  * Properties for {@link ActionSheetButton}

src/mobile-ui-react/BottomPanel.tsx

@@ -5,9 +5,15 @@
 import * as React from "react";
 import classnames from "classnames";
 import { BeUiEvent } from "@itwin/core-bentley";
-import { CommonProps, getCssVariableAsNumber } from "@itwin/core-react";
 import { Optional } from "@itwin/mobile-sdk-core";
-import { makeRefHandler, MutableHtmlDivRefOrFunction, useBeUiEvent, useWindowEvent } from "./MobileUi";
+import {
+  CommonProps,
+  getCssVariableAsNumber,
+  makeRefHandler,
+  MutableHtmlDivRefOrFunction,
+  useBeUiEvent,
+  useWindowEvent,
+} from "./MobileUi";
 import { PanelHeader, PanelHeaderProps } from "./PanelHeader";
 import { ResizablePanel, ResizablePanelProps } from "./ResizablePanel";
 import "./BottomPanel.scss";

src/mobile-ui-react/CenterDiv.tsx

@@ -4,8 +4,8 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps } from "@itwin/core-react";
 import "./CenterDiv.scss";
+import { CommonProps } from "./MobileUi";
 
 /**
  * Properties for {@link CenterDiv} component

src/mobile-ui-react/CountNotification.tsx

@@ -4,11 +4,11 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps, IconSpec } from "@itwin/core-react";
+import { IconSpec } from "@itwin/core-react";
 import { AlertAction } from "@itwin/mobile-sdk-core";
 import { ActionSheetButton } from "./ActionSheetButton";
 import { IconImage } from "./IconImage";
-import { MobileUi } from "./MobileUi";
+import { CommonProps, MobileUi } from "./MobileUi";
 
 import "./CountNotification.scss";
 

src/mobile-ui-react/HorizontalPicker.tsx

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps } from "@itwin/core-react";
+import { CommonProps } from "./MobileUi";
 
 import "./HorizontalPicker.scss";
 

src/mobile-ui-react/MobileUi.tsx

@@ -4,14 +4,37 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import { BackendError, Localization } from "@itwin/core-common";
-import { getCssVariable, getCssVariableAsNumber } from "@itwin/core-react";
 import { ColorTheme, SessionStateActionId, SyncUiEventDispatcher, SyncUiEventId, SYSTEM_PREFERRED_COLOR_THEME, UiFramework, UiSyncEventArgs } from "@itwin/appui-react";
 import { EmphasizeElements, IModelApp, IModelConnection, ScreenViewport, SelectionSet, Tool, Viewport } from "@itwin/core-frontend";
 import { BeEvent, BeUiEvent, BriefcaseStatus, Id64Set, Listener } from "@itwin/core-bentley";
 import { getAllViewports, getEmphasizeElements, Messenger, MobileCore, UIError } from "@itwin/mobile-sdk-core";
 
 import "./MobileUi.scss";
 
+/** Props used by components that expect class name to be passed in.
+ *
+ * __Note__: Copied from @itwin/core-react, where it is being deprecated. It will **not ever** be
+ * deprecated from @itwin/mobile-ui-react.
+ * @public
+ */
+export interface ClassNameProps {
+  /** Custom CSS class name */
+  className?: string;
+}
+
+/** Common props used by components.
+ *
+ * __Note__: Copied from @itwin/core-react, where it is being deprecated. It will **not ever** be
+ * deprecated from @itwin/mobile-ui-react.
+ * @public
+ */
+export interface CommonProps extends ClassNameProps {
+  /** Custom CSS style properties */
+  style?: React.CSSProperties;
+  /** Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id */
+  itemId?: string;
+}
+
 /** Type used for MobileUi.onClose BeEvent. */
 export declare type CloseListener = () => void;
 
@@ -669,3 +692,35 @@ export function useActiveColorSchemeIsDark() {
   }, [isMountedRef]), MobileUi.onColorSchemeChanged);
   return isDark;
 }
+
+/** Get CSS variable
+ * @public
+ *
+ * __Note__: Copied from @itwin/core-react, where it is being deprecated. It will **not ever** be
+ * deprecated from @itwin/mobile-ui-react.
+ */
+export function getCssVariable(
+  variableName: string,
+  htmlElement?: HTMLElement,
+): string {
+  const element = htmlElement ?? document.documentElement;
+  const cssStyles = getComputedStyle(element, null);
+  const cssVal = String(cssStyles.getPropertyValue(variableName)).trim();
+  return cssVal;
+}
+
+/** Get CSS variable as number
+ * @public
+ *
+ * __Note__: Copied from @itwin/core-react, where it is being deprecated. It will **not ever** be
+ * deprecated from @itwin/mobile-ui-react.
+ */
+export function getCssVariableAsNumber(
+  variableName: string,
+  htmlElement?: HTMLElement,
+): number {
+  let cssValNum: number = NaN;
+  const cssValStr = getCssVariable(variableName, htmlElement);
+  if (cssValStr) cssValNum = parseFloat(cssValStr);
+  return cssValNum;
+}

src/mobile-ui-react/ModalEntryFormDialog.tsx

@@ -4,11 +4,10 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps } from "@itwin/core-react";
 import { UiFramework } from "@itwin/appui-react";
 import { getCssVariableAsNumberOrDefault, MobileCore, Optional } from "@itwin/mobile-sdk-core";
 import { CloseButton } from "./NavigationPanel";
-import { MobileUi } from "./MobileUi";
+import { CommonProps, MobileUi } from "./MobileUi";
 
 import "./ModalEntryFormDialog.scss";
 

src/mobile-ui-react/NavigationPanel.tsx

@@ -4,10 +4,10 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { ClassNameProps, CommonProps, IconSpec } from "@itwin/core-react";
+import { IconSpec } from "@itwin/core-react";
 import { ConditionalBooleanValue, ConditionalStringValue } from "@itwin/appui-abstract";
 import { IconImage } from "./IconImage";
-import { useSyncUiEvent } from "./MobileUi";
+import { ClassNameProps, CommonProps, useSyncUiEvent } from "./MobileUi";
 import "./NavigationPanel.scss";
 
 import {

src/mobile-ui-react/PanelHeader.tsx

@@ -4,9 +4,9 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps } from "@itwin/core-react";
 import { withoutClassName } from "@itwin/mobile-sdk-core";
 import { DraggableComponent, DraggableComponentCallbackProps } from "./ResizablePanel";
+import { CommonProps } from "./MobileUi";
 
 import "./PanelHeader.scss";
 

src/mobile-ui-react/ResizablePanel.tsx

@@ -5,9 +5,8 @@
 import * as React from "react";
 import classnames from "classnames";
 import { Point2d, XAndY } from "@itwin/core-geometry";
-import { CommonProps, getCssVariableAsNumber } from "@itwin/core-react";
 import { ReloadedEvent } from "@itwin/mobile-sdk-core";
-import { ReactUseState, useIsMountedRef, useWindowEvent } from "./MobileUi";
+import { CommonProps, getCssVariableAsNumber, ReactUseState, useIsMountedRef, useWindowEvent } from "./MobileUi";
 import "./ResizablePanel.scss";
 
 /**

src/mobile-ui-react/ScrollableWithFades.tsx

@@ -5,8 +5,7 @@
 import * as React from "react";
 import classnames from "classnames";
 import { ColorDef } from "@itwin/core-common";
-import { ClassNameProps, getCssVariable } from "@itwin/core-react";
-import { useScroll, useWindowEvent } from "./MobileUi";
+import { ClassNameProps, getCssVariable, useScroll, useWindowEvent } from "./MobileUi";
 
 import "./ScrollableWithFades.scss";
 

src/mobile-ui-react/Suggestion.tsx

@@ -5,10 +5,10 @@
 import * as React from "react";
 import classnames from "classnames";
 import { BeUiEvent } from "@itwin/core-bentley";
-import { getCssVariableAsNumber, useOnOutsideClick } from "@itwin/core-react";
 import { ToolAssistanceInstructions } from "@itwin/core-frontend";
 import { IconImage } from "./IconImage";
-import { useBeUiEvent } from "./MobileUi";
+import { getCssVariableAsNumber, useBeUiEvent } from "./MobileUi";
+import { useOnOutsideClick } from "./useOnOutsideClick";
 import "./Suggestion.scss";
 
 /**

src/mobile-ui-react/TabBar.tsx

@@ -4,11 +4,10 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { getCssVariable, getCssVariableAsNumber } from "@itwin/core-react";
 import { ColorDef } from "@itwin/core-common";
 import { BottomPanelProps } from "./BottomPanel";
 import { HorizontalScrollableWithFades } from "./ScrollableWithFades";
-import { useHorizontalScrollChildVisibleOnResize } from "./MobileUi";
+import { getCssVariable, getCssVariableAsNumber, useHorizontalScrollChildVisibleOnResize } from "./MobileUi";
 
 import "./TabBar.scss";
 

src/mobile-ui-react/TileGrid.tsx

@@ -4,8 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { CommonProps } from "@itwin/core-react";
-import { useMediaQuery, useScrolling } from "./MobileUi";
+import { CommonProps, useMediaQuery, useScrolling } from "./MobileUi";
 import "./TileGrid.scss";
 
 /**

src/mobile-ui-react/Timer.ts

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/*
+ * NOTE: This entire file was copied from @itwin/core-react, where it is being deprecated. It was
+ * then modified to make things internal instead of public and deprecated.
+ */
+
+/** Signature for [[Timer]] execute callback.
+ * @internal
+ */
+export type ExecuteHandler = (this: void) => void;
+
+/** Notifies handler after a set interval.
+ * @internal
+ */
+export class Timer {
+  private _delay: number;
+  private _isRunning = false;
+  private _timerId = 0;
+  private _onExecute: ExecuteHandler | undefined;
+
+  /**
+   * Creates a new Timer.
+   * @param msDelay Time interval in milliseconds after which handler will be notified.
+   */
+  public constructor(msDelay: number) {
+    this._delay = msDelay;
+  }
+
+  /** Indicates whether the timer is running */
+  public get isRunning(): boolean {
+    return this._isRunning;
+  }
+
+  /** Time interval in milliseconds after which handler will be notified. */
+  public get delay() {
+    return this._delay;
+  }
+  public set delay(ms: number) {
+    this._delay = ms;
+  }
+
+  /** Set handler that is called after a set interval. */
+  public setOnExecute(onExecute: ExecuteHandler | undefined) {
+    this._onExecute = onExecute;
+  }
+
+  /** Starts this Timer. */
+  public start() {
+    if (this._isRunning) this.clearTimeout();
+
+    this._isRunning = true;
+    this.setTimeout();
+  }
+
+  /** Stops this Timer. */
+  public stop() {
+    if (!this._isRunning) return;
+
+    this._isRunning = false;
+    this.clearTimeout();
+  }
+
+  private execute() {
+    this._onExecute && this._onExecute();
+    this._isRunning = false;
+  }
+
+  private setTimeout() {
+    this._timerId = window.setTimeout(() => this.execute(), this._delay);
+  }
+
+  private clearTimeout() {
+    window.clearTimeout(this._timerId);
+  }
+}