@seamly/web-ui 19.1.3 → 19.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "19.1.3",
+  "version": "19.1.4",
   "main": "build/dist/lib/index.js",
   "module": "",
   "exports": {

package/src/javascripts/lib/external-api/index.js

@@ -124,6 +124,10 @@ class ExternalApi {
     if (typeof this.appConfig === 'function') {
       return this.appConfig(userConfig)
     }
+    const defaults = {
+      ...this.appConfig.defaults,
+      ...userConfig.defaults,
+    }
     return {
       ...this.appConfig,
       ...userConfig,
@@ -131,6 +135,7 @@ class ExternalApi {
         ...this.appConfig.api,
         ...userConfig.api,
       },
+      defaults: Object.keys(defaults).length ? defaults : undefined,
     }
   }
 }

package/src/javascripts/ui/components/conversation/event/carousel-component/index.js

@@ -8,6 +8,9 @@ import CarouselMessageSlide from '../carousel-message/components/slide'
 
 const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
 const defaultGetItemLabel = (item) => item.label
+const preventScroll = ({ target }) => {
+  target.scrollLeft = 0
+}
 
 export default function CarouselComponent({
   currentIndex: originalIndex,
@@ -51,7 +54,10 @@ export default function CarouselComponent({
       role="group"
       aria-roledescription="carousel"
     >
-      <div className={className('carousel__slides-wrapper')}>
+      <div
+        className={className('carousel__slides-wrapper')}
+        onScroll={preventScroll}
+      >
         <div
           id={carouselItemsId}
           className={className('carousel__slides')}
@@ -78,6 +84,7 @@ export default function CarouselComponent({
                   item={item}
                   items={items}
                   currentIndex={currentIndex}
+                  index={idx}
                   isActive={isActive}
                 />
               </div>

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -5,18 +5,17 @@ import CardComponent from '../../card-component'
 export default function CarouselMessageSlide({
   item: slide,
   items,
-  currentIndex,
+  index,
   isActive,
 }) {
   const { t } = useI18n()
-
   return (
     <div
       className={className('carousel-item', `carousel-item--${slide.type}`)}
       role="group"
       aria-roledescription="slide"
       aria-label={t('carousel.slide.label', {
-        index: currentIndex + 1,
+        index: index + 1,
         total: items.length,
       })}
     >

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,11 +1,13 @@
 import MessageContainer from '../../message-container'
 import CarouselComponent from '../carousel-component'
+import { useTranslatedEventData } from '../../../../../domains/translations'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
 const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
-  const slides = event.payload.body.cards
+  const [body] = useTranslatedEventData(event)
+  const slides = body.cards
 
   return (
     <MessageContainer event={event} modifiers={'type-carousel'}>