@dxos/react-list 0.11.0 → 0.12.0-next-2be9f24c465d98f4bd186aa03ece788902e6c17a

package/dist/lib/index.mjs

@@ -14,7 +14,8 @@ var [ListProvider, useListContext] = createListContext(LIST_NAME);
 //#region src/List.tsx
 var List = forwardRef((props, forwardedRef) => {
 	const { __listScope, variant = "ordered", selectable = false, multiSelectable = false, itemSizes, children, ...rootProps } = props;
-	return /* @__PURE__ */ jsx(variant === "ordered" ? Primitive.ol : Primitive.ul, {
+	const ListRoot = variant === "ordered" ? Primitive.ol : Primitive.ul;
+	return /* @__PURE__ */ jsx(ListRoot, {
 		...selectable && {
 			role: "listbox",
 			...multiSelectable && { "aria-multiselectable": true }
@@ -40,7 +41,8 @@ var [ListItemProvider, useListItemContext] = createListItemContext(LIST_ITEM_NAM
 //#region src/ListItem.tsx
 var ListItemHeading = forwardRef(({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
 	const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-	return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.div, {
+	const Comp = asChild ? Slot : Primitive.div;
+	return /* @__PURE__ */ jsx(Comp, {
 		...props,
 		id: headingId,
 		ref: forwardedRef,

package/dist/lib/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ListContext.ts","../../src/List.tsx","../../src/ListItemContext.ts","../../src/ListItem.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport { type ComponentPropsWithRef } from 'react';\n\n// Kept out of `List.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const LIST_NAME = 'List';\n\nexport type ListScopedProps<P> = P & { __listScope?: Scope };\n\nexport type ListVariant = 'ordered' | 'unordered';\n\nexport type ListItemSizes = 'one' | 'many';\n\nexport type ListProps = ComponentPropsWithRef<typeof Primitive.ol> & {\n  /**\n   * If true, render as `role=\"listbox\"` and let `ListItem` children become\n   * `role=\"option\"` + `aria-selected`. If false (default) the list is a\n   * plain `<ol>` / `<ul>` with no selection semantics — pick this for\n   * static lists.\n   */\n  selectable?: boolean;\n  /**\n   * If true, the listbox advertises multi-select via\n   * `aria-multiselectable=\"true\"`. Defaults to false (single-select).\n   * Has no effect unless `selectable` is also true.\n   */\n  multiSelectable?: boolean;\n  variant?: ListVariant;\n  itemSizes?: ListItemSizes;\n};\n\nexport const [createListContext, createListScope] = createContextScope(LIST_NAME, []);\n\nexport type ListContextValue = {\n  selectable: Exclude<ListProps['selectable'], undefined>;\n  variant: Exclude<ListProps['variant'], undefined>;\n  itemSizes?: ListItemSizes;\n};\n\nexport const [ListProvider, useListContext] = createListContext<ListContextValue>(LIST_NAME);\n","//\n// Copyright 2023 DXOS.org\n//\n\n// Elemental list / listbox primitive.\n//\n// This is the ARIA-only foundation of the DXOS list stack. It renders a\n// semantically-correct `<ol>` / `<ul>` (or, when `selectable={true}`, a\n// `role=\"listbox\"` element with `role=\"option\"` children carrying\n// `aria-selected`). It applies no styling, no keyboard navigation, and\n// no `dx-*` utility classes — those are layered above in\n// `@dxos/react-ui-list`.\n//\n// Layering:\n//   - `@dxos/react-list`      — this package; ARIA + structure only.\n//   - `@dxos/react-ui-list`   — adds `dx-*` styling, keyboard nav, and\n//                               opinionated containers (Listbox, OrderedList,\n//                               Tree, Accordion, Combobox, Picker) plus the\n//                               reusable navigation/selection/disclosure aspects.\n//   - `@dxos/react-ui-mosaic` — virtualized / draggable / card-board\n//                               layouts; composes the above where useful.\n//\n// Most app code should reach for `@dxos/react-ui-list`. Use this primitive\n// directly only when building a *new* selectable surface that needs full\n// control over styling and keyboard handling (e.g. a custom Combobox).\n//\n// See:\n//   - `packages/ui/ui-theme/src/css/components/state.md` for the\n//     `aria-selected` ↔ `dx-selected` pairing rules.\n//   - `packages/ui/react-ui-list/AUDIT.md` for why this layering exists.\n//   - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { forwardRef } from 'react';\n\nimport { LIST_NAME, type ListProps, ListProvider, type ListScopedProps } from './ListContext';\n\nconst List = forwardRef<HTMLOListElement, ListProps>((props: ListScopedProps<ListProps>, forwardedRef) => {\n  const {\n    __listScope,\n    variant = 'ordered',\n    selectable = false,\n    multiSelectable = false,\n    itemSizes,\n    children,\n    ...rootProps\n  } = props;\n  const ListRoot = variant === 'ordered' ? Primitive.ol : Primitive.ul;\n  return (\n    <ListRoot\n      // `aria-multiselectable` is only meaningful on `role=\"listbox\"`,\n      // and even there is omitted in the single-select default to keep\n      // assistive tech announcements concise.\n      {...(selectable && {\n        role: 'listbox',\n        ...(multiSelectable && { 'aria-multiselectable': true as const }),\n      })}\n      {...rootProps}\n      ref={forwardedRef}\n    >\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 };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type CheckboxProps } from '@radix-ui/react-checkbox';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type Dispatch,\n  type RefAttributes,\n  type SetStateAction,\n} from 'react';\n\n// Kept out of `ListItem.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const LIST_ITEM_NAME = 'ListItem';\n\nexport type ListItemScopedProps<P> = P & { __listItemScope?: Scope };\n\nexport interface ListItemData {\n  id: string;\n  labelId?: string;\n  selected?: CheckboxProps['checked'];\n  open?: boolean;\n}\n\nexport type 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\nexport type ListItemElement = ComponentRef<'li'>;\n\nexport const [createListItemContext, createListItemScope] = createContextScope(LIST_ITEM_NAME, []);\n\nexport type ListItemContextValue = {\n  headingId: string;\n  open: boolean;\n  selected: CheckboxProps['checked'];\n  setSelected: Dispatch<SetStateAction<CheckboxProps['checked']>>;\n};\n\nexport const [ListItemProvider, useListItemContext] = createListItemContext<ListItemContextValue>(LIST_ITEM_NAME);\n\nexport type ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithoutRef<'p'>, 'id'>> &\n  RefAttributes<HTMLParagraphElement> & {\n    asChild?: boolean;\n  };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type CollapsibleContentProps, type CollapsibleTriggerProps } from '@radix-ui/react-collapsible';\nimport * as Collapsible from '@radix-ui/react-collapsible';\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, { type ComponentProps, type ForwardRefExoticComponent, forwardRef } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nimport { LIST_NAME, type ListScopedProps, useListContext } from './ListContext';\nimport {\n  LIST_ITEM_NAME,\n  type ListItemElement,\n  type ListItemHeadingProps,\n  type ListItemProps,\n  ListItemProvider,\n  type ListItemScopedProps,\n  useListItemContext,\n} from './ListItemContext';\n\nconst ListItemHeading = forwardRef<HTMLDivElement, ListItemHeadingProps>(\n  ({ children, asChild, __listItemScope, ...props }, forwardedRef) => {\n    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);\n    const Comp = asChild ? Slot : Primitive.div;\n    return (\n      <Comp {...props} id={headingId} ref={forwardedRef}>\n        {children}\n      </Comp>\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 { ListItem, ListItemCollapsibleContent, ListItemHeading, ListItemOpenTrigger };\n\nexport type { ListItemCollapsibleContentProps, ListItemOpenTriggerProps };\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY;AA0BzB,IAAa,CAAC,mBAAmB,mBAAmB,mBAAmB,WAAW,CAAC,CAAC;AAQpF,IAAa,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;;;ACR3F,IAAM,OAAO,YAAyC,OAAmC,iBAAiB;CACxG,MAAM,EACJ,aACA,UAAU,WACV,aAAa,OACb,kBAAkB,OAClB,WACA,UACA,GAAG,cACD;CAEJ,OACE,oBAFe,YAAY,YAAY,UAAU,KAAK,UAAU,IAEhE;EAIE,GAAK,cAAc;GACjB,MAAM;GACN,GAAI,mBAAmB,EAAE,wBAAwB,KAAc;EACjE;EACA,GAAI;EACJ,KAAK;YAEL,oBAAC,cAAD;GAEI,OAAO;GACP;GACA;GACA;GAGD;EACW,CAAA;CACN,CAAA;AAEd,CAAC;AAED,KAAK,cAAc;;;ACzDnB,IAAa,iBAAiB;AAsB9B,IAAa,CAAC,uBAAuB,uBAAuB,mBAAmB,gBAAgB,CAAC,CAAC;AASjG,IAAa,CAAC,kBAAkB,sBAAsB,sBAA4C,cAAc;;;ACxBhH,IAAM,kBAAkB,YACrB,EAAE,UAAU,SAAS,iBAAiB,GAAG,SAAS,iBAAiB;CAClE,MAAM,EAAE,cAAc,mBAAmB,gBAAgB,eAAe;CAExE,OACE,oBAFW,UAAU,OAAO,UAAU,KAEtC;EAAM,GAAI;EAAO,IAAI;EAAW,KAAK;EAClC;CACG,CAAA;AAEV,CACF;AAIA,IAAM,sBAAsB,YAAY;AAIxC,IAAM,6BAAiF,YAAY;AAEnG,IAAM,WAAW,YACd,OAA4D,iBAAiB;CAC5E,MAAM,KAAK,MAAM,YAAY,MAAM,EAAE;CAErC,MAAM,EACJ,aACA,iBACA,UACA,UAAU,eACV,iBACA,kBACA,MAAM,WACN,aACA,cACA,aACA,SACA,GAAG,kBACD;CACJ,MAAM,EAAE,eAAe,eAAe,WAAW,WAAW;CAE5D,MAAM,CAAC,WAAW,OAAO,eAAe,qBAAqB;EAC3D,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,OAAO,OAAO,WAAW,qBAAqB;EACnD,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CAED,MAAM,YAAY,MAAM,qBAAqB,OAAO;CAEpD,MAAM,WACJ,oBAAC,UAAU,IAAX;EACE,GAAI;EACA;EACJ,KAAK;EACL,mBAAiB;EACjB,GAAK,cAAc;GAAE,QAAQ;GAAU,iBAAiB,CAAC,CAAC;EAAS;EACnE,GAAK,QAAQ,EAAE,iBAAiB,KAAK;EAEpC;CACW,CAAA;CAGhB,OACE,oBAAC,kBAAD;EACE,OAAO;EACI;EACL;EACI;EACG;YAEZ,cACC,oBAAC,YAAY,MAAb;GAAkB,SAAA;GAAc;GAAM,cAAc;aACjD;EACe,CAAA,IAElB;CAEc,CAAA;AAEtB,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ListContext.ts","../../src/List.tsx","../../src/ListItemContext.ts","../../src/ListItem.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport { type ComponentPropsWithRef } from 'react';\n\n// Kept out of `List.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const LIST_NAME = 'List';\n\nexport type ListScopedProps<P> = P & { __listScope?: Scope };\n\nexport type ListVariant = 'ordered' | 'unordered';\n\nexport type ListItemSizes = 'one' | 'many';\n\nexport type ListProps = ComponentPropsWithRef<typeof Primitive.ol> & {\n  /**\n   * If true, render as `role=\"listbox\"` and let `ListItem` children become\n   * `role=\"option\"` + `aria-selected`. If false (default) the list is a\n   * plain `<ol>` / `<ul>` with no selection semantics — pick this for\n   * static lists.\n   */\n  selectable?: boolean;\n  /**\n   * If true, the listbox advertises multi-select via\n   * `aria-multiselectable=\"true\"`. Defaults to false (single-select).\n   * Has no effect unless `selectable` is also true.\n   */\n  multiSelectable?: boolean;\n  variant?: ListVariant;\n  itemSizes?: ListItemSizes;\n};\n\nexport const [createListContext, createListScope] = createContextScope(LIST_NAME, []);\n\nexport type ListContextValue = {\n  selectable: Exclude<ListProps['selectable'], undefined>;\n  variant: Exclude<ListProps['variant'], undefined>;\n  itemSizes?: ListItemSizes;\n};\n\nexport const [ListProvider, useListContext] = createListContext<ListContextValue>(LIST_NAME);\n","//\n// Copyright 2023 DXOS.org\n//\n\n// Elemental list / listbox primitive.\n//\n// This is the ARIA-only foundation of the DXOS list stack. It renders a\n// semantically-correct `<ol>` / `<ul>` (or, when `selectable={true}`, a\n// `role=\"listbox\"` element with `role=\"option\"` children carrying\n// `aria-selected`). It applies no styling, no keyboard navigation, and\n// no `dx-*` utility classes — those are layered above in\n// `@dxos/react-ui-list`.\n//\n// Layering:\n//   - `@dxos/react-list`      — this package; ARIA + structure only.\n//   - `@dxos/react-ui-list`   — adds `dx-*` styling, keyboard nav, and\n//                               opinionated containers (Listbox, OrderedList,\n//                               Tree, Accordion, Combobox, Picker) plus the\n//                               reusable navigation/selection/disclosure aspects.\n//   - `@dxos/react-ui-mosaic` — virtualized / draggable / card-board\n//                               layouts; composes the above where useful.\n//\n// Most app code should reach for `@dxos/react-ui-list`. Use this primitive\n// directly only when building a *new* selectable surface that needs full\n// control over styling and keyboard handling (e.g. a custom Combobox).\n//\n// See:\n//   - `packages/ui/ui-theme/src/css/components/state.md` for the\n//     `aria-selected` ↔ `dx-selected` pairing rules.\n//   - `packages/ui/react-ui-list/AUDIT.md` for why this layering exists.\n//   - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { forwardRef } from 'react';\n\nimport { LIST_NAME, type ListProps, ListProvider, type ListScopedProps } from './ListContext';\n\nconst List = forwardRef<HTMLOListElement, ListProps>((props: ListScopedProps<ListProps>, forwardedRef) => {\n  const {\n    __listScope,\n    variant = 'ordered',\n    selectable = false,\n    multiSelectable = false,\n    itemSizes,\n    children,\n    ...rootProps\n  } = props;\n  const ListRoot = variant === 'ordered' ? Primitive.ol : Primitive.ul;\n  return (\n    <ListRoot\n      // `aria-multiselectable` is only meaningful on `role=\"listbox\"`,\n      // and even there is omitted in the single-select default to keep\n      // assistive tech announcements concise.\n      {...(selectable && {\n        role: 'listbox',\n        ...(multiSelectable && { 'aria-multiselectable': true as const }),\n      })}\n      {...rootProps}\n      ref={forwardedRef}\n    >\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 };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type CheckboxProps } from '@radix-ui/react-checkbox';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type Dispatch,\n  type RefAttributes,\n  type SetStateAction,\n} from 'react';\n\n// Kept out of `ListItem.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const LIST_ITEM_NAME = 'ListItem';\n\nexport type ListItemScopedProps<P> = P & { __listItemScope?: Scope };\n\nexport interface ListItemData {\n  id: string;\n  labelId?: string;\n  selected?: CheckboxProps['checked'];\n  open?: boolean;\n}\n\nexport type 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\nexport type ListItemElement = ComponentRef<'li'>;\n\nexport const [createListItemContext, createListItemScope] = createContextScope(LIST_ITEM_NAME, []);\n\nexport type ListItemContextValue = {\n  headingId: string;\n  open: boolean;\n  selected: CheckboxProps['checked'];\n  setSelected: Dispatch<SetStateAction<CheckboxProps['checked']>>;\n};\n\nexport const [ListItemProvider, useListItemContext] = createListItemContext<ListItemContextValue>(LIST_ITEM_NAME);\n\nexport type ListItemHeadingProps = ListItemScopedProps<Omit<ComponentPropsWithoutRef<'p'>, 'id'>> &\n  RefAttributes<HTMLParagraphElement> & {\n    asChild?: boolean;\n  };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type CollapsibleContentProps, type CollapsibleTriggerProps } from '@radix-ui/react-collapsible';\nimport * as Collapsible from '@radix-ui/react-collapsible';\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, { type ComponentProps, type ForwardRefExoticComponent, forwardRef } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nimport { LIST_NAME, type ListScopedProps, useListContext } from './ListContext';\nimport {\n  LIST_ITEM_NAME,\n  type ListItemElement,\n  type ListItemHeadingProps,\n  type ListItemProps,\n  ListItemProvider,\n  type ListItemScopedProps,\n  useListItemContext,\n} from './ListItemContext';\n\nconst ListItemHeading = forwardRef<HTMLDivElement, ListItemHeadingProps>(\n  ({ children, asChild, __listItemScope, ...props }, forwardedRef) => {\n    const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);\n    const Comp = asChild ? Slot : Primitive.div;\n    return (\n      <Comp {...props} id={headingId} ref={forwardedRef}>\n        {children}\n      </Comp>\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 { ListItem, ListItemCollapsibleContent, ListItemHeading, ListItemOpenTrigger };\n\nexport type { ListItemCollapsibleContentProps, ListItemOpenTriggerProps };\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY;AA0BzB,IAAa,CAAC,mBAAmB,mBAAmB,mBAAmB,WAAW,CAAC,CAAC;AAQpF,IAAa,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;;;ACR3F,IAAM,OAAO,YAAyC,OAAmC,iBAAiB;CACxG,MAAM,EACJ,aACA,UAAU,WACV,aAAa,OACb,kBAAkB,OAClB,WACA,UACA,GAAG,cACD;CACJ,MAAM,WAAW,YAAY,YAAY,UAAU,KAAK,UAAU;CAClE,OACE,oBAAC,UAAD;EAIE,GAAK,cAAc;GACjB,MAAM;GACN,GAAI,mBAAmB,EAAE,wBAAwB,KAAc;EACjE;EACA,GAAI;EACJ,KAAK;EAEL,UAAA,oBAAC,cAAD;GAEI,OAAO;GACP;GACA;GACA;GAGD;EACW,CAAA;CACN,CAAA;AAEd,CAAC;AAED,KAAK,cAAc;;;ACzDnB,IAAa,iBAAiB;AAsB9B,IAAa,CAAC,uBAAuB,uBAAuB,mBAAmB,gBAAgB,CAAC,CAAC;AASjG,IAAa,CAAC,kBAAkB,sBAAsB,sBAA4C,cAAc;;;ACxBhH,IAAM,kBAAkB,YACrB,EAAE,UAAU,SAAS,iBAAiB,GAAG,SAAS,iBAAiB;CAClE,MAAM,EAAE,cAAc,mBAAmB,gBAAgB,eAAe;CACxE,MAAM,OAAO,UAAU,OAAO,UAAU;CACxC,OACE,oBAAC,MAAD;EAAM,GAAI;EAAO,IAAI;EAAW,KAAK;EAClC;CACG,CAAA;AAEV,CACF;AAIA,IAAM,sBAAsB,YAAY;AAIxC,IAAM,6BAAiF,YAAY;AAEnG,IAAM,WAAW,YACd,OAA4D,iBAAiB;CAC5E,MAAM,KAAK,MAAM,YAAY,MAAM,EAAE;CAErC,MAAM,EACJ,aACA,iBACA,UACA,UAAU,eACV,iBACA,kBACA,MAAM,WACN,aACA,cACA,aACA,SACA,GAAG,kBACD;CACJ,MAAM,EAAE,eAAe,eAAe,WAAW,WAAW;CAE5D,MAAM,CAAC,WAAW,OAAO,eAAe,qBAAqB;EAC3D,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,OAAO,OAAO,WAAW,qBAAqB;EACnD,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CAED,MAAM,YAAY,MAAM,qBAAqB,OAAO;CAEpD,MAAM,WACJ,oBAAC,UAAU,IAAX;EACE,GAAI;EACA;EACJ,KAAK;EACL,mBAAiB;EACjB,GAAK,cAAc;GAAE,QAAQ;GAAU,iBAAiB,CAAC,CAAC;EAAS;EACnE,GAAK,QAAQ,EAAE,iBAAiB,KAAK;EAEpC;CACW,CAAA;CAGhB,OACE,oBAAC,kBAAD;EACE,OAAO;EACI;EACL;EACI;EACG;EAEZ,UAAA,cACC,oBAAC,YAAY,MAAb;GAAkB,SAAA;GAAc;GAAM,cAAc;GACjD,UAAA;EACe,CAAA,IAElB;CAEc,CAAA;AAEtB,CACF;AAEA,SAAS,cAAc"}

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

@@ -26,7 +26,7 @@ export type ListProps = ComponentPropsWithRef<typeof Primitive.ol> & {
 };
 export declare const createListContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [React.FC<ContextValueType & {
     scope: Scope<ContextValueType>;
-    children: import("react").ReactNode;
+    children: React.ReactNode;
 }>, (consumerName: string, scope: Scope<ContextValueType | undefined>) => ContextValueType], createListScope: import("@radix-ui/react-context").CreateScope;
 export type ListContextValue = {
     selectable: Exclude<ListProps['selectable'], undefined>;