@dxos/react-list 0.1.22 → 0.1.41

package/README.md

@@ -1,22 +1 @@
-# @dxos/react-list
-
-A list editing experience component for DXOS.
-
-## Installation
-
-```bash
-pnpm i @dxos/react-list
-```
-
-## DXOS Resources
-
-- [Website](https://dxos.org)
-- [Developer Documentation](https://docs.dxos.org)
-- Tag [questions on Stack Overflow](https://stackoverflow.com/questions/tagged/dxos) with `#dxos`
-- Tag us on twitter [`@dxos_org`](https://twitter.com/dxos_org)
-
-## Contributions
-
-Your ideas, issues, and code are most welcome. Please take a look at our [community code of conduct](https://github.com/dxos/dxos/blob/main/CODE_OF_CONDUCT.md), the [issue guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-issues), and the [PR contribution guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-prs). If you would like to contribute to the design and implementation of DXOS, please [start with the contributor's guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md).
-
-License: [MIT](./LICENSE) Copyright 2022 © DXOS
+# DXOS `react-list` primitive

package/dist/lib/browser/index.mjs

@@ -1,46 +1,11 @@
-// packages/apps/patterns/react-list/src/components/List/List.tsx
-import React2, { useCallback as useCallback2 } from "react";
-import { ObjectModel } from "@dxos/object-model";
-import { useSelection, useSpace } from "@dxos/react-client";
-import { Loading, useTranslation as useTranslation2 } from "@dxos/react-components";
-
-// packages/apps/patterns/react-list/src/model.ts
-var LIST_TYPE = "dxos:type/list";
-var LIST_ITEM_TYPE = "dxos:type/list-item";
-
-// packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx
-import debounce from "lodash.debounce";
-import { Minus, Plus } from "phosphor-react";
-import React, { useCallback, useMemo, useState as useState2 } from "react";
-import { defaultFocus, Input, useTranslation, getSize, Button, randomString as randomString2, defaultGroup, defaultHover, mx } from "@dxos/react-components";
-
-// packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts
-import { useEffect, useRef, useState } from "react";
-import { randomString } from "@dxos/react-components";
-var isEqual = (a, b) => a === b;
-var usePropStatefully = (propsValue, equivalentPredicate) => {
-  const [value, setValue] = useState(propsValue);
-  const [valueSession, setValueSession] = useState(randomString());
-  const mounted = useRef(false);
-  const predicate = equivalentPredicate != null ? equivalentPredicate : isEqual;
-  useEffect(() => {
-    if (mounted.current && !predicate(propsValue, value)) {
-      setValue(propsValue);
-      setValueSession(randomString());
-    } else {
-      mounted.current = true;
-    }
-  }, [
-    propsValue
-  ]);
-  return [
-    value,
-    setValue,
-    valueSession
-  ];
-};
-
-// packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx
+// packages/ui/primitives/react-list/src/List.tsx
+import { DndContext } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove } from "@dnd-kit/sortable";
+import { createContextScope } from "@radix-ui/react-context";
+import { Primitive } from "@radix-ui/react-primitive";
+import omit from "lodash.omit";
+import React, { forwardRef } from "react";
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -55,386 +20,44 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-var isListItemChangedAction = (o) => "listItemId" in o;
-var isListItemCreatedAction = (o) => "created" in o;
-var isListItemDeletedAction = (o) => "deleted" in o;
-var defaultCreateListItemId = async () => randomString2(8);
-var ListItemPrimitive = ({ id, title: propsTitle, description: propsDescription, annotations: propsAnnotations, updateItem, deleteItem, createItem, updateOrder, orderIndex, isLast, autoFocus }) => {
-  const checkId = `${id}__checkbox`;
-  const labelId = `${id}__title`;
-  const descriptionId = `${id}__description`;
-  const { t } = useTranslation("appkit");
-  const rejectTextUpdatesWhenFocused = useCallback((a, b) => {
-    var _a;
-    return ((_a = document.activeElement) == null ? void 0 : _a.getAttribute("data-itemid")) === id ? true : a === b;
-  }, [
-    id
-  ]);
-  const [title, setTitle, titleSession] = usePropStatefully(propsTitle != null ? propsTitle : "", rejectTextUpdatesWhenFocused);
-  const [description, _setDescription, _descriptionSession] = usePropStatefully(propsDescription != null ? propsDescription : "", rejectTextUpdatesWhenFocused);
-  const [annotations, setAnnotations] = useState2(propsAnnotations != null ? propsAnnotations : {});
-  const isDone = (annotations == null ? void 0 : annotations.state) === "done";
-  const onChangeTitle = useCallback((nextValue) => {
-    setTitle(nextValue);
-    updateItem({
-      id,
-      title: nextValue
-    });
-  }, []);
-  const _onChangeDescription = useCallback((nextValue) => {
-    _setDescription(nextValue);
-    updateItem({
-      id,
-      description: nextValue
-    });
-  }, []);
-  const _onClickMoveUp = useCallback(() => {
-    updateOrder(id, -1);
-  }, [
-    updateOrder,
-    id
-  ]);
-  const _onClickMoveDown = useCallback(() => {
-    updateOrder(id, 1);
-  }, [
-    updateOrder,
-    id
-  ]);
-  const onChangeCheckbox = useCallback(() => {
-    const nextAnnotations = {
-      ...annotations,
-      state: isDone ? "init" : "done"
-    };
-    setAnnotations(nextAnnotations);
-    updateItem({
-      id,
-      annotations: nextAnnotations
-    });
-  }, [
-    annotations,
-    isDone
-  ]);
-  const onClickDelete = useCallback(() => {
-    deleteItem(id);
-  }, [
-    deleteItem,
-    id
-  ]);
-  const onKeyUp = useCallback((e) => {
-    var _a, _b, _c;
-    switch (e.key) {
-      case "Enter":
-        if (!e.shiftKey) {
-          if (isLast) {
-            createItem();
-          } else {
-            (_a = document.querySelector(`input[data-orderindex="${orderIndex + 1}"]`)) == null ? void 0 : _a.focus();
-          }
-        }
-        break;
-      case "PageDown":
-        (_b = document.querySelector(`input[data-orderindex="${orderIndex + 1}"]`)) == null ? void 0 : _b.focus();
-        break;
-      case "PageUp":
-        (_c = document.querySelector(`input[data-orderindex="${orderIndex - 1}"]`)) == null ? void 0 : _c.focus();
-        break;
-    }
-  }, [
-    orderIndex,
-    isLast
-  ]);
-  const inputSlots = useMemo(() => ({
-    root: {
-      className: "m-0"
-    },
-    input: {
-      className: "border-0 rounded",
-      autoFocus: true,
-      "data-orderindex": orderIndex,
-      "data-itemid": id,
-      onKeyUp
-    }
-  }), [
-    orderIndex,
-    id,
-    onKeyUp
-  ]);
-  return /* @__PURE__ */ React.createElement("li", _extends({
-    key: id,
-    className: "flex items-center gap-2 pli-4 mbe-2",
-    "aria-labelledby": labelId
-  }, description && {
-    "aria-describedby": descriptionId
-  }), /* @__PURE__ */ React.createElement("input", _extends({}, {
-    type: "checkbox",
-    id: checkId,
-    ...description && {
-      "aria-describedby": descriptionId
-    },
-    className: mx(getSize(5), "text-primary-600 bg-neutral-50 rounded-full border-neutral-300 dark:bg-neutral-800 dark:border-neutral-600 cursor-pointer", defaultFocus, defaultHover({})),
-    onChange: onChangeCheckbox,
-    checked: isDone
-  })), /* @__PURE__ */ React.createElement("label", {
-    htmlFor: checkId,
-    id: labelId,
-    className: "sr-only"
-  }, title), /* @__PURE__ */ React.createElement("span", {
-    id: descriptionId,
-    className: "sr-only"
-  }, description), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "grow"
-  }, /* @__PURE__ */ React.createElement(Input, {
-    key: titleSession,
-    label: t("list item title label"),
-    placeholder: t("list item title placeholder"),
-    labelVisuallyHidden: true,
-    initialValue: title,
-    onChange: onChangeTitle,
-    slots: inputSlots
-  })), /* @__PURE__ */ React.createElement(Button, {
-    onClick: onClickDelete,
-    variant: "ghost",
-    className: "p-1 self-stretch"
-  }, /* @__PURE__ */ React.createElement(Minus, {
-    className: getSize(4)
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, t("delete list item label"))));
-};
-var itemsEquivalent = (a, b) => {
-  var _a, _b;
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  for (let i = 0; i < aKeys.length; i++) {
-    const key = aKeys[i];
-    if (key !== bKeys[i] || a[key].title !== b[key].title || ((_a = a[key].annotations) == null ? void 0 : _a.state) !== ((_b = b[key].annotations) == null ? void 0 : _b.state)) {
-      return false;
-    }
-  }
-  return true;
-};
-var ListPrimitive = ({ id: listId, title: propsTitle, description: propsDescription, items: propsItems, onAction, createListItemId = defaultCreateListItemId, onChangePeriod = 0, ...divProps }) => {
-  const { t } = useTranslation("appkit");
-  const [creating, setCreating] = useState2(false);
-  const [autoFocus, setAutofocus] = useState2(null);
-  const rejectTextUpdatesWhenFocused = useCallback((a, b) => {
-    var _a;
-    return ((_a = document.activeElement) == null ? void 0 : _a.getAttribute("data-itemid")) === listId ? true : a === b;
-  }, [
-    listId
-  ]);
-  const titleId = `${listId}__title`;
-  const [title, setTitle, titleSession] = usePropStatefully(propsTitle != null ? propsTitle : "", rejectTextUpdatesWhenFocused);
-  const propagateTitle = useCallback((nextValue) => {
-    return onAction == null ? void 0 : onAction({
-      listId,
-      next: {
-        title: nextValue
-      }
-    });
-  }, [
-    onAction
-  ]);
-  const debouncedPropagateTitle = useMemo(() => debounce(propagateTitle, onChangePeriod), [
-    propagateTitle
-  ]);
-  const onChangeTitle = useCallback((nextValue) => {
-    setTitle(nextValue);
-    debouncedPropagateTitle(nextValue);
-  }, [
-    onAction,
-    listId
-  ]);
-  const descriptionId = `${listId}__description`;
-  const [description, setDescription, _descriptionSession] = usePropStatefully(propsDescription != null ? propsDescription : "", rejectTextUpdatesWhenFocused);
-  const propagateDescription = useCallback((nextValue) => onAction == null ? void 0 : onAction({
-    listId,
-    next: {
-      description: nextValue
-    }
-  }), [
-    onAction
-  ]);
-  const debouncedPropagateDescription = useMemo(() => debounce(propagateDescription, onChangePeriod), [
-    propagateDescription
-  ]);
-  const _onChangeDescription = useCallback((nextValue) => {
-    setDescription(nextValue);
-    debouncedPropagateDescription(nextValue);
-  }, [
-    onAction,
-    listId
-  ]);
-  const [items, setItems, itemsSession] = usePropStatefully(propsItems != null ? propsItems : {}, itemsEquivalent);
-  const order = Object.keys(items);
-  const propagateItem = useCallback(({ id, ...next }) => {
-    return onAction == null ? void 0 : onAction({
-      listId,
-      listItemId: id,
-      next
-    });
-  }, [
-    listId,
-    onAction
-  ]);
-  const debouncedPropagateItem = useMemo(() => debounce(propagateItem, onChangePeriod), [
-    propagateItem
-  ]);
-  const updateItem = useCallback(({ id, ...next }) => {
-    setItems(Object.assign(items, {
-      [id]: {
-        ...items[id],
-        ...next
-      }
-    }));
-    "title" in next && debouncedPropagateItem({
-      id,
-      title: next.title
-    });
-    "description" in next && debouncedPropagateItem({
-      id,
-      description: next.description
-    });
-    "annotations" in next && (onAction == null ? void 0 : onAction({
-      listId,
-      listItemId: id,
-      next: {
-        annotations: next.annotations
-      }
-    }));
-  }, [
-    items,
-    listId,
-    onAction
-  ]);
-  const updateOrder = useCallback((id, delta) => {
-    const fromIndex = order.indexOf(id);
-    const toIndex = fromIndex + delta;
-    const nextOrder = Array.from(order);
-    nextOrder.splice(fromIndex, 1);
-    nextOrder.splice(toIndex, 0, id);
-    const nextItems = nextOrder.reduce((acc, listItemId) => {
-      acc[listItemId] = items[listItemId];
-      return acc;
-    }, {});
-    setItems(nextItems);
-    onAction == null ? void 0 : onAction({
-      listId,
-      next: {}
-    });
-  }, [
-    items,
-    onAction
-  ]);
-  const deleteItem = useCallback((id) => {
-    if (items[id]) {
-      const { [id]: deletedItem, ...nextItems } = items;
-      setItems(nextItems);
-      onAction == null ? void 0 : onAction({
-        listId,
-        next: {},
-        deleted: {
-          id,
-          ...deletedItem
-        }
-      });
-    }
-  }, [
-    items,
-    onAction
-  ]);
-  const createItem = useCallback(() => {
-    setCreating(true);
-    return createListItemId().then((id) => {
-      const next = {
-        items: {
-          ...items,
-          [id]: {}
-        }
-      };
-      const created = {
-        id
-      };
-      setItems(next.items);
-      setAutofocus(id);
-      onAction == null ? void 0 : onAction({
-        listId,
-        next: {},
-        created
-      });
-    }).finally(() => setCreating(false));
-  }, [
-    items,
-    createListItemId,
-    onAction
-  ]);
-  const inputSlots = useMemo(() => ({
-    root: {
-      className: "mli-2 mbs-0 mbe-2"
-    },
-    input: {
-      className: "border-0 rounded text-xl font-display font-semibold",
-      "data-itemid": listId
-    }
-  }), [
-    listId
-  ]);
-  return /* @__PURE__ */ React.createElement("div", _extends({
-    role: "group"
-  }, divProps, {
-    className: mx(defaultGroup({
-      elevation: 3,
-      spacing: "pbs-2 pbe-1"
-    }), divProps.className),
-    "aria-labelledby": titleId
-  }, description && {
-    "aria-describedby": descriptionId
-  }), /* @__PURE__ */ React.createElement("span", {
-    id: titleId,
-    className: "sr-only"
-  }, title), description && /* @__PURE__ */ React.createElement("span", {
-    id: descriptionId,
-    className: "sr-only"
-  }, description), /* @__PURE__ */ React.createElement(Input, {
-    key: titleSession,
-    label: t("list title label"),
-    placeholder: t("list title placeholder"),
-    labelVisuallyHidden: true,
-    initialValue: title,
-    onChange: onChangeTitle,
-    slots: inputSlots
-  }), /* @__PURE__ */ React.createElement("ol", {
-    className: "contents"
-  }, order.map((listItemId, index) => {
-    return /* @__PURE__ */ React.createElement(ListItemPrimitive, _extends({
-      key: `${itemsSession}__${listItemId}`,
-      orderIndex: index,
-      isLast: index === order.length - 1
-    }, {
-      id: listItemId,
-      updateItem,
-      updateOrder,
-      deleteItem,
-      createItem
-    }, items[listItemId], {
-      autoFocus: listItemId === autoFocus
-    }));
-  })), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "mli-4 mlb-4"
-  }, /* @__PURE__ */ React.createElement(Button, {
-    className: "is-full",
-    onClick: createItem,
-    disabled: creating
-  }, /* @__PURE__ */ React.createElement(Plus, {
-    className: getSize(5)
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, t("add list item label")))));
-};
+var LIST_NAME = "List";
+var [createListContext, createListScope] = createContextScope(LIST_NAME, []);
+var [ListProvider, useListContext] = createListContext(LIST_NAME);
+var List = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const { __listScope, variant = "ordered", selectable = false, toggleOpenLabel = "Expand/collapse item", children, ...rootProps } = props;
+  const ListRoot = variant === "ordered" || variant === "ordered-draggable" ? Primitive.ol : Primitive.ul;
+  return /* @__PURE__ */ React.createElement(ListRoot, _extends({}, selectable && {
+    role: "listbox",
+    "aria-multiselectable": true
+  }, omit(rootProps, "onDragEnd", "listItemIds"), {
+    ref: forwardedRef
+  }), /* @__PURE__ */ React.createElement(ListProvider, _extends({}, {
+    scope: __listScope,
+    variant,
+    selectable,
+    toggleOpenLabel
+  }), variant === "ordered-draggable" ? /* @__PURE__ */ React.createElement(DndContext, {
+    onDragEnd: props.onDragEnd,
+    modifiers: [
+      restrictToVerticalAxis
+    ]
+  }, /* @__PURE__ */ React.createElement(SortableContext, {
+    items: props.listItemIds
+  }, children)) : /* @__PURE__ */ React.createElement(React.Fragment, null, children)));
+});
+List.displayName = LIST_NAME;
 
-// packages/apps/patterns/react-list/src/components/List/List.tsx
+// packages/ui/primitives/react-list/src/ListItem.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React2, { forwardRef as forwardRef2 } from "react";
+import { useId } from "@dxos/react-hooks";
 function _extends2() {
   _extends2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -449,78 +72,109 @@ function _extends2() {
   };
   return _extends2.apply(this, arguments);
 }
-var ListLoaded = ({ space, list, listItems: propsListItems }) => {
-  var _a, _b, _c;
-  const listItems = (_a = useSelection(list == null ? void 0 : list.select().children().filter({
-    type: LIST_ITEM_TYPE
-  }))) != null ? _a : propsListItems;
-  const onAction = useCallback2(async (action) => {
-    if (isListItemDeletedAction(action)) {
-      const subject = space.database.getItem(action.deleted.id);
-      return subject == null ? void 0 : subject.model.set("annotations.deleted", true);
-    } else if (isListItemCreatedAction(action)) {
-    } else if (isListItemChangedAction(action)) {
-      const subject1 = space.database.getItem(action.listItemId);
-      return Promise.all(Object.keys(action.next).map((prop) => {
-        return subject1 == null ? void 0 : subject1.model.set(prop, action.next[prop]);
-      }));
-    } else {
-      return Promise.all(Object.keys(action.next).map((prop) => {
-        return list == null ? void 0 : list.model.set(prop, action.next[prop]);
-      }));
-    }
-  }, [
-    list,
-    listItems
-  ]);
-  const createListItemId = useCallback2(async () => {
-    const listItem = await (space == null ? void 0 : space.database.createItem({
-      model: ObjectModel,
-      type: LIST_ITEM_TYPE,
-      parent: list.id
-    }));
-    return listItem.id;
-  }, [
-    space
-  ]);
-  return /* @__PURE__ */ React2.createElement(ListPrimitive, _extends2({}, {
-    id: list.id,
-    title: (_b = list.model.get("title")) != null ? _b : "",
-    description: (_c = list.model.get("description")) != null ? _c : "",
-    items: (listItems != null ? listItems : []).filter((item) => !item.model.get("annotations.deleted")).reduce((acc, item) => {
-      acc[item.id] = {
-        title: item.model.get("title"),
-        description: item.model.get("description"),
-        annotations: item.model.get("annotations")
-      };
-      return acc;
-    }, {}),
-    onChangePeriod: 640,
-    onAction,
-    createListItemId
-  }));
-};
-var List = ({ spaceKey, itemId }) => {
-  var _a;
-  const { t } = useTranslation2("appkit");
-  const space = useSpace(spaceKey);
-  const list = ((_a = useSelection(space == null ? void 0 : space.database.select({
-    id: itemId
-  }))) != null ? _a : [])[0];
-  const listItems = useSelection(list == null ? void 0 : list.select().children().filter({
-    type: LIST_ITEM_TYPE
-  }));
-  return space && list && listItems ? /* @__PURE__ */ React2.createElement(ListLoaded, _extends2({}, {
-    space,
-    list,
-    listItems
-  })) : /* @__PURE__ */ React2.createElement(Loading, {
-    label: t("generic loading label")
+var LIST_ITEM_NAME = "ListItem";
+var [createListItemContext, createListItemScope] = createContextScope2(LIST_ITEM_NAME, []);
+var [ListItemProvider, useListItemContext] = createListItemContext(LIST_ITEM_NAME);
+var ListItemHeading = /* @__PURE__ */ forwardRef2(({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
+  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  const Root2 = asChild ? Slot : Primitive2.p;
+  return /* @__PURE__ */ React2.createElement(Root2, _extends2({}, props, {
+    id: headingId,
+    ref: forwardedRef
+  }), children);
+});
+var ListItemDragHandle = /* @__PURE__ */ forwardRef2(({ __listItemScope, children, ...props }, forwardedRef) => {
+  const { draggableAttributes, draggableListeners } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  return /* @__PURE__ */ React2.createElement("div", _extends2({
+    role: "button",
+    ref: forwardedRef
+  }, props, draggableAttributes, draggableListeners), children);
+});
+var ListItemOpenTrigger = Collapsible.Trigger;
+var ListItemCollapsibleContent = Collapsible.Content;
+var PureListItem = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+  const { __listScope, __listItemScope, children, selected: propsSelected, defaultSelected, onSelectedChange, open: propsOpen, defaultOpen, onOpenChange, collapsible, id, draggableAttributes, draggableListeners, ...listItemProps } = props;
+  const { selectable } = useListContext(LIST_NAME, __listScope);
+  const [selected = false, setSelected] = useControllableState({
+    prop: propsSelected,
+    defaultProp: defaultSelected,
+    onChange: onSelectedChange
   });
-};
+  const [open = false, setOpen] = useControllableState({
+    prop: propsOpen,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const headingId = useId("listItem__heading");
+  const listItem = /* @__PURE__ */ React2.createElement(Primitive2.li, _extends2({}, listItemProps, {
+    id,
+    ref: forwardedRef,
+    "aria-labelledby": headingId
+  }, selectable && {
+    role: "option",
+    "aria-selected": !!selected
+  }), children);
+  return /* @__PURE__ */ React2.createElement(ListItemProvider, _extends2({
+    scope: __listItemScope,
+    headingId,
+    open,
+    selected,
+    setSelected
+  }, {
+    draggableAttributes,
+    draggableListeners
+  }), collapsible ? /* @__PURE__ */ React2.createElement(Collapsible.Root, {
+    asChild: true,
+    open,
+    onOpenChange: setOpen
+  }, listItem) : listItem);
+});
+var DraggableListItem = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id
+  });
+  const ref = useComposedRefs(forwardedRef, setNodeRef);
+  return /* @__PURE__ */ React2.createElement(PureListItem, _extends2({}, props, {
+    style: {
+      ...props.style,
+      transform: CSS.Transform.toString(transform),
+      transition
+    },
+    ref
+  }, {
+    draggableAttributes: attributes,
+    draggableListeners: listeners
+  }));
+});
+var ListItem = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+  const { variant } = useListContext(LIST_NAME, props.__listScope);
+  const listItemId = useId("listItem", props.id);
+  if (variant === "ordered-draggable") {
+    return /* @__PURE__ */ React2.createElement(DraggableListItem, _extends2({}, props, {
+      ref: forwardedRef,
+      id: listItemId
+    }));
+  } else {
+    return /* @__PURE__ */ React2.createElement(PureListItem, _extends2({}, props, {
+      ref: forwardedRef,
+      id: listItemId
+    }));
+  }
+});
+ListItem.displayName = LIST_ITEM_NAME;
 export {
-  LIST_ITEM_TYPE,
-  LIST_TYPE,
-  List
+  LIST_ITEM_NAME,
+  LIST_NAME,
+  List,
+  ListItem,
+  ListItemCollapsibleContent,
+  ListItemDragHandle,
+  ListItemHeading,
+  ListItemOpenTrigger,
+  arrayMove,
+  createListItemScope,
+  createListScope,
+  useListContext,
+  useListItemContext
 };
 //# sourceMappingURL=index.mjs.map