[Hierarchies-react]: move to MUI

.changeset/early-facts-hide.md

@@ -0,0 +1,7 @@
+---
+"@itwin/presentation-hierarchies-react": minor
+---
+
+Moved the package to use `@mui/material` and `@stratakit/mui`.
+
+**Breaking:** Removed `@stratakit/foundations`, `@stratakit/icons` optional peer dependencies. Added `@mui/material` and `@stratakit/mui` as optional peer dependencies.

apps/test-app/frontend/package.json

@@ -41,8 +41,9 @@
     "@itwin/unified-selection": "workspace:*",
     "@itwin/unified-selection-react": "workspace:*",
     "@rolldown/plugin-babel": "catalog:build-tools",
-    "@stratakit/foundations": "catalog:stratakit",
+    "@mui/material": "catalog:stratakit",
     "@stratakit/icons": "catalog:stratakit",
+    "@stratakit/mui": "catalog:stratakit",
     "@stratakit/structures": "catalog:stratakit",
     "@tanstack/react-table": "^8.21.3",
     "@test-app/common": "workspace:*",

apps/test-app/frontend/src/components/app/App.tsx

@@ -29,7 +29,7 @@ import { createECSchemaProvider, createECSqlQueryExecutor, createIModelKey } fro
 import { createCachingECClassHierarchyInspector } from "@itwin/presentation-shared";
 import { createHiliteSetProvider, enableUnifiedSelectionSyncWithIModel } from "@itwin/unified-selection";
 import { UnifiedSelectionContextProvider } from "@itwin/unified-selection-react";
-import { Root } from "@stratakit/foundations";
+import { Root } from "@stratakit/mui";
 import { MyAppFrontend } from "../../frontendApi/MyAppFrontend";
 import { IModelSelector } from "../imodel-selector/IModelSelector";
 import { PropertiesWidget } from "../properties-widget/PropertiesWidget";
@@ -166,37 +166,32 @@ export function App() {
   }, [state.imodel]);
 
   return (
-    <ThemeProvider
-      theme={"light"}
-      future={{ themeBridge: true }}
-      as={Root}
-      colorScheme={"light"}
-      synchronizeColorScheme
-      density="dense"
-    >
-      <UnifiedSelectionContextProvider storage={MyAppFrontend.selectionStorage}>
-        <div className="app">
-          <div className="app-header">
-            <h2>{IModelApp.localization.getLocalizedString("Sample:welcome-message")}</h2>
-          </div>
-          <div className="app-pickers">
-            <IModelSelector onIModelSelected={onIModelSelected} activeIModelPath={state.imodelPath} />
-            <RulesetSelector onRulesetSelected={onRulesetSelected} activeRulesetId={state.rulesetId} />
-            <UnitSystemSelector
-              selectedUnitSystem={state.activeUnitSystem}
-              onUnitSystemSelected={onUnitSystemSelected}
-            />
-            <ToggleSwitch
-              label="Persist settings"
-              labelPosition="right"
-              checked={state.persistSettings}
-              onChange={onPersistSettingsValueChange}
-            />
+    <Root colorScheme={"light"}>
+      <ThemeProvider theme={"light"} future={{ themeBridge: true }}>
+        <UnifiedSelectionContextProvider storage={MyAppFrontend.selectionStorage}>
+          <div className="app">
+            <div className="app-header">
+              <h2>{IModelApp.localization.getLocalizedString("Sample:welcome-message")}</h2>
+            </div>
+            <div className="app-pickers">
+              <IModelSelector onIModelSelected={onIModelSelected} activeIModelPath={state.imodelPath} />
+              <RulesetSelector onRulesetSelected={onRulesetSelected} activeRulesetId={state.rulesetId} />
+              <UnitSystemSelector
+                selectedUnitSystem={state.activeUnitSystem}
+                onUnitSystemSelected={onUnitSystemSelected}
+              />
+              <ToggleSwitch
+                label="Persist settings"
+                labelPosition="right"
+                checked={state.persistSettings}
+                onChange={onPersistSettingsValueChange}
+              />
+            </div>
+            {state.imodel ? <IModelComponents imodel={state.imodel} rulesetId={state.rulesetId} /> : null}
           </div>
-          {state.imodel ? <IModelComponents imodel={state.imodel} rulesetId={state.rulesetId} /> : null}
-        </div>
-      </UnifiedSelectionContextProvider>
-    </ThemeProvider>
+        </UnifiedSelectionContextProvider>
+      </ThemeProvider>
+    </Root>
   );
 }
 

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

@@ -29,7 +29,7 @@ import { ModelsTreeDefinition } from "@itwin/presentation-models-tree";
 import { createCachingECClassHierarchyInspector } from "@itwin/presentation-shared";
 import { Selectable, Selectables } from "@itwin/unified-selection";
 import { useUnifiedSelectionContext } from "@itwin/unified-selection-react";
-import { Icon } from "@stratakit/foundations";
+import { Icon } from "@stratakit/mui";
 import { MyAppFrontend } from "../../frontendApi/MyAppFrontend";
 import { TreeRendererWithFilterAction } from "./TreeRendererWithFilterAction";
 

packages/hierarchies-react/package.json

@@ -66,7 +66,7 @@
     "@itwin/presentation-hierarchies": "workspace:*",
     "@itwin/presentation-shared": "workspace:*",
     "@itwin/unified-selection": "workspace:^",
-    "@stratakit/bricks": "catalog:stratakit",
+    "@stratakit/icons": "catalog:stratakit",
     "@stratakit/structures": "catalog:stratakit",
     "@tanstack/react-virtual": "^3.13.24",
     "classnames": "catalog:react",
@@ -76,25 +76,25 @@
     "rxjs": "catalog:rxjs"
   },
   "peerDependencies": {
-    "@stratakit/foundations": "^0.4.7",
-    "@stratakit/icons": "^0.3.1",
+    "@mui/material": "^9.0.0",
+    "@stratakit/mui": "^0.5.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
-    "@stratakit/foundations": {
+    "@mui/material": {
       "optional": true
     },
-    "@stratakit/icons": {
+    "@stratakit/mui": {
       "optional": true
     }
   },
   "devDependencies": {
     "@itwin/build-tools": "catalog:build-tools",
     "@itwin/eslint-plugin": "catalog:build-tools",
+    "@mui/material": "catalog:stratakit",
     "@rolldown/plugin-babel": "catalog:build-tools",
-    "@stratakit/foundations": "catalog:stratakit",
-    "@stratakit/icons": "catalog:stratakit",
+    "@stratakit/mui": "catalog:stratakit",
     "@testing-library/dom": "catalog:test-tools",
     "@testing-library/react": "catalog:test-tools",
     "@testing-library/user-event": "catalog:test-tools",

packages/hierarchies-react/src/presentation-hierarchies-react/stratakit/ErrorItemRenderer.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import { Anchor, Text } from "@stratakit/bricks";
+import { Link, Typography } from "@mui/material";
 import { unstable_ErrorRegion as ErrorRegion } from "@stratakit/structures";
 import { MAX_LIMIT_OVERRIDE } from "../internal/Utils.js";
 import { useTranslation } from "../LocalizationContext.js";
@@ -123,11 +123,11 @@ function ErrorItemContainer({ treeNode, message, actions, scrollToElement }: Err
       actions={actions
         ?.filter(({ condition }) => condition())
         .map(({ label, action }) => (
-          <Text key={label} variant="body-sm">
-            <Anchor onClick={action} render={<button />}>
+          <Typography key={label} variant="caption" component="span" sx={{ display: "block" }}>
+            <Link component="button" type="button" onClick={action}>
               {label}
-            </Anchor>
-          </Text>
+            </Link>
+          </Typography>
         ))}
     />
   );
@@ -146,9 +146,15 @@ function MessageWithLink({ linkLabel, scrollToElement, message }: MessageWithLin
   return (
     <div>
       {firstPart}{" "}
-      <Anchor onClick={scrollToElement} render={<button />}>
+      <Link
+        component="button"
+        type="button"
+        onClick={scrollToElement}
+        variant="caption"
+        sx={{ verticalAlign: "baseline" }}
+      >
         {linkLabel}
-      </Anchor>
+      </Link>
       {secondPart ? " " : ""}
       {secondPart ? secondPart : null}
     </div>

packages/hierarchies-react/src/presentation-hierarchies-react/stratakit/RootErrorRenderer.tsx

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import { Button, Text } from "@stratakit/bricks";
-import { Icon } from "@stratakit/foundations";
+import { Button, Typography } from "@mui/material";
+import { Icon } from "@stratakit/mui";
 import { useTranslation } from "../LocalizationContext.js";
 
 import errorSvg from "@stratakit/icons/status-error.svg";
@@ -73,14 +73,14 @@ function RootErrorContainer({ actions, message }: RootErrorContainerProps) {
       }}
     >
       <Icon href={errorSvg} size="large" />
-      <Text variant={"body-sm"} style={{ textAlign: "center" }}>
+      <Typography variant="caption" style={{ textAlign: "center" }}>
         {message}
-      </Text>
+      </Typography>
       {actions
         ?.filter(({ condition }) => condition())
         .map((action) => {
           return (
-            <Button key={action.label} onClick={() => action.action()}>
+            <Button key={action.label} onClick={() => action.action()} size="small">
               {action.label}
             </Button>
           );

packages/hierarchies-react/src/presentation-hierarchies-react/stratakit/TreeAction.tsx

@@ -4,8 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { memo } from "react";
-import { DropdownMenu, Tree } from "@stratakit/structures";
+import { ListItemIcon, MenuItem, Typography } from "@mui/material";
+import { Icon } from "@stratakit/mui";
+import { Tree } from "@stratakit/structures";
 
+import type React from "react";
 import type { ComponentPropsWithoutRef, NamedExoticComponent } from "react";
 
 /**
@@ -63,7 +66,13 @@ export const TreeActionBase: NamedExoticComponent<TreeActionBaseProps> = memo(fu
   }
 
   if (variant === "context-menu") {
-    return <DropdownMenu.Item {...actionProps} />;
+    const { label, icon, onClick } = actionProps;
+    return (
+      <MenuItem dense onClick={onClick as unknown as React.MouseEventHandler<HTMLLIElement>}>
+        {icon ? <ListItemIcon>{typeof icon === "string" ? <Icon href={icon} /> : icon}</ListItemIcon> : null}
+        <Typography variant="caption">{label}</Typography>
+      </MenuItem>
+    );
   }
 
   return <Tree.ItemAction {...actionProps} dot={dot} visible={variant === "inline" ? visible : undefined} />;