@dxos/react-ui-list 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,36 +27,36 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.fd6878d",
-    "@dxos/echo-schema": "0.8.4-main.fd6878d",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/live-object": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-types": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/debug": "0.8.4-main.fffef41",
+    "@dxos/echo": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/log": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-types": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41",
+    "@dxos/live-object": "0.8.4-main.fffef41",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Accordion/Accordion.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Accordion } from './Accordion';
 
@@ -24,9 +22,9 @@ const items: TestItem[] = Array.from({ length: 10 }, (_, i) => ({
 
 const DefaultStory = () => {
   return (
-    <Accordion.Root<TestItem> items={items} classNames='w-[40rem]'>
+    <Accordion.Root<TestItem> items={items} classNames='is-[40rem]'>
       {({ items }) => (
-        <div className='flex flex-col w-full border-y border-separator divide-y divide-separator'>
+        <div className='flex flex-col is-full border-y border-separator divide-y divide-separator'>
           {items.map((item) => (
             <Accordion.Item key={item.id} item={item} classNames='border-x border-separator'>
               <Accordion.ItemHeader>{item.name}</Accordion.ItemHeader>
@@ -41,11 +39,11 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof Accordion> = {
+const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'flex justify-center' })],
-};
+  decorators: [withTheme, withLayout({ container: 'column' })],
+} satisfies Meta<typeof Accordion>;
 
 export default meta;
 

package/src/components/Accordion/AccordionItem.tsx

@@ -19,7 +19,9 @@ type AccordionItemContext<T extends ListItemRecord> = {
   item: T;
 };
 
-export const [AccordionItemProvider, useAccordionItemContext] =
+// TODO(wittjosiah): This seems to be conflicting with something in the bundle.
+//  Perhaps @radix-ui/react-accordion?
+export const [AccordionItemProvider, useDxAccordionItemContext] =
   createContext<AccordionItemContext<any>>(ACCORDION_ITEM_NAME);
 
 export type AccordionItemProps<T extends ListItemRecord> = ThemedClassName<PropsWithChildren<{ item: T }>>;

package/src/components/List/List.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { live } from '@dxos/live-object';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
@@ -19,13 +17,6 @@ import { TestItemSchema, type TestItemType, createList } from './testing';
 // TODO(burdon): var-icon-size.
 const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
 
-const meta: Meta = {
-  title: 'ui/react-ui-list/List',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
-
-export default meta;
-
 const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   const handleSelect = (item: TestItemType) => {
     console.log('select', item);
@@ -42,13 +33,13 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
     <List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
       {({ items }) => (
         <>
-          <div className='flex flex-col w-full'>
+          <div className='flex flex-col is-full'>
             <div role='none' className={grid}>
               <div />
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='w-full h-full overflow-auto'>
+            <div role='list' className='is-full bs-full overflow-auto'>
               {items?.map((item) => (
                 <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
                   <List.ItemDragHandle />
@@ -82,7 +73,7 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
-        <div role='list' className='w-full h-full overflow-auto'>
+        <div role='list' className='is-full bs-full overflow-auto'>
           {items?.map((item) => (
             <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
               <List.ItemDragHandle />
@@ -98,7 +89,18 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
 
 const list = live(createList(100));
 
-export const Default: StoryObj<ListRootProps<TestItemType>> = {
+const meta = {
+  title: 'ui/react-ui-list/List',
+  component: List.Root,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof List.Root>;
+
+export default meta;
+
+export const Default: StoryObj<typeof DefaultStory> = {
   render: DefaultStory,
   args: {
     items: list.items,
@@ -106,7 +108,7 @@ export const Default: StoryObj<ListRootProps<TestItemType>> = {
   },
 };
 
-export const Simple: StoryObj<ListRootProps<TestItemType>> = {
+export const Simple: StoryObj<typeof SimpleStory> = {
   render: SimpleStory,
   args: {
     items: list.items,

package/src/components/List/ListItem.tsx

@@ -170,12 +170,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <div
-        ref={ref}
-        role='listitem'
-        className={mx('flex overflow-hidden relative', classNames, stateStyles[state.type])}
-        {...props}
-      >
+      <div ref={ref} role='listitem' className={mx('flex relative', classNames, stateStyles[state.type])} {...props}>
         {children}
         {state.type === 'is-dragging-over' && state.closestEdge && (
           <NaturalListItem.DropIndicator edge={state.closestEdge} />

package/src/components/List/testing.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { ObjectId } from '@dxos/echo-schema';
+import { ObjectId } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({

package/src/components/Tree/Tree.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
@@ -12,61 +10,63 @@ import React, { useEffect } from 'react';
 import { type Live, live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { Path } from '../../util';
 
 import { type TestItem, createTree, updateState } from './testing';
-import { Tree } from './Tree';
+import { Tree, type TreeProps } from './Tree';
 import { type TreeData } from './TreeItem';
 
 faker.seed(1234);
 
+const DefaultStory = (props: TreeProps) => {
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null) {
+          updateState({
+            state: tree,
+            instruction,
+            source: source.data as TreeData,
+            target: target.data as TreeData,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return <Tree {...props} />;
+};
+
 const tree = live<TestItem>(createTree());
 const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof Tree<TestItem>> = {
+const meta = {
   title: 'ui/react-ui-list/Tree',
+
+  decorators: [withTheme],
   component: Tree,
-  decorators: [withTheme, withLayout()],
-  render: (args) => {
-    useEffect(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
-        onDrop: ({ location, source }) => {
-          // Didn't drop on anything.
-          if (!location.current.dropTargets.length) {
-            return;
-          }
-
-          const target = location.current.dropTargets[0];
-
-          const instruction: Instruction | null = extractInstruction(target.data);
-          if (instruction !== null) {
-            updateState({
-              state: tree,
-              instruction,
-              source: source.data as TreeData,
-              target: target.data as TreeData,
-            });
-          }
-        },
-      });
-    }, []);
-
-    return <Tree {...args} />;
-  },
+  render: DefaultStory,
   args: {
     id: tree.id,
-    useItems: (testItem?: TestItem) => {
-      return testItem?.items ?? tree.items;
+    useItems: (parent?: TestItem) => {
+      return parent?.items ?? tree.items;
     },
-    getProps: (testItem: TestItem) => ({
-      id: testItem.id,
-      label: testItem.name,
-      icon: testItem.icon,
-      ...((testItem.items?.length ?? 0) > 0 && {
-        parentOf: testItem.items!.map(({ id }) => id),
+    getProps: (parent: TestItem) => ({
+      id: parent.id,
+      label: parent.name,
+      icon: parent.icon,
+      ...((parent.items?.length ?? 0) > 0 && {
+        parentOf: parent.items!.map(({ id }) => id),
       }),
     }),
     isOpen: (_path: string[]) => {
@@ -105,13 +105,15 @@ const meta: Meta<typeof Tree<TestItem>> = {
       object!.current = current;
     },
   },
-};
+} satisfies Meta<typeof Tree<TestItem>>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const Draggable: StoryObj<typeof Tree> = {
+export const Draggable: Story = {
   args: {
     draggable: true,
   },

package/src/components/Tree/Tree.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type HasId } from '@dxos/echo-schema';
+import { type HasId } from '@dxos/echo/internal';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
 import { type TreeContextType, TreeProvider } from './TreeContext';
@@ -16,7 +16,10 @@ export type TreeProps<T extends HasId = any, O = any> = {
   id: string;
 } & TreeContextType<T, O> &
   Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
-  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
+  Pick<
+    TreeItemProps<T>,
+    'draggable' | 'renderColumns' | 'canDrop' | 'canSelect' | 'onOpenChange' | 'onSelect' | 'levelOffset'
+  >;
 
 export const Tree = <T extends HasId = any, O = any>({
   root,
@@ -32,6 +35,7 @@ export const Tree = <T extends HasId = any, O = any>({
   levelOffset,
   renderColumns,
   canDrop,
+  canSelect,
   onOpenChange,
   onSelect,
 }: TreeProps<T, O>) => {
@@ -60,6 +64,7 @@ export const Tree = <T extends HasId = any, O = any>({
             draggable={draggable}
             renderColumns={renderColumns}
             canDrop={canDrop}
+            canSelect={canSelect}
             onOpenChange={onOpenChange}
             onSelect={onSelect}
           />

package/src/components/Tree/TreeContext.tsx

@@ -11,10 +11,11 @@ export type TreeItemDataProps = {
   id: string;
   label: Label;
   parentOf?: string[];
-  icon?: string;
-  disabled?: boolean;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
+  disabled?: boolean;
   testId?: string;
 };
 

package/src/components/Tree/TreeItem.tsx

@@ -10,13 +10,14 @@ import {
   attachInstruction,
   extractInstruction,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { type FC, type KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type HasId } from '@dxos/echo-schema';
+import { type HasId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { TreeItem as NaturalTreeItem, Treegrid } from '@dxos/react-ui';
 import {
+  ghostFocusWithin,
   ghostHover,
   hoverableControls,
   hoverableFocusedKeyboardControls,
@@ -28,11 +29,11 @@ import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
 
-type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
-
 const hoverableDescriptionIcons =
   '[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]';
 
+type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
+
 export const TreeDataSchema = Schema.Struct({
   id: Schema.String,
   path: Schema.Array(Schema.String),
@@ -58,6 +59,7 @@ export type TreeItemProps<T extends HasId = any> = {
   draggable?: boolean;
   renderColumns?: ColumnRenderer<T>;
   canDrop?: (params: { source: TreeData; target: TreeData }) => boolean;
+  canSelect?: (params: { item: T; path: string[] }) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
 };
@@ -65,13 +67,14 @@ export type TreeItemProps<T extends HasId = any> = {
 const RawTreeItem = <T extends HasId = any>({
   item,
   path: _path,
+  levelOffset = 2,
   last,
   draggable: _draggable,
   renderColumns: Columns,
   canDrop,
+  canSelect,
   onOpenChange,
   onSelect,
-  levelOffset = 2,
 }: TreeItemProps<T>) => {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -83,13 +86,14 @@ const RawTreeItem = <T extends HasId = any>({
 
   const { useItems, getProps, isOpen, isCurrent } = useTree();
   const items = useItems(item);
-  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
+  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
   const path = useMemo(() => [..._path, id], [_path, id]);
   const open = isOpen(path, item);
   const current = isCurrent(path, item);
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
+  const canSelectItem = canSelect?.({ item, path }) ?? true;
 
   const cancelExpand = useCallback(() => {
     if (cancelExpandRef.current) {
@@ -181,38 +185,37 @@ const RawTreeItem = <T extends HasId = any>({
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
 
-  const handleOpenChange = useCallback(
+  const handleOpenToggle = useCallback(
     () => onOpenChange?.({ item, path, open: !open }),
     [onOpenChange, item, path, open],
   );
 
   const handleSelect = useCallback(
     (option = false) => {
-      if (isBranch) {
-        handleOpenChange();
-      } else {
+      // If the item is a branch, toggle it if:
+      //   - also holding down the option key
+      //   - or the item is currently selected
+      if (isBranch && (option || current)) {
+        handleOpenToggle();
+      } else if (canSelectItem) {
+        canSelect?.({ item, path });
         rowRef.current?.focus();
         onSelect?.({ item, path, current: !current, option });
       }
     },
-    [item, path, current, isBranch, handleOpenChange, onSelect],
+    [item, path, current, isBranch, canSelectItem, handleOpenToggle, onSelect],
   );
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
         case 'ArrowRight':
-          isBranch && !open && handleOpenChange();
-          break;
         case 'ArrowLeft':
-          isBranch && open && handleOpenChange();
-          break;
-        case ' ':
-          handleSelect(event.altKey);
+          isBranch && handleOpenToggle();
           break;
       }
     },
-    [isBranch, open, handleOpenChange, handleSelect],
+    [isBranch, open, handleOpenToggle, handleSelect],
   );
 
   return (
@@ -230,9 +233,10 @@ const RawTreeItem = <T extends HasId = any>({
           hoverableFocusedWithinControls,
           hoverableDescriptionIcons,
           ghostHover,
+          ghostFocusWithin,
           className,
         ]}
-        data-itemid={id}
+        data-object-id={id}
         data-testid={testId}
         // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
         //   without alerting the user (except for in the correct link element). See also:
@@ -244,26 +248,27 @@ const RawTreeItem = <T extends HasId = any>({
           setMenuOpen(true);
         }}
       >
-        <Treegrid.Cell
-          indent
-          classNames='relative grid grid-cols-subgrid col-[tree-row]'
+        <div
+          role='none'
+          className='indent relative grid grid-cols-subgrid col-[tree-row]'
           style={paddingIndentation(level)}
         >
-          <div role='none' className='flex items-center'>
-            <TreeItemToggle isBranch={isBranch} open={open} onToggle={handleOpenChange} />
+          <Treegrid.Cell classNames='flex items-center'>
+            <TreeItemToggle isBranch={isBranch} open={open} onClick={handleOpenToggle} />
             <TreeItemHeading
-              ref={buttonRef}
-              label={label}
-              icon={icon}
-              className={headingClassName}
               disabled={disabled}
               current={current}
+              label={label}
+              className={headingClassName}
+              icon={icon}
+              iconHue={iconHue}
               onSelect={handleSelect}
+              ref={buttonRef}
             />
-          </div>
+          </Treegrid.Cell>
           {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
           {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}
-        </Treegrid.Cell>
+        </div>
       </Treegrid.Row>
       {open &&
         items.map((item, index) => (
@@ -275,6 +280,7 @@ const RawTreeItem = <T extends HasId = any>({
             draggable={_draggable}
             renderColumns={Columns}
             canDrop={canDrop}
+            canSelect={canSelect}
             onOpenChange={onOpenChange}
             onSelect={onSelect}
           />

package/src/components/Tree/TreeItemHeading.tsx

@@ -6,22 +6,25 @@ import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallba
 
 import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
+import { getStyles } from '@dxos/react-ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.
-export type NavTreeItemHeadingProps = {
+export type TreeItemHeadingProps = {
   label: Label;
-  icon?: string;
   className?: string;
+  icon?: string;
+  iconHue?: string;
   disabled?: boolean;
   current?: boolean;
   onSelect?: (option: boolean) => void;
 };
 
 export const TreeItemHeading = memo(
-  forwardRef<HTMLButtonElement, NavTreeItemHeadingProps>(
-    ({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+  forwardRef<HTMLButtonElement, TreeItemHeadingProps>(
+    ({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
+      const styles = iconHue ? getStyles(iconHue) : undefined;
 
       const handleSelect = useCallback(
         (event: MouseEvent) => {
@@ -64,7 +67,7 @@ export const TreeItemHeading = memo(
             onKeyDown={handleButtonKeydown}
             {...(current && { 'aria-current': 'location' })}
           >
-            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames='mlb-1' />}
+            {icon && <Icon icon={icon ?? 'ph--placeholder--regular'} size={5} classNames={['mlb-1', styles?.icon]} />}
             <span className='flex-1 is-0 truncate text-start text-sm font-normal' data-tooltip>
               {toLocalizedString(label, t)}
             </span>