@dxos/react-ui-list 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

package/dist/lib/browser/index.mjs

@@ -1,25 +1,95 @@
+// packages/ui/react-ui-list/src/components/Accordion/AccordionItem.tsx
+import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
+import { createContext as createContext2 } from "@radix-ui/react-context";
+import React2 from "react";
+import { Icon } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-list/src/components/Accordion/AccordionRoot.tsx
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { createContext } from "@radix-ui/react-context";
+import React from "react";
+import { mx } from "@dxos/react-ui-theme";
+var ACCORDION_NAME = "Accordion";
+var [AccordionProvider, useAccordionContext] = createContext(ACCORDION_NAME);
+var defaultGetId = (item) => item?.id;
+var AccordionRoot = ({ classNames, items, getId = defaultGetId, children, value, defaultValue, onValueChange }) => {
+  return /* @__PURE__ */ React.createElement(AccordionProvider, {
+    getId
+  }, /* @__PURE__ */ React.createElement(AccordionPrimitive.Root, {
+    type: "multiple",
+    value,
+    defaultValue,
+    onValueChange,
+    className: mx(classNames)
+  }, children?.({
+    items: items ?? []
+  })));
+};
+
+// packages/ui/react-ui-list/src/components/Accordion/AccordionItem.tsx
+var ACCORDION_ITEM_NAME = "AccordionItem";
+var [AccordionItemProvider, useAccordionItemContext] = createContext2(ACCORDION_ITEM_NAME);
+var AccordionItem = ({ children, classNames, item }) => {
+  const { getId } = useAccordionContext(ACCORDION_ITEM_NAME);
+  return /* @__PURE__ */ React2.createElement(AccordionItemProvider, {
+    item
+  }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Item, {
+    value: getId(item),
+    className: mx2("overflow-hidden", classNames)
+  }, children));
+};
+var AccordionItemHeader = ({ classNames, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Header, {
+    ...props,
+    className: mx2(classNames)
+  }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Trigger, {
+    className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
+  }, children, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--caret-right--regular",
+    size: 4,
+    classNames: "transition-transform duration-200 group-data-[state=open]:rotate-90"
+  })));
+};
+var AccordionItemBody = ({ children, classNames }) => {
+  return /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Content, {
+    className: "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2("p-2", classNames)
+  }, children));
+};
+
+// packages/ui/react-ui-list/src/components/Accordion/Accordion.tsx
+var Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  ItemHeader: AccordionItemHeader,
+  ItemBody: AccordionItemBody
+};
+
 // packages/ui/react-ui-list/src/components/List/ListItem.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 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 createContext2 } from "@radix-ui/react-context";
-import React2, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { createContext as createContext4 } from "@radix-ui/react-context";
+import React4, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
-import { Icon, ListItem as NaturalListItem } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import { Icon as Icon2, ListItem as NaturalListItem } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-list/src/components/List/ListRoot.tsx
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
-import { createContext } from "@radix-ui/react-context";
-import React, { useCallback, useEffect, useState } from "react";
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import React3, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
-var [ListProvider, useListContext] = createContext(LIST_NAME);
-var defaultGetId = (item) => item?.id;
-var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onMove, ...props }) => {
+var [ListProvider, useListContext] = createContext3(LIST_NAME);
+var defaultGetId2 = (item) => item?.id;
+var ListRoot = ({ children, items, isItem, getId = defaultGetId2, onMove, ...props }) => {
   const isEqual = useCallback((a, b) => {
     const idA = getId?.(a);
     const idB = getId?.(b);
@@ -68,10 +138,10 @@ var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onM
     isEqual,
     onMove
   ]);
-  return /* @__PURE__ */ React.createElement(ListProvider, {
-    isItem,
+  return /* @__PURE__ */ React3.createElement(ListProvider, {
     state,
     setState,
+    isItem,
     ...props
   }, children?.({
     state,
@@ -89,7 +159,7 @@ var stateStyles = {
 };
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
-var [ListItemProvider, useListItemContext] = createContext2(LIST_ITEM_NAME, defaultContext);
+var [ListItemProvider, useListItemContext] = createContext4(LIST_ITEM_NAME, defaultContext);
 var ListItem = ({ children, classNames, item, ...props }) => {
   const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = useRef(null);
@@ -204,27 +274,27 @@ var ListItem = ({ children, classNames, item, ...props }) => {
   }, [
     item
   ]);
-  return /* @__PURE__ */ React2.createElement(ListItemProvider, {
+  return /* @__PURE__ */ React4.createElement(ListItemProvider, {
     item,
     dragHandleRef
-  }, /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "relative"
-  }, /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     ref,
     role: "listitem",
-    className: mx("flex overflow-hidden", classNames, stateStyles[state.type]),
+    className: mx3("flex overflow-hidden", classNames, stateStyles[state.type]),
     ...props
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React2.createElement(NaturalListItem.DropIndicator, {
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
     edge: state.closestEdge
   })));
 };
 var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React2.createElement("button", {
+  return /* @__PURE__ */ React4.createElement("button", {
     ref: forwardedRef,
-    className: mx("flex items-center justify-center", classNames),
+    className: mx3("flex items-center justify-center", classNames),
     ...props
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React4.createElement(Icon2, {
     icon,
     classNames: "cursor-pointer",
     size: 4
@@ -233,7 +303,7 @@ var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, for
 var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph--x--regular", ...props }) => {
   const { state } = useListContext("DELETE_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React2.createElement(IconButton, {
+  return /* @__PURE__ */ React4.createElement(IconButton, {
     icon,
     disabled: isDisabled,
     classNames: [
@@ -246,7 +316,7 @@ var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, icon = "ph-
 var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
   const { state } = useListContext("ITEM_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React2.createElement(IconButton, {
+  return /* @__PURE__ */ React4.createElement(IconButton, {
     disabled: isDisabled,
     classNames: [
       classNames,
@@ -257,7 +327,7 @@ var ListItemButton = ({ autoHide = true, classNames, disabled, ...props }) => {
 };
 var ListItemDragHandle = () => {
   const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ React2.createElement(IconButton, {
+  return /* @__PURE__ */ React4.createElement(IconButton, {
     ref: dragHandleRef,
     icon: "ph--dots-six-vertical--regular"
   });
@@ -268,11 +338,11 @@ var ListItemDragPreview = ({ children }) => {
     item: state.item
   }), state.container) : null;
 };
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React2.createElement("div", {
-  className: mx("flex is-full gap-2", classNames)
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React4.createElement("div", {
+  className: mx3("flex is-full gap-2", classNames)
 }, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React2.createElement("div", {
-  className: mx("flex grow items-center truncate", classNames),
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
+  className: mx3("flex grow items-center truncate", classNames),
   ...props
 }, children);
 
@@ -290,13 +360,13 @@ var List = {
 };
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-import React6, { useMemo as useMemo2 } from "react";
+import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
 // packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx
-import { createContext as createContext3, useContext } from "react";
+import { createContext as createContext5, useContext } from "react";
 import { raise } from "@dxos/debug";
-var TreeContext = /* @__PURE__ */ createContext3(null);
+var TreeContext = /* @__PURE__ */ createContext5(null);
 var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
 var TreeProvider = TreeContext.Provider;
 
@@ -304,17 +374,17 @@ var TreeProvider = TreeContext.Provider;
 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 React5, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { S } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
-import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/react-ui-theme";
+import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
-import React3, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
-import { Button, Icon as Icon2, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
+import { Button, Icon as Icon3, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
   const { t } = useTranslation();
   const handleSelect = useCallback2((event) => {
@@ -331,51 +401,51 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React3.createElement(TextTooltip, {
+  return /* @__PURE__ */ React5.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React3.createElement(Button, {
+  }, /* @__PURE__ */ React5.createElement(Button, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     density: "fine",
-    classNames: mx2("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
+    classNames: mx4("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__ */ React3.createElement(Icon2, {
+  }, icon && /* @__PURE__ */ React5.createElement(Icon3, {
     icon: icon ?? "ph--placeholder--regular",
-    size: 4,
-    classNames: "is-[1em] bs-[1em] mlb-1"
-  }), /* @__PURE__ */ React3.createElement("span", {
+    size: 5,
+    classNames: "mlb-1"
+  }), /* @__PURE__ */ React5.createElement("span", {
     className: "flex-1 is-0 truncate text-start text-sm font-normal",
     "data-tooltip": true
   }, toLocalizedString(label, t))));
 }));
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx
-import React4, { forwardRef as forwardRef3, memo as memo2 } from "react";
-import { Button as Button2, Icon as Icon3 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+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) => {
-  return /* @__PURE__ */ React4.createElement(Button2, {
+  return /* @__PURE__ */ React6.createElement(Button2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
     variant: "ghost",
     density: "fine",
-    classNames: mx3("is-4 dx-focus-ring-inset pli-0", hidden ? "hidden" : !isBranch && "invisible"),
+    classNames: mx5("is-6 pli-0 dx-focus-ring-inset", hidden ? "hidden" : !isBranch && "invisible"),
     onClick: onToggle
-  }, /* @__PURE__ */ React4.createElement(Icon3, {
+  }, /* @__PURE__ */ React6.createElement(Icon4, {
     icon: "ph--caret-right--regular",
     size: 3,
-    classNames: mx3("transition duration-200", open && "rotate-90")
+    classNames: mx5("transition duration-200", open && "rotate-90")
   }));
 }));
 
@@ -546,18 +616,24 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     open
   ]);
   const handleSelect = useCallback3((option = false) => {
-    rowRef.current?.focus();
-    onSelect?.({
-      item,
-      path,
-      current: !current,
-      option
-    });
+    if (isBranch) {
+      handleOpenChange();
+    } else {
+      rowRef.current?.focus();
+      onSelect?.({
+        item,
+        path,
+        current: !current,
+        option
+      });
+    }
   }, [
-    onSelect,
     item,
     path,
-    current
+    current,
+    isBranch,
+    handleOpenChange,
+    onSelect
   ]);
   const handleKeyDown = useCallback3((event) => {
     switch (event.key) {
@@ -577,13 +653,13 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     handleOpenChange,
     handleSelect
   ]);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Treegrid.Row, {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
     "aria-labelledby": `${id}__label`,
     parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-    classNames: mx4("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
+    classNames: mx6("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, className),
     "data-itemid": id,
     "data-testid": testId,
     // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
@@ -595,18 +671,18 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
       event.preventDefault();
       setMenuOpen(true);
     }
-  }, /* @__PURE__ */ React5.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
     indent: true,
     classNames: "relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndentation(level)
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "flex items-center"
-  }, /* @__PURE__ */ React5.createElement(TreeItemToggle, {
-    open,
+  }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
     isBranch,
+    open,
     onToggle: handleOpenChange
-  }), /* @__PURE__ */ React5.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
     ref: buttonRef,
     label,
     icon,
@@ -614,16 +690,16 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
     disabled,
     current,
     onSelect: handleSelect
-  })), Columns && /* @__PURE__ */ React5.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
     item,
     path,
     open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React5.createElement(NaturalTreeItem.DropIndicator, {
+  }), instruction && /* @__PURE__ */ React7.createElement(NaturalTreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ React5.createElement(TreeItem, {
+  }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
     key: item2.id,
     item: item2,
     path,
@@ -660,12 +736,12 @@ var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable:
     id,
     path
   ]);
-  return /* @__PURE__ */ React6.createElement(Treegrid2.Root, {
+  return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ React6.createElement(TreeProvider, {
+  }, /* @__PURE__ */ React8.createElement(TreeProvider, {
     value: context
-  }, items.map((item, index) => /* @__PURE__ */ React6.createElement(TreeItem, {
+  }, items.map((item, index) => /* @__PURE__ */ React8.createElement(TreeItem, {
     key: item.id,
     item,
     last: index === items.length - 1,
@@ -695,6 +771,7 @@ var Path = {
   onPath: (path, id) => Path.parts(path).includes(id)
 };
 export {
+  Accordion,
   List,
   Path,
   RawTreeItem,