@dxos/react-ui-list 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/dist/lib/browser/index.mjs

@@ -36,7 +36,7 @@ var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value,
 
 // src/components/Accordion/AccordionItem.tsx
 var ACCORDION_ITEM_NAME = "AccordionItem";
-var [AccordionItemProvider, useAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
+var [AccordionItemProvider, useDxAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
 var AccordionItem = ({ children, classNames, item }) => {
   var _effect = _useSignals2();
   try {
@@ -97,10 +97,10 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { createContext as createContext4 } from "@radix-ui/react-context";
-import React4, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import React4, { useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
-import { Icon as Icon2, ListItem as NaturalListItem } from "@dxos/react-ui";
+import { IconButton, ListItem as NaturalListItem, useTranslation } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // src/components/List/ListRoot.tsx
@@ -200,7 +200,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
       const element = ref.current;
       invariant(element, void 0, {
         F: __dxlog_file,
-        L: 93,
+        L: 98,
         S: void 0,
         A: [
           "element",
@@ -309,67 +309,54 @@ var ListItem = ({ children, classNames, item, ...props }) => {
     return /* @__PURE__ */ React4.createElement(ListItemProvider, {
       item,
       dragHandleRef
-    }, /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "relative"
     }, /* @__PURE__ */ React4.createElement("div", {
       ref,
       role: "listitem",
-      className: mx3("flex overflow-hidden", classNames, stateStyles[state.type]),
+      className: mx3("flex relative", classNames, stateStyles[state.type]),
       ...props
-    }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+    }, children, state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
       edge: state.closestEdge
     })));
   } finally {
     _effect.f();
   }
 };
-var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("button", {
-      ref: forwardedRef,
-      className: mx3("flex items-center justify-center", classNames),
-      ...props
-    }, /* @__PURE__ */ React4.createElement(Icon2, {
-      icon,
-      classNames: "cursor-pointer",
-      size: 4
-    }));
-  } finally {
-    _effect.f();
-  }
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
+var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", label, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { state } = useListContext("DELETE_BUTTON");
     const isDisabled = state.type !== "idle" || disabled;
+    const { t } = useTranslation("os");
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      iconOnly: true,
+      variant: "ghost",
+      ...props,
       icon,
       disabled: isDisabled,
+      label: label ?? t("delete label"),
       classNames: [
         classNames,
         autoHide && disabled && "hidden"
-      ],
-      ...props
+      ]
     });
   } finally {
     _effect.f();
   }
 };
-var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
+var ListItemButton = ({ autoHide = true, iconOnly = true, variant = "ghost", classNames, disabled, ...props }) => {
   var _effect = _useSignals4();
   try {
     const { state } = useListContext("ITEM_BUTTON");
     const isDisabled = state.type !== "idle" || disabled;
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      ...props,
       disabled: isDisabled,
+      iconOnly,
+      variant,
       classNames: [
         classNames,
         autoHide && disabled && "hidden"
-      ],
-      ...props
+      ]
     });
   } finally {
     _effect.f();
@@ -379,7 +366,11 @@ var ListItemDragHandle = ({ disabled }) => {
   var _effect = _useSignals4();
   try {
     const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
+    const { t } = useTranslation("os");
     return /* @__PURE__ */ React4.createElement(IconButton, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("drag handle label"),
       ref: dragHandleRef,
       icon: "ph--dots-six-vertical--regular",
       disabled
@@ -425,8 +416,7 @@ var List = {
   ItemDragHandle: ListItemDragHandle,
   ItemDeleteButton: ListItemDeleteButton,
   ItemButton: ListItemButton,
-  ItemTitle: ListItemTitle,
-  IconButton
+  ItemTitle: ListItemTitle
 };
 
 // src/components/Tree/Tree.tsx
@@ -446,22 +436,29 @@ import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking"
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-import { Schema } from "effect";
+import * as Schema from "effect/Schema";
 import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
-import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
+import { TreeItem as NaturalTreeItem, Treegrid } from "@dxos/react-ui";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls } from "@dxos/react-ui-theme";
+
+// src/components/Tree/helpers.ts
+var DEFAULT_INDENTATION = 8;
+var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
+  paddingInlineStart: `${(level - 1) * indentation}px`
+});
 
 // src/components/Tree/TreeItemHeading.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
-import { Button, Icon as Icon3, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import React5, { forwardRef, memo, useCallback as useCallback2 } from "react";
+import { Button, Icon as Icon2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+import { getStyles } from "@dxos/react-ui-theme";
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label, className, icon, iconHue, disabled, current, onSelect }, forwardedRef) => {
   var _effect = _useSignals5();
   try {
-    const { t } = useTranslation();
+    const { t } = useTranslation2();
+    const styles = iconHue ? getStyles(iconHue) : void 0;
     const handleSelect = useCallback2((event) => {
       onSelect?.(event.altKey);
     }, [
@@ -487,17 +484,24 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
       "data-testid": "treeItem.heading",
       variant: "ghost",
       density: "fine",
-      classNames: mx4("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
+      classNames: [
+        "grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent",
+        "disabled:cursor-default disabled:opacity-100",
+        className
+      ],
       disabled,
       onClick: handleSelect,
       onKeyDown: handleButtonKeydown,
       ...current && {
         "aria-current": "location"
       }
-    }, icon && /* @__PURE__ */ React5.createElement(Icon3, {
+    }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
       icon: icon ?? "ph--placeholder--regular",
       size: 5,
-      classNames: "mlb-1"
+      classNames: [
+        "mlb-1",
+        styles?.icon
+      ]
     }), /* @__PURE__ */ React5.createElement("span", {
       className: "flex-1 is-0 truncate text-start text-sm font-normal",
       "data-tooltip": true
@@ -509,36 +513,37 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
 
 // src/components/Tree/TreeItemToggle.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { forwardRef as forwardRef3, memo as memo2 } from "react";
-import { Button as Button2, Icon as Icon4 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
+import React6, { forwardRef as forwardRef2, memo as memo2 } from "react";
+import { IconButton as IconButton2 } from "@dxos/react-ui";
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open, isBranch, hidden, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals6();
   try {
-    return /* @__PURE__ */ React6.createElement(Button2, {
+    return /* @__PURE__ */ React6.createElement(IconButton2, {
       ref: forwardedRef,
       "data-testid": "treeItem.toggle",
       "aria-expanded": open,
       variant: "ghost",
       density: "fine",
-      classNames: mx5("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
-      onClick: onToggle
-    }, /* @__PURE__ */ React6.createElement(Icon4, {
-      icon: "ph--caret-right--bold",
+      classNames: [
+        "bs-full is-6 pli-0",
+        "[&_svg]:transition-[transform] [&_svg]:duration-200",
+        open && "[&_svg]:rotate-90",
+        hidden ? "hidden" : !isBranch && "invisible",
+        classNames
+      ],
       size: 3,
-      classNames: mx5("transition duration-200", open && "rotate-90")
-    }));
+      icon: "ph--caret-right--bold",
+      iconOnly: true,
+      noTooltip: true,
+      label: open ? "Click to close" : "Click to open",
+      tabIndex: -1,
+      ...props
+    });
   } finally {
     _effect.f();
   }
 }));
 
-// src/components/Tree/helpers.ts
-var DEFAULT_INDENTATION = 8;
-var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
-  paddingInlineStart: `${(level - 1) * indentation}px`
-});
-
 // src/components/Tree/TreeItem.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
 var hoverableDescriptionIcons = "[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]";
@@ -548,7 +553,7 @@ var TreeDataSchema = Schema.Struct({
   item: Schema.Any
 });
 var isTreeData = (data) => Schema.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
+var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _draggable, renderColumns: Columns, canDrop, canSelect, onOpenChange, onSelect }) => {
   var _effect = _useSignals7();
   try {
     const rowRef = useRef2(null);
@@ -560,7 +565,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     const [menuOpen, setMenuOpen] = useState3(false);
     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
@@ -573,6 +578,10 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     const level = path.length - levelOffset;
     const isBranch = !!parentOf;
     const mode = last ? "last-in-group" : open ? "expanded" : "standard";
+    const canSelectItem = canSelect?.({
+      item,
+      path
+    }) ?? true;
     const cancelExpand = useCallback3(() => {
       if (cancelExpandRef.current) {
         clearTimeout(cancelExpandRef.current);
@@ -585,7 +594,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       }
       invariant2(buttonRef.current, void 0, {
         F: __dxlog_file2,
-        L: 106,
+        L: 110,
         S: void 0,
         A: [
           "buttonRef.current",
@@ -690,7 +699,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     useEffect3(() => () => cancelExpand(), [
       cancelExpand
     ]);
-    const handleOpenChange = useCallback3(() => onOpenChange?.({
+    const handleOpenToggle = useCallback3(() => onOpenChange?.({
       item,
       path,
       open: !open
@@ -701,9 +710,13 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       open
     ]);
     const handleSelect = useCallback3((option = false) => {
-      if (isBranch) {
-        handleOpenChange();
-      } else {
+      if (isBranch && (option || current)) {
+        handleOpenToggle();
+      } else if (canSelectItem) {
+        canSelect?.({
+          item,
+          path
+        });
         rowRef.current?.focus();
         onSelect?.({
           item,
@@ -717,25 +730,21 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       path,
       current,
       isBranch,
-      handleOpenChange,
+      canSelectItem,
+      handleOpenToggle,
       onSelect
     ]);
     const handleKeyDown = useCallback3((event) => {
       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,
+      handleOpenToggle,
       handleSelect
     ]);
     return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
@@ -744,7 +753,16 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       id,
       "aria-labelledby": `${id}__label`,
       parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-      classNames: mx6("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
+      classNames: [
+        "grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface",
+        hoverableControls,
+        hoverableFocusedKeyboardControls,
+        hoverableFocusedWithinControls,
+        hoverableDescriptionIcons,
+        ghostHover,
+        ghostFocusWithin,
+        className
+      ],
       "data-itemid": id,
       "data-testid": testId,
       // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
@@ -756,25 +774,25 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
         event.preventDefault();
         setMenuOpen(true);
       }
-    }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
-      indent: true,
-      classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-      style: paddingIndentation(level)
     }, /* @__PURE__ */ React7.createElement("div", {
       role: "none",
-      className: "flex items-center"
+      className: "indent relative grid grid-cols-subgrid col-[tree-row]",
+      style: paddingIndentation(level)
+    }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
+      classNames: "flex items-center"
     }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
       isBranch,
       open,
-      onToggle: handleOpenChange
+      onClick: handleOpenToggle
     }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
-      ref: buttonRef,
-      label,
-      icon,
-      className: headingClassName,
       disabled,
       current,
-      onSelect: handleSelect
+      label,
+      className: headingClassName,
+      icon,
+      iconHue,
+      onSelect: handleSelect,
+      ref: buttonRef
     })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
       item,
       path,
@@ -792,6 +810,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       draggable: _draggable,
       renderColumns: Columns,
       canDrop,
+      canSelect,
       onOpenChange,
       onSelect
     })));
@@ -802,7 +821,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, canDrop, onOpenChange, onSelect }) => {
+var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, canDrop, canSelect, onOpenChange, onSelect }) => {
   var _effect = _useSignals8();
   try {
     const context = useMemo2(() => ({
@@ -840,6 +859,7 @@ var Tree = ({ root, path, id, useItems, getProps, isOpen, isCurrent, draggable:
       draggable: draggable3,
       renderColumns,
       canDrop,
+      canSelect,
       onOpenChange,
       onSelect
     }))));