@radix-ui/react-collection 0.0.14 → 0.1.0
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 +7 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import * as Radix from "@radix-ui/react-primitive";
|
|
4
|
+
type SlotProps = Radix.ComponentPropsWithoutRef<typeof Slot>;
|
|
5
|
+
export interface CollectionProps extends SlotProps {
|
|
6
|
+
}
|
|
7
|
+
export function createCollection<ItemElement extends HTMLElement, ItemData>(): readonly [React.FC<{}>, React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>, React.ForwardRefExoticComponent<React.PropsWithoutRef<ItemData & {
|
|
5
8
|
children: React.ReactNode;
|
|
6
|
-
}
|
|
9
|
+
}> & React.RefAttributes<ItemElement>>, () => {
|
|
7
10
|
getItems(): ({
|
|
8
11
|
ref: React.RefObject<ItemElement>;
|
|
9
12
|
} & ItemData)[];
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"A;AAMA,iCAA0B,WAAW,SAAS,WAAW,EAAE,QAAQ;
|
|
1
|
+
{"mappings":"A;A;A;AAMA,iBAAiB,MAAM,wBAAwB,CAAC,WAAW,CAAC,CAAC;AAC7D,gCAA0B,SAAQ,SAAS;CAAG;AAO9C,iCAA0B,WAAW,SAAS,WAAW,EAAE,QAAQ;cAqDrD,MAAM,SAAS;A;A;aA5CyB,MAAM,SAAS,CAAC,WAAW,CAAC;A;GA0FjF","sources":["./packages/react/collection/src/packages/react/collection/src/Collection.tsx","./packages/react/collection/src/packages/react/collection/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e,r=require("@radix-ui/react-slot").Slot,t=require("@radix-ui/react-compose-refs").useComposedRefs,n=(e=require("react"))&&e.__esModule?e.default:e;exports.createCollection=function(){const e=/*#__PURE__*/n.createContext({}),o
|
|
1
|
+
var e,r=require("@radix-ui/react-slot").Slot,t=require("@radix-ui/react-compose-refs").useComposedRefs,n=(e=require("react"))&&e.__esModule?e.default:e;exports.createCollection=function(){const e=/*#__PURE__*/n.createContext({}),o=r=>{const{children:t}=r,o=n.useRef(null),c=n.useRef(new Map).current;/*#__PURE__*/return n.createElement(e.Provider,{value:n.useMemo((()=>({itemMap:c,collectionRef:o})),[c])},t)},c=/*#__PURE__*/n.forwardRef(((o,c)=>{const{children:u}=o,l=n.useContext(e),a=t(c,l.collectionRef);/*#__PURE__*/return n.createElement(r,{ref:a},u)})),u="data-radix-collection-item",l=/*#__PURE__*/n.forwardRef(((o,c)=>{const{children:l,...a}=o,f=n.useRef(null),i=t(c,f),s=n.useContext(e);return n.useEffect((()=>(s.itemMap.set(f,{ref:f,...a}),()=>{s.itemMap.delete(f)}))),/*#__PURE__*/n.createElement(r,{[u]:"",ref:i},l)}));return[o,c,l,function(){const r=n.useContext(e);return{getItems(){const e=Array.from(r.collectionRef.current.querySelectorAll(`[${u}]`));return Array.from(r.itemMap.values()).sort(((r,t)=>e.indexOf(r.ref.current)-e.indexOf(t.ref.current)))}}}]};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"IAAgCA,sGAAAA,qBAClBA,EAAEC,WAAaD,EAAEE,QAAUF,
|
|
1
|
+
{"mappings":"IAAgCA,sGAAAA,qBAClBA,EAAEC,WAAaD,EAAEE,QAAUF,2BCazC,WAWE,MAAMG,eAAUC,EAAMC,cAA4B,IAI5CC,EAAgCC,IACpC,MAAMC,SAAEA,GAAaD,EACfE,EAAML,EAAMM,OAA0B,MACtCC,EAAUP,EAAMM,OAAgC,IAAIE,KAAOC,qBACjE,OACEC,EAAAC,cAACZ,EAAQa,SAAT,CAAkBC,MAAOb,EAAMc,SAAQ,KAAA,CAASP,QAAAA,EAASQ,cAAeV,KAAQ,CAACE,KAC9EH,IAaDY,eAAiBhB,EAAMiB,YAC3B,CAACd,EAAOe,KACN,MAAMd,SAAEA,GAAaD,EACfgB,EAAUnB,EAAMoB,WAAWrB,GAC3BsB,EAAeC,EAAgBJ,EAAcC,EAAQJ,4BAC3D,OAAOL,EAAAC,cAACY,EAAD,CAAMlB,IAAKgB,GAAejB,MAW/BoB,EAAiB,6BAMjBC,eAAqBzB,EAAMiB,YAC/B,CAACd,EAAOe,KACN,MAAMd,SAAEA,KAAasB,GAAavB,EAC5BE,EAAML,EAAMM,OAAoB,MAChCe,EAAeC,EAAgBJ,EAAcb,GAC7Cc,EAAUnB,EAAMoB,WAAWrB,GAOjC,OALAC,EAAM2B,WAAU,KACdR,EAAQZ,QAAQqB,IAAIvB,EAAK,CAAEA,IAAAA,KAASqB,IAC7B,KAAWP,EAAQZ,QAAQsB,OAAOxB,oBAIzCK,EAAAC,cAACY,EAAD,CAAYC,CAACA,GAAiB,GAAMnB,IAAKgB,GACtCjB,MA4BT,MAAO,CAACF,EAAoBc,EAAgBS,EAhB5C,WACE,MAAMN,EAAUnB,EAAMoB,WAAWrB,GACjC,MAAO,CACL+B,WACE,MAAMC,EAAeC,MAAMC,KACzBd,EAAQJ,cAAcN,QAASyB,iBAAkB,IAAGV,OAMtD,OAJcQ,MAAMC,KAAKd,EAAQZ,QAAQ4B,UACdC,MACzB,CAACxC,EAAGyC,IAAMN,EAAaO,QAAQ1C,EAAES,IAAII,SAAYsB,EAAaO,QAAQD,EAAEhC,IAAII","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/collection/src/Collection.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import React from 'react';\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>;\ninterface CollectionProps extends SlotProps {}\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>() {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n type CollectionElement = HTMLElement;\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>;\n itemMap: Map<React.RefObject<ItemElement>, { ref: React.RefObject<ItemElement> } & ItemData>;\n };\n const Context = React.createContext<ContextValue>({} as any);\n\n const PROVIDER_NAME = 'CollectionProvider';\n\n const CollectionProvider: React.FC = (props) => {\n const { children } = props;\n const ref = React.useRef<CollectionElement>(null);\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;\n return (\n <Context.Provider value={React.useMemo(() => ({ itemMap, collectionRef: ref }), [itemMap])}>\n {children}\n </Context.Provider>\n );\n };\n\n CollectionProvider.displayName = PROVIDER_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = 'CollectionSlot';\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { children } = props;\n const context = React.useContext(Context);\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 = 'CollectionItemSlot';\n const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode;\n };\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { children, ...itemData } = props;\n const ref = React.useRef<ItemElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = React.useContext(Context);\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() {\n const context = React.useContext(Context);\n return {\n getItems() {\n const orderedNodes = Array.from(\n context.collectionRef.current!.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n );\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 },\n };\n }\n\n return [CollectionProvider, CollectionSlot, CollectionItemSlot, useCollection] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n"],"names":["a","__esModule","default","Context","React","createContext","CollectionProvider","props","children","ref","useRef","itemMap","Map","current","_react","createElement","Provider","value","useMemo","collectionRef","CollectionSlot","forwardRef","forwardedRef","context","useContext","composedRefs","useComposedRefs","Slot","ITEM_DATA_ATTR","CollectionItemSlot","itemData","useEffect","set","delete","getItems","orderedNodes","Array","from","querySelectorAll","values","sort","b","indexOf"],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Slot as e}from"@radix-ui/react-slot";import{useComposedRefs as r}from"@radix-ui/react-compose-refs";import t from"react";export function createCollection(){const
|
|
1
|
+
import{Slot as e}from"@radix-ui/react-slot";import{useComposedRefs as r}from"@radix-ui/react-compose-refs";import t from"react";export function createCollection(){const n=/*#__PURE__*/t.createContext({}),o=e=>{const{children:r}=e,o=t.useRef(null),c=t.useRef(new Map).current;/*#__PURE__*/return t.createElement(n.Provider,{value:t.useMemo((()=>({itemMap:c,collectionRef:o})),[c])},r)},c=/*#__PURE__*/t.forwardRef(((o,c)=>{const{children:f}=o,l=t.useContext(n),u=r(c,l.collectionRef);/*#__PURE__*/return t.createElement(e,{ref:u},f)})),f="data-radix-collection-item",l=/*#__PURE__*/t.forwardRef(((o,c)=>{const{children:l,...u}=o,i=t.useRef(null),a=r(c,i),s=t.useContext(n);return t.useEffect((()=>(s.itemMap.set(i,{ref:i,...u}),()=>{s.itemMap.delete(i)}))),/*#__PURE__*/t.createElement(e,{[f]:"",ref:a},l)}));return[o,c,l,function(){const e=t.useContext(n);return{getItems(){const r=Array.from(e.collectionRef.current.querySelectorAll(`[${f}]`));return Array.from(e.itemMap.values()).sort(((e,t)=>r.indexOf(e.ref.current)-r.indexOf(t.ref.current)))}}}]}
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"uIAcA,SAASA,mBAWP,MAAMC,eAAUC,EAAMC,cAA4B,IAI5CC,EAAgCC,IACpC,MAAMC,SAAEA,GAAaD,EACfE,EAAML,EAAMM,OAA0B,MACtCC,EAAUP,EAAMM,OAAgC,IAAIE,KAAOC,qBACjE,OACEC,EAAAC,cAACZ,EAAQa,SAAT,CAAkBC,MAAOb,EAAMc,SAAQ,KAAA,CAASP,QAAAA,EAASQ,cAAeV,KAAQ,CAACE,KAC9EH,IAaDY,eAAiBhB,EAAMiB,YAC3B,CAACd,EAAOe,KACN,MAAMd,SAAEA,GAAaD,EACfgB,EAAUnB,EAAMoB,WAAWrB,GAC3BsB,EAAeC,EAAgBJ,EAAcC,EAAQJ,4BAC3D,OAAOL,EAAAC,cAACY,EAAD,CAAMlB,IAAKgB,GAAejB,MAW/BoB,EAAiB,6BAMjBC,eAAqBzB,EAAMiB,YAC/B,CAACd,EAAOe,KACN,MAAMd,SAAEA,KAAasB,GAAavB,EAC5BE,EAAML,EAAMM,OAAoB,MAChCe,EAAeC,EAAgBJ,EAAcb,GAC7Cc,EAAUnB,EAAMoB,WAAWrB,GAOjC,OALAC,EAAM2B,WAAU,KACdR,EAAQZ,QAAQqB,IAAIvB,EAAK,CAAEA,IAAAA,KAASqB,IAC7B,KAAWP,EAAQZ,QAAQsB,OAAOxB,oBAIzCK,EAAAC,cAACY,EAAD,CAAYC,CAACA,GAAiB,GAAMnB,IAAKgB,GACtCjB,MA4BT,MAAO,CAACF,EAAoBc,EAAgBS,EAhB5C,WACE,MAAMN,EAAUnB,EAAMoB,WAAWrB,GACjC,MAAO,CACL+B,WACE,MAAMC,EAAeC,MAAMC,KACzBd,EAAQJ,cAAcN,QAASyB,iBAAkB,IAAGV,OAMtD,OAJcQ,MAAMC,KAAKd,EAAQZ,QAAQ4B,UACdC,MACzB,CAACC,EAAGC,IAAMP,EAAaQ,QAAQF,EAAEhC,IAAII,SAAYsB,EAAaQ,QAAQD,EAAEjC,IAAII","sources":["./packages/react/collection/src/Collection.tsx"],"sourcesContent":["import React from 'react';\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>;\ninterface CollectionProps extends SlotProps {}\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>() {\n /* -----------------------------------------------------------------------------------------------\n * CollectionProvider\n * ---------------------------------------------------------------------------------------------*/\n\n type CollectionElement = HTMLElement;\n\n type ContextValue = {\n collectionRef: React.RefObject<CollectionElement>;\n itemMap: Map<React.RefObject<ItemElement>, { ref: React.RefObject<ItemElement> } & ItemData>;\n };\n const Context = React.createContext<ContextValue>({} as any);\n\n const PROVIDER_NAME = 'CollectionProvider';\n\n const CollectionProvider: React.FC = (props) => {\n const { children } = props;\n const ref = React.useRef<CollectionElement>(null);\n const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;\n return (\n <Context.Provider value={React.useMemo(() => ({ itemMap, collectionRef: ref }), [itemMap])}>\n {children}\n </Context.Provider>\n );\n };\n\n CollectionProvider.displayName = PROVIDER_NAME;\n\n /* -----------------------------------------------------------------------------------------------\n * CollectionSlot\n * ---------------------------------------------------------------------------------------------*/\n\n const COLLECTION_SLOT_NAME = 'CollectionSlot';\n\n const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n (props, forwardedRef) => {\n const { children } = props;\n const context = React.useContext(Context);\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 = 'CollectionItemSlot';\n const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n type CollectionItemSlotProps = ItemData & {\n children: React.ReactNode;\n };\n\n const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n (props, forwardedRef) => {\n const { children, ...itemData } = props;\n const ref = React.useRef<ItemElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const context = React.useContext(Context);\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() {\n const context = React.useContext(Context);\n return {\n getItems() {\n const orderedNodes = Array.from(\n context.collectionRef.current!.querySelectorAll(`[${ITEM_DATA_ATTR}]`)\n );\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 },\n };\n }\n\n return [CollectionProvider, CollectionSlot, CollectionItemSlot, useCollection] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n"],"names":["createCollection","Context","React","createContext","CollectionProvider","props","children","ref","useRef","itemMap","Map","current","_react","createElement","Provider","value","useMemo","collectionRef","CollectionSlot","forwardRef","forwardedRef","context","useContext","composedRefs","useComposedRefs","Slot","ITEM_DATA_ATTR","CollectionItemSlot","itemData","useEffect","set","delete","getItems","orderedNodes","Array","from","querySelectorAll","values","sort","a","b","indexOf"],"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.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"scripts": {
|
|
15
15
|
"clean": "rm -rf dist",
|
|
16
|
-
"prepublish": "yarn clean",
|
|
17
16
|
"version": "yarn version"
|
|
18
17
|
},
|
|
19
18
|
"dependencies": {
|
|
20
19
|
"@babel/runtime": "^7.13.10",
|
|
21
|
-
"@radix-ui/react-compose-refs": "0.0
|
|
22
|
-
"@radix-ui/react-
|
|
20
|
+
"@radix-ui/react-compose-refs": "0.1.0",
|
|
21
|
+
"@radix-ui/react-primitive": "0.1.0",
|
|
22
|
+
"@radix-ui/react-slot": "0.1.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "^16.8 || ^17.0"
|