iTwin · MartynasStrazdas · Jul 15, 2026 · Jul 2, 2026 · Jul 3, 2026 · Jul 3, 2026
@@ -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.
@@ -41,8 +41,10 @@
     "@itwin/unified-selection": "workspace:*",
     "@itwin/unified-selection-react": "workspace:*",
     "@rolldown/plugin-babel": "catalog:build-tools",
+    "@mui/material": "^9.0.0",
     "@stratakit/foundations": "catalog:stratakit",
     "@stratakit/icons": "catalog:stratakit",
+    "@stratakit/mui": "catalog:stratakit",
     "@stratakit/structures": "catalog:stratakit",
     "@tanstack/react-table": "^8.21.3",
     "@test-app/common": "workspace:*",

@@ -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,26 @@
     "rxjs": "catalog:rxjs"
   },
   "peerDependencies": {
-    "@stratakit/foundations": "^0.4.7",
-    "@stratakit/icons": "^0.3.1",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@mui/material": "^9.0.0",
+    "@stratakit/mui": "^0.5.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^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": "^9.0.0",
     "@rolldown/plugin-babel": "catalog:build-tools",
     "@stratakit/foundations": "catalog:stratakit",
-    "@stratakit/icons": "catalog:stratakit",
+    "@stratakit/mui": "^0.5.0",
     "@testing-library/dom": "catalog:test-tools",
     "@testing-library/react": "catalog:test-tools",
     "@testing-library/user-event": "catalog:test-tools",

@@ -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" onClick={action}>
               {label}
-            </Anchor>
-          </Text>
+            </Link>
+          </Typography>
         ))}
     />
   );
@@ -146,9 +146,9 @@ function MessageWithLink({ linkLabel, scrollToElement, message }: MessageWithLin
   return (
     <div>
       {firstPart}{" "}
-      <Anchor onClick={scrollToElement} render={<button />}>
+      <Link component="button" onClick={scrollToElement} variant="caption" sx={{ verticalAlign: "baseline" }}>
         {linkLabel}
-      </Anchor>
+      </Link>
       {secondPart ? " " : ""}
       {secondPart ? secondPart : null}
     </div>

@@ -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>
           );

@@ -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} />;

@@ -17,8 +17,19 @@ import {
   useRef,
   useState,
 } from "react";
-import { Description, IconButton, Spinner, Text, TextBox, VisuallyHidden } from "@stratakit/bricks";
-import { DropdownMenu, unstable_Popover as Popover, Tree } from "@stratakit/structures";
+import {
+  CircularProgress,
+  ClickAwayListener,
+  FormHelperText,
+  IconButton,
+  MenuList,
+  Paper,
+  Popper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { Icon } from "@stratakit/mui";
+import { unstable_Popover as Popover, Tree } from "@stratakit/structures";
 import { useTranslation } from "../LocalizationContext.js";
 import { TreeActionBase } from "./TreeAction.js";
 import { useTreeNodeRenameContext } from "./TreeNodeRenameAction.js";
@@ -187,32 +198,39 @@ export const StrataKitTreeNodeRenderer: FC<PropsWithRef<TreeNodeRendererProps &
             }}
           />
         </Popover>
-        <DropdownMenu.Provider
-          open={contextMenuProps !== undefined}
-          setOpen={(open) => {
-            if (!open) {
-              setContextMenuProps(undefined);
-            }
-          }}
-          key={`${node.id}-${contextMenuProps?.position.x ?? ""}-${contextMenuProps?.position.y ?? ""}`}
-        >
-          {contextMenuProps ? (
-            <DropdownMenu.Button
-              render={(renderProps) => (
-                <div style={{ position: "fixed", top: contextMenuProps.position.y, left: contextMenuProps.position.x }}>
-                  <VisuallyHidden {...renderProps}>{translate("more")}</VisuallyHidden>
-                </div>
-              )}
-            />
-          ) : null}
-          {/* `autoFocus` prop is coming from ariakit and is not native HTML `autoFocus` prop. */}
-          {/* `focusable` is needed for `autoFocus` to work. StrataKit exposes only `autoFocus` and does not set `focusable` internally. */}
-          {/* eslint-disable jsx-a11y/no-autofocus */}
-          {/* @ts-expect-error focusable is passed through */}
-          <DropdownMenu.Content focusable autoFocus={true}>
-            {contextMenuProps?.actions}
-          </DropdownMenu.Content>
-        </DropdownMenu.Provider>
+        {contextMenuProps && (
+          <Popper
+            open
+            anchorEl={{
+              getBoundingClientRect: () =>
+                DOMRect.fromRect({
+                  x: contextMenuProps.position.x,
+                  y: contextMenuProps.position.y,
+                  width: 0,
+                  height: 0,
+                }),
+            }}
+            placement="bottom-start"
+            style={{ zIndex: 1300 }}
+          >
+            <ClickAwayListener mouseEvent="onMouseDown" onClickAway={() => setContextMenuProps(undefined)}>
+              <Paper
+                elevation={8}
+                sx={{ bgcolor: "background.paper" }}
+                onKeyDown={(e) => e.key === "Escape" && setContextMenuProps(undefined)}
+              >
+                <MenuList
+                  dense
+                  autoFocusItem
+                  aria-label={translate("more")}
+                  onClick={() => setContextMenuProps(undefined)}
+                >
+                  {contextMenuProps.actions}
+                </MenuList>
+              </Paper>
+            </ClickAwayListener>
+          </Popper>
+        )}
       </>
     );
   }),
@@ -225,15 +243,14 @@ export const PlaceholderNode: FC<
   >
 > = memo(
   forwardRef<HTMLElement, Pick<StrataKitTreeItemProps, "style" | "aria-level" | "aria-posinset" | "aria-setsize">>(
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     function PlaceholderNode({ ...props }, forwardedRef) {
       const translate = useTranslation();
       return (
         <Tree.Item
           {...props}
           ref={forwardedRef}
           label={translate("loading")}
-          unstable_decorations={<Spinner size={"small"} title={translate("loading")} />}
+          unstable_decorations={<CircularProgress size={20} title={translate("loading")} />}
         />
       );
     },
@@ -288,37 +305,37 @@ function LabelEditor({
   return (
     <div key={initialLabel} className="phr-node-label-editor">
       <div className="phr-node-label-editor-input-row">
-        <TextBox.Root style={{ width: "100%" }} className={hasError ? "with-error" : undefined}>
-          <TextBox.Input
-            id={inputId}
-            ref={inputRef}
-            aria-label={translate("newLabel")}
-            value={newLabelValue}
-            onChange={(event) => {
-              setNewLabelValue(event.target.value);
-              setHasError(false);
-            }}
-            onKeyUp={(event) => {
-              if (event.key === "Enter") {
-                handleLabelChange();
-              } else if (event.key === "Escape") {
-                cancelLabelChange();
-              }
-            }}
-          />
-        </TextBox.Root>
-        <IconButton icon={dismissSvg} label={translate("cancel")} onClick={cancelLabelChange} />
-        <IconButton
-          icon={checkmarkSvg}
-          label={translate("confirm")}
-          onClick={handleLabelChange}
-          disabled={!canRename}
+        <TextField
+          fullWidth
+          error={hasError}
+          size="small"
+          id={inputId}
+          inputRef={inputRef}
+          slotProps={{ htmlInput: { "aria-label": translate("newLabel") } }}
+          value={newLabelValue}
+          onChange={(event) => {
+            setNewLabelValue(event.target.value);
+            setHasError(false);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === "Enter") {
+              handleLabelChange();
+            } else if (event.key === "Escape") {
+              cancelLabelChange();
+            }
+          }}
         />
+        <IconButton aria-label={translate("cancel")} onClick={cancelLabelChange} size="small">
+          <Icon href={dismissSvg} />
+        </IconButton>
+        <IconButton aria-label={translate("confirm")} onClick={handleLabelChange} disabled={!canRename} size="small">
+          <Icon href={checkmarkSvg} />
+        </IconButton>
       </div>
       {labelValidationHint !== undefined ? (
-        <Description id={inputId} tone={hasError ? "critical" : "neutral"} style={{ display: "flex" }}>
-          <Text variant="caption-lg">{labelValidationHint}</Text>
-        </Description>
+        <FormHelperText id={inputId} error={hasError} style={{ display: "flex" }}>
+          <Typography variant="caption">{labelValidationHint}</Typography>
+        </FormHelperText>
       ) : undefined}
     </div>
   );

@@ -6,7 +6,7 @@
 import axe from "axe-core";
 import { expect } from "vitest";
 import { render } from "vitest-browser-react";
-import { Root } from "@stratakit/foundations";
+import { Root } from "@stratakit/mui";
 import { LocalizationContextProvider } from "../../presentation-hierarchies-react/LocalizationContext.js";
 import localeEn from "../../public/locales/en/PresentationHierarchies_1.0.json" with { type: "json" };
 

@@ -31,9 +31,13 @@ function createDefaultProps(overrides?: Partial<StrataKitTreeRendererProps>): St
   };
 }
 
-async function renderTree(props: StrataKitTreeRendererProps, colorScheme: "light" | "dark") {
+async function renderTree(
+  props: StrataKitTreeRendererProps,
+  colorScheme: "light" | "dark",
+  options?: { height?: number },
+) {
   return renderWithTheme(
-    <div style={{ height: 100, width: 300 }}>
+    <div style={{ height: options?.height ?? 100, width: 300 }}>
       <StrataKitTreeRenderer {...props} />
     </div>,
     { colorScheme },
@@ -172,6 +176,7 @@ COLOR_SCHEMES.forEach((colorScheme) => {
     });
 
     it("renders tree with context menu actions", async () => {
+      await page.viewport(300, 200);
       const props = createDefaultProps({
         rootNodes: [
           createTreeNode({ id: "node-1", label: "Node with context menu" }),
@@ -182,11 +187,10 @@ COLOR_SCHEMES.forEach((colorScheme) => {
           <TreeActionBase key="action-2" label="Context Action 2" icon={placeholderSvg} onClick={vi.fn()} />,
         ],
       });
-      const { locator } = await renderTree(props, colorScheme);
+      const { locator } = await renderTree(props, colorScheme, { height: 200 });
       await locator.getByText("Node with context menu").click({ button: "right" });
       await expect.element(page.getByText("Context Action 1")).toBeVisible();
-      // `aria-required-children` is being triggered because anchor element of context menu is rendered next to `treeitem` under `tree` and
-      // it expects that `tree` contains only `treeitem` children.
+      await expect.element(page.getByText("Context Action 2")).toBeVisible();
       await validateSnapshot(locator, { skipA11y: ["aria-hidden-focus", "aria-required-children"] });
     });
 

diff --git a/...reeErrorRenderer-/-renders-with-result-set-too-large-error-1-chromium-linux.png b/...reeErrorRenderer-/-renders-with-result-set-too-large-error-1-chromium-linux.png
diff --git a/...r-/-renders-with-result-set-too-large-error-with-filtering-1-chromium-linux.png b/...r-/-renders-with-result-set-too-large-error-with-filtering-1-chromium-linux.png
@@ -25,6 +25,9 @@ export default defineConfig({
       },
       {
         plugins: [react()],
+        optimizeDeps: {
+          include: ["@mui/material"],
+        },
         test: {
           name: "hierarchies-react-components",
           include: ["src/test/components/**/*.test.{ts,tsx}"],