@dxos/react-list 0.6.11 → 0.6.12-main.5cc132e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,103 @@
1
+ // packages/ui/primitives/react-list/src/List.tsx
2
+ import { createContextScope } from "@radix-ui/react-context";
3
+ import { Primitive } from "@radix-ui/react-primitive";
4
+ import React, { forwardRef } from "react";
5
+ var LIST_NAME = "List";
6
+ var [createListContext, createListScope] = createContextScope(LIST_NAME, []);
7
+ var [ListProvider, useListContext] = createListContext(LIST_NAME);
8
+ var List = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
9
+ const { __listScope, variant = "ordered", selectable = false, itemSizes, children, ...rootProps } = props;
10
+ const ListRoot = variant === "ordered" ? Primitive.ol : Primitive.ul;
11
+ return /* @__PURE__ */ React.createElement(ListRoot, {
12
+ ...selectable && {
13
+ role: "listbox",
14
+ "aria-multiselectable": true
15
+ },
16
+ ...rootProps,
17
+ ref: forwardedRef
18
+ }, /* @__PURE__ */ React.createElement(ListProvider, {
19
+ scope: __listScope,
20
+ variant,
21
+ selectable,
22
+ itemSizes
23
+ }, children));
24
+ });
25
+ List.displayName = LIST_NAME;
26
+
27
+ // packages/ui/primitives/react-list/src/ListItem.tsx
28
+ import * as Collapsible from "@radix-ui/react-collapsible";
29
+ import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
30
+ import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
31
+ import { Slot } from "@radix-ui/react-slot";
32
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
33
+ import React2, { forwardRef as forwardRef2 } from "react";
34
+ import { useId } from "@dxos/react-hooks";
35
+ var LIST_ITEM_NAME = "ListItem";
36
+ var [createListItemContext, createListItemScope] = createContextScope2(LIST_ITEM_NAME, []);
37
+ var [ListItemProvider, useListItemContext] = createListItemContext(LIST_ITEM_NAME);
38
+ var ListItemHeading = /* @__PURE__ */ forwardRef2(({ children, asChild, __listItemScope, ...props }, forwardedRef) => {
39
+ const { headingId } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
40
+ const Root2 = asChild ? Slot : Primitive2.div;
41
+ return /* @__PURE__ */ React2.createElement(Root2, {
42
+ ...props,
43
+ id: headingId,
44
+ ref: forwardedRef
45
+ }, children);
46
+ });
47
+ var ListItemOpenTrigger = Collapsible.Trigger;
48
+ var ListItemCollapsibleContent = Collapsible.Content;
49
+ var ListItem = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
50
+ const id = useId("listItem", props.id);
51
+ const { __listScope, __listItemScope, children, selected: propsSelected, defaultSelected, onSelectedChange, open: propsOpen, defaultOpen, onOpenChange, collapsible, labelId, ...listItemProps } = props;
52
+ const { selectable } = useListContext(LIST_NAME, __listScope);
53
+ const [selected = false, setSelected] = useControllableState({
54
+ prop: propsSelected,
55
+ defaultProp: defaultSelected,
56
+ onChange: onSelectedChange
57
+ });
58
+ const [open = false, setOpen] = useControllableState({
59
+ prop: propsOpen,
60
+ defaultProp: defaultOpen,
61
+ onChange: onOpenChange
62
+ });
63
+ const headingId = useId("listItem__heading", labelId);
64
+ const listItem = /* @__PURE__ */ React2.createElement(Primitive2.li, {
65
+ ...listItemProps,
66
+ id,
67
+ ref: forwardedRef,
68
+ "aria-labelledby": headingId,
69
+ ...selectable && {
70
+ role: "option",
71
+ "aria-selected": !!selected
72
+ },
73
+ ...open && {
74
+ "aria-expanded": true
75
+ }
76
+ }, children);
77
+ return /* @__PURE__ */ React2.createElement(ListItemProvider, {
78
+ scope: __listItemScope,
79
+ headingId,
80
+ open,
81
+ selected,
82
+ setSelected
83
+ }, collapsible ? /* @__PURE__ */ React2.createElement(Collapsible.Root, {
84
+ asChild: true,
85
+ open,
86
+ onOpenChange: setOpen
87
+ }, listItem) : listItem);
88
+ });
89
+ ListItem.displayName = LIST_ITEM_NAME;
90
+ export {
91
+ LIST_ITEM_NAME,
92
+ LIST_NAME,
93
+ List,
94
+ ListItem,
95
+ ListItemCollapsibleContent,
96
+ ListItemHeading,
97
+ ListItemOpenTrigger,
98
+ createListItemScope,
99
+ createListScope,
100
+ useListContext,
101
+ useListItemContext
102
+ };
103
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/List.tsx", "../../../src/ListItem.tsx"],
4
+ "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"],
5
+ "mappings": "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",
6
+ "names": ["createContextScope", "Primitive", "React", "forwardRef", "LIST_NAME", "createListContext", "createListScope", "createContextScope", "ListProvider", "useListContext", "List", "forwardRef", "props", "forwardedRef", "__listScope", "variant", "selectable", "itemSizes", "children", "rootProps", "ListRoot", "Primitive", "ol", "ul", "role", "ref", "scope", "displayName", "Collapsible", "createContextScope", "Primitive", "Slot", "useControllableState", "React", "forwardRef", "useId", "LIST_ITEM_NAME", "createListItemContext", "createListItemScope", "createContextScope", "ListItemProvider", "useListItemContext", "ListItemHeading", "forwardRef", "children", "asChild", "__listItemScope", "props", "forwardedRef", "headingId", "Root", "Slot", "Primitive", "div", "React", "id", "ref", "ListItemOpenTrigger", "Trigger", "ListItemCollapsibleContent", "Content", "ListItem", "useId", "__listScope", "selected", "propsSelected", "defaultSelected", "onSelectedChange", "open", "propsOpen", "defaultOpen", "onOpenChange", "collapsible", "labelId", "listItemProps", "selectable", "useListContext", "LIST_NAME", "setSelected", "useControllableState", "prop", "defaultProp", "onChange", "setOpen", "listItem", "li", "aria-labelledby", "role", "scope", "displayName"]
7
+ }
@@ -0,0 +1 @@
1
+ {"inputs":{"packages/ui/primitives/react-list/src/List.tsx":{"bytes":5456,"imports":[{"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":13123,"imports":[{"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":585,"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-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10270},"packages/ui/primitives/react-list/dist/lib/node-esm/index.mjs":{"imports":[{"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":"@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":935},"packages/ui/primitives/react-list/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-list/src/ListItem.tsx":{"bytesInOutput":2530}},"bytes":3821}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-list",
3
- "version": "0.6.11",
3
+ "version": "0.6.12-main.5cc132e",
4
4
  "description": "List primitive components for React.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,7 +10,8 @@
10
10
  ".": {
11
11
  "browser": "./dist/lib/browser/index.mjs",
12
12
  "node": {
13
- "default": "./dist/lib/node/index.cjs"
13
+ "require": "./dist/lib/node/index.cjs",
14
+ "default": "./dist/lib/node-esm/index.mjs"
14
15
  },
15
16
  "types": "./dist/types/src/index.d.ts"
16
17
  }
@@ -30,7 +31,7 @@
30
31
  "@radix-ui/react-slot": "^1.0.1",
31
32
  "@radix-ui/react-use-controllable-state": "^1.0.0",
32
33
  "lodash.omit": "^4.5.0",
33
- "@dxos/react-hooks": "0.6.11"
34
+ "@dxos/react-hooks": "0.6.12-main.5cc132e"
34
35
  },
35
36
  "devDependencies": {
36
37
  "@radix-ui/react-checkbox": "^1.0.3",