@wix/headless-instagram 0.0.13 → 0.0.15

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.
Files changed (17) hide show
  1. package/cjs/dist/react/InstagramMedia.d.ts +77 -3
  2. package/cjs/dist/react/InstagramMedia.js +76 -7
  3. package/cjs/dist/react/core/InstagramMedia.d.ts +19 -0
  4. package/cjs/dist/react/core/InstagramMedia.js +14 -0
  5. package/cjs/dist/react/core/index.d.ts +1 -1
  6. package/cjs/dist/react/core/index.js +2 -1
  7. package/cjs/dist/services/instagram-feed-service.d.ts +1 -2
  8. package/cjs/dist/services/instagram-feed-service.js +5 -6
  9. package/dist/react/InstagramMedia.d.ts +77 -3
  10. package/dist/react/InstagramMedia.js +75 -6
  11. package/dist/react/core/InstagramMedia.d.ts +19 -0
  12. package/dist/react/core/InstagramMedia.js +13 -0
  13. package/dist/react/core/index.d.ts +1 -1
  14. package/dist/react/core/index.js +1 -1
  15. package/dist/services/instagram-feed-service.d.ts +1 -2
  16. package/dist/services/instagram-feed-service.js +1 -2
  17. package/package.json +6 -7
package/cjs/dist/react/InstagramMedia.d.ts CHANGED
@@ -1,13 +1,35 @@
1
1
  import React from 'react';
2
2
  import { type AsChildChildren } from '@wix/headless-utils/react';
3
+ import { InstagramMediaItem } from '../services/index.js';
3
4
  export interface MediaGalleryRepeaterProps {
4
5
  children: React.ReactNode;
5
6
  }
6
7
  /**
7
8
  * Repeats children for each Instagram media item, providing a per-item service context.
9
+ * Automatically wraps each item with InstagramMedia.Item (which wraps MediaGallery.Root) to provide
10
+ * both the Instagram media item service context and the media gallery service context.
11
+ * You don't need to manually add InstagramMedia.Item or MediaGallery.Root - they're rendered automatically for each item.
12
+ *
13
+ * @example
14
+ * ```tsx
15
+ * <InstagramMedia.MediaGalleryRepeater>
16
+ * <div>
17
+ * <InstagramMedia.MediaType />
18
+ * <MediaGallery.Viewport asChild>
19
+ * {({ src, alt }) => (
20
+ * <img src={src} alt={alt} />
21
+ * )}
22
+ * </MediaGallery.Viewport>
23
+ * <InstagramMedia.Caption />
24
+ * </div>
25
+ * </InstagramMedia.MediaGalleryRepeater>
26
+ * ```
27
+ *
28
+ * @param props.children - React nodes to render for each media item (Item and MediaGallery.Root are automatically added)
8
29
  */
9
30
  export declare const MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
10
31
  export declare enum TestIds {
32
+ instagramMediaRoot = "instagram-media-root",
11
33
  instagramMediaCaption = "instagram-media-caption",
12
34
  instagramMediaType = "instagram-media-type",
13
35
  instagramMediaUserName = "instagram-media-username",
@@ -55,10 +77,62 @@ export interface MediaGalleryItemsProps {
55
77
  className?: string;
56
78
  }
57
79
  export declare const MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
80
+ export interface ItemProps {
81
+ asChild?: boolean;
82
+ children?: React.ReactNode | AsChildChildren<{
83
+ mediaItem: InstagramMediaItem;
84
+ index: number;
85
+ }>;
86
+ className?: string;
87
+ }
88
+ /**
89
+ * Item component for Instagram media item.
90
+ * Consumes the InstagramMediaItemService and provides mediaItem and index via asChild pattern.
91
+ * This component wraps CoreInstagramMedia.Item which provides the service context.
92
+ *
93
+ * @note When using MediaGalleryRepeater, you don't need to manually add Item - it's automatically
94
+ * rendered once per item by the repeater (along with MediaGallery.Root inside it). Only use Item directly
95
+ * when you're not using MediaGalleryRepeater and need to manually set up the service context.
96
+ *
97
+ * @example
98
+ * ```tsx
99
+ * // Standalone usage (not inside repeater)
100
+ * // First, set up the service context
101
+ * <WixServices
102
+ * servicesMap={createServicesMap().addService(
103
+ * InstagramMediaItemServiceDefinition,
104
+ * InstagramMediaItemService,
105
+ * { mediaItem, index }
106
+ * )}
107
+ * >
108
+ * <InstagramMedia.Item>
109
+ * <MediaGallery.Root
110
+ * mediaGalleryServiceConfig={{
111
+ * media: mediaItem.mediaGalleryItems,
112
+ * }}
113
+ * >
114
+ * <InstagramMedia.Caption />
115
+ * <InstagramMedia.MediaType />
116
+ * <MediaGallery.Viewport asChild>
117
+ * {({ src, alt }) => <img src={src} alt={alt} />}
118
+ * </MediaGallery.Viewport>
119
+ * </MediaGallery.Root>
120
+ * </InstagramMedia.Item>
121
+ * </WixServices>
122
+ *
123
+ * // With asChild pattern to access mediaItem and index
124
+ * <InstagramMedia.Item asChild>
125
+ * {({ mediaItem, index }) => (
126
+ * <div data-index={index}>
127
+ * <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
128
+ * </div>
129
+ * )}
130
+ * </InstagramMedia.Item>
131
+ * ```
132
+ */
133
+ export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
58
134
  export declare const InstagramMedia: {
59
- Root: ({ children }: {
60
- children: React.ReactNode;
61
- }) => import("react/jsx-runtime").JSX.Element;
135
+ Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
62
136
  Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
63
137
  MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
64
138
  UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
package/cjs/dist/react/InstagramMedia.js CHANGED
@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
36
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
- exports.InstagramMedia = exports.MediaGalleryItems = exports.MediaGalleries = exports.Timestamp = exports.UserName = exports.MediaType = exports.Caption = exports.TestIds = exports.MediaGalleryRepeater = void 0;
39
+ exports.InstagramMedia = exports.Item = exports.MediaGalleryItems = exports.MediaGalleries = exports.Timestamp = exports.UserName = exports.MediaType = exports.Caption = exports.TestIds = exports.MediaGalleryRepeater = void 0;
40
40
  const jsx_runtime_1 = require("react/jsx-runtime");
41
41
  const react_1 = __importDefault(require("react"));
42
42
  const react_2 = require("@wix/headless-utils/react");
@@ -48,23 +48,42 @@ const CoreInstagramMedias = __importStar(require("./core/InstagramMedias.js"));
48
48
  const react_3 = require("@wix/headless-media/react");
49
49
  /**
50
50
  * Repeats children for each Instagram media item, providing a per-item service context.
51
+ * Automatically wraps each item with InstagramMedia.Item (which wraps MediaGallery.Root) to provide
52
+ * both the Instagram media item service context and the media gallery service context.
53
+ * You don't need to manually add InstagramMedia.Item or MediaGallery.Root - they're rendered automatically for each item.
54
+ *
55
+ * @example
56
+ * ```tsx
57
+ * <InstagramMedia.MediaGalleryRepeater>
58
+ * <div>
59
+ * <InstagramMedia.MediaType />
60
+ * <MediaGallery.Viewport asChild>
61
+ * {({ src, alt }) => (
62
+ * <img src={src} alt={alt} />
63
+ * )}
64
+ * </MediaGallery.Viewport>
65
+ * <InstagramMedia.Caption />
66
+ * </div>
67
+ * </InstagramMedia.MediaGalleryRepeater>
68
+ * ```
69
+ *
70
+ * @param props.children - React nodes to render for each media item (Item and MediaGallery.Root are automatically added)
51
71
  */
52
72
  const MediaGalleryRepeater = ({ children, }) => {
53
73
  return ((0, jsx_runtime_1.jsx)(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems, mediaItems }) => {
54
- console.log('mediaItems', mediaItems);
55
74
  if (!hasItems)
56
75
  return null;
57
76
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mediaItems.map((mediaItem, index) => {
58
- console.log('mediaItem', mediaItem.mediaGalleryItems);
59
- return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(index_js_1.InstagramMediaItemServiceDefinition, index_js_1.InstagramMediaItemService, { mediaItem, index }), children: (0, jsx_runtime_1.jsx)(react_3.MediaGallery.Root, { mediaGalleryServiceConfig: {
60
- media: mediaItem.mediaGalleryItems,
61
- }, children: children }) }, mediaItem.id || index));
77
+ return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(index_js_1.InstagramMediaItemServiceDefinition, index_js_1.InstagramMediaItemService, { mediaItem, index }), children: (0, jsx_runtime_1.jsx)(exports.Item, { children: (0, jsx_runtime_1.jsx)(react_3.MediaGallery.Root, { mediaGalleryServiceConfig: {
78
+ media: mediaItem.mediaGalleryItems,
79
+ }, children: children }) }) }, mediaItem.id || index));
62
80
  }) }));
63
81
  } }));
64
82
  };
65
83
  exports.MediaGalleryRepeater = MediaGalleryRepeater;
66
84
  var TestIds;
67
85
  (function (TestIds) {
86
+ TestIds["instagramMediaRoot"] = "instagram-media-root";
68
87
  TestIds["instagramMediaCaption"] = "instagram-media-caption";
69
88
  TestIds["instagramMediaType"] = "instagram-media-type";
70
89
  TestIds["instagramMediaUserName"] = "instagram-media-username";
@@ -94,8 +113,58 @@ exports.MediaGalleries = react_1.default.forwardRef((props, ref) => {
94
113
  exports.MediaGalleryItems = react_1.default.forwardRef(({ children, className, ...otherProps }, ref) => {
95
114
  return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, ...otherProps, children: children }));
96
115
  });
116
+ /**
117
+ * Item component for Instagram media item.
118
+ * Consumes the InstagramMediaItemService and provides mediaItem and index via asChild pattern.
119
+ * This component wraps CoreInstagramMedia.Item which provides the service context.
120
+ *
121
+ * @note When using MediaGalleryRepeater, you don't need to manually add Item - it's automatically
122
+ * rendered once per item by the repeater (along with MediaGallery.Root inside it). Only use Item directly
123
+ * when you're not using MediaGalleryRepeater and need to manually set up the service context.
124
+ *
125
+ * @example
126
+ * ```tsx
127
+ * // Standalone usage (not inside repeater)
128
+ * // First, set up the service context
129
+ * <WixServices
130
+ * servicesMap={createServicesMap().addService(
131
+ * InstagramMediaItemServiceDefinition,
132
+ * InstagramMediaItemService,
133
+ * { mediaItem, index }
134
+ * )}
135
+ * >
136
+ * <InstagramMedia.Item>
137
+ * <MediaGallery.Root
138
+ * mediaGalleryServiceConfig={{
139
+ * media: mediaItem.mediaGalleryItems,
140
+ * }}
141
+ * >
142
+ * <InstagramMedia.Caption />
143
+ * <InstagramMedia.MediaType />
144
+ * <MediaGallery.Viewport asChild>
145
+ * {({ src, alt }) => <img src={src} alt={alt} />}
146
+ * </MediaGallery.Viewport>
147
+ * </MediaGallery.Root>
148
+ * </InstagramMedia.Item>
149
+ * </WixServices>
150
+ *
151
+ * // With asChild pattern to access mediaItem and index
152
+ * <InstagramMedia.Item asChild>
153
+ * {({ mediaItem, index }) => (
154
+ * <div data-index={index}>
155
+ * <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
156
+ * </div>
157
+ * )}
158
+ * </InstagramMedia.Item>
159
+ * ```
160
+ */
161
+ exports.Item = react_1.default.forwardRef((props, ref) => {
162
+ const { asChild, children, className, ...otherProps } = props;
163
+ return ((0, jsx_runtime_1.jsx)(CoreInstagramMedia.Item, { children: ({ mediaItem, index }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaRoot, customElement: children, customElementProps: { mediaItem, index }, ...otherProps, children: children })) }));
164
+ });
165
+ exports.Item.displayName = 'InstagramMedia.Item';
97
166
  exports.InstagramMedia = {
98
- Root: ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }),
167
+ Item: exports.Item,
99
168
  Caption: exports.Caption,
100
169
  MediaType: exports.MediaType,
101
170
  UserName: exports.UserName,
package/cjs/dist/react/core/InstagramMedia.d.ts CHANGED
@@ -1,8 +1,27 @@
1
1
  import React from 'react';
2
+ import { type InstagramMediaItem } from '../../services/index.js';
2
3
  export interface MediaItem {
3
4
  image: string;
4
5
  altText?: string;
5
6
  }
7
+ export interface ItemProps {
8
+ /** Render prop function that receives media item and index data */
9
+ children: (props: ItemRenderProps) => React.ReactNode;
10
+ }
11
+ /**
12
+ * Render props for Item component
13
+ */
14
+ export interface ItemRenderProps {
15
+ /** The Instagram media item object */
16
+ mediaItem: InstagramMediaItem;
17
+ /** The zero-based index of the media item in the feed */
18
+ index: number;
19
+ }
20
+ /**
21
+ * Headless component for Instagram media item
22
+ * Provides mediaItem and index from the service context
23
+ */
24
+ export declare function Item(props: ItemProps): React.ReactNode;
6
25
  export interface CaptionProps {
7
26
  /** Render prop function that receives caption data */
8
27
  children: (props: CaptionRenderProps) => React.ReactNode;
package/cjs/dist/react/core/InstagramMedia.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Item = Item;
3
4
  exports.Caption = Caption;
4
5
  exports.MediaType = MediaType;
5
6
  exports.UserName = UserName;
@@ -7,6 +8,19 @@ exports.Timestamp = Timestamp;
7
8
  exports.MediaGalleryRepeater = MediaGalleryRepeater;
8
9
  const services_manager_react_1 = require("@wix/services-manager-react");
9
10
  const index_js_1 = require("../../services/index.js");
11
+ /**
12
+ * Headless component for Instagram media item
13
+ * Provides mediaItem and index from the service context
14
+ */
15
+ function Item(props) {
16
+ const mediaItemService = (0, services_manager_react_1.useService)(index_js_1.InstagramMediaItemServiceDefinition);
17
+ const mediaItem = mediaItemService.mediaItem.get();
18
+ const index = mediaItemService.index.get();
19
+ return props.children({
20
+ mediaItem,
21
+ index,
22
+ });
23
+ }
10
24
  /**
11
25
  * Headless component for Instagram media caption
12
26
  */
package/cjs/dist/react/core/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { Root, type RootProps } from './Root.js';
2
2
  export { UserName as CoreUserName, type UserNameProps as CoreUserNameProps, type UserNameRenderProps, } from './UserName.js';
3
3
  export { InstagramMedias, type InstagramMediasProps, type InstagramMediasRenderProps, } from './InstagramMedias.js';
4
- export { Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, type CaptionProps as InstagramMediaCaptionProps, type CaptionRenderProps, type MediaTypeProps as InstagramMediaTypeProps, type MediaTypeRenderProps, type UserNameProps as InstagramMediaUserNameProps, type UserNameRenderProps as InstagramMediaUserNameRenderProps, type TimestampProps as InstagramMediaTimestampProps, type TimestampRenderProps, type MediaGalleryRepeaterProps, type MediaGalleryRepeaterRenderProps, } from './InstagramMedia.js';
4
+ export { Item as InstagramMediaItem, Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, type ItemProps as InstagramMediaItemProps, type ItemRenderProps as InstagramMediaItemRenderProps, type CaptionProps as InstagramMediaCaptionProps, type CaptionRenderProps, type MediaTypeProps as InstagramMediaTypeProps, type MediaTypeRenderProps, type UserNameProps as InstagramMediaUserNameProps, type UserNameRenderProps as InstagramMediaUserNameRenderProps, type TimestampProps as InstagramMediaTimestampProps, type TimestampRenderProps, type MediaGalleryRepeaterProps, type MediaGalleryRepeaterRenderProps, } from './InstagramMedia.js';
package/cjs/dist/react/core/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MediaGalleryRepeater = exports.InstagramMediaTimestamp = exports.InstagramMediaUserName = exports.InstagramMediaType = exports.InstagramMediaCaption = exports.InstagramMedias = exports.CoreUserName = exports.Root = void 0;
3
+ exports.MediaGalleryRepeater = exports.InstagramMediaTimestamp = exports.InstagramMediaUserName = exports.InstagramMediaType = exports.InstagramMediaCaption = exports.InstagramMediaItem = exports.InstagramMedias = exports.CoreUserName = exports.Root = void 0;
4
4
  var Root_js_1 = require("./Root.js");
5
5
  Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return Root_js_1.Root; } });
6
6
  // New core components
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "CoreUserName", { enumerable: true, get: function
9
9
  var InstagramMedias_js_1 = require("./InstagramMedias.js");
10
10
  Object.defineProperty(exports, "InstagramMedias", { enumerable: true, get: function () { return InstagramMedias_js_1.InstagramMedias; } });
11
11
  var InstagramMedia_js_1 = require("./InstagramMedia.js");
12
+ Object.defineProperty(exports, "InstagramMediaItem", { enumerable: true, get: function () { return InstagramMedia_js_1.Item; } });
12
13
  Object.defineProperty(exports, "InstagramMediaCaption", { enumerable: true, get: function () { return InstagramMedia_js_1.Caption; } });
13
14
  Object.defineProperty(exports, "InstagramMediaType", { enumerable: true, get: function () { return InstagramMedia_js_1.MediaType; } });
14
15
  Object.defineProperty(exports, "InstagramMediaUserName", { enumerable: true, get: function () { return InstagramMedia_js_1.UserName; } });
package/cjs/dist/services/instagram-feed-service.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { type Signal } from '@wix/services-definitions/core-services/signals';
2
- import { accounts } from '@wix/instagram-account';
3
- import { media } from '@wix/instagram-media';
2
+ import { media, accounts } from '@wix/instagram';
4
3
  /**
5
4
  * Instagram media item types
6
5
  */
package/cjs/dist/services/instagram-feed-service.js CHANGED
@@ -4,8 +4,7 @@ exports.InstagramFeedService = exports.InstagramFeedServiceDefinition = void 0;
4
4
  exports.loadInstagramFeedServiceConfig = loadInstagramFeedServiceConfig;
5
5
  const services_definitions_1 = require("@wix/services-definitions");
6
6
  const signals_1 = require("@wix/services-definitions/core-services/signals");
7
- const instagram_account_1 = require("@wix/instagram-account");
8
- const instagram_media_1 = require("@wix/instagram-media");
7
+ const instagram_1 = require("@wix/instagram");
9
8
  /**
10
9
  * Default Instagram feed data
11
10
  */
@@ -61,9 +60,9 @@ exports.InstagramFeedService = services_definitions_1.implementService.withConfi
61
60
  isLoading.set(true);
62
61
  error.set(null);
63
62
  // Load Instagram account information
64
- const accountResponse = await instagram_account_1.accounts.getInstagramAccount(accountId);
63
+ const accountResponse = await instagram_1.accounts.getInstagramAccount(accountId);
65
64
  // Load Instagram media for the account
66
- const mediaResponse = await instagram_media_1.media.listInstagramAccountMedia(accountId);
65
+ const mediaResponse = await instagram_1.media.listInstagramAccountMedia(accountId);
67
66
  // Transform SDK media to our interface format
68
67
  const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
69
68
  id: mediaItem._id || mediaItem.mediaId || '',
@@ -160,12 +159,12 @@ async function loadInstagramFeedServiceConfig(input) {
160
159
  return { type: 'notFound' };
161
160
  }
162
161
  // Load Instagram account information using SDK
163
- const accountResponse = await instagram_account_1.accounts.getInstagramAccount(accountId);
162
+ const accountResponse = await instagram_1.accounts.getInstagramAccount(accountId);
164
163
  if (!accountResponse) {
165
164
  return { type: 'notFound' };
166
165
  }
167
166
  // Load initial media items using SDK
168
- const mediaResponse = await instagram_media_1.media.listInstagramAccountMedia(accountId);
167
+ const mediaResponse = await instagram_1.media.listInstagramAccountMedia(accountId);
169
168
  // Transform SDK media to our interface format
170
169
  const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
171
170
  id: mediaItem._id || mediaItem.mediaId || '',
package/dist/react/InstagramMedia.d.ts CHANGED
@@ -1,13 +1,35 @@
1
1
  import React from 'react';
2
2
  import { type AsChildChildren } from '@wix/headless-utils/react';
3
+ import { InstagramMediaItem } from '../services/index.js';
3
4
  export interface MediaGalleryRepeaterProps {
4
5
  children: React.ReactNode;
5
6
  }
6
7
  /**
7
8
  * Repeats children for each Instagram media item, providing a per-item service context.
9
+ * Automatically wraps each item with InstagramMedia.Item (which wraps MediaGallery.Root) to provide
10
+ * both the Instagram media item service context and the media gallery service context.
11
+ * You don't need to manually add InstagramMedia.Item or MediaGallery.Root - they're rendered automatically for each item.
12
+ *
13
+ * @example
14
+ * ```tsx
15
+ * <InstagramMedia.MediaGalleryRepeater>
16
+ * <div>
17
+ * <InstagramMedia.MediaType />
18
+ * <MediaGallery.Viewport asChild>
19
+ * {({ src, alt }) => (
20
+ * <img src={src} alt={alt} />
21
+ * )}
22
+ * </MediaGallery.Viewport>
23
+ * <InstagramMedia.Caption />
24
+ * </div>
25
+ * </InstagramMedia.MediaGalleryRepeater>
26
+ * ```
27
+ *
28
+ * @param props.children - React nodes to render for each media item (Item and MediaGallery.Root are automatically added)
8
29
  */
9
30
  export declare const MediaGalleryRepeater: React.FC<MediaGalleryRepeaterProps>;
10
31
  export declare enum TestIds {
32
+ instagramMediaRoot = "instagram-media-root",
11
33
  instagramMediaCaption = "instagram-media-caption",
12
34
  instagramMediaType = "instagram-media-type",
13
35
  instagramMediaUserName = "instagram-media-username",
@@ -55,10 +77,62 @@ export interface MediaGalleryItemsProps {
55
77
  className?: string;
56
78
  }
57
79
  export declare const MediaGalleryItems: React.ForwardRefExoticComponent<MediaGalleryItemsProps & React.RefAttributes<HTMLDivElement>>;
80
+ export interface ItemProps {
81
+ asChild?: boolean;
82
+ children?: React.ReactNode | AsChildChildren<{
83
+ mediaItem: InstagramMediaItem;
84
+ index: number;
85
+ }>;
86
+ className?: string;
87
+ }
88
+ /**
89
+ * Item component for Instagram media item.
90
+ * Consumes the InstagramMediaItemService and provides mediaItem and index via asChild pattern.
91
+ * This component wraps CoreInstagramMedia.Item which provides the service context.
92
+ *
93
+ * @note When using MediaGalleryRepeater, you don't need to manually add Item - it's automatically
94
+ * rendered once per item by the repeater (along with MediaGallery.Root inside it). Only use Item directly
95
+ * when you're not using MediaGalleryRepeater and need to manually set up the service context.
96
+ *
97
+ * @example
98
+ * ```tsx
99
+ * // Standalone usage (not inside repeater)
100
+ * // First, set up the service context
101
+ * <WixServices
102
+ * servicesMap={createServicesMap().addService(
103
+ * InstagramMediaItemServiceDefinition,
104
+ * InstagramMediaItemService,
105
+ * { mediaItem, index }
106
+ * )}
107
+ * >
108
+ * <InstagramMedia.Item>
109
+ * <MediaGallery.Root
110
+ * mediaGalleryServiceConfig={{
111
+ * media: mediaItem.mediaGalleryItems,
112
+ * }}
113
+ * >
114
+ * <InstagramMedia.Caption />
115
+ * <InstagramMedia.MediaType />
116
+ * <MediaGallery.Viewport asChild>
117
+ * {({ src, alt }) => <img src={src} alt={alt} />}
118
+ * </MediaGallery.Viewport>
119
+ * </MediaGallery.Root>
120
+ * </InstagramMedia.Item>
121
+ * </WixServices>
122
+ *
123
+ * // With asChild pattern to access mediaItem and index
124
+ * <InstagramMedia.Item asChild>
125
+ * {({ mediaItem, index }) => (
126
+ * <div data-index={index}>
127
+ * <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
128
+ * </div>
129
+ * )}
130
+ * </InstagramMedia.Item>
131
+ * ```
132
+ */
133
+ export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
58
134
  export declare const InstagramMedia: {
59
- Root: ({ children }: {
60
- children: React.ReactNode;
61
- }) => import("react/jsx-runtime").JSX.Element;
135
+ Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
62
136
  Caption: React.ForwardRefExoticComponent<CaptionProps & React.RefAttributes<HTMLElement>>;
63
137
  MediaType: React.ForwardRefExoticComponent<MediaTypeProps & React.RefAttributes<HTMLElement>>;
64
138
  UserName: React.ForwardRefExoticComponent<UserNameProps & React.RefAttributes<HTMLElement>>;
package/dist/react/InstagramMedia.js CHANGED
@@ -9,22 +9,41 @@ import * as CoreInstagramMedias from './core/InstagramMedias.js';
9
9
  import { MediaGallery } from '@wix/headless-media/react';
10
10
  /**
11
11
  * Repeats children for each Instagram media item, providing a per-item service context.
12
+ * Automatically wraps each item with InstagramMedia.Item (which wraps MediaGallery.Root) to provide
13
+ * both the Instagram media item service context and the media gallery service context.
14
+ * You don't need to manually add InstagramMedia.Item or MediaGallery.Root - they're rendered automatically for each item.
15
+ *
16
+ * @example
17
+ * ```tsx
18
+ * <InstagramMedia.MediaGalleryRepeater>
19
+ * <div>
20
+ * <InstagramMedia.MediaType />
21
+ * <MediaGallery.Viewport asChild>
22
+ * {({ src, alt }) => (
23
+ * <img src={src} alt={alt} />
24
+ * )}
25
+ * </MediaGallery.Viewport>
26
+ * <InstagramMedia.Caption />
27
+ * </div>
28
+ * </InstagramMedia.MediaGalleryRepeater>
29
+ * ```
30
+ *
31
+ * @param props.children - React nodes to render for each media item (Item and MediaGallery.Root are automatically added)
12
32
  */
13
33
  export const MediaGalleryRepeater = ({ children, }) => {
14
34
  return (_jsx(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems, mediaItems }) => {
15
- console.log('mediaItems', mediaItems);
16
35
  if (!hasItems)
17
36
  return null;
18
37
  return (_jsx(_Fragment, { children: mediaItems.map((mediaItem, index) => {
19
- console.log('mediaItem', mediaItem.mediaGalleryItems);
20
- return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramMediaItemServiceDefinition, InstagramMediaItemService, { mediaItem, index }), children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
21
- media: mediaItem.mediaGalleryItems,
22
- }, children: children }) }, mediaItem.id || index));
38
+ return (_jsx(WixServices, { servicesMap: createServicesMap().addService(InstagramMediaItemServiceDefinition, InstagramMediaItemService, { mediaItem, index }), children: _jsx(Item, { children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
39
+ media: mediaItem.mediaGalleryItems,
40
+ }, children: children }) }) }, mediaItem.id || index));
23
41
  }) }));
24
42
  } }));
25
43
  };
26
44
  export var TestIds;
27
45
  (function (TestIds) {
46
+ TestIds["instagramMediaRoot"] = "instagram-media-root";
28
47
  TestIds["instagramMediaCaption"] = "instagram-media-caption";
29
48
  TestIds["instagramMediaType"] = "instagram-media-type";
30
49
  TestIds["instagramMediaUserName"] = "instagram-media-username";
@@ -54,8 +73,58 @@ export const MediaGalleries = React.forwardRef((props, ref) => {
54
73
  export const MediaGalleryItems = React.forwardRef(({ children, className, ...otherProps }, ref) => {
55
74
  return (_jsx("div", { ref: ref, className: className, ...otherProps, children: children }));
56
75
  });
76
+ /**
77
+ * Item component for Instagram media item.
78
+ * Consumes the InstagramMediaItemService and provides mediaItem and index via asChild pattern.
79
+ * This component wraps CoreInstagramMedia.Item which provides the service context.
80
+ *
81
+ * @note When using MediaGalleryRepeater, you don't need to manually add Item - it's automatically
82
+ * rendered once per item by the repeater (along with MediaGallery.Root inside it). Only use Item directly
83
+ * when you're not using MediaGalleryRepeater and need to manually set up the service context.
84
+ *
85
+ * @example
86
+ * ```tsx
87
+ * // Standalone usage (not inside repeater)
88
+ * // First, set up the service context
89
+ * <WixServices
90
+ * servicesMap={createServicesMap().addService(
91
+ * InstagramMediaItemServiceDefinition,
92
+ * InstagramMediaItemService,
93
+ * { mediaItem, index }
94
+ * )}
95
+ * >
96
+ * <InstagramMedia.Item>
97
+ * <MediaGallery.Root
98
+ * mediaGalleryServiceConfig={{
99
+ * media: mediaItem.mediaGalleryItems,
100
+ * }}
101
+ * >
102
+ * <InstagramMedia.Caption />
103
+ * <InstagramMedia.MediaType />
104
+ * <MediaGallery.Viewport asChild>
105
+ * {({ src, alt }) => <img src={src} alt={alt} />}
106
+ * </MediaGallery.Viewport>
107
+ * </MediaGallery.Root>
108
+ * </InstagramMedia.Item>
109
+ * </WixServices>
110
+ *
111
+ * // With asChild pattern to access mediaItem and index
112
+ * <InstagramMedia.Item asChild>
113
+ * {({ mediaItem, index }) => (
114
+ * <div data-index={index}>
115
+ * <img src={mediaItem.mediaUrl} alt={mediaItem.altText} />
116
+ * </div>
117
+ * )}
118
+ * </InstagramMedia.Item>
119
+ * ```
120
+ */
121
+ export const Item = React.forwardRef((props, ref) => {
122
+ const { asChild, children, className, ...otherProps } = props;
123
+ return (_jsx(CoreInstagramMedia.Item, { children: ({ mediaItem, index }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaRoot, customElement: children, customElementProps: { mediaItem, index }, ...otherProps, children: children })) }));
124
+ });
125
+ Item.displayName = 'InstagramMedia.Item';
57
126
  export const InstagramMedia = {
58
- Root: ({ children }) => _jsx(_Fragment, { children: children }),
127
+ Item,
59
128
  Caption,
60
129
  MediaType,
61
130
  UserName,
package/dist/react/core/InstagramMedia.d.ts CHANGED
@@ -1,8 +1,27 @@
1
1
  import React from 'react';
2
+ import { type InstagramMediaItem } from '../../services/index.js';
2
3
  export interface MediaItem {
3
4
  image: string;
4
5
  altText?: string;
5
6
  }
7
+ export interface ItemProps {
8
+ /** Render prop function that receives media item and index data */
9
+ children: (props: ItemRenderProps) => React.ReactNode;
10
+ }
11
+ /**
12
+ * Render props for Item component
13
+ */
14
+ export interface ItemRenderProps {
15
+ /** The Instagram media item object */
16
+ mediaItem: InstagramMediaItem;
17
+ /** The zero-based index of the media item in the feed */
18
+ index: number;
19
+ }
20
+ /**
21
+ * Headless component for Instagram media item
22
+ * Provides mediaItem and index from the service context
23
+ */
24
+ export declare function Item(props: ItemProps): React.ReactNode;
6
25
  export interface CaptionProps {
7
26
  /** Render prop function that receives caption data */
8
27
  children: (props: CaptionRenderProps) => React.ReactNode;
package/dist/react/core/InstagramMedia.js CHANGED
@@ -1,5 +1,18 @@
1
1
  import { useService } from '@wix/services-manager-react';
2
2
  import { InstagramMediaItemServiceDefinition, InstagramFeedServiceDefinition, } from '../../services/index.js';
3
+ /**
4
+ * Headless component for Instagram media item
5
+ * Provides mediaItem and index from the service context
6
+ */
7
+ export function Item(props) {
8
+ const mediaItemService = useService(InstagramMediaItemServiceDefinition);
9
+ const mediaItem = mediaItemService.mediaItem.get();
10
+ const index = mediaItemService.index.get();
11
+ return props.children({
12
+ mediaItem,
13
+ index,
14
+ });
15
+ }
3
16
  /**
4
17
  * Headless component for Instagram media caption
5
18
  */
package/dist/react/core/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { Root, type RootProps } from './Root.js';
2
2
  export { UserName as CoreUserName, type UserNameProps as CoreUserNameProps, type UserNameRenderProps, } from './UserName.js';
3
3
  export { InstagramMedias, type InstagramMediasProps, type InstagramMediasRenderProps, } from './InstagramMedias.js';
4
- export { Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, type CaptionProps as InstagramMediaCaptionProps, type CaptionRenderProps, type MediaTypeProps as InstagramMediaTypeProps, type MediaTypeRenderProps, type UserNameProps as InstagramMediaUserNameProps, type UserNameRenderProps as InstagramMediaUserNameRenderProps, type TimestampProps as InstagramMediaTimestampProps, type TimestampRenderProps, type MediaGalleryRepeaterProps, type MediaGalleryRepeaterRenderProps, } from './InstagramMedia.js';
4
+ export { Item as InstagramMediaItem, Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, type ItemProps as InstagramMediaItemProps, type ItemRenderProps as InstagramMediaItemRenderProps, type CaptionProps as InstagramMediaCaptionProps, type CaptionRenderProps, type MediaTypeProps as InstagramMediaTypeProps, type MediaTypeRenderProps, type UserNameProps as InstagramMediaUserNameProps, type UserNameRenderProps as InstagramMediaUserNameRenderProps, type TimestampProps as InstagramMediaTimestampProps, type TimestampRenderProps, type MediaGalleryRepeaterProps, type MediaGalleryRepeaterRenderProps, } from './InstagramMedia.js';
package/dist/react/core/index.js CHANGED
@@ -2,4 +2,4 @@ export { Root } from './Root.js';
2
2
  // New core components
3
3
  export { UserName as CoreUserName, } from './UserName.js';
4
4
  export { InstagramMedias, } from './InstagramMedias.js';
5
- export { Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, } from './InstagramMedia.js';
5
+ export { Item as InstagramMediaItem, Caption as InstagramMediaCaption, MediaType as InstagramMediaType, UserName as InstagramMediaUserName, Timestamp as InstagramMediaTimestamp, MediaGalleryRepeater, } from './InstagramMedia.js';
package/dist/services/instagram-feed-service.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { type Signal } from '@wix/services-definitions/core-services/signals';
2
- import { accounts } from '@wix/instagram-account';
3
- import { media } from '@wix/instagram-media';
2
+ import { media, accounts } from '@wix/instagram';
4
3
  /**
5
4
  * Instagram media item types
6
5
  */
package/dist/services/instagram-feed-service.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { defineService, implementService } from '@wix/services-definitions';
2
2
  import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
3
- import { accounts } from '@wix/instagram-account';
4
- import { media } from '@wix/instagram-media';
3
+ import { media, accounts } from '@wix/instagram';
5
4
  /**
6
5
  * Default Instagram feed data
7
6
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/headless-instagram",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -10,7 +10,7 @@
10
10
  "test": "vitest --run",
11
11
  "lint:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
12
12
  "lint:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"",
13
- "test:cjs-esm": "cjs-esm-build-verifier"
13
+ "test:cjs-esm": "cjs-esm-build-verifier --subpath react core services"
14
14
  },
15
15
  "files": [
16
16
  "dist",
@@ -51,10 +51,9 @@
51
51
  "dependencies": {
52
52
  "@radix-ui/react-slot": "^1.2.3",
53
53
  "@wix/essentials": "^0.1.24",
54
- "@wix/headless-media": "0.0.24",
55
- "@wix/headless-utils": "0.0.11",
56
- "@wix/instagram-account": "^1.0.16",
57
- "@wix/instagram-media": "^1.0.13",
54
+ "@wix/headless-media": "0.0.25",
55
+ "@wix/headless-utils": "0.0.12",
56
+ "@wix/instagram": "^1.0.7",
58
57
  "@wix/services-definitions": "^1.0.1",
59
58
  "@wix/services-manager-react": "^1.0.3"
60
59
  },
@@ -71,5 +70,5 @@
71
70
  "groupId": "com.wixpress.headless-components"
72
71
  }
73
72
  },
74
- "falconPackageHash": "6d8f5efd7fbf7c0e4a02052ac1d6f509fda27aff911f15ed0b400416"
73
+ "falconPackageHash": "b5bcd4feaf4d0a1be9d4b239d4b692169911b7244d3514b8f1ad3e8d"
75
74
  }