@dxos/react-ui-list 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,33 +30,33 @@
     "@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.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-types": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@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.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

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

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Accordion } from './Accordion';
 
@@ -24,7 +24,7 @@ const DefaultStory = () => {
   return (
     <Accordion.Root<TestItem> items={items} classNames='w-[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>
@@ -42,10 +42,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'column',
-  },
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

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

@@ -33,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 />
@@ -73,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 />

package/src/components/Tree/TreeContext.tsx

@@ -14,7 +14,7 @@ export type TreeItemDataProps = {
   className?: string;
   headingClassName?: string;
   icon?: string;
-  iconClassName?: string;
+  iconHue?: string;
   disabled?: boolean;
   testId?: string;
 };

package/src/components/Tree/TreeItem.tsx

@@ -86,10 +86,7 @@ const RawTreeItem = <T extends HasId = any>({
 
   const { useItems, getProps, isOpen, isCurrent } = useTree();
   const items = useItems(item);
-  const { id, parentOf, label, className, headingClassName, icon, iconClassName, disabled, 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);
@@ -239,7 +236,7 @@ const RawTreeItem = <T extends HasId = any>({
           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:
@@ -264,7 +261,7 @@ const RawTreeItem = <T extends HasId = any>({
               label={label}
               className={headingClassName}
               icon={icon}
-              iconClassName={iconClassName}
+              iconHue={iconHue}
               onSelect={handleSelect}
               ref={buttonRef}
             />

package/src/components/Tree/TreeItemHeading.tsx

@@ -6,6 +6,7 @@ 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.
@@ -13,7 +14,7 @@ export type TreeItemHeadingProps = {
   label: Label;
   className?: string;
   icon?: string;
-  iconClassName?: string;
+  iconHue?: string;
   disabled?: boolean;
   current?: boolean;
   onSelect?: (option: boolean) => void;
@@ -21,8 +22,9 @@ export type TreeItemHeadingProps = {
 
 export const TreeItemHeading = memo(
   forwardRef<HTMLButtonElement, TreeItemHeadingProps>(
-    ({ label, className, icon, iconClassName, disabled, current, onSelect }, forwardedRef) => {
+    ({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
       const { t } = useTranslation();
+      const styles = iconHue ? getStyles(iconHue) : undefined;
 
       const handleSelect = useCallback(
         (event: MouseEvent) => {
@@ -65,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', iconClassName]} />}
+            {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>