pb-sxp-ui 1.9.0 → 1.9.1

package/dist/index.js

@@ -8975,7 +8975,7 @@ SwiperSlide.displayName = 'SwiperSlide';
  * @Author: binruan@chatlabs.com
  * @Date: 2023-11-02 18:34:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-11-06 17:27:45
+ * @LastEditTime: 2024-11-19 14:28:41
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
  *
  */
@@ -8986,6 +8986,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     const fTouchRef = useRef(null);
     const touchMoveRef = useRef(null);
     const ref = useRef(null);
+    const modalRef = useRef(null);
     const MODAL_DEF_TRANS = fullHeight * 0.2;
     const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
     const [modalTrans, setModalTrans] = useState(MODAL_DEF_TRANS);
@@ -9033,6 +9034,46 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     const child = useCallback(() => {
         return children;
     }, [_popup, openState, globalConfig]);
+    useEffect(() => {
+        const trapFocus = (element) => {
+            var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+            var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
+            var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
+            var KEYCODE_TAB = 9;
+            element.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape' || e.key === 'Esc') {
+                    // 在这里执行按下 Esc 键时的操作
+                    handleClose();
+                    e.preventDefault();
+                }
+                var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+                if (!isTabPressed) {
+                    return;
+                }
+                if (e.shiftKey) {
+                    /* shift + tab */
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
+                        lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    /* tab */
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
+                        firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+            });
+            firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+        };
+        if (modalRef === null || modalRef === void 0 ? void 0 : modalRef.current)
+            trapFocus(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current);
+        return () => {
+            var _a;
+            (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
+        };
+    }, [modalRef, isShow, _popup]);
     if (!modalEleRef.current)
         return null;
     const handleClose = debounce(() => {
@@ -9097,7 +9138,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
                 height: '100%'
             } },
-            React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
+            React.createElement("div", Object.assign({ ref: modalRef, className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, "aria-labelledby": 'modal-content', style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
                     transform: `translateY(${modalTrans}px)`
                 })), { overflow: 'hidden', borderRadius: `${(_x = (_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.borderRadius) !== null && _x !== void 0 ? _x : 0}px`, zIndex: 9 }), onClick: (e) => {
                     e.stopPropagation();
@@ -9107,18 +9148,18 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 onTouchStart: handleTouchStart,
                 onTouchEnd: handleTouchEnd
             })),
-                React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
-                    React.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon$1, alt: 'close button', className: 'modal-icon' })),
-                React.createElement("div", Object.assign({ ref: ref, style: {
+                React.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
                         height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
                         overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
                         zIndex: 1
-                    } }, (((_0 = (_z = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _z === void 0 ? void 0 : _z.props) === null || _0 === void 0 ? void 0 : _0.enableFixedCloseButton) && {
+                    } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
                     onScroll: (e) => {
                         var _a;
                         setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
                     }
-                })), child())))))), modalEleRef.current);
+                })), child()),
+                React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
+                    React.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
 };
 var Modal$1 = memo(Modal);
 
@@ -9126,7 +9167,7 @@ var Modal$1 = memo(Modal);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-18 14:52:42
+ * @LastEditTime: 2024-11-07 14:27:18
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
  *
  */
@@ -9183,7 +9224,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-        text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+        text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                 __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
             } }))));
 };
@@ -9236,7 +9277,7 @@ var FormatImage$1 = memo(FormatImage);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:32
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-17 18:02:56
+ * @LastEditTime: 2024-11-19 10:29:18
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Scroll.tsx
  *
  */
@@ -9248,7 +9289,7 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
         if (enableSlideActive)
             (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
     }, [popupDetailData, enableSlideActive]);
-    return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
+    return (React.createElement(Swiper, { role: 'list', tag: 'ul', ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
 };
 var Scroll$1 = memo(Scroll);
 
@@ -9461,7 +9502,7 @@ const CommodityDetail$1 = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
+        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
             React.createElement("span", { dangerouslySetInnerHTML: {
                     __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
                 } })))));
@@ -9499,7 +9540,9 @@ const CommodityDetail$1 = (_a) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
             React.createElement("div", { style: { position: 'relative' } },
-                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
+                product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { a11y: {
+                        enabled: true
+                    }, height: height, modules: [Pagination, Autoplay], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign,
@@ -10488,7 +10531,7 @@ Made in Italy` })));
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
                                 __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                     React.createElement("span", { dangerouslySetInnerHTML: {
                             __html: setFontForText((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
                         } }))),
@@ -10966,39 +11009,43 @@ const CommodityList$1 = (_a) => {
             eventName: 'PageView'
         });
     }, []);
-    return (React.createElement("div", { className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
+    return (React.createElement("ul", { role: 'list', className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", Object.assign({ key: index }, props, { className: css({
-                display: 'flex'
-            }), onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
-            React.createElement("div", { style: {
-                    width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("li", { role: 'listitem', key: index, onClick: () => handleClick(item, index) },
+            React.createElement("button", Object.assign({ role: 'button', "aria-label": item === null || item === void 0 ? void 0 : item.title, tabIndex: 0, className: css({
                     display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between'
-                } },
-                React.createElement("div", null,
-                    React.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
-                        } }),
-                    React.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
-                        } })),
-                React.createElement("div", { className: css({
+                    alignItems: 'normal',
+                    width: '100%',
+                    textAlign: 'left'
+                }) }, props),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
+                React.createElement("div", { style: {
+                        width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
                         display: 'flex',
-                        alignItems: 'flex-end',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        overflow: 'hidden'
-                    }) },
+                        flexDirection: 'column',
+                        justifyContent: 'space-between'
+                    } },
                     React.createElement("div", null,
-                        React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
-                                __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
+                        React.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                            } }),
+                        React.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
                             } })),
-                    React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
-                        } })))))));
+                    React.createElement("div", { className: css({
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            overflow: 'hidden'
+                        }) },
+                        React.createElement("div", null,
+                            React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
+                                    __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
+                                } })),
+                        React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
+                            } }))))))));
     })));
 };
 var CommodityListComponent = memo(CommodityList$1);
@@ -11468,44 +11515,55 @@ var interactionRender$a = [
 ];
 
 const EventProvider = (_a) => {
-    var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink"]);
+    var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
     const ref = useRef(null);
     const { popup } = useEditor();
     const { setPopupDetailData, ctaEvent } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
-    const handleClick = throttle(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+    const [element, setElement] = useState(null);
+    const handleClick = throttle((event) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        event.preventDefault();
+        const item = (_c = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video) !== null && _c !== void 0 ? _c : multItem;
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
             eventSubject: 'clickCta',
             eventDescription: 'User clicked the CTA'
         }, rec, item, index);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex
+            ? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
+        setElement(ref === null || ref === void 0 ? void 0 : ref.current);
         if (isExternalLink) {
-            if (jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link)) {
-                const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
-                const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+            const link = ((_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
+            if (jumpLink || link) {
+                const cta = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
+                const product = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) || multItem;
                 jumpToWeb(rec, product, cta, index);
-                window.location.href = window.getJointUtmLink(jumpLink || ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link) || '');
+                window.location.href = window.getJointUtmLink(jumpLink || link || '');
             }
         }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+    useEffect(() => {
+        if (element && !(popup === null || popup === void 0 ? void 0 : popup.id)) {
+            element === null || element === void 0 ? void 0 : element.focus();
+            setElement(null);
+        }
+    }, [element, popup]);
+    return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
 };
 var EventProvider$1 = memo(EventProvider);
 
 var styles$8 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
 
 const Commodity$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
         React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css({
                 color: '#fff',
@@ -11518,8 +11576,8 @@ const Commodity$1 = (_a) => {
             React.createElement("div", { className: styles$8['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                     __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                 } }),
-            React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                    __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+            React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_p = (_o = product === null || product === void 0 ? void 0 : product.bindCta) === null || _o === void 0 ? void 0 : _o.enTitle) !== null && _p !== void 0 ? _p : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                 } }))));
 };
 var CommodityComponent = memo(Commodity$1);
@@ -11599,7 +11657,7 @@ const Appoint$1 = (_a) => {
     const { sxpParameter } = useSxpDataSource();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: Object.assign({ alignItems: 'center' }, style), index: index }, props),
         React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
                 __html: setFontForText((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
@@ -11783,7 +11841,7 @@ const Link$1 = (_a) => {
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
     (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
     const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
+    return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, style: Object.assign({ alignItems: 'center' }, style) }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
         React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css({
                 display: 'flex',
@@ -11893,12 +11951,12 @@ var interactionRender$7 = [
 var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
 const CommodityDiro$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
         React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css({
                 color: '#fff',
@@ -11911,8 +11969,8 @@ const CommodityDiro$1 = (_a) => {
             React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                     __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                 } }),
-            React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                    __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+            React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_p = (_o = product === null || product === void 0 ? void 0 : product.bindCta) === null || _o === void 0 ? void 0 : _o.enTitle) !== null && _p !== void 0 ? _p : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                 } }))));
 };
 var CommodityDiroComponent = memo(CommodityDiro$1);
@@ -11989,12 +12047,12 @@ var interactionRender$6 = [
 var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
 const CommodityDiroNew$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: style, index: index }, props),
         React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
         React.createElement("div", { className: css({
                 color: '#fff',
@@ -12007,8 +12065,8 @@ const CommodityDiroNew$1 = (_a) => {
             React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                     __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                 } }),
-            React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                    __html: setFontForText((_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+            React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_o = (_m = product === null || product === void 0 ? void 0 : product.bindCta) === null || _m === void 0 ? void 0 : _m.enTitle) !== null && _o !== void 0 ? _o : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                 } }))));
 };
 var CommodityDiroNewComponent = memo(CommodityDiroNew$1);
@@ -12087,45 +12145,28 @@ var styles$4 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
 
 const MultiCommodityDiro$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
-    const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
-    const { popup } = useEditor();
-    const { jumpToWeb } = useEventReport();
-    const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-    const handleClick = throttle((item, multiCheckIndex) => {
-        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-            eventSubject: 'clickCta',
-            eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
-        if (isExternalLink) {
-            if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta, index);
-                window.location.href = window.getJointUtmLink(item.link);
-            }
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
-            React.createElement("div", { className: css({
-                    color: '#000',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("div", { className: styles$4['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                    } }),
-                React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                    } }))))));
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
+    const { sxpParameter } = useSxpDataSource();
+    const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
+            React.createElement(EventProvider$1, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
+                React.createElement("div", { className: css({
+                        color: '#000',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        overflow: 'hidden'
+                    }) },
+                    React.createElement("div", { className: styles$4['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                        } }),
+                    React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                        } })))))));
     })));
 };
 var MultiCommodityDiroComponent = memo(MultiCommodityDiro$1);
@@ -12203,46 +12244,28 @@ var styles$3 = {"two-line-ellipsis":"index-module_two-line-ellipsis__mdzn0"};
 
 const MultiCommodity$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
     const { sxpParameter } = useSxpDataSource();
-    const { ctaEvent, setPopupDetailData } = useSxpDataSource();
-    const { popup } = useEditor();
-    const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-    const { jumpToWeb } = useEventReport();
-    const handleClick = throttle((item, multiCheckIndex) => {
-        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-            eventSubject: 'clickCta',
-            eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
-        if (isExternalLink) {
-            if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta, index);
-                window.location.href = window.getJointUtmLink(item.link);
-            }
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
-            React.createElement("div", { className: css({
-                    color: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("div", { className: styles$3['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                    } }),
-                React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                    } }))))));
+    const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
+            React.createElement(EventProvider$1, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
+                React.createElement("div", { className: css({
+                        color: '#fff',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        overflow: 'hidden'
+                    }) },
+                    React.createElement("div", { className: styles$3['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                        } }),
+                    React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                        } })))))));
     })));
 };
 var MultiCommodityComponent = memo(MultiCommodity$1);
@@ -12328,47 +12351,29 @@ var styles$2 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__fselR"};
 
 const MultiCommodityDiroNew$1 = (_a) => {
     var _b, _c;
-    var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
-    const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
-    const { popup } = useEditor();
-    const { jumpToWeb } = useEventReport();
-    const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-    const handleClick = throttle((item, multiCheckIndex) => {
-        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-            eventSubject: 'clickCta',
-            eventDescription: 'User clicked the CTA'
-        }, recData, item, index);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index,
-            multiCheckIndex }));
-        if (isExternalLink) {
-            if (item === null || item === void 0 ? void 0 : item.link) {
-                jumpToWeb(recData, item, item.bindCta, index);
-                window.location.href = window.getJointUtmLink(item.link);
-            }
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
-            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
-            React.createElement("div", { className: css({
-                    color: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    width: '100%',
-                    overflow: 'hidden',
-                    lineHeight: '20px'
-                }) },
-                React.createElement("div", { className: styles$2['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                    } }),
-                React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                    } }))))));
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
+    const { sxpParameter } = useSxpDataSource();
+    const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+    return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
+            React.createElement(EventProvider$1, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
+                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
+                React.createElement("div", { className: css({
+                        color: '#fff',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        width: '100%',
+                        overflow: 'hidden',
+                        lineHeight: '20px'
+                    }) },
+                    React.createElement("div", { className: styles$2['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                        } }),
+                    React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_j = (_h = item === null || item === void 0 ? void 0 : item.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                        } })))))));
     })));
 };
 var MultiCommodityDiroNewComponent = memo(MultiCommodityDiroNew$1);
@@ -16524,7 +16529,7 @@ var PictureGroup$3 = memo(PictureGroup$2);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-10-17 18:02:31
+ * @LastEditTime: 2024-11-19 10:40:36
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
  *
  */
@@ -16565,8 +16570,8 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRigh
             marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`,
             width: hashTagRightMargin
         } },
-        React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
-            React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
+        React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'li', role: 'listitem' },
+            React.createElement("button", { className: 'clc-sxp-bottom-hashtag-item-button', "aria-label": item, "aria-describedby": item, dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
 };
 var Hashtag$1 = memo(Hashtag);
 
@@ -16782,7 +16787,7 @@ var ConsentPopup = memo(Consent);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-11-05 18:13:15
+ * @LastEditTime: 2024-11-19 09:47:45
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -17270,9 +17275,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     alignItems: 'center'
                 } },
                 React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
+                renderBottom(rec, index),
                 renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
                 renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-                renderBottom(rec, index),
                 renderContent(rec, index)))))));
         });
     }, [
@@ -17339,9 +17344,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 }
             }, direction: 'vertical', height: height },
+            renderView,
             renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
-            renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-            renderView),
+            renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
         React.createElement(WaterFall$1, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
         React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig })));
 };