Merge branch 'stable'

.prettierignore

@@ -1,7 +1,7 @@
 # Ignore artifacts
 build
-change
 lib
+.changeset
 
 # Ignore auto-generated files
 CHANGELOG.md

apps/test-app/frontend/package.json

@@ -43,17 +43,17 @@
     "@test-app/common": "workspace:*",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/node": "^18.17.7",
-    "@types/react": "^17.0.64",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "copy-webpack-plugin": "^9.1.0",
     "css-loader": "^6.8.1",
     "electron": "^23.3.13",
     "esbuild-loader": "^2.21.0",
     "eslint": "^8.47.0",
     "eslint-plugin-react": "^7.33.2",
     "html-webpack-plugin": "^5.5.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-resize-detector": "^8.1.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",

apps/test-app/frontend/src/components/tree-widget/Tree.tsx

@@ -4,15 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 
 import "./TreeWidget.css";
-import { useEffect } from "react";
-import { ControlledTree, SelectionMode, useTreeModel } from "@itwin/components-react";
+import { useCallback, useEffect } from "react";
+import { SelectionMode } from "@itwin/components-react";
 import { IModelConnection } from "@itwin/core-frontend";
 import {
   DiagnosticsProps,
+  PresentationTree,
+  PresentationTreeEventHandlerProps,
   PresentationTreeRenderer,
-  useControlledPresentationTreeFiltering,
-  usePresentationTreeNodeLoader,
-  useUnifiedSelectionTreeEventHandler,
+  UnifiedSelectionTreeEventHandler,
+  usePresentationTreeState,
 } from "@itwin/presentation-components";
 
 const PAGING_SIZE = 10;
@@ -31,38 +32,41 @@ interface Props {
 }
 
 export function Tree(props: Props) {
-  const { nodeLoader } = usePresentationTreeNodeLoader({
+  const { filter, onFilteringStateChange, activeMatchIndex } = props.filtering;
+  const state = usePresentationTreeState({
     imodel: props.imodel,
     ruleset: props.rulesetId,
     pagingSize: PAGING_SIZE,
+    eventHandlerFactory: useCallback(
+      (handlerProps: PresentationTreeEventHandlerProps) =>
+        new UnifiedSelectionTreeEventHandler({ nodeLoader: handlerProps.nodeLoader, collapsedChildrenDisposalEnabled: false, name: "TestAppTree" }),
+      [],
+    ),
+    filteringParams: {
+      filter,
+      activeMatchIndex,
+    },
     ...props.diagnostics,
   });
 
-  const { filteredModelSource, filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps } = useControlledPresentationTreeFiltering({
-    nodeLoader,
-    filter: props.filtering.filter,
-    activeMatchIndex: props.filtering.activeMatchIndex,
-  });
-
-  const { onFilteringStateChange } = props.filtering;
+  const isFiltering = state?.filteringResult?.isFiltering ?? false;
+  const matchesCount = state?.filteringResult?.matchesCount;
   useEffect(() => {
     onFilteringStateChange(isFiltering, matchesCount);
   }, [isFiltering, matchesCount, onFilteringStateChange]);
 
-  const eventHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader: filteredNodeLoader, collapsedChildrenDisposalEnabled: true, name: "TreeWithHooks" });
-  const treeModel = useTreeModel(filteredModelSource);
+  if (!state) {
+    return null;
+  }
 
   return (
-    <ControlledTree
-      model={treeModel}
-      eventsHandler={eventHandler}
-      nodeLoader={filteredNodeLoader}
+    <PresentationTree
+      state={state}
       selectionMode={SelectionMode.Extended}
-      nodeHighlightingProps={nodeHighlightingProps}
       iconsEnabled={true}
       width={props.width}
       height={props.height}
-      treeRenderer={(treeProps) => <PresentationTreeRenderer {...treeProps} nodeLoader={filteredNodeLoader} />}
+      treeRenderer={(treeProps) => <PresentationTreeRenderer {...treeProps} nodeLoader={state.nodeLoader} />}
     />
   );
 }

apps/test-app/frontend/src/index.tsx

@@ -5,7 +5,7 @@
 
 import "./index.css";
 import { StrictMode } from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { UiComponents } from "@itwin/components-react";
 import { Logger, LogLevel, ProcessDetector } from "@itwin/core-bentley";
 import { BentleyCloudRpcManager } from "@itwin/core-common";
@@ -82,11 +82,10 @@ async function initializePresentation() {
 void (async () => {
   await initializeApp();
 
-  const rootElement = document.getElementById("root");
-  render(
+  const root = createRoot(document.getElementById("root")!);
+  root.render(
     <StrictMode>
       <App />
     </StrictMode>,
-    rootElement,
   );
 })();

packages/components/.mocharc.json

@@ -1,6 +1,7 @@
 {
-  "require": ["jsdom-global/register", "ignore-styles"],
+  "require": ["ignore-styles"],
   "checkLeaks": true,
+  "global": ["IS_REACT_ACT_ENVIRONMENT"],
   "timeout": 60000,
   "file": ["./lib/cjs/test/index.js"],
   "exclude": ["./lib/test/coverage/**/*"],

packages/components/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log - @itwin/presentation-components
 
+## 4.4.0
+
+This release brings official React 18 support. Components and hooks provided by this package were updated to work with [`StrictMode` in React 18](https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-strict-mode).
+
+### Minor Changes
+
+- [#333](https://github.com/iTwin/presentation/pull/333): Deprecated `useRulesetRegistration` because it is not compatible with React 18
+- [#328](https://github.com/iTwin/presentation/pull/328): Added `usePresentationTreeState` and `PresentationTree` for using presentation data with `ControlledTree`. This is a replacement for `usePresentationTreeNodeLoader` which is not fully compatible with React 18 and now is deprecated.
+
+  Old API:
+
+  ```tsx
+  function Tree(props) {
+    const { nodeLoader } = usePresentationTreeNodeLoader({ imodel: props.imodel, ruleset: TREE_RULESET, pagingSize: PAGING_SIZE });
+    const eventHandler = useUnifiedSelectionTreeEventHandler({ nodeLoader });
+    const treeModel = useTreeModel(nodeLoader.modelSource);
+
+    return (
+      <ControlledTree width={200} height={400} model={treeModel} nodeLoader={nodeLoader} eventsHandler={eventHandler} selectionMode={SelectionMode.Single} />
+    );
+  }
+  ```
+
+  New API:
+
+  ```tsx
+  function Tree(props) {
+    const state = usePresentationTreeState({
+      imodel: props.imodel,
+      ruleset: TREE_RULESET,
+      pagingSize: PAGING_SIZE,
+      eventHandlerFactory: useCallback(
+        (handlerProps: TreeEventHandlerProps) => new UnifiedSelectionTreeEventHandler({ nodeLoader: handlerProps.nodeLoader }),
+        [],
+      ),
+    });
+    if (!state) {
+      return null;
+    }
+
+    return <PresentationTree width={200} height={400} state={state} selectionMode={SelectionMode.Single} />;
+  }
+  ```
+
 ## 5.0.0-dev.1
 
 ### Minor Changes

packages/components/api/presentation-components.api.md

@@ -15,6 +15,7 @@ import { ClientDiagnosticsHandler } from '@itwin/presentation-common';
 import { ClientDiagnosticsOptions } from '@itwin/presentation-common';
 import { Content } from '@itwin/presentation-common';
 import { Context } from 'react';
+import { ControlledTreeProps } from '@itwin/components-react';
 import { DelayLoadedTreeNodeItem } from '@itwin/components-react';
 import { Descriptor } from '@itwin/presentation-common';
 import { DescriptorOverrides } from '@itwin/presentation-common';
@@ -39,7 +40,6 @@ import { IPropertyValueRenderer } from '@itwin/components-react';
 import { Item } from '@itwin/presentation-common';
 import { ITreeDataProvider } from '@itwin/components-react';
 import { ITreeNodeLoader } from '@itwin/components-react';
-import { ITreeNodeLoaderWithProvider } from '@itwin/components-react';
 import { Keys } from '@itwin/presentation-common';
 import { KeySet } from '@itwin/presentation-common';
 import { Memoized } from 'micro-memoize';
@@ -582,6 +582,9 @@ export interface PresentationPropertyDataProviderProps extends DiagnosticsProps
     ruleset?: string | Ruleset;
 }
 
+// @public
+export function PresentationTree<TEventHandler extends TreeEventHandler>({ state, ...props }: PresentationTreeProps<TEventHandler>): JSX.Element;
+
 // @public
 export class PresentationTreeDataProvider implements IPresentationTreeDataProvider, IDisposable {
     constructor(props: PresentationTreeDataProviderProps);
@@ -638,6 +641,12 @@ export interface PresentationTreeDataProviderProps extends DiagnosticsProps {
     ruleset: string | Ruleset;
 }
 
+// @public
+export interface PresentationTreeEventHandlerProps {
+    modelSource: TreeModelSource;
+    nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;
+}
+
 // @beta
 export interface PresentationTreeNodeItem extends DelayLoadedTreeNodeItem {
     filtering?: PresentationTreeNodeItemFilteringInfo;
@@ -651,15 +660,15 @@ export interface PresentationTreeNodeItemFilteringInfo {
     descriptor: HierarchyLevelFilteringDescriptor;
 }
 
-// @public
+// @public @deprecated
 export interface PresentationTreeNodeLoaderProps extends PresentationTreeDataProviderProps {
     // @alpha
     enableHierarchyAutoUpdate?: boolean;
     pagingSize: number;
     seedTreeModel?: TreeModel;
 }
 
-// @public
+// @public @deprecated
 export interface PresentationTreeNodeLoaderResult {
     nodeLoader: PagedTreeNodeLoader<IPresentationTreeDataProvider>;
     // @alpha
@@ -677,6 +686,11 @@ export interface PresentationTreeNodeRendererProps extends TreeNodeRendererProps
     onFilterClick: (nodeId: string) => void;
 }
 
+// @public
+export type PresentationTreeProps<TEventHandler extends TreeEventHandler> = Omit<ControlledTreeProps, "model" | "nodeLoader" | "eventsHandler" | "onItemsRendered" | "nodeHighlightingProps"> & {
+    state: UsePresentationTreeStateResult<TEventHandler>;
+};
+
 // @beta
 export function PresentationTreeRenderer(props: PresentationTreeRendererProps): JSX.Element;
 
@@ -843,14 +857,6 @@ export function useControlledPresentationTreeFiltering(props: ControlledPresenta
     matchesCount: number | undefined;
 };
 
-// @internal (undocumented)
-export function useFilteredNodeLoader(dataProvider: IPresentationTreeDataProvider, filter: string | undefined): {
-    filteredNodeLoader: AbstractTreeNodeLoaderWithProvider<IFilteredPresentationTreeDataProvider> | undefined;
-    isFiltering: boolean;
-    filterApplied: string | undefined;
-    matchesCount: number | undefined;
-};
-
 // @beta
 export function useHierarchyLevelFiltering(props: UseHierarchyLevelFilteringProps): {
     applyFilter: (nodeId: string, info: PresentationInstanceFilterInfo) => void;
@@ -879,9 +885,6 @@ export interface UseInstanceFilterPropertyInfosProps {
 // @beta
 export function useNavigationPropertyEditingContext(imodel: IModelConnection, dataProvider: IContentDataProvider): NavigationPropertyEditorContextProps;
 
-// @internal (undocumented)
-export function useNodeHighlightingProps(filter: string | undefined, filteredNodeLoader?: ITreeNodeLoaderWithProvider<IFilteredPresentationTreeDataProvider>, activeMatchIndex?: number): HighlightableTreeProps | undefined;
-
 // @beta
 export function usePresentationTable<TColumn, TRow>(props: UsePresentationTableProps<TColumn, TRow>): UsePresentationTableResult<TColumn, TRow>;
 
@@ -914,9 +917,39 @@ export interface UsePresentationTableWithUnifiedSelectionResult<TColumns, TRow>
     selectedRows: TRow[];
 }
 
-// @public
+// @public @deprecated
 export function usePresentationTreeNodeLoader(props: PresentationTreeNodeLoaderProps): PresentationTreeNodeLoaderResult;
 
+// @public
+export function usePresentationTreeState<TEventHandler extends TreeEventHandler = TreeEventHandler>({ eventHandlerFactory, seedTreeModel, enableHierarchyAutoUpdate, filteringParams, ...dataProviderProps }: UsePresentationTreeStateProps<TEventHandler>): UsePresentationTreeStateResult<TEventHandler> | undefined;
+
+// @public
+export interface UsePresentationTreeStateProps<TEventHandler extends TreeEventHandler = TreeEventHandler> extends PresentationTreeDataProviderProps {
+    // @alpha
+    enableHierarchyAutoUpdate?: boolean;
+    eventHandlerFactory?: (props: PresentationTreeEventHandlerProps) => TEventHandler | undefined;
+    filteringParams?: {
+        filter: string;
+        activeMatchIndex?: number;
+    };
+    pagingSize: number;
+    seedTreeModel?: TreeModel;
+}
+
+// @public
+export interface UsePresentationTreeStateResult<TEventHandler extends TreeEventHandler = TreeEventHandler> {
+    eventHandler: TEventHandler;
+    filteringResult?: {
+        isFiltering: boolean;
+        filteredProvider?: IFilteredPresentationTreeDataProvider;
+        highlightProps?: HighlightableTreeProps;
+        matchesCount?: number;
+    };
+    nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;
+    // @alpha
+    onItemsRendered: (items: RenderedItemsRange) => void;
+}
+
 // @public
 export function usePropertyDataProviderWithUnifiedSelection(props: PropertyDataProviderWithUnifiedSelectionProps): UsePropertyDataProviderWithUnifiedSelectionResult;
 
@@ -926,7 +959,7 @@ export interface UsePropertyDataProviderWithUnifiedSelectionResult {
     numSelectedElements: number;
 }
 
-// @public
+// @public @deprecated
 export function useRulesetRegistration(ruleset: Ruleset): void;
 
 // @beta
@@ -935,7 +968,7 @@ export function useSchemaMetadataContext(): SchemaMetadataContext | undefined;
 // @beta
 export function useUnifiedSelectionContext(): UnifiedSelectionContext | undefined;
 
-// @public
+// @public @deprecated
 export function useUnifiedSelectionTreeEventHandler(props: UnifiedSelectionTreeEventHandlerParams): UnifiedSelectionTreeEventHandler;
 
 // @internal