@radix-ui/react-collection 1.1.0-rc.7 → 1.1.1-rc.1

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.mts CHANGED
@@ -1,34 +1,23 @@
1
- import * as React from 'react';
2
- import React__default from 'react';
1
+ import * as _radix_ui_react_context from '@radix-ui/react-context';
2
+ import React from 'react';
3
3
  import { Slot } from '@radix-ui/react-slot';
4
4
 
5
- type Scope<C = any> = {
6
- [scopeName: string]: React.Context<C>[];
7
- } | undefined;
8
- type ScopeHook = (scope: Scope) => {
9
- [__scopeProp: string]: Scope;
10
- };
11
- interface CreateScope {
12
- scopeName: string;
13
- (): ScopeHook;
14
- }
15
-
16
- type SlotProps = React__default.ComponentPropsWithoutRef<typeof Slot>;
5
+ type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
17
6
  interface CollectionProps extends SlotProps {
18
7
  scope: any;
19
8
  }
20
9
  declare function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string): readonly [{
21
- readonly Provider: React__default.FC<{
22
- children?: React__default.ReactNode;
10
+ readonly Provider: React.FC<{
11
+ children?: React.ReactNode;
23
12
  scope: any;
24
13
  }>;
25
- readonly Slot: React__default.ForwardRefExoticComponent<CollectionProps & React__default.RefAttributes<HTMLElement>>;
26
- readonly ItemSlot: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ItemData & {
27
- children: React__default.ReactNode;
14
+ readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
15
+ readonly ItemSlot: React.ForwardRefExoticComponent<React.PropsWithoutRef<ItemData & {
16
+ children: React.ReactNode;
28
17
  scope: any;
29
- }> & React__default.RefAttributes<ItemElement>>;
18
+ }> & React.RefAttributes<ItemElement>>;
30
19
  }, (scope: any) => () => ({
31
- ref: React__default.RefObject<ItemElement>;
32
- } & ItemData)[], CreateScope];
20
+ ref: React.RefObject<ItemElement | null>;
21
+ } & ItemData)[], _radix_ui_react_context.CreateScope];
33
22
 
34
23
  export { type CollectionProps, createCollection };
package/dist/index.d.ts CHANGED
@@ -1,34 +1,23 @@
1
- import * as React from 'react';
2
- import React__default from 'react';
1
+ import * as _radix_ui_react_context from '@radix-ui/react-context';
2
+ import React from 'react';
3
3
  import { Slot } from '@radix-ui/react-slot';
4
4
 
5
- type Scope<C = any> = {
6
- [scopeName: string]: React.Context<C>[];
7
- } | undefined;
8
- type ScopeHook = (scope: Scope) => {
9
- [__scopeProp: string]: Scope;
10
- };
11
- interface CreateScope {
12
- scopeName: string;
13
- (): ScopeHook;
14
- }
15
-
16
- type SlotProps = React__default.ComponentPropsWithoutRef<typeof Slot>;
5
+ type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
17
6
  interface CollectionProps extends SlotProps {
18
7
  scope: any;
19
8
  }
20
9
  declare function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string): readonly [{
21
- readonly Provider: React__default.FC<{
22
- children?: React__default.ReactNode;
10
+ readonly Provider: React.FC<{
11
+ children?: React.ReactNode;
23
12
  scope: any;
24
13
  }>;
25
- readonly Slot: React__default.ForwardRefExoticComponent<CollectionProps & React__default.RefAttributes<HTMLElement>>;
26
- readonly ItemSlot: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ItemData & {
27
- children: React__default.ReactNode;
14
+ readonly Slot: React.ForwardRefExoticComponent<CollectionProps & React.RefAttributes<HTMLElement>>;
15
+ readonly ItemSlot: React.ForwardRefExoticComponent<React.PropsWithoutRef<ItemData & {
16
+ children: React.ReactNode;
28
17
  scope: any;
29
- }> & React__default.RefAttributes<ItemElement>>;
18
+ }> & React.RefAttributes<ItemElement>>;
30
19
  }, (scope: any) => () => ({
31
- ref: React__default.RefObject<ItemElement>;
32
- } & ItemData)[], CreateScope];
20
+ ref: React.RefObject<ItemElement | null>;
21
+ } & ItemData)[], _radix_ui_react_context.CreateScope];
33
22
 
34
23
  export { type CollectionProps, createCollection };
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/Collection.tsx"],
4
- "sourcesContent": ["'use client';\nexport { createCollection } from './Collection';\nexport type { CollectionProps } 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\ntype SlotProps = React.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}>\u2026</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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,2BAAmC;AACnC,gCAAgC;AAChC,wBAAqB;AAoCf;AAvBN,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,QAAI,yCAAmB,aAAa;AAOzF,QAAM,CAAC,wBAAwB,oBAAoB,IAAI;AAAA,IACrD;AAAA,IACA,EAAE,eAAe,EAAE,SAAS,KAAK,GAAG,SAAS,oBAAI,IAAI,EAAE;AAAA,EACzD;AAEA,QAAM,qBAA2E,CAAC,UAAU;AAC1F,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,4CAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,mBAAe,2CAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,4CAAC,0BAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,aAAAA,QAAM,OAAoB,IAAI;AAC1C,YAAM,mBAAe,2CAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,mBAAAA,QAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,4CAAC,0BAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,aAAAA,QAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC,eAAgB,QAAO,CAAC;AAC7B,YAAM,eAAe,MAAM,KAAK,eAAe,iBAAiB,IAAI,cAAc,GAAG,CAAC;AACtF,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MAAM,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MACtF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["'use client';\nexport { createCollection } from './Collection';\nexport type { CollectionProps } 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\ntype SlotProps = React.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}>\u2026</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 | null>;\n itemMap: Map<\n React.RefObject<ItemElement | null>,\n { ref: React.RefObject<ItemElement | null> } & ItemData\n >;\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,2BAAmC;AACnC,gCAAgC;AAChC,wBAAqB;AAuCf;AA1BN,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,QAAI,yCAAmB,aAAa;AAUzF,QAAM,CAAC,wBAAwB,oBAAoB,IAAI;AAAA,IACrD;AAAA,IACA,EAAE,eAAe,EAAE,SAAS,KAAK,GAAG,SAAS,oBAAI,IAAI,EAAE;AAAA,EACzD;AAEA,QAAM,qBAA2E,CAAC,UAAU;AAC1F,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,aAAAA,QAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,4CAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,mBAAe,2CAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,4CAAC,0BAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,aAAAA,QAAM,OAAoB,IAAI;AAC1C,YAAM,mBAAe,2CAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,mBAAAA,QAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,4CAAC,0BAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,aAAAA,QAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC,eAAgB,QAAO,CAAC;AAC7B,YAAM,eAAe,MAAM,KAAK,eAAe,iBAAiB,IAAI,cAAc,GAAG,CAAC;AACtF,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MAAM,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MACtF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/Collection.tsx"],
4
- "sourcesContent": ["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\ntype SlotProps = React.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}>\u2026</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"],
5
- "mappings": ";;;AAAA,OAAO,WAAW;AAClB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AAoCf;AAvBN,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IAAI,mBAAmB,aAAa;AAOzF,QAAM,CAAC,wBAAwB,oBAAoB,IAAI;AAAA,IACrD;AAAA,IACA,EAAE,eAAe,EAAE,SAAS,KAAK,GAAG,SAAS,oBAAI,IAAI,EAAE;AAAA,EACzD;AAEA,QAAM,qBAA2E,CAAC,UAAU;AAC1F,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC,eAAgB,QAAO,CAAC;AAC7B,YAAM,eAAe,MAAM,KAAK,eAAe,iBAAiB,IAAI,cAAc,GAAG,CAAC;AACtF,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MAAM,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MACtF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["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\ntype SlotProps = React.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}>\u2026</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 | null>;\n itemMap: Map<\n React.RefObject<ItemElement | null>,\n { ref: React.RefObject<ItemElement | null> } & ItemData\n >;\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"],
5
+ "mappings": ";;;AAAA,OAAO,WAAW;AAClB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,YAAY;AAuCf;AA1BN,SAAS,iBAAiE,MAAc;AAKtF,QAAM,gBAAgB,OAAO;AAC7B,QAAM,CAAC,yBAAyB,qBAAqB,IAAI,mBAAmB,aAAa;AAUzF,QAAM,CAAC,wBAAwB,oBAAoB,IAAI;AAAA,IACrD;AAAA,IACA,EAAE,eAAe,EAAE,SAAS,KAAK,GAAG,SAAS,oBAAI,IAAI,EAAE;AAAA,EACzD;AAEA,QAAM,qBAA2E,CAAC,UAAU;AAC1F,UAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,UAAU,MAAM,OAAgC,oBAAI,IAAI,CAAC,EAAE;AACjE,WACE,oBAAC,0BAAuB,OAAc,SAAkB,eAAe,KACpE,UACH;AAAA,EAEJ;AAEA,qBAAmB,cAAc;AAMjC,QAAM,uBAAuB,OAAO;AAEpC,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,YAAM,UAAU,qBAAqB,sBAAsB,KAAK;AAChE,YAAM,eAAe,gBAAgB,cAAc,QAAQ,aAAa;AACxE,aAAO,oBAAC,QAAK,KAAK,cAAe,UAAS;AAAA,IAC5C;AAAA,EACF;AAEA,iBAAe,cAAc;AAM7B,QAAM,iBAAiB,OAAO;AAC9B,QAAM,iBAAiB;AAOvB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,UAAU,GAAG,SAAS,IAAI;AACzC,YAAM,MAAM,MAAM,OAAoB,IAAI;AAC1C,YAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,YAAM,UAAU,qBAAqB,gBAAgB,KAAK;AAE1D,YAAM,UAAU,MAAM;AACpB,gBAAQ,QAAQ,IAAI,KAAK,EAAE,KAAK,GAAI,SAAiC,CAAC;AACtE,eAAO,MAAM,KAAK,QAAQ,QAAQ,OAAO,GAAG;AAAA,MAC9C,CAAC;AAED,aACE,oBAAC,QAAM,GAAG,EAAE,CAAC,cAAc,GAAG,GAAG,GAAG,KAAK,cACtC,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,qBAAmB,cAAc;AAMjC,WAAS,cAAc,OAAY;AACjC,UAAM,UAAU,qBAAqB,OAAO,sBAAsB,KAAK;AAEvE,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,YAAM,iBAAiB,QAAQ,cAAc;AAC7C,UAAI,CAAC,eAAgB,QAAO,CAAC;AAC7B,YAAM,eAAe,MAAM,KAAK,eAAe,iBAAiB,IAAI,cAAc,GAAG,CAAC;AACtF,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,OAAO,CAAC;AACjD,YAAM,eAAe,MAAM;AAAA,QACzB,CAAC,GAAG,MAAM,aAAa,QAAQ,EAAE,IAAI,OAAQ,IAAI,aAAa,QAAQ,EAAE,IAAI,OAAQ;AAAA,MACtF;AACA,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,CAAC;AAE3C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,EAAE,UAAU,oBAAoB,MAAM,gBAAgB,UAAU,mBAAmB;AAAA,IACnF;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-collection",
3
- "version": "1.1.0-rc.7",
3
+ "version": "1.1.1-rc.1",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {
@@ -28,10 +28,10 @@
28
28
  "version": "yarn version"
29
29
  },
30
30
  "dependencies": {
31
- "@radix-ui/react-compose-refs": "1.1.0-rc.7",
32
- "@radix-ui/react-context": "1.1.0-rc.7",
33
- "@radix-ui/react-primitive": "2.0.0-rc.4",
34
- "@radix-ui/react-slot": "1.1.0-rc.7"
31
+ "@radix-ui/react-compose-refs": "1.1.1-rc.1",
32
+ "@radix-ui/react-context": "1.1.1",
33
+ "@radix-ui/react-primitive": "2.0.1-rc.1",
34
+ "@radix-ui/react-slot": "1.1.1-rc.1"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "@types/react": "*",
@@ -55,5 +55,5 @@
55
55
  "bugs": {
56
56
  "url": "https://github.com/radix-ui/primitives/issues"
57
57
  },
58
- "stableVersion": "1.0.3"
58
+ "stableVersion": "1.1.0"
59
59
  }