@dxos/react-list 0.1.23 → 0.1.45-next.45667d4

package/dist/types/src/ListItem.d.ts

@@ -0,0 +1,56 @@
+import { DraggableAttributes } from '@dnd-kit/core';
+import { useSortable } from '@dnd-kit/sortable';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+import { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { Scope } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import React, { ComponentProps, ComponentPropsWithRef, Dispatch, SetStateAction } from 'react';
+declare const LIST_ITEM_NAME = "ListItem";
+type ListItemScopedProps<P> = P & {
+    __listItemScope?: Scope;
+};
+interface ListItemData {
+    id: string;
+    selected?: CheckboxProps['checked'];
+    open?: boolean;
+}
+type ListItemProps = Omit<ListItemData, 'id'> & {
+    collapsible?: boolean;
+} & ComponentPropsWithRef<typeof Primitive.li> & {
+    defaultOpen?: boolean;
+    onOpenChange?: (nextOpen: boolean) => void;
+} & {
+    onSelectedChange?: CheckboxProps['onCheckedChange'];
+    defaultSelected?: CheckboxProps['defaultChecked'];
+};
+declare const createListItemScope: import("@radix-ui/react-context").CreateScope;
+type DraggableListItemContextValue = {
+    draggableAttributes: DraggableAttributes;
+    draggableListeners: ReturnType<typeof useSortable>['listeners'];
+};
+type ListItemContextValue = {
+    headingId: string;
+    open: boolean;
+    selected: CheckboxProps['checked'];
+    setSelected: Dispatch<SetStateAction<CheckboxProps['checked']>>;
+} & Partial<DraggableListItemContextValue>;
+declare const useListItemContext: (consumerName: string, scope: Scope<ListItemContextValue | undefined>) => ListItemContextValue;
+type ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithRef<typeof Primitive.p>, 'id'>> & {
+    asChild?: boolean;
+};
+declare const ListItemHeading: React.ForwardRefExoticComponent<Pick<ListItemHeadingProps, "key" | "onDragEnd" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "__listItemScope"> & React.RefAttributes<HTMLParagraphElement>>;
+type ListItemDragHandleProps = ComponentPropsWithRef<typeof Primitive.div>;
+declare const ListItemDragHandle: React.ForwardRefExoticComponent<Pick<ListItemScopedProps<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}>, "key" | "asChild" | "__listItemScope" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+type ListItemOpenTriggerProps = ListItemScopedProps<CollapsibleTriggerProps>;
+declare const ListItemOpenTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type ListItemCollapsibleContentProps = ComponentProps<typeof Collapsible.Content>;
+declare const ListItemCollapsibleContent: React.ForwardRefExoticComponent<Collapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<Pick<ListItemProps, "key" | "asChild" | "selected" | "open" | keyof React.LiHTMLAttributes<HTMLLIElement> | "collapsible" | "defaultOpen" | "onOpenChange" | "onSelectedChange" | "defaultSelected"> & React.RefAttributes<HTMLLIElement>>;
+export { ListItem, ListItemHeading, ListItemCollapsibleContent, ListItemDragHandle, ListItemOpenTrigger, createListItemScope, useListItemContext, LIST_ITEM_NAME, };
+export type { ListItemProps, ListItemHeadingProps, ListItemCollapsibleContentProps, ListItemDragHandleProps, ListItemOpenTriggerProps, ListItemScopedProps, };
+//# sourceMappingURL=ListItem.d.ts.map

package/dist/types/src/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAE3D,OAAO,EAAsB,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,qBAAqB,EAAE,QAAQ,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAM3G,QAAA,MAAM,cAAc,aAAa,CAAC;AAElC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,eAAe,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE9D,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,qBAAqB,CAC7F,OAAO,SAAS,CAAC,EAAE,CACpB,GAAG;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG;IACF,gBAAgB,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACnD,CAAC;AAIJ,QAAA,MAA8B,mBAAmB,+CAA0C,CAAC;AAE5F,KAAK,6BAA6B,GAAG;IACnC,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,kBAAkB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;CACjE,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACjE,GAAG,OAAO,CAAC,6BAA6B,CAAC,CAAC;AAE3C,QAAA,MAAyB,kBAAkB,gGAA+D,CAAC;AAE3G,KAAK,oBAAoB,GAAG,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,eAAe,wnJAUpB,CAAC;AAEF,KAAK,uBAAuB,GAAG,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;AAE3E,QAAA,MAAM,kBAAkB;;;;8HASvB,CAAC;AAEF,KAAK,wBAAwB,GAAG,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;AAE7E,QAAA,MAAM,mBAAmB,mGAAsB,CAAC;AAEhD,KAAK,+BAA+B,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC;AAElF,QAAA,MAAM,0BAA0B,4GAAsB,CAAC;AAsGvD,QAAA,MAAM,QAAQ,4QASZ,CAAC;AAIH,OAAO,EACL,QAAQ,EACR,eAAe,EACf,0BAA0B,EAC1B,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,CAAC;AAEF,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,+BAA+B,EAC/B,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,GACpB,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,3 +1,3 @@
-export * from './components';
-export * from './model';
+export * from './List';
+export * from './ListItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,39 +1,45 @@
 {
   "name": "@dxos/react-list",
-  "version": "0.1.23",
-  "description": "A list editing experience component for DXOS.",
+  "version": "0.1.45-next.45667d4",
+  "description": "List primitive components for React.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "main": "dist/lib/browser/index.mjs",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@dxos/client": "0.1.23",
-    "@dxos/config": "0.1.23",
-    "@dxos/object-model": "0.1.23",
-    "@dxos/react-appkit": "0.1.23",
-    "@dxos/react-async": "0.1.23",
-    "@dxos/react-client": "0.1.23",
-    "@dxos/react-components": "0.1.23"
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/modifiers": "^6.0.0",
+    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@radix-ui/react-collapsible": "^1.0.2",
+    "@radix-ui/react-compose-refs": "^1.0.0",
+    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-primitive": "^1.0.2",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "lodash.omit": "^4.5.0",
+    "@dxos/react-hooks": "0.1.45-next.45667d4"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "^4.0.7",
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@types/lodash.omit": "^4.5.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "phosphor-react": "^1.4.1",
-    "@dxos/async": "0.1.23",
-    "@dxos/debug": "0.1.23"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "phosphor-react": "^1.4.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/List.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, arrayMove } from '@dnd-kit/sortable';
+import { createContextScope, Scope } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import omit from 'lodash.omit';
+import React, { ComponentPropsWithRef, forwardRef, ReactHTMLElement } from 'react';
+
+// TODO(thure): A lot of the accessible affordances for this kind of thing need to be implemented per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
+
+const LIST_NAME = 'List';
+
+type ListScopedProps<P> = P & { __listScope?: Scope };
+
+type ListVariant = 'ordered' | 'unordered' | 'ordered-draggable';
+
+type SharedListProps = {
+  selectable?: boolean;
+  variant?: ListVariant;
+  onDragEnd?: (event: DragEndEvent) => void;
+  listItemIds?: string[];
+  toggleOpenLabel?: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+};
+
+type DraggableListProps = Omit<SharedListProps, 'slots'> & {
+  onDragEnd: Exclude<SharedListProps['onDragEnd'], undefined>;
+  listItemIds: Exclude<SharedListProps['listItemIds'], undefined>;
+  variant: 'ordered-draggable';
+};
+
+type ListProps =
+  | (Omit<ComponentPropsWithRef<typeof Primitive.ol>, 'onDragEnd'> & SharedListProps)
+  | (Omit<ComponentPropsWithRef<typeof Primitive.ol>, 'onDragEnd'> & DraggableListProps);
+
+// LIST
+
+const [createListContext, createListScope] = createContextScope(LIST_NAME, []);
+
+type ListContextValue = Pick<ListProps, 'selectable' | 'variant' | 'toggleOpenLabel'>;
+
+const [ListProvider, useListContext] = createListContext<ListContextValue>(LIST_NAME);
+
+const List = forwardRef<HTMLOListElement, ListProps>((props: ListScopedProps<ListProps>, 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 (
+    <ListRoot
+      {...(selectable && { role: 'listbox', 'aria-multiselectable': true })}
+      {...omit(rootProps, 'onDragEnd', 'listItemIds')}
+      ref={forwardedRef}
+    >
+      <ListProvider
+        {...{
+          scope: __listScope,
+          variant,
+          selectable,
+          toggleOpenLabel,
+        }}
+      >
+        {variant === 'ordered-draggable' ? (
+          <DndContext onDragEnd={(props as DraggableListProps).onDragEnd} modifiers={[restrictToVerticalAxis]}>
+            <SortableContext items={(props as DraggableListProps).listItemIds}>{children}</SortableContext>
+          </DndContext>
+        ) : (
+          <>{children}</>
+        )}
+      </ListProvider>
+    </ListRoot>
+  );
+});
+
+List.displayName = LIST_NAME;
+
+export { List, createListScope, useListContext, LIST_NAME, arrayMove };
+
+export type { ListProps, ListVariant, ListScopedProps, DragEndEvent };

package/src/ListItem.tsx

@@ -0,0 +1,228 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DraggableAttributes } from '@dnd-kit/core';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+import { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { createContextScope, Scope } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { ComponentProps, ComponentPropsWithRef, Dispatch, forwardRef, SetStateAction } from 'react';
+
+import { useId } from '@dxos/react-hooks';
+
+import { LIST_NAME, ListScopedProps, useListContext } from './List';
+
+const LIST_ITEM_NAME = 'ListItem';
+
+type ListItemScopedProps<P> = P & { __listItemScope?: Scope };
+
+interface ListItemData {
+  id: string;
+  selected?: CheckboxProps['checked'];
+  open?: boolean;
+}
+
+type ListItemProps = Omit<ListItemData, 'id'> & { collapsible?: boolean } & ComponentPropsWithRef<
+    typeof Primitive.li
+  > & {
+    defaultOpen?: boolean;
+    onOpenChange?: (nextOpen: boolean) => void;
+  } & {
+    onSelectedChange?: CheckboxProps['onCheckedChange'];
+    defaultSelected?: CheckboxProps['defaultChecked'];
+  };
+
+type ListItemElement = React.ElementRef<typeof Primitive.li>;
+
+const [createListItemContext, createListItemScope] = createContextScope(LIST_ITEM_NAME, []);
+
+type DraggableListItemContextValue = {
+  draggableAttributes: DraggableAttributes;
+  draggableListeners: ReturnType<typeof useSortable>['listeners'];
+};
+
+type ListItemContextValue = {
+  headingId: string;
+  open: boolean;
+  selected: CheckboxProps['checked'];
+  setSelected: Dispatch<SetStateAction<CheckboxProps['checked']>>;
+} & Partial<DraggableListItemContextValue>;
+
+const [ListItemProvider, useListItemContext] = createListItemContext<ListItemContextValue>(LIST_ITEM_NAME);
+
+type ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithRef<typeof Primitive.p>, 'id'>> & {
+  asChild?: boolean;
+};
+
+const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
+  ({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
+    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+    const Root = asChild ? Slot : Primitive.p;
+    return (
+      <Root {...props} id={headingId} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type ListItemDragHandleProps = ComponentPropsWithRef<typeof Primitive.div>;
+
+const ListItemDragHandle = forwardRef<HTMLDivElement, ListItemScopedProps<ListItemDragHandleProps>>(
+  ({ __listItemScope, children, ...props }, forwardedRef) => {
+    const { draggableAttributes, draggableListeners } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+    return (
+      <div role='button' ref={forwardedRef} {...props} {...draggableAttributes} {...draggableListeners}>
+        {children}
+      </div>
+    );
+  },
+);
+
+type ListItemOpenTriggerProps = ListItemScopedProps<CollapsibleTriggerProps>;
+
+const ListItemOpenTrigger = Collapsible.Trigger;
+
+type ListItemCollapsibleContentProps = ComponentProps<typeof Collapsible.Content>;
+
+const ListItemCollapsibleContent = Collapsible.Content;
+
+const PureListItem = forwardRef<
+  ListItemElement,
+  ListItemProps & { id: string } & Partial<DraggableListItemContextValue>
+>(
+  (
+    props: ListItemScopedProps<
+      ListScopedProps<ListItemProps & { id: string } & Partial<DraggableListItemContextValue>>
+    >,
+    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 = (
+      <Primitive.li
+        {...listItemProps}
+        id={id}
+        ref={forwardedRef}
+        aria-labelledby={headingId}
+        {...(selectable && { role: 'option', 'aria-selected': !!selected })}
+      >
+        {children}
+      </Primitive.li>
+    );
+
+    return (
+      <ListItemProvider
+        scope={__listItemScope}
+        headingId={headingId}
+        open={open}
+        selected={selected}
+        setSelected={setSelected}
+        {...{ draggableAttributes, draggableListeners }}
+      >
+        {collapsible ? (
+          <Collapsible.Root asChild open={open} onOpenChange={setOpen}>
+            {listItem}
+          </Collapsible.Root>
+        ) : (
+          listItem
+        )}
+      </ListItemProvider>
+    );
+  },
+);
+
+const DraggableListItem = forwardRef<ListItemElement, ListItemProps & { id: string }>(
+  (props: ListItemScopedProps<ListItemProps & { id: string }>, forwardedRef) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+      id: props.id,
+    });
+    const ref = useComposedRefs(forwardedRef, setNodeRef) as ComponentPropsWithRef<typeof Primitive.li>['ref'];
+
+    return (
+      <PureListItem
+        {...props}
+        style={{
+          ...props.style,
+          transform: CSS.Transform.toString(transform),
+          transition,
+        }}
+        ref={ref}
+        {...{
+          draggableAttributes: attributes,
+          draggableListeners: listeners,
+        }}
+      />
+    );
+  },
+);
+
+const ListItem = forwardRef<ListItemElement, ListItemProps>((props: ListScopedProps<ListItemProps>, forwardedRef) => {
+  const { variant } = useListContext(LIST_NAME, props.__listScope);
+  const listItemId = useId('listItem', props.id);
+
+  if (variant === 'ordered-draggable') {
+    return <DraggableListItem {...props} ref={forwardedRef} id={listItemId} />;
+  } else {
+    return <PureListItem {...props} ref={forwardedRef} id={listItemId} />;
+  }
+});
+
+ListItem.displayName = LIST_ITEM_NAME;
+
+export {
+  ListItem,
+  ListItemHeading,
+  ListItemCollapsibleContent,
+  ListItemDragHandle,
+  ListItemOpenTrigger,
+  createListItemScope,
+  useListItemContext,
+  LIST_ITEM_NAME,
+};
+
+export type {
+  ListItemProps,
+  ListItemHeadingProps,
+  ListItemCollapsibleContentProps,
+  ListItemDragHandleProps,
+  ListItemOpenTriggerProps,
+  ListItemScopedProps,
+};

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './components';
-export * from './model';
+export * from './List';
+export * from './ListItem';

package/dist/types/src/components/List/List.d.ts

@@ -1,8 +0,0 @@
-import { Item, PublicKey } from '@dxos/client';
-import { ObjectModel } from '@dxos/object-model';
-export interface ListProps {
-    spaceKey: PublicKey;
-    itemId: Item<ObjectModel>['id'];
-}
-export declare const List: ({ spaceKey, itemId }: ListProps) => JSX.Element;
-//# sourceMappingURL=List.d.ts.map

package/dist/types/src/components/List/List.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAS,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAsBjD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC;CACjC;AAiED,eAAO,MAAM,IAAI,yBAA0B,SAAS,gBAanD,CAAC"}

package/dist/types/src/components/List/List.stories.d.ts

@@ -1,17 +0,0 @@
-import '@dxosTheme';
-import type { StoryFn } from '@storybook/react';
-import { PublicKey } from '@dxos/client';
-import { ListProps } from './List';
-declare const _default: {
-    component: ({ spaceKey, itemId }: ListProps) => JSX.Element;
-    argTypes: {};
-};
-export default _default;
-export declare const Default: {
-    render: (args: Omit<ListProps, 'itemId' | 'spaceKey'> & {
-        spaceKey?: PublicKey;
-        id?: number;
-    }) => JSX.Element;
-    decorators: ((Story: StoryFn) => JSX.Element)[];
-};
-//# sourceMappingURL=List.stories.d.ts.map

package/dist/types/src/components/List/List.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAIhD,OAAO,EAAsB,SAAS,EAAE,MAAM,cAAc,CAAC;AAS7D,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;AAKzC,wBAGE;AAEF,eAAO,MAAM,OAAO;mBACH,KAAK,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC,GAAG;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;yBAqBnF,OAAO;CAwElB,CAAC"}

package/dist/types/src/components/List/index.d.ts

@@ -1,2 +0,0 @@
-export * from './List';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/List/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/types/src/components/ListPrimitive/ListPrimitive.d.ts

@@ -1,55 +0,0 @@
-import { ComponentProps } from 'react';
-declare type ListId = string;
-declare type ListItemId = string;
-export interface ListItemProps {
-    id: ListItemId;
-    title?: string;
-    description?: string;
-    annotations?: Record<string, string | boolean>;
-}
-export declare type ListItems = Record<ListItemId, Omit<ListItemProps, 'id'>>;
-interface SharedListActionProps {
-    listId: ListId;
-}
-interface SharedListItemActionProps extends SharedListActionProps {
-    listItemId: ListItemId;
-}
-export interface ListItemChangedAction extends SharedListItemActionProps {
-    next: Partial<ListItemProps>;
-}
-export interface ListChangedAction extends SharedListActionProps {
-    next: Partial<ListPrimitiveProps>;
-}
-export interface ListItemCreatedAction extends SharedListActionProps {
-    created: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>;
-}
-export interface ListItemDeletedAction extends SharedListActionProps {
-    deleted: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>;
-}
-export declare type ListAction = ListItemChangedAction | ListChangedAction | ListItemCreatedAction | ListItemDeletedAction;
-export declare const isListItemChangedAction: (o: any) => o is ListItemChangedAction;
-export declare const isListItemCreatedAction: (o: any) => o is ListItemCreatedAction;
-export declare const isListItemDeletedAction: (o: any) => o is ListItemDeletedAction;
-export interface ListPrimitiveProps {
-    id: ListId;
-    title?: string;
-    description?: string;
-}
-export interface ListPrimitiveComponentProps extends ListPrimitiveProps, Omit<ComponentProps<'div'>, 'id'> {
-    items: ListItems;
-    onAction?: (action: ListAction) => void;
-    createListItemId?: () => Promise<ListItemId>;
-    onChangePeriod?: number;
-}
-export interface ListItemPrimitiveComponentProps extends ListItemProps, Omit<ComponentProps<'li'>, 'id' | 'title'> {
-    updateItem: (item: ListItemProps) => void;
-    updateOrder: (id: ListItemId, delta: number) => void;
-    deleteItem: (id: ListItemId) => void;
-    createItem: () => void;
-    orderIndex: number;
-    isLast?: boolean;
-    autoFocus?: boolean;
-}
-export declare const ListPrimitive: ({ id: listId, title: propsTitle, description: propsDescription, items: propsItems, onAction, createListItemId, onChangePeriod, ...divProps }: ListPrimitiveComponentProps) => JSX.Element;
-export {};
-//# sourceMappingURL=ListPrimitive.d.ts.map

package/dist/types/src/components/ListPrimitive/ListPrimitive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListPrimitive.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListPrimitive/ListPrimitive.tsx"],"names":[],"mappings":"AAMA,OAAc,EAAE,cAAc,EAAiD,MAAM,OAAO,CAAC;AAgB7F,aAAK,MAAM,GAAG,MAAM,CAAC;AACrB,aAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;CAChD;AAED,oBAAY,SAAS,GAAG,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtE,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,yBAAyB;IACtE,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC9D,IAAI,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;CACzE;AAED,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;CACzE;AAED,oBAAY,UAAU,GAAG,qBAAqB,GAAG,iBAAiB,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAEnH,eAAO,MAAM,uBAAuB,MAAO,GAAG,+BAAkD,CAAC;AACjG,eAAO,MAAM,uBAAuB,MAAO,GAAG,+BAA+C,CAAC;AAC9F,eAAO,MAAM,uBAAuB,MAAO,GAAG,+BAA+C,CAAC;AAE9F,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;IACxG,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,+BAAgC,SAAQ,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IAChH,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA4LD,eAAO,MAAM,aAAa,iJASvB,2BAA2B,gBA+L7B,CAAC"}

package/dist/types/src/components/ListPrimitive/ListPrimitive.stories.d.ts

@@ -1,31 +0,0 @@
-import '@dxosTheme';
-import { ListPrimitiveComponentProps } from './ListPrimitive';
-declare const _default: {
-    component: ({ id: listId, title: propsTitle, description: propsDescription, items: propsItems, onAction, createListItemId, onChangePeriod, ...divProps }: ListPrimitiveComponentProps) => JSX.Element;
-    argTypes: {};
-};
-export default _default;
-export declare const Default: {
-    render: (args: Omit<ListPrimitiveComponentProps, 'item'>) => JSX.Element;
-    args: {
-        id: string;
-        items: {
-            x234567: {
-                title: string;
-            };
-            x345678: {
-                title: string;
-                annotations: {
-                    state: string;
-                };
-            };
-            x456789: {
-                title: string;
-            };
-            x567890: {
-                title: string;
-            };
-        };
-    };
-};
-//# sourceMappingURL=ListPrimitive.stories.d.ts.map

package/dist/types/src/components/ListPrimitive/ListPrimitive.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListPrimitive.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListPrimitive/ListPrimitive.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAiB,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;;;;;AAE7E,wBAGE;AAEF,eAAO,MAAM,OAAO;mBACH,KAAK,2BAA2B,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;CAyBzD,CAAC"}

package/dist/types/src/components/ListPrimitive/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ListPrimitive';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ListPrimitive/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ListPrimitive/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './List';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/types/src/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './usePropStatefully';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC"}

package/dist/types/src/hooks/usePropStatefully.d.ts

@@ -1,6 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-/**
- * @deprecated
- */
-export declare const usePropStatefully: <T>(propsValue: T, equivalentPredicate?: ((a: T, b: T) => boolean) | undefined) => [T, Dispatch<SetStateAction<T>>, string];
-//# sourceMappingURL=usePropStatefully.d.ts.map