@dxos/react-ui-list 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/dist/lib/browser/index.mjs

@@ -72,7 +72,8 @@ import { createContext as createContext4 } from "@radix-ui/react-context";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React4, { forwardRef as forwardRef2, useCallback as useCallback2 } from "react";
 import { Button, Icon as Icon2, Popover, ScrollArea, useId } from "@dxos/react-ui";
-import { composable, composableProps, mx as mx4 } from "@dxos/ui-theme";
+import { composable, composableProps } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/ui-theme";
 
 // src/components/Picker/Picker.tsx
 import { Slot } from "@radix-ui/react-slot";
@@ -799,7 +800,7 @@ import { useControllableState as useControllableState2 } from "@radix-ui/react-u
 import React7, { useCallback as useCallback4 } from "react";
 import { List as List2, ListItem as ListItem2 } from "@dxos/react-list";
 import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
 var ROW_LIST_NAME = "RowList";
 var ROW_LIST_ROOT_NAME = "RowList.Root";
 var ROW_LIST_VIEWPORT_NAME = "RowList.Viewport";
@@ -1036,10 +1037,10 @@ var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
 
 // src/components/Tree/TreeItemHeading.tsx
 import React9, { forwardRef as forwardRef4, memo, useCallback as useCallback5 } from "react";
-import { Button as Button2, Icon as Icon4, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Button as Button2, Icon as Icon4, Tag, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
 import { getStyles } from "@dxos/ui-theme";
-var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label, className, icon, iconHue, disabled, current, count, modifiedCount, onSelect }, forwardedRef) => {
   const { t } = useTranslation2();
   const styles = iconHue ? getStyles(iconHue) : void 0;
   const handleSelect = useCallback5((event) => {
@@ -1067,7 +1068,7 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
     "data-testid": "treeItem.heading",
     variant: "ghost",
     classNames: [
-      "grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
+      "grow shrink min-w-0 justify-start gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
       "disabled:cursor-default disabled:opacity-100",
       className
     ],
@@ -1079,16 +1080,34 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef4(({ label,
     }
   }, icon && /* @__PURE__ */ React9.createElement(Icon4, {
     size: 5,
-    icon: icon ?? "ph--placeholder--regular",
+    icon: icon ?? "ph--circle-dashed--regular",
     classNames: [
       "my-1",
-      styles?.foreground
+      styles?.text
     ]
   }), /* @__PURE__ */ React9.createElement("span", {
-    className: "flex-1 w-0 truncate text-start font-normal",
+    className: "min-w-0 truncate text-start font-normal",
     "data-tooltip": true
-  }, toLocalizedString(label, t))));
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React9.createElement(CountBadge, {
+    count,
+    modifiedCount
+  })));
 }));
+var CountBadge = ({ count, modifiedCount }) => {
+  if (typeof modifiedCount === "number" && modifiedCount > 0) {
+    return /* @__PURE__ */ React9.createElement(Tag, {
+      palette: "rose",
+      classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
+    }, modifiedCount);
+  }
+  if (typeof count === "number") {
+    return /* @__PURE__ */ React9.createElement(Tag, {
+      palette: "neutral",
+      classNames: "shrink-0 text-center [min-inline-size:1.5rem] tabular-nums"
+    }, count);
+  }
+  return null;
+};
 
 // src/components/Tree/TreeItemToggle.tsx
 import React10, { forwardRef as forwardRef5, memo as memo2 } from "react";
@@ -1099,7 +1118,7 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef5(({ classN
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
     variant: "ghost",
-    density: "fine",
+    density: "md",
     classNames: [
       "h-full w-6 px-0",
       "[&_svg]:transition-transform [&_svg]:duration-200",
@@ -1142,7 +1161,7 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     pathProp,
     item.id
   ]);
-  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
+  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId, count, modifiedCount } = useAtomValue(itemPropsAtom(path));
   const childIds = useAtomValue(childIdsAtom(item.id));
   const open = useAtomValue(itemOpenAtom(path));
   const current = useAtomValue(itemCurrentAtom(path));
@@ -1394,6 +1413,8 @@ var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: dra
     className: headingClassName,
     icon,
     iconHue,
+    count,
+    modifiedCount,
     onSelect: handleSelect,
     ref: buttonRef
   })), Columns && /* @__PURE__ */ React11.createElement(Columns, {
@@ -1428,7 +1449,7 @@ var RawTreeItemById = ({ id, ...props }) => {
 var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+var Tree = ({ classNames, model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] minmax(0, 1fr) min-content [tree-row-end]", levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
   const childIds = useAtomValue2(model.childIds(rootId));
   const treePath = useMemo3(() => path ? [
     ...path,