From a5e779269bcbc63b4f5460893987c5c4cf2d6b02 Mon Sep 17 00:00:00 2001
From: "Travis.Cobbs" <77415528+tcobbs-bentley@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:47:21 -0700
Subject: [PATCH] Temporary fixes for AppUI deprecations

---
 src/mobile-ui-react/ActionSheetButton.tsx    |  2 ++
 src/mobile-ui-react/BottomPanel.tsx          |  4 +++
 src/mobile-ui-react/CenterDiv.tsx            |  2 ++
 src/mobile-ui-react/CountNotification.tsx    |  4 +++
 src/mobile-ui-react/HorizontalPicker.tsx     |  4 +++
 src/mobile-ui-react/MobileUi.tsx             | 33 ++++++++++++++------
 src/mobile-ui-react/ModalEntryFormDialog.tsx |  2 ++
 src/mobile-ui-react/NavigationPanel.tsx      |  4 +++
 src/mobile-ui-react/PanViewport.ts           |  4 ++-
 src/mobile-ui-react/PanelHeader.tsx          |  2 ++
 src/mobile-ui-react/ResizablePanel.tsx       | 12 +++++--
 src/mobile-ui-react/ScrollableWithFades.tsx  |  5 ++-
 src/mobile-ui-react/Suggestion.tsx           |  6 +++-
 src/mobile-ui-react/TabBar.tsx               |  2 +-
 src/mobile-ui-react/TileGrid.tsx             |  4 +++
 15 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/src/mobile-ui-react/ActionSheetButton.tsx b/src/mobile-ui-react/ActionSheetButton.tsx
index 0be4bdc..a835c89 100644
--- a/src/mobile-ui-react/ActionSheetButton.tsx
+++ b/src/mobile-ui-react/ActionSheetButton.tsx
@@ -11,6 +11,8 @@ import { NavigationButton } from "./NavigationPanel";
  * Properties for {@link ActionSheetButton}
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface ActionSheetButtonProps extends ActionSheetProps, CommonProps {
   /** The icon to show on the {@link ActionSheetButton}, default is three vertical dots. */
   iconSpec?: IconSpec;
diff --git a/src/mobile-ui-react/BottomPanel.tsx b/src/mobile-ui-react/BottomPanel.tsx
index 71004a6..71d5e96 100644
--- a/src/mobile-ui-react/BottomPanel.tsx
+++ b/src/mobile-ui-react/BottomPanel.tsx
@@ -89,6 +89,8 @@ export function useBottomPanelTop() {
  * Properties for the {@link BottomPanel} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface BottomPanelProps extends CommonProps {
   children?: React.ReactNode;
   /** Displayed when true. */
@@ -293,6 +295,8 @@ export function ResizableBottomPanel(props: ResizableBottomPanelProps) {
     }
     setTimeout(() => {
       setFlickingDown(false);
+      // @todo AppUI deprecation
+      // eslint-disable-next-line deprecation/deprecation
     }, 50 + (typeof autoCloseResult === "number" ? autoCloseResult : getCssVariableAsNumber("--mui-bottom-panel-animation-duration") * 1000));
     return result;
   });
diff --git a/src/mobile-ui-react/CenterDiv.tsx b/src/mobile-ui-react/CenterDiv.tsx
index bcf6c72..2fa0eaa 100644
--- a/src/mobile-ui-react/CenterDiv.tsx
+++ b/src/mobile-ui-react/CenterDiv.tsx
@@ -11,6 +11,8 @@ import "./CenterDiv.scss";
  * Properties for {@link CenterDiv} component
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 interface CenterDivProps extends CommonProps, React.DOMAttributes<HTMLDivElement> {
   /** Set to true to have the {@link CenterDiv} fill 100% of its parent. Default: no */
   fill?: boolean;
diff --git a/src/mobile-ui-react/CountNotification.tsx b/src/mobile-ui-react/CountNotification.tsx
index 41e79dc..2d63d4c 100644
--- a/src/mobile-ui-react/CountNotification.tsx
+++ b/src/mobile-ui-react/CountNotification.tsx
@@ -40,6 +40,8 @@ export interface CountNotificationMoreProps {
  * Properties for {@link CountNotification} component
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface CountNotificationProps extends CommonProps {
   /** Count to display */
   count: number;
@@ -65,6 +67,8 @@ export interface CountNotificationProps extends CommonProps {
  * Properties for {@link CloseableCountNotification} component
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface CloseableCountNotificationProps extends CommonProps {
   /** Count to display */
   count: number;
diff --git a/src/mobile-ui-react/HorizontalPicker.tsx b/src/mobile-ui-react/HorizontalPicker.tsx
index 435a1e6..d3de0a3 100644
--- a/src/mobile-ui-react/HorizontalPicker.tsx
+++ b/src/mobile-ui-react/HorizontalPicker.tsx
@@ -12,6 +12,8 @@ import "./HorizontalPicker.scss";
  * Properties for {@link HorizontalPicker} component
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface HorizontalPickerProps extends CommonProps {
   /** The items in the picker. */
   items: React.ReactNode[];
@@ -21,6 +23,8 @@ export interface HorizontalPickerProps extends CommonProps {
   onItemSelected: (item: number) => void;
 }
 
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 interface HorizontalPickerItemProps extends CommonProps {
   itemNode: React.ReactNode;
   onClick: () => void;
diff --git a/src/mobile-ui-react/MobileUi.tsx b/src/mobile-ui-react/MobileUi.tsx
index 15c186d..2601180 100644
--- a/src/mobile-ui-react/MobileUi.tsx
+++ b/src/mobile-ui-react/MobileUi.tsx
@@ -4,11 +4,26 @@
 *--------------------------------------------------------------------------------------------*/
 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 {
+  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 {
+  getAllViewports,
+  getCssVariable,
+  getCssVariableAsNumber,
+  getEmphasizeElements,
+  Messenger,
+  MobileCore,
+  UIError,
+} from "@itwin/mobile-sdk-core";
 
 import "./MobileUi.scss";
 
@@ -82,6 +97,8 @@ export class MobileUi {
     const isDark = MobileUi.activeColorSchemeIsDark;
     if (UiFramework.initialized) {
       const newTheme = isDark ? ColorTheme.Dark : ColorTheme.Light;
+      // @todo AppUI deprecation
+      // eslint-disable-next-line deprecation/deprecation
       UiFramework.setColorTheme(newTheme);
       // The imodeljs UI framework relies on the "data-theme" attribute. Since the only two ColorTheme
       // values are Light and Dark, the below handles those and Automatic.
@@ -341,16 +358,12 @@ function stringSetHas(set: Set<string>, values: ReadonlyArray<string>) {
  * A custom React hook function for UiSyncEvents.
  * @param handler - The callback function.
  * @param eventIds - The optional event ids to handle.
- *
- * __NOTE__: This function should probably be deprecated, but right now there is no obvious way to
- * replace it. Consequently, the following is for information only:
- * NOT@deprecated in 0.22.5. UiSyncEventArgs were deprecated in appui-react 4.13.x.
  */
-// @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
+// @todo AppUI deprecation
 // eslint-disable-next-line deprecation/deprecation
 export function useSyncUiEvent(handler: (args: UiSyncEventArgs) => void, ...eventIds: ReadonlyArray<string>) {
   React.useEffect(() => {
-    // @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
+    // @todo AppUI deprecation
     // eslint-disable-next-line deprecation/deprecation
     return SyncUiEventDispatcher.onSyncUiEvent.addListener((args: UiSyncEventArgs) => {
       if (eventIds.length === 0 || stringSetHas(args.eventIds, eventIds)) {
@@ -547,6 +560,8 @@ export function useIsolatedCount(): number {
 export function useIModel(handler: (iModel: IModelConnection | undefined) => void) {
   useSyncUiEvent(React.useCallback(() => {
     handler(UiFramework.getIModelConnection());
+    // @todo AppUI deprecation
+    // eslint-disable-next-line deprecation/deprecation
   }, [handler]), SessionStateActionId.SetIModelConnection);
 }
 
diff --git a/src/mobile-ui-react/ModalEntryFormDialog.tsx b/src/mobile-ui-react/ModalEntryFormDialog.tsx
index c91d27e..9f74936 100644
--- a/src/mobile-ui-react/ModalEntryFormDialog.tsx
+++ b/src/mobile-ui-react/ModalEntryFormDialog.tsx
@@ -41,6 +41,8 @@ export interface ModalEntryFormValue {
  * Properties for the {@link ModalDialog} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface ModalDialogProps extends CommonProps {
   /** Content. */
   children: React.ReactNode;
diff --git a/src/mobile-ui-react/NavigationPanel.tsx b/src/mobile-ui-react/NavigationPanel.tsx
index a832260..2c12f5c 100644
--- a/src/mobile-ui-react/NavigationPanel.tsx
+++ b/src/mobile-ui-react/NavigationPanel.tsx
@@ -21,6 +21,8 @@ import {
  * Properties for the {@link NavigationPanel} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface NavigationPanelProps extends ClassNameProps {
   /** The left side components. */
   left?: React.ReactNode;
@@ -44,6 +46,8 @@ export function NavigationPanel(props: NavigationPanelProps) {
  * Properties for the {@link NavigationButton} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface NavigationButtonProps extends CommonProps {
   /** The icon. */
   iconSpec: IconSpec;
diff --git a/src/mobile-ui-react/PanViewport.ts b/src/mobile-ui-react/PanViewport.ts
index 4bb5434..7dfeb46 100644
--- a/src/mobile-ui-react/PanViewport.ts
+++ b/src/mobile-ui-react/PanViewport.ts
@@ -70,9 +70,11 @@ export class PanTracker {
     return this._vpParentDivId;
   }
 
-  // @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
+  // @todo AppUI deprecation
   // eslint-disable-next-line deprecation/deprecation
   private _onSyncUi = (args: UiSyncEventArgs) => {
+    // @todo AppUI deprecation
+    // eslint-disable-next-line deprecation/deprecation
     if (args.eventIds.has(SessionStateActionId.SetIModelConnection) && this._vpParentDivId) {
       let panTracker = PanTracker.getWithKey(this._vpParentDivId);
       const nextX = panTracker.nextX;
diff --git a/src/mobile-ui-react/PanelHeader.tsx b/src/mobile-ui-react/PanelHeader.tsx
index 4d851a3..891f5ee 100644
--- a/src/mobile-ui-react/PanelHeader.tsx
+++ b/src/mobile-ui-react/PanelHeader.tsx
@@ -35,6 +35,8 @@ function PanelHeaderDraggableDiv(props: PanelHeaderDraggableDivProps) {
  * Properties for the {@link PanelHeaderButton} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface PanelHeaderButtonProps extends CommonProps {
   /** The button's text label. */
   label: string;
diff --git a/src/mobile-ui-react/ResizablePanel.tsx b/src/mobile-ui-react/ResizablePanel.tsx
index 55b76f1..50eeeaf 100644
--- a/src/mobile-ui-react/ResizablePanel.tsx
+++ b/src/mobile-ui-react/ResizablePanel.tsx
@@ -5,8 +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 { CommonProps } from "@itwin/core-react";
+import { getCssVariableAsNumber, ReloadedEvent } from "@itwin/mobile-sdk-core";
 import { ReactUseState, useIsMountedRef, useWindowEvent } from "./MobileUi";
 import "./ResizablePanel.scss";
 
@@ -14,6 +14,8 @@ import "./ResizablePanel.scss";
  * Properties for {@link ResizablePanel} component
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface ResizablePanelProps extends CommonProps {
   /** The children */
   children?: React.ReactNode;
@@ -354,6 +356,8 @@ export function DraggableComponent(props: DraggableComponentProps) {
   </TouchDragHandle>;
 }
 
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 interface VerticalScrollProps extends CommonProps {
   children?: React.ReactNode;
 }
@@ -364,6 +368,8 @@ export function VerticalScroll(props: VerticalScrollProps) {
   return <div {...otherProps} className={classnames("mui-vertical-scroll", className)}>{children}</div>;
 }
 
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 interface TouchCaptorProps extends CommonProps {
   isTouchStarted: boolean;
   onTouchStart?: (e: TouchEvent) => void;
@@ -464,6 +470,8 @@ interface TouchDragHandleState {
   isPointerDown: boolean;
 }
 
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 interface TouchDragHandleProps extends CommonProps {
   /** Last pointer position of draggable tab. */
   lastPosition?: XAndY;
diff --git a/src/mobile-ui-react/ScrollableWithFades.tsx b/src/mobile-ui-react/ScrollableWithFades.tsx
index 2c0b3e6..f068d5d 100644
--- a/src/mobile-ui-react/ScrollableWithFades.tsx
+++ b/src/mobile-ui-react/ScrollableWithFades.tsx
@@ -5,8 +5,9 @@
 import * as React from "react";
 import classnames from "classnames";
 import { ColorDef } from "@itwin/core-common";
-import { ClassNameProps, getCssVariable } from "@itwin/core-react";
+import { ClassNameProps } from "@itwin/core-react";
 import { useScroll, useWindowEvent } from "./MobileUi";
+import { getCssVariable } from "@itwin/mobile-sdk-core";
 
 import "./ScrollableWithFades.scss";
 
@@ -16,6 +17,8 @@ import "./ScrollableWithFades.scss";
  * Properties for the {@link HorizontalScrollableWithFades} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface ScrollableWithFadesProps extends ClassNameProps {
   backgroundColor?: ColorDef;
   /** The views to go into the scrollable element */
diff --git a/src/mobile-ui-react/Suggestion.tsx b/src/mobile-ui-react/Suggestion.tsx
index 69c12c0..4e91a23 100644
--- a/src/mobile-ui-react/Suggestion.tsx
+++ b/src/mobile-ui-react/Suggestion.tsx
@@ -5,10 +5,12 @@
 import * as React from "react";
 import classnames from "classnames";
 import { BeUiEvent } from "@itwin/core-bentley";
-import { getCssVariableAsNumber, useOnOutsideClick } from "@itwin/core-react";
+import { useOnOutsideClick } from "@itwin/core-react";
 import { ToolAssistanceInstructions } from "@itwin/core-frontend";
 import { IconImage } from "./IconImage";
 import { useBeUiEvent } from "./MobileUi";
+import { getCssVariableAsNumber } from "@itwin/mobile-sdk-core";
+
 import "./Suggestion.scss";
 
 /**
@@ -37,6 +39,8 @@ export function SuggestionContainer(props: React.HTMLAttributes<HTMLDivElement>)
  * @public
  */
 export function Suggestion(props: SuggestionProps) {
+  // @todo AppUI deprecation
+  // eslint-disable-next-line deprecation/deprecation
   const ref = useOnOutsideClick<HTMLDivElement>(() => props.onOutsideClick?.());
   // To ensure the icon is properly centered when the label not displayed, calculate the icon's margin so that its height and width match the pill height.
   const pillHeight = React.useRef(getCssVariableAsNumber("--mui-pill-height"));
diff --git a/src/mobile-ui-react/TabBar.tsx b/src/mobile-ui-react/TabBar.tsx
index 1213076..1593ac6 100644
--- a/src/mobile-ui-react/TabBar.tsx
+++ b/src/mobile-ui-react/TabBar.tsx
@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { getCssVariable, getCssVariableAsNumber } from "@itwin/core-react";
+import { getCssVariable, getCssVariableAsNumber } from "@itwin/mobile-sdk-core";
 import { ColorDef } from "@itwin/core-common";
 import { BottomPanelProps } from "./BottomPanel";
 import { HorizontalScrollableWithFades } from "./ScrollableWithFades";
diff --git a/src/mobile-ui-react/TileGrid.tsx b/src/mobile-ui-react/TileGrid.tsx
index 977420d..ce6899c 100644
--- a/src/mobile-ui-react/TileGrid.tsx
+++ b/src/mobile-ui-react/TileGrid.tsx
@@ -25,6 +25,8 @@ export interface GridTileSize {
  * Properties for {@link TileGrid} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface TileGridProps extends CommonProps {
   /** [[GridTile]] children of this node */
   children?: Array<React.ReactElement<GridTileProps>>;
@@ -53,6 +55,8 @@ export interface GridTileInjectedProps {
  * Properties for {@link GridTile} component.
  * @public
  */
+// @todo AppUI deprecation
+// eslint-disable-next-line deprecation/deprecation
 export interface GridTileProps extends CommonProps {
   /** onClick handler for this GridTile. */
   onClick?: (e: React.MouseEvent) => void;