@dxos/react-list 0.8.3 → 0.8.4-main.03d5cd7b56

package/package.json

@@ -1,49 +1,49 @@
 {
   "name": "@dxos/react-list",
-  "version": "0.8.3",
+  "version": "0.8.4-main.03d5cd7b56",
   "description": "List primitive components for React.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-collapsible": "1.1.3",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "lodash.omit": "^4.5.0",
-    "@dxos/react-hooks": "0.8.3"
+    "@dxos/react-hooks": "0.8.4-main.03d5cd7b56"
   },
   "devDependencies": {
     "@radix-ui/react-checkbox": "1.1.4",
-    "@types/lodash.omit": "^4.5.7",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "@storybook/react-vite": "^10.3.6",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"

package/src/List.stories.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// Stories for the elemental `@dxos/react-list` primitive — ARIA + structure
+// only. These show the default-styling-free behavior of `List` / `ListItem`
+// in isolation. For the styled, ARIA-correct, keyboard-navigable layer most
+// app code reaches for, see `@dxos/react-ui-list`'s `RowList` story.
+
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { List } from './List';
+import { ListItem, ListItemCollapsibleContent, ListItemHeading, ListItemOpenTrigger } from './ListItem';
+
+type Item = { id: string; label: string };
+
+const items: Item[] = Array.from({ length: 5 }, (_, i) => ({
+  id: `item-${i}`,
+  label: `Item ${i + 1}`,
+}));
+
+//
+// Static unordered list — no selection.
+//
+
+const StaticStory = () => (
+  <List variant='unordered' className='dx-container border border-separator p-2'>
+    {items.map((item) => (
+      <ListItem key={item.id} className='py-1'>
+        <ListItemHeading>{item.label}</ListItemHeading>
+      </ListItem>
+    ))}
+  </List>
+);
+
+//
+// Single-select listbox. Pairs `aria-selected` (set by the primitive when
+// `selectable={true}`) with the canonical `dx-selected` / `dx-hover`
+// utilities to demonstrate the ARIA ↔ dx-* grammar in its rawest form.
+//
+
+const SingleSelectStory = () => {
+  const [selected, setSelected] = useState<string>(items[0].id);
+  return (
+    <List
+      variant='unordered'
+      selectable
+      aria-label='Single-select example'
+      className='dx-container border border-separator'
+    >
+      {items.map((item) => (
+        <ListItem
+          key={item.id}
+          selected={item.id === selected}
+          onClick={() => setSelected(item.id)}
+          className='dx-hover dx-selected px-3 py-2 cursor-pointer outline-none'
+        >
+          <ListItemHeading>{item.label}</ListItemHeading>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+//
+// Multi-select listbox. `multiSelectable` adds `aria-multiselectable="true"`
+// on the listbox itself; selection state is per-item.
+//
+
+const MultiSelectStory = () => {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set([items[1].id]));
+  const toggle = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  return (
+    <List
+      variant='unordered'
+      selectable
+      multiSelectable
+      aria-label='Multi-select example'
+      className='dx-container border border-separator'
+    >
+      {items.map((item) => (
+        <ListItem
+          key={item.id}
+          selected={selectedIds.has(item.id)}
+          onClick={() => toggle(item.id)}
+          className='dx-hover dx-selected px-3 py-2 cursor-pointer outline-none'
+        >
+          <ListItemHeading>{item.label}</ListItemHeading>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+//
+// Collapsible item — opens / closes a Radix `Collapsible`-backed body.
+// Useful for accordion-style headings without reaching for the full
+// `react-ui-list` `Accordion` component.
+//
+
+const CollapsibleStory = () => (
+  <List variant='unordered' className='dx-container border border-separator divide-y divide-separator'>
+    {items.slice(0, 3).map((item) => (
+      <ListItem key={item.id} collapsible defaultOpen={item.id === items[0].id}>
+        <ListItemOpenTrigger asChild>
+          <ListItemHeading className='cursor-pointer px-3 py-2 select-none'>{item.label}</ListItemHeading>
+        </ListItemOpenTrigger>
+        <ListItemCollapsibleContent>
+          <div className='px-3 pb-2 text-description text-sm'>Details for {item.label}.</div>
+        </ListItemCollapsibleContent>
+      </ListItem>
+    ))}
+  </List>
+);
+
+// Inline column decorator — `react-list` deliberately doesn't depend on
+// `@dxos/react-ui` (a `withTheme/withLayout` import would create a cycle
+// since `react-ui` already depends on this primitive). Storybook's global
+// `withThemeByClassName` already applies the theme class at the root.
+const withColumn: Decorator = (Story) => (
+  <div className='flex flex-col gap-4 p-4 h-full max-w-md'>
+    <Story />
+  </div>
+);
+
+const meta = {
+  title: 'ui/react-list/List',
+  decorators: [withColumn],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Static: Story = { render: StaticStory };
+export const SingleSelect: Story = { render: SingleSelectStory };
+export const MultiSelect: Story = { render: MultiSelectStory };
+export const Collapsible: Story = { render: CollapsibleStory };

package/src/List.tsx

@@ -2,12 +2,36 @@
 // Copyright 2023 DXOS.org
 //
 
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+// Elemental list / listbox primitive.
+//
+// This is the ARIA-only foundation of the DXOS list stack. It renders a
+// semantically-correct `<ol>` / `<ul>` (or, when `selectable={true}`, a
+// `role="listbox"` element with `role="option"` children carrying
+// `aria-selected`). It applies no styling, no keyboard navigation, and
+// no `dx-*` utility classes — those are layered above in
+// `@dxos/react-ui-list`.
+//
+// Layering:
+//   - `@dxos/react-list`      — this package; ARIA + structure only.
+//   - `@dxos/react-ui-list`   — adds `dx-*` styling, keyboard nav, and
+//                               opinionated `RowList`/`CardList` containers.
+//   - `@dxos/react-ui-mosaic` — virtualized / draggable / card-board
+//                               layouts; composes the above where useful.
+//
+// Most app code should reach for `@dxos/react-ui-list`. Use this primitive
+// directly only when building a *new* selectable surface that needs full
+// control over styling and keyboard handling (e.g. a custom Combobox).
+//
+// See:
+//   - `packages/ui/ui-theme/src/css/components/selected.md` for the
+//     `aria-selected` ↔ `dx-selected` pairing rules.
+//   - `packages/ui/react-ui-list/AUDIT.md` for why this layering exists.
+//   - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
+
+import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import React, { type ComponentPropsWithRef, forwardRef } 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 };
@@ -17,7 +41,19 @@ type ListVariant = 'ordered' | 'unordered';
 type ListItemSizes = 'one' | 'many';
 
 type ListProps = ComponentPropsWithRef<typeof Primitive.ol> & {
+  /**
+   * If true, render as `role="listbox"` and let `ListItem` children become
+   * `role="option"` + `aria-selected`. If false (default) the list is a
+   * plain `<ol>` / `<ul>` with no selection semantics — pick this for
+   * static lists.
+   */
   selectable?: boolean;
+  /**
+   * If true, the listbox advertises multi-select via
+   * `aria-multiselectable="true"`. Defaults to false (single-select).
+   * Has no effect unless `selectable` is also true.
+   */
+  multiSelectable?: boolean;
   variant?: ListVariant;
   itemSizes?: ListItemSizes;
 };
@@ -33,10 +69,28 @@ type ListContextValue = {
 const [ListProvider, useListContext] = createListContext<ListContextValue>(LIST_NAME);
 
 const List = forwardRef<HTMLOListElement, ListProps>((props: ListScopedProps<ListProps>, forwardedRef) => {
-  const { __listScope, variant = 'ordered', selectable = false, itemSizes, children, ...rootProps } = props;
+  const {
+    __listScope,
+    variant = 'ordered',
+    selectable = false,
+    multiSelectable = false,
+    itemSizes,
+    children,
+    ...rootProps
+  } = props;
   const ListRoot = variant === 'ordered' ? Primitive.ol : Primitive.ul;
   return (
-    <ListRoot {...(selectable && { role: 'listbox', 'aria-multiselectable': true })} {...rootProps} ref={forwardedRef}>
+    <ListRoot
+      // `aria-multiselectable` is only meaningful on `role="listbox"`,
+      // and even there is omitted in the single-select default to keep
+      // assistive tech announcements concise.
+      {...(selectable && {
+        role: 'listbox',
+        ...(multiSelectable && { 'aria-multiselectable': true as const }),
+      })}
+      {...rootProps}
+      ref={forwardedRef}
+    >
       <ListProvider
         {...{
           scope: __listScope,

package/src/ListItem.tsx

@@ -5,7 +5,7 @@
 import type { CheckboxProps } from '@radix-ui/react-checkbox';
 import { type CollapsibleContentProps, type CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { type Scope, createContextScope } 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';
@@ -13,11 +13,11 @@ import React, {
   type ComponentProps,
   type ComponentPropsWithoutRef,
   type Dispatch,
-  type ElementRef,
-  forwardRef,
+  type ComponentRef,
   type ForwardRefExoticComponent,
   type RefAttributes,
   type SetStateAction,
+  forwardRef,
 } from 'react';
 
 import { useId } from '@dxos/react-hooks';
@@ -44,7 +44,7 @@ type ListItemProps = Omit<ListItemData, 'id'> & { collapsible?: boolean } & RefA
     defaultSelected?: CheckboxProps['defaultChecked'];
   };
 
-type ListItemElement = ElementRef<'li'>;
+type ListItemElement = ComponentRef<'li'>;
 
 const [createListItemContext, createListItemScope] = createContextScope(LIST_ITEM_NAME, []);
 
@@ -65,11 +65,11 @@ type ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithoutRef<'p
 const ListItemHeading = forwardRef<HTMLDivElement, ListItemHeadingProps>(
   ({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
     const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} id={headingId} ref={forwardedRef}>
+      <Comp {...props} id={headingId} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );

package/dist/lib/node/index.cjs

@@ -1,161 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  LIST_ITEM_NAME: () => LIST_ITEM_NAME,
-  LIST_NAME: () => LIST_NAME,
-  List: () => List,
-  ListItem: () => ListItem,
-  ListItemCollapsibleContent: () => ListItemCollapsibleContent,
-  ListItemHeading: () => ListItemHeading,
-  ListItemOpenTrigger: () => ListItemOpenTrigger,
-  createListItemScope: () => createListItemScope,
-  createListScope: () => createListScope,
-  useListContext: () => useListContext,
-  useListItemContext: () => useListItemContext
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_react_context = require("@radix-ui/react-context");
-var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react = __toESM(require("react"));
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var Collapsible = __toESM(require("@radix-ui/react-collapsible"));
-var import_react_context2 = require("@radix-ui/react-context");
-var import_react_primitive2 = require("@radix-ui/react-primitive");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react2 = __toESM(require("react"));
-var import_react_hooks = require("@dxos/react-hooks");
-var LIST_NAME = "List";
-var [createListContext, createListScope] = (0, import_react_context.createContextScope)(LIST_NAME, []);
-var [ListProvider, useListContext] = createListContext(LIST_NAME);
-var List = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { __listScope, variant = "ordered", selectable = false, itemSizes, children, ...rootProps } = props;
-    const ListRoot = variant === "ordered" ? import_react_primitive.Primitive.ol : import_react_primitive.Primitive.ul;
-    return /* @__PURE__ */ import_react.default.createElement(ListRoot, {
-      ...selectable && {
-        role: "listbox",
-        "aria-multiselectable": true
-      },
-      ...rootProps,
-      ref: forwardedRef
-    }, /* @__PURE__ */ import_react.default.createElement(ListProvider, {
-      scope: __listScope,
-      variant,
-      selectable,
-      itemSizes
-    }, children));
-  } finally {
-    _effect.f();
-  }
-});
-List.displayName = LIST_NAME;
-var LIST_ITEM_NAME = "ListItem";
-var [createListItemContext, createListItemScope] = (0, import_react_context2.createContextScope)(LIST_ITEM_NAME, []);
-var [ListItemProvider, useListItemContext] = createListItemContext(LIST_ITEM_NAME);
-var ListItemHeading = /* @__PURE__ */ (0, import_react2.forwardRef)(({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Root2 = asChild ? import_react_slot.Slot : import_react_primitive2.Primitive.div;
-    return /* @__PURE__ */ import_react2.default.createElement(Root2, {
-      ...props,
-      id: headingId,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var ListItemOpenTrigger = Collapsible.Trigger;
-var ListItemCollapsibleContent = Collapsible.Content;
-var ListItem = /* @__PURE__ */ (0, import_react2.forwardRef)((props, forwardedRef) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const id = (0, import_react_hooks.useId)("listItem", props.id);
-    const { __listScope, __listItemScope, children, selected: propsSelected, defaultSelected, onSelectedChange, open: propsOpen, defaultOpen, onOpenChange, collapsible, labelId, ...listItemProps } = props;
-    const { selectable } = useListContext(LIST_NAME, __listScope);
-    const [selected = false, setSelected] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: propsSelected,
-      defaultProp: defaultSelected,
-      onChange: onSelectedChange
-    });
-    const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
-      prop: propsOpen,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    });
-    const headingId = (0, import_react_hooks.useId)("listItem__heading", labelId);
-    const listItem = /* @__PURE__ */ import_react2.default.createElement(import_react_primitive2.Primitive.li, {
-      ...listItemProps,
-      id,
-      ref: forwardedRef,
-      "aria-labelledby": headingId,
-      ...selectable && {
-        role: "option",
-        "aria-selected": !!selected
-      },
-      ...open && {
-        "aria-expanded": true
-      }
-    }, children);
-    return /* @__PURE__ */ import_react2.default.createElement(ListItemProvider, {
-      scope: __listItemScope,
-      headingId,
-      open,
-      selected,
-      setSelected
-    }, collapsible ? /* @__PURE__ */ import_react2.default.createElement(Collapsible.Root, {
-      asChild: true,
-      open,
-      onOpenChange: setOpen
-    }, listItem) : listItem);
-  } finally {
-    _effect.f();
-  }
-});
-ListItem.displayName = LIST_ITEM_NAME;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LIST_ITEM_NAME,
-  LIST_NAME,
-  List,
-  ListItem,
-  ListItemCollapsibleContent,
-  ListItemHeading,
-  ListItemOpenTrigger,
-  createListItemScope,
-  createListScope,
-  useListContext,
-  useListItemContext
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/List.tsx", "../../../src/ListItem.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\n// 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\n\nconst LIST_NAME = 'List';\n\ntype ListScopedProps<P> = P & { __listScope?: Scope };\n\ntype ListVariant = 'ordered' | 'unordered';\n\ntype ListItemSizes = 'one' | 'many';\n\ntype ListProps = ComponentPropsWithRef<typeof Primitive.ol> & {\n  selectable?: boolean;\n  variant?: ListVariant;\n  itemSizes?: ListItemSizes;\n};\n\nconst [createListContext, createListScope] = createContextScope(LIST_NAME, []);\n\ntype ListContextValue = {\n  selectable: Exclude<ListProps['selectable'], undefined>;\n  variant: Exclude<ListProps['variant'], undefined>;\n  itemSizes?: ListItemSizes;\n};\n\nconst [ListProvider, useListContext] = createListContext<ListContextValue>(LIST_NAME);\n\nconst List = forwardRef<HTMLOListElement, ListProps>((props: ListScopedProps<ListProps>, forwardedRef) => {\n  const { __listScope, variant = 'ordered', selectable = false, itemSizes, children, ...rootProps } = props;\n  const ListRoot = variant === 'ordered' ? Primitive.ol : Primitive.ul;\n  return (\n    <ListRoot {...(selectable && { role: 'listbox', 'aria-multiselectable': true })} {...rootProps} ref={forwardedRef}>\n      <ListProvider\n        {...{\n          scope: __listScope,\n          variant,\n          selectable,\n          itemSizes,\n        }}\n      >\n        {children}\n      </ListProvider>\n    </ListRoot>\n  );\n});\n\nList.displayName = LIST_NAME;\n\nexport { List, createListScope, useListContext, LIST_NAME };\n\nexport type { ListProps, ListVariant, ListScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { CheckboxProps } from '@radix-ui/react-checkbox';\nimport { type CollapsibleContentProps, type CollapsibleTriggerProps } from '@radix-ui/react-collapsible';\nimport * as Collapsible from '@radix-ui/react-collapsible';\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ElementRef,\n  forwardRef,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type SetStateAction,\n} from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nimport { LIST_NAME, type ListScopedProps, useListContext } from './List';\n\nconst LIST_ITEM_NAME = 'ListItem';\n\ntype ListItemScopedProps<P> = P & { __listItemScope?: Scope };\n\ninterface ListItemData {\n  id: string;\n  labelId?: string;\n  selected?: CheckboxProps['checked'];\n  open?: boolean;\n}\n\ntype ListItemProps = Omit<ListItemData, 'id'> & { collapsible?: boolean } & RefAttributes<HTMLLIElement> &\n  ComponentPropsWithoutRef<'li'> & {\n    defaultOpen?: boolean;\n    onOpenChange?: (nextOpen: boolean) => void;\n  } & {\n    onSelectedChange?: CheckboxProps['onCheckedChange'];\n    defaultSelected?: CheckboxProps['defaultChecked'];\n  };\n\ntype ListItemElement = ElementRef<'li'>;\n\nconst [createListItemContext, createListItemScope] = createContextScope(LIST_ITEM_NAME, []);\n\ntype ListItemContextValue = {\n  headingId: string;\n  open: boolean;\n  selected: CheckboxProps['checked'];\n  setSelected: Dispatch<SetStateAction<CheckboxProps['checked']>>;\n};\n\nconst [ListItemProvider, useListItemContext] = createListItemContext<ListItemContextValue>(LIST_ITEM_NAME);\n\ntype ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithoutRef<'p'>, 'id'>> &\n  RefAttributes<HTMLParagraphElement> & {\n    asChild?: boolean;\n  };\n\nconst ListItemHeading = forwardRef<HTMLDivElement, ListItemHeadingProps>(\n  ({ children, asChild, __listItemScope, ...props }, forwardedRef) => {\n    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);\n    const Root = asChild ? Slot : Primitive.div;\n    return (\n      <Root {...props} id={headingId} ref={forwardedRef}>\n        {children}\n      </Root>\n    );\n  },\n);\n\ntype ListItemOpenTriggerProps = ListItemScopedProps<CollapsibleTriggerProps>;\n\nconst ListItemOpenTrigger = Collapsible.Trigger;\n\ntype ListItemCollapsibleContentProps = ComponentProps<typeof Collapsible.Content>;\n\nconst ListItemCollapsibleContent: ForwardRefExoticComponent<CollapsibleContentProps> = Collapsible.Content;\n\nconst ListItem = forwardRef<ListItemElement, ListItemProps>(\n  (props: ListItemScopedProps<ListScopedProps<ListItemProps>>, forwardedRef) => {\n    const id = useId('listItem', props.id);\n\n    const {\n      __listScope,\n      __listItemScope,\n      children,\n      selected: propsSelected,\n      defaultSelected,\n      onSelectedChange,\n      open: propsOpen,\n      defaultOpen,\n      onOpenChange,\n      collapsible,\n      labelId,\n      ...listItemProps\n    } = props;\n    const { selectable } = useListContext(LIST_NAME, __listScope);\n\n    const [selected = false, setSelected] = useControllableState({\n      prop: propsSelected,\n      defaultProp: defaultSelected,\n      onChange: onSelectedChange,\n    });\n\n    const [open = false, setOpen] = useControllableState({\n      prop: propsOpen,\n      defaultProp: defaultOpen,\n      onChange: onOpenChange,\n    });\n\n    const headingId = useId('listItem__heading', labelId);\n\n    const listItem = (\n      <Primitive.li\n        {...listItemProps}\n        id={id}\n        ref={forwardedRef}\n        aria-labelledby={headingId}\n        {...(selectable && { role: 'option', 'aria-selected': !!selected })}\n        {...(open && { 'aria-expanded': true })}\n      >\n        {children}\n      </Primitive.li>\n    );\n\n    return (\n      <ListItemProvider\n        scope={__listItemScope}\n        headingId={headingId}\n        open={open}\n        selected={selected}\n        setSelected={setSelected}\n      >\n        {collapsible ? (\n          <Collapsible.Root asChild open={open} onOpenChange={setOpen}>\n            {listItem}\n          </Collapsible.Root>\n        ) : (\n          listItem\n        )}\n      </ListItemProvider>\n    );\n  },\n);\n\nListItem.displayName = LIST_ITEM_NAME;\n\nexport {\n  ListItem,\n  ListItemHeading,\n  ListItemCollapsibleContent,\n  ListItemOpenTrigger,\n  createListItemScope,\n  useListItemContext,\n  LIST_ITEM_NAME,\n};\n\nexport type {\n  ListItemProps,\n  ListItemHeadingProps,\n  ListItemCollapsibleContentProps,\n  ListItemOpenTriggerProps,\n  ListItemScopedProps,\n};\n"],
-  "mappings": "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",
-  "names": ["import_react_context", "import_react_primitive", "import_react", "LIST_NAME", "createListContext", "createListScope", "createContextScope", "ListProvider", "useListContext", "List", "forwardRef", "props", "forwardedRef", "__listScope", "variant", "selectable", "itemSizes", "children", "rootProps", "ListRoot", "Primitive", "ol", "ul", "React", "role", "ref", "scope", "displayName", "LIST_ITEM_NAME", "createListItemContext", "createListItemScope", "ListItemProvider", "useListItemContext", "ListItemHeading", "asChild", "__listItemScope", "headingId", "Root", "Slot", "div", "id", "ListItemOpenTrigger", "Trigger", "ListItemCollapsibleContent", "Content", "ListItem", "useId", "selected", "propsSelected", "defaultSelected", "onSelectedChange", "open", "propsOpen", "defaultOpen", "onOpenChange", "collapsible", "labelId", "listItemProps", "setSelected", "useControllableState", "prop", "defaultProp", "onChange", "setOpen", "listItem", "li", "aria-labelledby"]
-}

package/dist/lib/node/meta.json

@@ -1 +0,0 @@
-{"inputs":{"packages/ui/primitives/react-list/src/List.tsx":{"bytes":5630,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-list/src/ListItem.tsx":{"bytes":13458,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-list/src/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/primitives/react-list/src/index.ts":{"bytes":553,"imports":[{"path":"packages/ui/primitives/react-list/src/List.tsx","kind":"import-statement","original":"./List"},{"path":"packages/ui/primitives/react-list/src/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-list/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10287},"packages/ui/primitives/react-list/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"exports":["LIST_ITEM_NAME","LIST_NAME","List","ListItem","ListItemCollapsibleContent","ListItemHeading","ListItemOpenTrigger","createListItemScope","createListScope","useListContext","useListItemContext"],"entryPoint":"packages/ui/primitives/react-list/src/index.ts","inputs":{"packages/ui/primitives/react-list/src/List.tsx":{"bytesInOutput":1120},"packages/ui/primitives/react-list/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-list/src/ListItem.tsx":{"bytesInOutput":2852}},"bytes":4328}}}