index.mjs 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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. // We have resorted to returning slots directly rather than exposing primitives that can then
  6. // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.
  7. // This is because we encountered issues with generic types that cannot be statically analysed
  8. // due to creating them dynamically via createCollection.
  9. function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
  10. /* -----------------------------------------------------------------------------------------------
  11. * CollectionProvider
  12. * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider';
  13. const [createCollectionContext, createCollectionScope] = $6vYhU$createContextScope(PROVIDER_NAME);
  14. const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
  15. collectionRef: {
  16. current: null
  17. },
  18. itemMap: new Map()
  19. });
  20. const CollectionProvider = (props)=>{
  21. const { scope: scope , children: children } = props;
  22. const ref = $6vYhU$react.useRef(null);
  23. const itemMap = $6vYhU$react.useRef(new Map()).current;
  24. return /*#__PURE__*/ $6vYhU$react.createElement(CollectionProviderImpl, {
  25. scope: scope,
  26. itemMap: itemMap,
  27. collectionRef: ref
  28. }, children);
  29. };
  30. /*#__PURE__*/ Object.assign(CollectionProvider, {
  31. displayName: PROVIDER_NAME
  32. });
  33. /* -----------------------------------------------------------------------------------------------
  34. * CollectionSlot
  35. * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot';
  36. const CollectionSlot = /*#__PURE__*/ $6vYhU$react.forwardRef((props, forwardedRef)=>{
  37. const { scope: scope , children: children } = props;
  38. const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
  39. const composedRefs = $6vYhU$useComposedRefs(forwardedRef, context.collectionRef);
  40. return /*#__PURE__*/ $6vYhU$react.createElement($6vYhU$Slot, {
  41. ref: composedRefs
  42. }, children);
  43. });
  44. /*#__PURE__*/ Object.assign(CollectionSlot, {
  45. displayName: COLLECTION_SLOT_NAME
  46. });
  47. /* -----------------------------------------------------------------------------------------------
  48. * CollectionItem
  49. * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot';
  50. const ITEM_DATA_ATTR = 'data-radix-collection-item';
  51. const CollectionItemSlot = /*#__PURE__*/ $6vYhU$react.forwardRef((props, forwardedRef)=>{
  52. const { scope: scope , children: children , ...itemData } = props;
  53. const ref = $6vYhU$react.useRef(null);
  54. const composedRefs = $6vYhU$useComposedRefs(forwardedRef, ref);
  55. const context = useCollectionContext(ITEM_SLOT_NAME, scope);
  56. $6vYhU$react.useEffect(()=>{
  57. context.itemMap.set(ref, {
  58. ref: ref,
  59. ...itemData
  60. });
  61. return ()=>void context.itemMap.delete(ref)
  62. ;
  63. });
  64. return /*#__PURE__*/ $6vYhU$react.createElement($6vYhU$Slot, {
  65. [ITEM_DATA_ATTR]: '',
  66. ref: composedRefs
  67. }, children);
  68. });
  69. /*#__PURE__*/ Object.assign(CollectionItemSlot, {
  70. displayName: ITEM_SLOT_NAME
  71. });
  72. /* -----------------------------------------------------------------------------------------------
  73. * useCollection
  74. * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) {
  75. const context = useCollectionContext(name + 'CollectionConsumer', scope);
  76. const getItems = $6vYhU$react.useCallback(()=>{
  77. const collectionNode = context.collectionRef.current;
  78. if (!collectionNode) return [];
  79. const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
  80. const items = Array.from(context.itemMap.values());
  81. const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
  82. );
  83. return orderedItems;
  84. }, [
  85. context.collectionRef,
  86. context.itemMap
  87. ]);
  88. return getItems;
  89. }
  90. return [
  91. {
  92. Provider: CollectionProvider,
  93. Slot: CollectionSlot,
  94. ItemSlot: CollectionItemSlot
  95. },
  96. useCollection,
  97. createCollectionScope
  98. ];
  99. }
  100. export {$e02a7d9cb1dc128c$export$c74125a8e3af6bb2 as createCollection};
  101. //# sourceMappingURL=index.mjs.map