New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/components/ComponentCarousel/ComponentCarousel.tsx

@@ -16,6 +16,7 @@ interface CarouselWindowItem {
   offset: number;
   idx: number;
   key: string;
+  itemKey: string;
 }
 
 interface Props {
@@ -233,7 +234,7 @@ export default class ComponentCarousel extends React.PureComponent<
       return posIndex % total;
     } else {
       const indexMod = Math.abs(posIndex) % total;
-      return (indexMod === 0 ? 0 : 1) * (total - indexMod);
+      return indexMod === 0 ? 0 : total - indexMod;
     }
   };
 
@@ -306,6 +307,7 @@ export default class ComponentCarousel extends React.PureComponent<
       swipedAmount,
       childrenCount,
       currentIdx,
+      childByIdxLookup,
     } = state;
 
     let currentPosIdx: number = ComponentCarousel.getSwipedItemPosIdx(
@@ -324,14 +326,21 @@ export default class ComponentCarousel extends React.PureComponent<
           i,
           childrenCount
         );
+        const child = childByIdxLookup[itemIdx];
+        const itemKey = child?.props?.itemKey;
+
+        // Find existing window item by matching both itemKey AND offset
         let existingItem = windowItems.find(
-          (windowItem) => windowItem.idx === itemIdx
+          (windowItem) =>
+            windowItem.itemKey === itemKey && windowItem.offset === offset
         );
 
         newWindowItems.push({
           offset,
           idx: itemIdx,
-          key: existingItem ? existingItem.key : uniqueId(),
+          itemKey: itemKey,
+          // Use itemKey + position index i to ensure uniqueness
+          key: existingItem ? existingItem.key : `${itemKey}-${i}`,
         });
 
         offset++;
@@ -505,7 +514,7 @@ export default class ComponentCarousel extends React.PureComponent<
       <div className={classNames.join(" ")} ref={this.placeholderRef}>
         <TransitionMotion styles={placeholderStyles}>
           {(interpolatedStyles) => (
-            <React.Fragment>
+            <>
               {interpolatedStyles.map((config) => {
                 const { PlaceholderComponent, placeholderProps, itemKey } =
                   config.data.child.props;
@@ -526,12 +535,11 @@ export default class ComponentCarousel extends React.PureComponent<
                   </div>
                 );
               })}
-            </React.Fragment>
+            </>
           )}
         </TransitionMotion>
       </div>
     );
-    //`
   };
 
   renderActiveComponent = (): React.ReactNode => {