@depict-ai/react-ui 4.1.2 → 4.1.3

package/ES10/index.cjs

@@ -42,7 +42,7 @@ $parcel$export(module.exports, "version", () => $efbdd2dab4314170$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $0d3a2413fdeb34b9$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.2";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.3";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -512,20 +512,27 @@ async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
     component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
-    get_react_template: get_react_template
+    get_react_template: get_react_template,
+    set_on_index_change_: set_on_index_change_
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $2kiy7$solidjs.createSignal();
   let call_when_template_changes;
   const owner = $2kiy7$solidjs.getOwner();
   const reactProductCard = $2kiy7$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2kiy7$react.useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $2kiy7$react.useState(() => $2kiy7$solidjs.untrack(get_react_template));
+    const [index, setIndex] = $2kiy7$react.useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $2kiy7$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -537,6 +544,10 @@ async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
   const portal = $2kiy7$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_ === null || set_on_index_change_ === void 0 || set_on_index_change_(newIndex => {
+    var _setIndexFunctionAcce;
+    return (_setIndexFunctionAcce = setIndexFunctionAccessor()) === null || _setIndexFunctionAcce === void 0 ? void 0 : _setIndexFunctionAcce(newIndex);
+  });
   $2kiy7$solidjs.createEffect($2kiy7$solidjs.on(get_react_template, new_template => queueMicrotask(() => {
     var _call_when_template_c;
     return (
@@ -676,13 +687,14 @@ function $a81b3f46133355c5$var$SolidSearchPage(props, set_portals) {
         return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $2kiy7$depictaiui.defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+      product_card_template: (display, info) => $3441d987b5ea85cb$export$32024253978abdc7({
         component_props: {
           display: display
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       }),
       get content_blocks_by_row() {
         return transformed_content_blocks();
@@ -779,13 +791,15 @@ function $b0f04d11b78e06c3$var$SolidCategoryPage(props, set_portals) {
       get layout() {
         return props.layout;
       },
-      product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+      product_card_template: (display, info) => $3441d987b5ea85cb$export$32024253978abdc7({
         component_props: {
-          display: display
+          display: display,
+          info: info
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       })
     });
   });
@@ -886,13 +900,14 @@ function $745b83c12baac3c0$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $3441d987b5ea85cb$export$32024253978abdc7({
+    product_card_template: (display, info) => $3441d987b5ea85cb$export$32024253978abdc7({
       component_props: {
         display: display
       },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
-      set_portals: set_portals
+      set_portals: set_portals,
+      set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
     }),
     get cols_at_size() {
       return props.columnsAtSize || (0, $2kiy7$depictaiui.defaultColsAtSize);
@@ -912,7 +927,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $2kiy7$solidjsweb.isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -927,7 +942,8 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       });
     },
     get cols_at_size() {

package/ES10/index.d.ts

@@ -162,6 +162,8 @@ interface PLPConfig<T extends Display> extends BaseProductListingConfig {
 export interface DepictProductCardProps<T extends Display> {
   /** The display data to render. */
   display: T | null;
+  /** The index of the product card. Please note that product cards may stay at the same place (not get re-rendered) or move around as the results change. */
+  index: number;
 }
 /**
  * Depict product card to use for rendering products.

package/ES10/index.js

@@ -15,7 +15,7 @@ import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.2";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.3";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -485,20 +485,27 @@ async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
     component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
-    get_react_template: get_react_template
+    get_react_template: get_react_template,
+    set_on_index_change_: set_on_index_change_
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $jb2Oo$createSignal();
   let call_when_template_changes;
   const owner = $jb2Oo$getOwner();
   const reactProductCard = $jb2Oo$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $jb2Oo$useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $jb2Oo$useState(() => $jb2Oo$untrack(get_react_template));
+    const [index, setIndex] = $jb2Oo$useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $jb2Oo$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -510,6 +517,10 @@ async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
   const portal = $jb2Oo$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_ === null || set_on_index_change_ === void 0 || set_on_index_change_(newIndex => {
+    var _setIndexFunctionAcce;
+    return (_setIndexFunctionAcce = setIndexFunctionAccessor()) === null || _setIndexFunctionAcce === void 0 ? void 0 : _setIndexFunctionAcce(newIndex);
+  });
   $jb2Oo$createEffect($jb2Oo$on(get_react_template, new_template => queueMicrotask(() => {
     var _call_when_template_c;
     return (
@@ -649,13 +660,14 @@ function $f33e2dee70c97da3$var$SolidSearchPage(props, set_portals) {
         return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $jb2Oo$defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+      product_card_template: (display, info) => $cce08f18e2476cbf$export$32024253978abdc7({
         component_props: {
           display: display
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       }),
       get content_blocks_by_row() {
         return transformed_content_blocks();
@@ -752,13 +764,15 @@ function $710dda89475e8c05$var$SolidCategoryPage(props, set_portals) {
       get layout() {
         return props.layout;
       },
-      product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+      product_card_template: (display, info) => $cce08f18e2476cbf$export$32024253978abdc7({
         component_props: {
-          display: display
+          display: display,
+          info: info
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       })
     });
   });
@@ -859,13 +873,14 @@ function $c02e9fd51f31a1bd$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $cce08f18e2476cbf$export$32024253978abdc7({
+    product_card_template: (display, info) => $cce08f18e2476cbf$export$32024253978abdc7({
       component_props: {
         display: display
       },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
-      set_portals: set_portals
+      set_portals: set_portals,
+      set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
     }),
     get cols_at_size() {
       return props.columnsAtSize || (0, $jb2Oo$defaultColsAtSize);
@@ -885,7 +900,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $jb2Oo$isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -900,7 +915,8 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       });
     },
     get cols_at_size() {

package/latest/index.cjs

@@ -42,7 +42,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.2";
+const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.3";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -488,20 +488,27 @@ async function $6081519c185fcf70$export$32024253978abdc7({
   component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
-  get_react_template: get_react_template
+  get_react_template: get_react_template,
+  set_on_index_change_: set_on_index_change_
 }) {
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $2IzJs$solidjs.createSignal();
   let call_when_template_changes;
   const owner = $2IzJs$solidjs.getOwner();
   const reactProductCard = $2IzJs$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2IzJs$react.useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $2IzJs$react.useState(() => $2IzJs$solidjs.untrack(get_react_template));
+    const [index, setIndex] = $2IzJs$react.useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $2IzJs$reactjsxruntime.jsx((0, $d7a14567b529586f$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -513,6 +520,7 @@ async function $6081519c185fcf70$export$32024253978abdc7({
   const portal = $2IzJs$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_?.(newIndex => setIndexFunctionAccessor()?.(newIndex));
   $2IzJs$solidjs.createEffect($2IzJs$solidjs.on(get_react_template, new_template => queueMicrotask(() =>
   // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
   // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
@@ -642,13 +650,14 @@ function $4e47e1e003da166e$var$SolidSearchPage(props, set_portals) {
         return props.gridSpacing ?? (0, $2IzJs$depictaiui.defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $6081519c185fcf70$export$32024253978abdc7({
+      product_card_template: (display, info) => $6081519c185fcf70$export$32024253978abdc7({
         component_props: {
           display: display
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       }),
       get content_blocks_by_row() {
         return transformed_content_blocks();
@@ -742,13 +751,15 @@ function $03d75efbc2476217$var$SolidCategoryPage(props, set_portals) {
       get layout() {
         return props.layout;
       },
-      product_card_template: display => $6081519c185fcf70$export$32024253978abdc7({
+      product_card_template: (display, info) => $6081519c185fcf70$export$32024253978abdc7({
         component_props: {
-          display: display
+          display: display,
+          info: info
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       })
     });
   });
@@ -847,13 +858,14 @@ function $8ffd7da37fdd46be$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $6081519c185fcf70$export$32024253978abdc7({
+    product_card_template: (display, info) => $6081519c185fcf70$export$32024253978abdc7({
       component_props: {
         display: display
       },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
-      set_portals: set_portals
+      set_portals: set_portals,
+      set_on_index_change_: info?.set_on_index_change
     }),
     get cols_at_size() {
       return props.columnsAtSize || (0, $2IzJs$depictaiui.defaultColsAtSize);
@@ -872,7 +884,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $2IzJs$solidjsweb.isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -887,7 +899,8 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       });
     },
     get cols_at_size() {

package/latest/index.d.ts

@@ -162,6 +162,8 @@ interface PLPConfig<T extends Display> extends BaseProductListingConfig {
 export interface DepictProductCardProps<T extends Display> {
   /** The display data to render. */
   display: T | null;
+  /** The index of the product card. Please note that product cards may stay at the same place (not get re-rendered) or move around as the results change. */
+  index: number;
 }
 /**
  * Depict product card to use for rendering products.

package/latest/index.js

@@ -15,7 +15,7 @@ import { renderToString as $2GFvs$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "latest");
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.2";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.3";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -461,20 +461,27 @@ async function $bcf84a32dc612a43$export$32024253978abdc7({
   component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
-  get_react_template: get_react_template
+  get_react_template: get_react_template,
+  set_on_index_change_: set_on_index_change_
 }) {
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $2GFvs$createSignal();
   let call_when_template_changes;
   const owner = $2GFvs$getOwner();
   const reactProductCard = $2GFvs$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2GFvs$useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $2GFvs$useState(() => $2GFvs$untrack(get_react_template));
+    const [index, setIndex] = $2GFvs$useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $2GFvs$jsx((0, $d5c9e1f3545b4984$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -486,6 +493,7 @@ async function $bcf84a32dc612a43$export$32024253978abdc7({
   const portal = $2GFvs$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_?.(newIndex => setIndexFunctionAccessor()?.(newIndex));
   $2GFvs$createEffect($2GFvs$on(get_react_template, new_template => queueMicrotask(() =>
   // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
   // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
@@ -615,13 +623,14 @@ function $2f377099d56e566c$var$SolidSearchPage(props, set_portals) {
         return props.gridSpacing ?? (0, $2GFvs$defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+      product_card_template: (display, info) => $bcf84a32dc612a43$export$32024253978abdc7({
         component_props: {
           display: display
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       }),
       get content_blocks_by_row() {
         return transformed_content_blocks();
@@ -715,13 +724,15 @@ function $6e2ebc6b1506f2c7$var$SolidCategoryPage(props, set_portals) {
       get layout() {
         return props.layout;
       },
-      product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+      product_card_template: (display, info) => $bcf84a32dc612a43$export$32024253978abdc7({
         component_props: {
-          display: display
+          display: display,
+          info: info
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       })
     });
   });
@@ -820,13 +831,14 @@ function $4fd5dc0e231a60d9$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+    product_card_template: (display, info) => $bcf84a32dc612a43$export$32024253978abdc7({
       component_props: {
         display: display
       },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
-      set_portals: set_portals
+      set_portals: set_portals,
+      set_on_index_change_: info?.set_on_index_change
     }),
     get cols_at_size() {
       return props.columnsAtSize || (0, $2GFvs$defaultColsAtSize);
@@ -845,7 +857,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $2GFvs$isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -860,7 +872,8 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       });
     },
     get cols_at_size() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",

package/server/ES10/index.cjs

@@ -96,20 +96,27 @@ async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
     component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
-    get_react_template: get_react_template
+    get_react_template: get_react_template,
+    set_on_index_change_: set_on_index_change_
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $aNCHr$solidjs.createSignal();
   let call_when_template_changes;
   const owner = $aNCHr$solidjs.getOwner();
   const reactProductCard = $aNCHr$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $aNCHr$react.useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $aNCHr$react.useState(() => $aNCHr$solidjs.untrack(get_react_template));
+    const [index, setIndex] = $aNCHr$react.useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $aNCHr$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -121,6 +128,10 @@ async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
   const portal = $aNCHr$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_ === null || set_on_index_change_ === void 0 || set_on_index_change_(newIndex => {
+    var _setIndexFunctionAcce;
+    return (_setIndexFunctionAcce = setIndexFunctionAccessor()) === null || _setIndexFunctionAcce === void 0 ? void 0 : _setIndexFunctionAcce(newIndex);
+  });
   $aNCHr$solidjs.createEffect($aNCHr$solidjs.on(get_react_template, new_template => queueMicrotask(() => {
     var _call_when_template_c;
     return (
@@ -147,7 +158,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $aNCHr$solidjsweb.isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -162,7 +173,8 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       });
     },
     get cols_at_size() {
@@ -191,7 +203,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.2";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.3";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/ES10/index.d.ts

@@ -162,6 +162,8 @@ interface PLPConfig<T extends Display> extends BaseProductListingConfig {
 export interface DepictProductCardProps<T extends Display> {
   /** The display data to render. */
   display: T | null;
+  /** The index of the product card. Please note that product cards may stay at the same place (not get re-rendered) or move around as the results change. */
+  index: number;
 }
 /**
  * Depict product card to use for rendering products.

package/server/ES10/index.js

@@ -4,7 +4,7 @@ import { ImagePlaceholder as $7h5e1$ImagePlaceholder, TextPlaceholder as $7h5e1$
 import { generateHydrationScript as $7h5e1$generateHydrationScript, renderToString as $7h5e1$renderToString, isServer as $7h5e1$isServer, ssr as $7h5e1$ssr, ssrHydrationKey as $7h5e1$ssrHydrationKey } from "solid-js/web";
 import { dwarn as $7h5e1$dwarn } from "@depict-ai/utilishared/ES10";
 import { renderToString as $7h5e1$renderToString1 } from "react-dom/server";
-import { getOwner as $7h5e1$getOwner, untrack as $7h5e1$untrack, runWithOwner as $7h5e1$runWithOwner, createEffect as $7h5e1$createEffect, on as $7h5e1$on, onCleanup as $7h5e1$onCleanup } from "solid-js";
+import { createSignal as $7h5e1$createSignal, getOwner as $7h5e1$getOwner, untrack as $7h5e1$untrack, runWithOwner as $7h5e1$runWithOwner, createEffect as $7h5e1$createEffect, on as $7h5e1$on, onCleanup as $7h5e1$onCleanup } from "solid-js";
 import { jsx as $7h5e1$jsx } from "react/jsx-runtime";
 import { createPortal as $7h5e1$createPortal } from "react-dom";
 
@@ -72,20 +72,27 @@ async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
     component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
-    get_react_template: get_react_template
+    get_react_template: get_react_template,
+    set_on_index_change_: set_on_index_change_
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $7h5e1$createSignal();
   let call_when_template_changes;
   const owner = $7h5e1$getOwner();
   const reactProductCard = $7h5e1$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $7h5e1$useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $7h5e1$useState(() => $7h5e1$untrack(get_react_template));
+    const [index, setIndex] = $7h5e1$useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $7h5e1$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -97,6 +104,10 @@ async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
   const portal = $7h5e1$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_ === null || set_on_index_change_ === void 0 || set_on_index_change_(newIndex => {
+    var _setIndexFunctionAcce;
+    return (_setIndexFunctionAcce = setIndexFunctionAccessor()) === null || _setIndexFunctionAcce === void 0 ? void 0 : _setIndexFunctionAcce(newIndex);
+  });
   $7h5e1$createEffect($7h5e1$on(get_react_template, new_template => queueMicrotask(() => {
     var _call_when_template_c;
     return (
@@ -123,7 +134,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $7h5e1$isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -138,7 +149,8 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info === null || info === void 0 ? void 0 : info.set_on_index_change
       });
     },
     get cols_at_size() {
@@ -167,7 +179,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.2";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.3";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.cjs

@@ -93,20 +93,27 @@ async function $6081519c185fcf70$export$32024253978abdc7({
   component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
-  get_react_template: get_react_template
+  get_react_template: get_react_template,
+  set_on_index_change_: set_on_index_change_
 }) {
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $7QqFM$solidjs.createSignal();
   let call_when_template_changes;
   const owner = $7QqFM$solidjs.getOwner();
   const reactProductCard = $7QqFM$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $7QqFM$react.useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $7QqFM$react.useState(() => $7QqFM$solidjs.untrack(get_react_template));
+    const [index, setIndex] = $7QqFM$react.useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $7QqFM$reactjsxruntime.jsx((0, $d7a14567b529586f$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -118,6 +125,7 @@ async function $6081519c185fcf70$export$32024253978abdc7({
   const portal = $7QqFM$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_?.(newIndex => setIndexFunctionAccessor()?.(newIndex));
   $7QqFM$solidjs.createEffect($7QqFM$solidjs.on(get_react_template, new_template => queueMicrotask(() =>
   // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
   // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
@@ -141,7 +149,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $7QqFM$solidjsweb.isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -156,7 +164,8 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       });
     },
     get cols_at_size() {
@@ -183,7 +192,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.2";
+const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.3";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.d.ts

@@ -162,6 +162,8 @@ interface PLPConfig<T extends Display> extends BaseProductListingConfig {
 export interface DepictProductCardProps<T extends Display> {
   /** The display data to render. */
   display: T | null;
+  /** The index of the product card. Please note that product cards may stay at the same place (not get re-rendered) or move around as the results change. */
+  index: number;
 }
 /**
  * Depict product card to use for rendering products.

package/server/latest/index.js

@@ -4,7 +4,7 @@ import { ImagePlaceholder as $eOXet$ImagePlaceholder, TextPlaceholder as $eOXet$
 import { generateHydrationScript as $eOXet$generateHydrationScript, renderToString as $eOXet$renderToString, isServer as $eOXet$isServer, ssr as $eOXet$ssr, ssrHydrationKey as $eOXet$ssrHydrationKey } from "solid-js/web";
 import { dwarn as $eOXet$dwarn } from "@depict-ai/utilishared/latest";
 import { renderToString as $eOXet$renderToString1 } from "react-dom/server";
-import { getOwner as $eOXet$getOwner, untrack as $eOXet$untrack, runWithOwner as $eOXet$runWithOwner, createEffect as $eOXet$createEffect, on as $eOXet$on, onCleanup as $eOXet$onCleanup } from "solid-js";
+import { createSignal as $eOXet$createSignal, getOwner as $eOXet$getOwner, untrack as $eOXet$untrack, runWithOwner as $eOXet$runWithOwner, createEffect as $eOXet$createEffect, on as $eOXet$on, onCleanup as $eOXet$onCleanup } from "solid-js";
 import { jsx as $eOXet$jsx } from "react/jsx-runtime";
 import { createPortal as $eOXet$createPortal } from "react-dom";
 
@@ -69,20 +69,27 @@ async function $bcf84a32dc612a43$export$32024253978abdc7({
   component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
-  get_react_template: get_react_template
+  get_react_template: get_react_template,
+  set_on_index_change_: set_on_index_change_
 }) {
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  const [setIndexFunctionAccessor, setIndexFunctionSetter] = $eOXet$createSignal();
   let call_when_template_changes;
   const owner = $eOXet$getOwner();
   const reactProductCard = $eOXet$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $eOXet$useEffect(set_react_has_ran_hooks, []);
     const [react_template, set_react_template] = $eOXet$useState(() => $eOXet$untrack(get_react_template));
+    const [index, setIndex] = $eOXet$useState(0);
+    setIndexFunctionSetter(() => setIndex);
     call_when_template_changes = set_react_template;
-    return react_template(props);
+    return react_template(set_on_index_change_ ? {
+      ...props,
+      index: index
+    } : props);
   }, component_props);
   const reactProductCardInErrorBoundary = $eOXet$jsx((0, $d5c9e1f3545b4984$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
@@ -94,6 +101,7 @@ async function $bcf84a32dc612a43$export$32024253978abdc7({
   const portal = $eOXet$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  set_on_index_change_?.(newIndex => setIndexFunctionAccessor()?.(newIndex));
   $eOXet$createEffect($eOXet$on(get_react_template, new_template => queueMicrotask(() =>
   // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
   // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
@@ -117,7 +125,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => {
+    product_card_template: (display, info) => {
       if (0, $eOXet$isServer) {
         // This function can't be async on the server
         // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
@@ -132,7 +140,8 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
         },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
-        set_portals: set_portals
+        set_portals: set_portals,
+        set_on_index_change_: info?.set_on_index_change
       });
     },
     get cols_at_size() {
@@ -159,7 +168,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.2";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.3";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }