@radix-ui/react-collection 0.1.4 → 0.1.5-rc.3
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.
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +134 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +115 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +8 -7
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export interface CollectionProps extends SlotProps {
|
|
|
7
7
|
}
|
|
8
8
|
export function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string): readonly [{
|
|
9
9
|
readonly Provider: React.FC<{
|
|
10
|
+
children?: React.ReactNode;
|
|
10
11
|
scope: any;
|
|
11
12
|
}>;
|
|
12
13
|
readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;AAOA,iBAAiB,MAAM,wBAAwB,CAAC,WAAW,CAAC,CAAC;AAE7D,gCAA0B,SAAQ,SAAS;IACzC,KAAK,EAAE,GAAG,CAAC;CACZ;AAOD,iCAA0B,WAAW,SAAS,WAAW,EAAE,QAAQ,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM;;mBAkBpC,MAAM,SAAS;eAAS,GAAG;;;;kBAsC/D,MAAM,SAAS;eAClB,GAAG;;WA6BkB,GAAG;SA5EmB,MAAM,SAAS,CAAC,WAAW,CAAC;kFAkGjF","sources":["packages/react/collection/src/packages/react/collection/src/Collection.tsx","packages/react/collection/src/packages/react/collection/src/index.ts","packages/react/collection/src/index.ts"],"sourcesContent":[null,null,"export * from './Collection';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,135 @@
|
|
|
1
|
-
var
|
|
1
|
+
var $hnlpS$react = require("react");
|
|
2
|
+
var $hnlpS$radixuireactcontext = require("@radix-ui/react-context");
|
|
3
|
+
var $hnlpS$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
|
|
4
|
+
var $hnlpS$radixuireactslot = require("@radix-ui/react-slot");
|
|
5
|
+
|
|
6
|
+
function $parcel$exportWildcard(dest, source) {
|
|
7
|
+
Object.keys(source).forEach(function(key) {
|
|
8
|
+
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
Object.defineProperty(dest, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return source[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
return dest;
|
|
21
|
+
}
|
|
22
|
+
function $parcel$interopDefault(a) {
|
|
23
|
+
return a && a.__esModule ? a.default : a;
|
|
24
|
+
}
|
|
25
|
+
function $parcel$export(e, n, v, s) {
|
|
26
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
27
|
+
}
|
|
28
|
+
var $1a96635ec239608b$exports = {};
|
|
29
|
+
|
|
30
|
+
$parcel$export($1a96635ec239608b$exports, "createCollection", () => $1a96635ec239608b$export$c74125a8e3af6bb2);
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
// We have resorted to returning slots directly rather than exposing primitives that can then
|
|
36
|
+
// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
|
|
37
|
+
// This is because we encountered issues with generic types that cannot be statically analysed
|
|
38
|
+
// due to creating them dynamically via createCollection.
|
|
39
|
+
function $1a96635ec239608b$export$c74125a8e3af6bb2(name) {
|
|
40
|
+
/* -----------------------------------------------------------------------------------------------
|
|
41
|
+
* CollectionProvider
|
|
42
|
+
* ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
|
|
43
|
+
const [createCollectionContext, createCollectionScope] = $hnlpS$radixuireactcontext.createContextScope(PROVIDER_NAME);
|
|
44
|
+
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
|
|
45
|
+
collectionRef: {
|
|
46
|
+
current: null
|
|
47
|
+
},
|
|
48
|
+
itemMap: new Map()
|
|
49
|
+
});
|
|
50
|
+
const CollectionProvider = (props)=>{
|
|
51
|
+
const { scope: scope , children: children } = props;
|
|
52
|
+
const ref = ($parcel$interopDefault($hnlpS$react)).useRef(null);
|
|
53
|
+
const itemMap = ($parcel$interopDefault($hnlpS$react)).useRef(new Map()).current;
|
|
54
|
+
return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement(CollectionProviderImpl, {
|
|
55
|
+
scope: scope,
|
|
56
|
+
itemMap: itemMap,
|
|
57
|
+
collectionRef: ref
|
|
58
|
+
}, children);
|
|
59
|
+
};
|
|
60
|
+
/*#__PURE__*/ Object.assign(CollectionProvider, {
|
|
61
|
+
displayName: PROVIDER_NAME
|
|
62
|
+
});
|
|
63
|
+
/* -----------------------------------------------------------------------------------------------
|
|
64
|
+
* CollectionSlot
|
|
65
|
+
* ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
|
|
66
|
+
const CollectionSlot = /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).forwardRef((props, forwardedRef)=>{
|
|
67
|
+
const { scope: scope , children: children } = props;
|
|
68
|
+
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
69
|
+
const composedRefs = $hnlpS$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.collectionRef);
|
|
70
|
+
return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement($hnlpS$radixuireactslot.Slot, {
|
|
71
|
+
ref: composedRefs
|
|
72
|
+
}, children);
|
|
73
|
+
});
|
|
74
|
+
/*#__PURE__*/ Object.assign(CollectionSlot, {
|
|
75
|
+
displayName: COLLECTION_SLOT_NAME
|
|
76
|
+
});
|
|
77
|
+
/* -----------------------------------------------------------------------------------------------
|
|
78
|
+
* CollectionItem
|
|
79
|
+
* ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
|
|
80
|
+
const ITEM_DATA_ATTR = 'data-radix-collection-item';
|
|
81
|
+
const CollectionItemSlot = /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).forwardRef((props, forwardedRef)=>{
|
|
82
|
+
const { scope: scope , children: children , ...itemData } = props;
|
|
83
|
+
const ref = ($parcel$interopDefault($hnlpS$react)).useRef(null);
|
|
84
|
+
const composedRefs = $hnlpS$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
|
|
85
|
+
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
86
|
+
($parcel$interopDefault($hnlpS$react)).useEffect(()=>{
|
|
87
|
+
context.itemMap.set(ref, {
|
|
88
|
+
ref: ref,
|
|
89
|
+
...itemData
|
|
90
|
+
});
|
|
91
|
+
return ()=>void context.itemMap.delete(ref)
|
|
92
|
+
;
|
|
93
|
+
});
|
|
94
|
+
return /*#__PURE__*/ ($parcel$interopDefault($hnlpS$react)).createElement($hnlpS$radixuireactslot.Slot, {
|
|
95
|
+
[ITEM_DATA_ATTR]: '',
|
|
96
|
+
ref: composedRefs
|
|
97
|
+
}, children);
|
|
98
|
+
});
|
|
99
|
+
/*#__PURE__*/ Object.assign(CollectionItemSlot, {
|
|
100
|
+
displayName: ITEM_SLOT_NAME
|
|
101
|
+
});
|
|
102
|
+
/* -----------------------------------------------------------------------------------------------
|
|
103
|
+
* useCollection
|
|
104
|
+
* ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
|
|
105
|
+
const context = useCollectionContext(name + 'CollectionConsumer', scope);
|
|
106
|
+
const getItems = ($parcel$interopDefault($hnlpS$react)).useCallback(()=>{
|
|
107
|
+
const collectionNode = context.collectionRef.current;
|
|
108
|
+
if (!collectionNode) return [];
|
|
109
|
+
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
110
|
+
const items = Array.from(context.itemMap.values());
|
|
111
|
+
const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
112
|
+
);
|
|
113
|
+
return orderedItems;
|
|
114
|
+
}, [
|
|
115
|
+
context.collectionRef,
|
|
116
|
+
context.itemMap
|
|
117
|
+
]);
|
|
118
|
+
return getItems;
|
|
119
|
+
}
|
|
120
|
+
return [
|
|
121
|
+
{
|
|
122
|
+
Provider: CollectionProvider,
|
|
123
|
+
Slot: CollectionSlot,
|
|
124
|
+
ItemSlot: CollectionItemSlot
|
|
125
|
+
},
|
|
126
|
+
useCollection,
|
|
127
|
+
createCollectionScope
|
|
128
|
+
];
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
$parcel$exportWildcard(module.exports, $1a96635ec239608b$exports);
|
|
133
|
+
|
|
134
|
+
|
|
2
135
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/react/collection/src/index.ts","packages/react/collection/src/Collection.tsx"],"sourcesContent":["export * from './Collection';\n","import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\ntype SlotProps = Radix.ComponentPropsWithoutRef<typeof Slot>;\ntype CollectionElement = HTMLElement;\ninterface CollectionProps extends SlotProps {\n scope: any;\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider';\n const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>;\n itemMap: Map<React.RefObject<ItemElement>, { ref: React.RefObject<ItemElement> } & ItemData>;\n };\n\n const [CollectionProviderImpl, useCollectionContext] = createCollectionContext<ContextValue>(\n PROVIDER_NAME,\n { collectionRef: { current: null }, itemMap: new Map() }\n );\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (props) => {\n const { scope, children } = props;\n const ref = React.useRef<CollectionElement>(null);\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n );\n };\n\n CollectionProvider.displayName = PROVIDER_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot';\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props;\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);\n return <Slot ref={composedRefs}>{children}</Slot>;\n }\n );\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot';\n const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode;\n scope: any;\n };\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props;\n const ref = React.useRef<ItemElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) });\n return () => void context.itemMap.delete(ref);\n });\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n );\n }\n );\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope);\n\n const getItems = React.useCallback(() => {\n const collectionNode = context.collectionRef.current;\n if (!collectionNode) return [];\n const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));\n const items = Array.from(context.itemMap.values());\n const orderedItems = items.sort(\n (a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n );\n return orderedItems;\n }, [context.collectionRef, context.itemMap]);\n\n return getItems;\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n"],"names":["React","createContextScope","useComposedRefs","Slot","createCollection","name","PROVIDER_NAME","createCollectionContext","createCollectionScope","CollectionProviderImpl","useCollectionContext","collectionRef","current","itemMap","Map","CollectionProvider","props","scope","children","ref","useRef","COLLECTION_SLOT_NAME","CollectionSlot","forwardRef","forwardedRef","context","composedRefs","ITEM_SLOT_NAME","ITEM_DATA_ATTR","CollectionItemSlot","itemData","useEffect","set","delete","useCollection","getItems","useCallback","collectionNode","orderedNodes","Array","from","querySelectorAll","items","values","orderedItems","sort","a","b","indexOf","Provider","ItemSlot"],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,116 @@
|
|
|
1
|
-
import
|
|
1
|
+
import $6vYhU$react from "react";
|
|
2
|
+
import {createContextScope as $6vYhU$createContextScope} from "@radix-ui/react-context";
|
|
3
|
+
import {useComposedRefs as $6vYhU$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
4
|
+
import {Slot as $6vYhU$Slot} from "@radix-ui/react-slot";
|
|
5
|
+
|
|
6
|
+
function $parcel$export(e, n, v, s) {
|
|
7
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
|
+
}
|
|
9
|
+
var $e02a7d9cb1dc128c$exports = {};
|
|
10
|
+
|
|
11
|
+
$parcel$export($e02a7d9cb1dc128c$exports, "createCollection", () => $e02a7d9cb1dc128c$export$c74125a8e3af6bb2);
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// We have resorted to returning slots directly rather than exposing primitives that can then
|
|
17
|
+
// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
|
|
18
|
+
// This is because we encountered issues with generic types that cannot be statically analysed
|
|
19
|
+
// due to creating them dynamically via createCollection.
|
|
20
|
+
function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
|
|
21
|
+
/* -----------------------------------------------------------------------------------------------
|
|
22
|
+
* CollectionProvider
|
|
23
|
+
* ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
|
|
24
|
+
const [createCollectionContext, createCollectionScope] = $6vYhU$createContextScope(PROVIDER_NAME);
|
|
25
|
+
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
|
|
26
|
+
collectionRef: {
|
|
27
|
+
current: null
|
|
28
|
+
},
|
|
29
|
+
itemMap: new Map()
|
|
30
|
+
});
|
|
31
|
+
const CollectionProvider = (props)=>{
|
|
32
|
+
const { scope: scope , children: children } = props;
|
|
33
|
+
const ref = $6vYhU$react.useRef(null);
|
|
34
|
+
const itemMap = $6vYhU$react.useRef(new Map()).current;
|
|
35
|
+
return /*#__PURE__*/ $6vYhU$react.createElement(CollectionProviderImpl, {
|
|
36
|
+
scope: scope,
|
|
37
|
+
itemMap: itemMap,
|
|
38
|
+
collectionRef: ref
|
|
39
|
+
}, children);
|
|
40
|
+
};
|
|
41
|
+
/*#__PURE__*/ Object.assign(CollectionProvider, {
|
|
42
|
+
displayName: PROVIDER_NAME
|
|
43
|
+
});
|
|
44
|
+
/* -----------------------------------------------------------------------------------------------
|
|
45
|
+
* CollectionSlot
|
|
46
|
+
* ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
|
|
47
|
+
const CollectionSlot = /*#__PURE__*/ $6vYhU$react.forwardRef((props, forwardedRef)=>{
|
|
48
|
+
const { scope: scope , children: children } = props;
|
|
49
|
+
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
50
|
+
const composedRefs = $6vYhU$useComposedRefs(forwardedRef, context.collectionRef);
|
|
51
|
+
return /*#__PURE__*/ $6vYhU$react.createElement($6vYhU$Slot, {
|
|
52
|
+
ref: composedRefs
|
|
53
|
+
}, children);
|
|
54
|
+
});
|
|
55
|
+
/*#__PURE__*/ Object.assign(CollectionSlot, {
|
|
56
|
+
displayName: COLLECTION_SLOT_NAME
|
|
57
|
+
});
|
|
58
|
+
/* -----------------------------------------------------------------------------------------------
|
|
59
|
+
* CollectionItem
|
|
60
|
+
* ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
|
|
61
|
+
const ITEM_DATA_ATTR = 'data-radix-collection-item';
|
|
62
|
+
const CollectionItemSlot = /*#__PURE__*/ $6vYhU$react.forwardRef((props, forwardedRef)=>{
|
|
63
|
+
const { scope: scope , children: children , ...itemData } = props;
|
|
64
|
+
const ref = $6vYhU$react.useRef(null);
|
|
65
|
+
const composedRefs = $6vYhU$useComposedRefs(forwardedRef, ref);
|
|
66
|
+
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
67
|
+
$6vYhU$react.useEffect(()=>{
|
|
68
|
+
context.itemMap.set(ref, {
|
|
69
|
+
ref: ref,
|
|
70
|
+
...itemData
|
|
71
|
+
});
|
|
72
|
+
return ()=>void context.itemMap.delete(ref)
|
|
73
|
+
;
|
|
74
|
+
});
|
|
75
|
+
return /*#__PURE__*/ $6vYhU$react.createElement($6vYhU$Slot, {
|
|
76
|
+
[ITEM_DATA_ATTR]: '',
|
|
77
|
+
ref: composedRefs
|
|
78
|
+
}, children);
|
|
79
|
+
});
|
|
80
|
+
/*#__PURE__*/ Object.assign(CollectionItemSlot, {
|
|
81
|
+
displayName: ITEM_SLOT_NAME
|
|
82
|
+
});
|
|
83
|
+
/* -----------------------------------------------------------------------------------------------
|
|
84
|
+
* useCollection
|
|
85
|
+
* ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
|
|
86
|
+
const context = useCollectionContext(name + 'CollectionConsumer', scope);
|
|
87
|
+
const getItems = $6vYhU$react.useCallback(()=>{
|
|
88
|
+
const collectionNode = context.collectionRef.current;
|
|
89
|
+
if (!collectionNode) return [];
|
|
90
|
+
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
91
|
+
const items = Array.from(context.itemMap.values());
|
|
92
|
+
const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
93
|
+
);
|
|
94
|
+
return orderedItems;
|
|
95
|
+
}, [
|
|
96
|
+
context.collectionRef,
|
|
97
|
+
context.itemMap
|
|
98
|
+
]);
|
|
99
|
+
return getItems;
|
|
100
|
+
}
|
|
101
|
+
return [
|
|
102
|
+
{
|
|
103
|
+
Provider: CollectionProvider,
|
|
104
|
+
Slot: CollectionSlot,
|
|
105
|
+
ItemSlot: CollectionItemSlot
|
|
106
|
+
},
|
|
107
|
+
useCollection,
|
|
108
|
+
createCollectionScope
|
|
109
|
+
];
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
export {$e02a7d9cb1dc128c$export$c74125a8e3af6bb2 as createCollection};
|
|
2
116
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/react/collection/src/index.ts","packages/react/collection/src/Collection.tsx"],"sourcesContent":["export * from './Collection';\n","import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\ntype SlotProps = Radix.ComponentPropsWithoutRef<typeof Slot>;\ntype CollectionElement = HTMLElement;\ninterface CollectionProps extends SlotProps {\n scope: any;\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n const PROVIDER_NAME = name + 'CollectionProvider';\n const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>;\n itemMap: Map<React.RefObject<ItemElement>, { ref: React.RefObject<ItemElement> } & ItemData>;\n };\n\n const [CollectionProviderImpl, useCollectionContext] = createCollectionContext<ContextValue>(\n PROVIDER_NAME,\n { collectionRef: { current: null }, itemMap: new Map() }\n );\n\n const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (props) => {\n const { scope, children } = props;\n const ref = React.useRef<CollectionElement>(null);\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;\n return (\n <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n {children}\n </CollectionProviderImpl>\n );\n };\n\n CollectionProvider.displayName = PROVIDER_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = name + 'CollectionSlot';\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { scope, children } = props;\n const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);\n const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);\n return <Slot ref={composedRefs}>{children}</Slot>;\n }\n );\n\n CollectionSlot.displayName = COLLECTION_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionItem\n * ---------------------------------------------------------------------------------------------*/\n\n const ITEM_SLOT_NAME = name + 'CollectionItemSlot';\n const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode;\n scope: any;\n };\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { scope, children, ...itemData } = props;\n const ref = React.useRef<ItemElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n React.useEffect(() => {\n context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) });\n return () => void context.itemMap.delete(ref);\n });\n\n return (\n <Slot {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n {children}\n </Slot>\n );\n }\n );\n\n CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * useCollection\n * ---------------------------------------------------------------------------------------------*/\n\n function useCollection(scope: any) {\n const context = useCollectionContext(name + 'CollectionConsumer', scope);\n\n const getItems = React.useCallback(() => {\n const collectionNode = context.collectionRef.current;\n if (!collectionNode) return [];\n const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));\n const items = Array.from(context.itemMap.values());\n const orderedItems = items.sort(\n (a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!)\n );\n return orderedItems;\n }, [context.collectionRef, context.itemMap]);\n\n return getItems;\n }\n\n return [\n { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n useCollection,\n createCollectionScope,\n ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n"],"names":["React","createContextScope","useComposedRefs","Slot","createCollection","name","PROVIDER_NAME","createCollectionContext","createCollectionScope","CollectionProviderImpl","useCollectionContext","collectionRef","current","itemMap","Map","CollectionProvider","props","scope","children","ref","useRef","COLLECTION_SLOT_NAME","CollectionSlot","forwardRef","forwardedRef","context","composedRefs","ITEM_SLOT_NAME","ITEM_DATA_ATTR","CollectionItemSlot","itemData","useEffect","set","delete","useCollection","getItems","useCallback","collectionNode","orderedNodes","Array","from","querySelectorAll","items","values","orderedItems","sort","a","b","indexOf","Provider","ItemSlot"],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-collection",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime": "^7.13.10",
|
|
20
|
-
"@radix-ui/react-compose-refs": "0.1.
|
|
21
|
-
"@radix-ui/react-context": "0.1.
|
|
22
|
-
"@radix-ui/react-primitive": "0.1.
|
|
23
|
-
"@radix-ui/react-slot": "0.1.
|
|
20
|
+
"@radix-ui/react-compose-refs": "0.1.1-rc.3",
|
|
21
|
+
"@radix-ui/react-context": "0.1.2-rc.3",
|
|
22
|
+
"@radix-ui/react-primitive": "0.1.5-rc.3",
|
|
23
|
+
"@radix-ui/react-slot": "0.1.3-rc.3"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"react": "^16.8 || ^17.0"
|
|
26
|
+
"react": "^16.8 || ^17.0 || ^18.0"
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://radix-ui.com/primitives",
|
|
29
29
|
"repository": {
|
|
@@ -32,5 +32,6 @@
|
|
|
32
32
|
},
|
|
33
33
|
"bugs": {
|
|
34
34
|
"url": "https://github.com/radix-ui/primitives/issues"
|
|
35
|
-
}
|
|
35
|
+
},
|
|
36
|
+
"stableVersion": "0.1.4"
|
|
36
37
|
}
|