pb-sxp-ui 1.9.0 → 1.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/index.cjs +1005 -241
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +72 -4
  4. package/dist/index.js +1005 -241
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +1005 -241
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  15. package/es/core/components/SxpPageRender/Hashtag/index.js +2 -2
  16. package/es/core/components/SxpPageRender/Modal/index.js +45 -7
  17. package/es/core/components/SxpPageRender/PictureGroup/index.js +51 -25
  18. package/es/core/components/SxpPageRender/index.js +3 -3
  19. package/es/core/hooks/useFocusTrap.d.ts +2 -0
  20. package/es/core/hooks/useFocusTrap.js +37 -0
  21. package/es/core/utils/tool.d.ts +2 -1
  22. package/es/core/utils/tool.js +12 -1
  23. package/es/index.d.ts +1 -0
  24. package/es/index.js +1 -0
  25. package/es/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  26. package/es/materials/sxp/popup/CommodityDetail/index.js +38 -14
  27. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +37 -13
  28. package/es/materials/sxp/popup/CommodityList/index.js +32 -28
  29. package/es/materials/sxp/template/Appoint/index.js +1 -1
  30. package/es/materials/sxp/template/Commodity/index.js +4 -4
  31. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  32. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  33. package/es/materials/sxp/template/Link/index.js +1 -1
  34. package/es/materials/sxp/template/MultiCommodity/index.js +23 -42
  35. package/es/materials/sxp/template/MultiCommodityDiro/index.js +24 -42
  36. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +25 -44
  37. package/es/materials/sxp/template/components/EventProvider.d.ts +2 -0
  38. package/es/materials/sxp/template/components/EventProvider.js +22 -11
  39. package/es/materials/sxp/template/components/Scroll.js +1 -1
  40. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  41. package/lib/core/components/SxpPageRender/Hashtag/index.js +2 -2
  42. package/lib/core/components/SxpPageRender/Modal/index.js +45 -7
  43. package/lib/core/components/SxpPageRender/PictureGroup/index.js +49 -23
  44. package/lib/core/components/SxpPageRender/index.js +3 -3
  45. package/lib/core/hooks/useFocusTrap.d.ts +2 -0
  46. package/lib/core/hooks/useFocusTrap.js +39 -0
  47. package/lib/core/utils/tool.d.ts +2 -1
  48. package/lib/core/utils/tool.js +13 -1
  49. package/lib/index.d.ts +1 -0
  50. package/lib/index.js +1 -0
  51. package/lib/materials/sxp/cta/AniLinkPopup/index.js +5 -5
  52. package/lib/materials/sxp/popup/CommodityDetail/index.js +36 -12
  53. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +35 -11
  54. package/lib/materials/sxp/popup/CommodityList/index.js +32 -28
  55. package/lib/materials/sxp/template/Appoint/index.js +1 -1
  56. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  57. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  58. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  59. package/lib/materials/sxp/template/Link/index.js +1 -1
  60. package/lib/materials/sxp/template/MultiCommodity/index.js +22 -41
  61. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +23 -41
  62. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +24 -43
  63. package/lib/materials/sxp/template/components/EventProvider.d.ts +2 -0
  64. package/lib/materials/sxp/template/components/EventProvider.js +21 -10
  65. package/lib/materials/sxp/template/components/Scroll.js +1 -1
  66. package/package.json +1 -1
@@ -7,11 +7,12 @@ const ReactDOM = tslib_1.__importStar(require("react-dom"));
7
7
  const hooks_1 = require("../../../../core/hooks");
8
8
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
9
9
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
10
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
10
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
11
11
  const touchRef = (0, react_1.useRef)(null);
12
12
  const fTouchRef = (0, react_1.useRef)(null);
13
13
  const touchMoveRef = (0, react_1.useRef)(null);
14
14
  const ref = (0, react_1.useRef)(null);
15
+ const modalRef = (0, react_1.useRef)(null);
15
16
  const MODAL_DEF_TRANS = fullHeight * 0.2;
16
17
  const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
17
18
  const [modalTrans, setModalTrans] = (0, react_1.useState)(MODAL_DEF_TRANS);
@@ -59,6 +60,43 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
59
60
  const child = (0, react_1.useCallback)(() => {
60
61
  return children;
61
62
  }, [_popup, openState, globalConfig]);
63
+ (0, react_1.useEffect)(() => {
64
+ const trapFocus = (element) => {
65
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],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])');
66
+ var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
67
+ var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
68
+ var KEYCODE_TAB = 9;
69
+ element.addEventListener('keydown', function (e) {
70
+ if (e.key === 'Escape' || e.key === 'Esc') {
71
+ handleClose();
72
+ e.preventDefault();
73
+ }
74
+ var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
75
+ if (!isTabPressed) {
76
+ return;
77
+ }
78
+ if (e.shiftKey) {
79
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
80
+ lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
81
+ e.preventDefault();
82
+ }
83
+ }
84
+ else {
85
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
86
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
87
+ e.preventDefault();
88
+ }
89
+ }
90
+ });
91
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
92
+ };
93
+ if (modalRef === null || modalRef === void 0 ? void 0 : modalRef.current)
94
+ trapFocus(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current);
95
+ return () => {
96
+ var _a;
97
+ (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
98
+ };
99
+ }, [modalRef, isShow, _popup]);
62
100
  if (!modalEleRef.current)
63
101
  return null;
64
102
  const handleClose = (0, lodash_1.debounce)(() => {
@@ -120,7 +158,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
120
158
  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)`,
121
159
  height: '100%'
122
160
  } },
123
- react_1.default.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 && {
161
+ react_1.default.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 && {
124
162
  transform: `translateY(${modalTrans}px)`
125
163
  })), { 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) => {
126
164
  e.stopPropagation();
@@ -130,17 +168,17 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
130
168
  onTouchStart: handleTouchStart,
131
169
  onTouchEnd: handleTouchEnd
132
170
  })),
133
- react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
134
- react_1.default.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon, alt: 'close button', className: 'modal-icon' })),
135
- react_1.default.createElement("div", Object.assign({ ref: ref, style: {
171
+ react_1.default.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
136
172
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
137
173
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
138
174
  zIndex: 1
139
- } }, (((_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) && {
175
+ } }, (((_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) && {
140
176
  onScroll: (e) => {
141
177
  var _a;
142
178
  setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
143
179
  }
144
- })), child())))))), modalEleRef.current);
180
+ })), child()),
181
+ react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
182
+ react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
145
183
  };
146
184
  exports.default = (0, react_1.memo)(Modal);
@@ -8,17 +8,19 @@ const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
+ const tool_1 = require("../../../../core/utils/tool");
11
12
  const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
13
  var _a, _b;
13
- const ref = (0, react_1.useRef)();
14
+ const swiperRef = (0, react_1.useRef)();
14
15
  const { isActive } = (0, react_2.useSwiperSlide)();
15
16
  const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
16
17
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
18
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
19
  const initTime = new Date();
20
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
21
  (0, react_1.useEffect)(() => {
20
22
  if (isLoad && isActive) {
21
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
23
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
22
24
  if (openHashtag) {
23
25
  onViewImageEndEvent(rec);
24
26
  }
@@ -27,7 +29,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
27
29
  }
28
30
  }
29
31
  else {
30
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
32
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
31
33
  }
32
34
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
33
35
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -48,26 +50,50 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
48
50
  event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
49
51
  };
50
52
  }, [imgInfo]);
51
- return (react_1.default.createElement(react_2.Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
52
- clickable: true,
53
- bulletActiveClass: 'swipe-item-active-bullet',
54
- bulletElement: 'button'
55
- }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
56
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
57
- fontSize: '14px'
58
- } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
59
- '.swiper-pagination-bullet': {
60
- backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
61
- opacity: 1
62
- }
63
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
64
- '.swipe-item-active-bullet': {
65
- backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
66
- opacity: 1
53
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
54
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
55
+ swiperRef.current.swiper.autoplay.stop();
56
+ }
57
+ }, []);
58
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
59
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
60
+ swiperRef.current.swiper.autoplay.start();
61
+ }
62
+ }, []);
63
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
64
+ setSwiperActiveIndex(swiper.activeIndex);
65
+ }, []);
66
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
67
+ return (react_1.default.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
68
+ react_1.default.createElement(react_2.Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
69
+ clickable: true,
70
+ bulletActiveClass: 'swipe-item-active-bullet',
71
+ bulletElement: 'button'
72
+ } }, (isAlly
73
+ ? {
74
+ mousewheel: true,
75
+ keyboard: true,
76
+ navigation: true,
77
+ a11y: {
78
+ enabled: true
79
+ }
67
80
  }
68
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
69
- return (react_1.default.createElement(react_2.SwiperSlide, { key: index },
70
- react_1.default.createElement(Picture_1.default, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
71
- })));
81
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
82
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
83
+ fontSize: '14px'
84
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
85
+ '.swiper-pagination-bullet': {
86
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
87
+ opacity: 1
88
+ }
89
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
90
+ '.swipe-item-active-bullet': {
91
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
92
+ opacity: 1
93
+ }
94
+ }))), height: height, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }), imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, srcKey) => {
95
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
96
+ react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
97
+ }))));
72
98
  };
73
99
  exports.default = (0, react_1.memo)(PictureGroup);
@@ -496,9 +496,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
496
496
  alignItems: 'center'
497
497
  } },
498
498
  react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
499
+ renderBottom(rec, index),
499
500
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
500
501
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
501
- renderBottom(rec, index),
502
502
  renderContent(rec, index)))))));
503
503
  });
504
504
  }, [
@@ -564,9 +564,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
564
564
  }
565
565
  }
566
566
  }, direction: 'vertical', height: height },
567
+ renderView,
567
568
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
568
- renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
569
- renderView),
569
+ renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
570
570
  react_1.default.createElement(WaterFall_1.default, 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)),
571
571
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig })));
572
572
  };
@@ -0,0 +1,2 @@
1
+ declare const useFocusTrap: (elementRef: any) => void;
2
+ export default useFocusTrap;
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const react_1 = require("react");
4
+ const useFocusTrap = (elementRef) => {
5
+ (0, react_1.useEffect)(() => {
6
+ const trapFocus = (element) => {
7
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('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])');
8
+ var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
9
+ var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
10
+ var KEYCODE_TAB = 9;
11
+ element.addEventListener('keydown', function (e) {
12
+ var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
13
+ if (!isTabPressed) {
14
+ return;
15
+ }
16
+ if (e.shiftKey) {
17
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
18
+ lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
19
+ e.preventDefault();
20
+ }
21
+ }
22
+ else {
23
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
24
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
25
+ e.preventDefault();
26
+ }
27
+ }
28
+ });
29
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
30
+ };
31
+ if (elementRef === null || elementRef === void 0 ? void 0 : elementRef.current)
32
+ trapFocus(elementRef === null || elementRef === void 0 ? void 0 : elementRef.current);
33
+ return () => {
34
+ var _a;
35
+ (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
36
+ };
37
+ }, [elementRef]);
38
+ };
39
+ exports.default = useFocusTrap;
@@ -11,4 +11,5 @@ declare function getBrowserInfo(): string | null;
11
11
  declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
14
+ declare function getScreenReader(): boolean;
15
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
3
+ exports.getScreenReader = exports.getCookie = exports.getSystem = exports.getDevice = exports.getBrowserInfo = exports.getIndexByblockType = exports.uuid = exports.setFontForText = exports.getUid = exports.generateRandomString = void 0;
4
4
  const uuid_1 = require("uuid");
5
5
  function uuid(len, radix) {
6
6
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
@@ -168,3 +168,15 @@ function getCookie(val) {
168
168
  return value !== null && value !== void 0 ? value : '';
169
169
  }
170
170
  exports.getCookie = getCookie;
171
+ function getScreenReader() {
172
+ let userAgent = self.navigator.userAgent;
173
+ if (!userAgent)
174
+ return false;
175
+ return (/TalkBack/i.test(userAgent) ||
176
+ /Funtouch/i.test(userAgent) ||
177
+ /VoiceOver/i.test(userAgent) ||
178
+ /NVDA/i.test(userAgent) ||
179
+ /JAWS/i.test(userAgent) ||
180
+ /ChromeVox/i.test(userAgent));
181
+ }
182
+ exports.getScreenReader = getScreenReader;
package/lib/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Pagebuilder } from './core/Pagebuilder';
2
+ import './index.css';
2
3
  export * as core from './core';
3
4
  export * as materials from './materials';
4
5
  export { default as SxpPageRender } from './core/components/SxpPageRender';
package/lib/index.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const Pagebuilder_1 = require("./core/Pagebuilder");
6
+ require("./index.css");
6
7
  exports.core = tslib_1.__importStar(require("./core"));
7
8
  exports.materials = tslib_1.__importStar(require("./materials"));
8
9
  var SxpPageRender_1 = require("./core/components/SxpPageRender");
@@ -10,7 +10,7 @@ const tool_1 = require("../../../../core/utils/tool");
10
10
  const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
11
11
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
12
12
  const AniLinkPopup = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
14
14
  var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = tslib_1.__rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
15
15
  style === null || style === void 0 ? true : delete style.transform;
16
16
  const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = (0, hooks_1.useSxpDataSource)();
@@ -67,12 +67,12 @@ const AniLinkPopup = (_a) => {
67
67
  paddingLeft: '6px'
68
68
  } }, "Cta Title")) : (react_1.default.createElement("div", Object.assign({}, props, { className: `${(0, css_1.css)(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${index_module_less_1.default['aniLinkPopup']} ${aniNamStyle} ${(0, css_1.css)(aniTimStyle)}`, onClick: handleTo }),
69
69
  react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
70
- react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
71
- react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : 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 }),
70
+ react_1.default.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
71
+ react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : 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 }),
72
72
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
73
- __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
73
+ __html: (0, tool_1.setFontForText)((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
74
74
  } })),
75
- react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
75
+ react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
76
76
  __html: (0, tool_1.setFontForText)(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
77
77
  } })))));
78
78
  };
@@ -23,7 +23,8 @@ const CommodityDetail = (_a) => {
23
23
  const [showModal, setShowModal] = (0, react_1.useState)(false);
24
24
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
25
25
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
26
- const ref = (0, react_1.useRef)();
26
+ const swiperRef = (0, react_1.useRef)();
27
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
27
28
  const data = isPost ? rec : popupDetailData;
28
29
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
29
30
  let cta = isPost
@@ -99,7 +100,7 @@ const CommodityDetail = (_a) => {
99
100
  };
100
101
  const renderBtn = () => {
101
102
  var _a, _b;
102
- return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.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 },
103
+ return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.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 },
103
104
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
104
105
  __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
105
106
  } })))));
@@ -114,9 +115,9 @@ const CommodityDetail = (_a) => {
114
115
  popupCurTimeRef.current = new Date();
115
116
  setCheckCommodityIndex(index);
116
117
  checkCommodityIndexRef.current = index;
117
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
118
- ref.current.swiper.slideTo(0);
119
- ref.current.swiper.autoplay.start();
118
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
119
+ swiperRef.current.swiper.slideTo(0);
120
+ swiperRef.current.swiper.autoplay.start();
120
121
  }
121
122
  }, []);
122
123
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -134,17 +135,40 @@ const CommodityDetail = (_a) => {
134
135
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
135
136
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
136
137
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
138
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
139
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
140
+ swiperRef.current.swiper.autoplay.stop();
141
+ }
142
+ }, []);
143
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
144
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
145
+ swiperRef.current.swiper.autoplay.start();
146
+ }
147
+ }, []);
148
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
149
+ setSwiperActiveIndex(swiper.activeIndex);
150
+ }, []);
151
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
137
152
  return (react_1.default.createElement(react_1.default.Fragment, null,
138
153
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
139
- react_1.default.createElement("div", { style: { position: 'relative' } },
140
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
154
+ react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
155
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
141
156
  clickable: true,
142
157
  bulletActiveClass: 'swipe-item-active-bullet',
143
158
  clickableClass: getDotsAlign,
144
159
  bulletElement: 'button'
145
- }, loop: true, autoplay: {
160
+ } }, (isAlly
161
+ ? {
162
+ mousewheel: true,
163
+ keyboard: true,
164
+ navigation: true,
165
+ a11y: {
166
+ enabled: true
167
+ }
168
+ }
169
+ : {}), { loop: true, autoplay: {
146
170
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
147
- }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
171
+ }, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
148
172
  '.swiper-pagination-bullet': {
149
173
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
150
174
  opacity: 1
@@ -154,10 +178,10 @@ const CommodityDetail = (_a) => {
154
178
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
155
179
  opacity: 1
156
180
  }
157
- }))) },
158
- react_1.default.createElement(react_1.default.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
181
+ }))) }),
182
+ react_1.default.createElement(react_1.default.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
159
183
  var _a;
160
- return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
184
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
161
185
  react_1.default.createElement("div", { style: {
162
186
  overflow: 'hidden',
163
187
  width,
@@ -27,7 +27,8 @@ const CommodityDetailDiroNew = (_a) => {
27
27
  const curTimeRef = (0, react_1.useRef)(null);
28
28
  const [show3DModal, setShow3DModal] = (0, react_1.useState)(false);
29
29
  const [checkCommodityIndex, setCheckCommodityIndex] = (0, react_1.useState)((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
30
- const ref = (0, react_1.useRef)();
30
+ const swiperRef = (0, react_1.useRef)();
31
+ const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
31
32
  const data = isPost ? rec : popupDetailData;
32
33
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
33
34
  let cta = isPost
@@ -100,9 +101,9 @@ Made in Italy` })));
100
101
  popupCurTimeRef.current = new Date();
101
102
  setCheckCommodityIndex(index);
102
103
  checkCommodityIndexRef.current = index;
103
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
104
- ref.current.swiper.slideTo(0);
105
- ref.current.swiper.autoplay.start();
104
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
105
+ swiperRef.current.swiper.slideTo(0);
106
+ swiperRef.current.swiper.autoplay.start();
106
107
  }
107
108
  }, []);
108
109
  const renderCommodityGroup = (0, react_1.useCallback)(() => {
@@ -120,17 +121,40 @@ Made in Italy` })));
120
121
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
121
122
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
122
123
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
124
+ const handleMouseEnter = (0, react_1.useCallback)(() => {
125
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
126
+ swiperRef.current.swiper.autoplay.stop();
127
+ }
128
+ }, []);
129
+ const handleMouseLeave = (0, react_1.useCallback)(() => {
130
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
131
+ swiperRef.current.swiper.autoplay.start();
132
+ }
133
+ }, []);
134
+ const handleSlideChange = (0, react_1.useCallback)((swiper) => {
135
+ setSwiperActiveIndex(swiper.activeIndex);
136
+ }, []);
137
+ const isAlly = (0, react_1.useMemo)(() => (0, tool_1.getScreenReader)(), []);
123
138
  return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
124
139
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
125
- react_1.default.createElement("div", { style: { position: 'relative' } },
126
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
140
+ react_1.default.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
141
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, Object.assign({ height: height, modules: [modules_1.Pagination, modules_1.Autoplay, ...(isAlly ? [modules_1.Navigation, modules_1.A11y, modules_1.Mousewheel, modules_1.Keyboard] : [])], pagination: {
127
142
  clickable: true,
128
143
  bulletActiveClass: 'swipe-item-active-bullet',
129
144
  clickableClass: getDotsAlign,
130
145
  bulletElement: 'button'
131
- }, loop: true, autoplay: {
146
+ } }, (isAlly
147
+ ? {
148
+ mousewheel: true,
149
+ keyboard: true,
150
+ navigation: true,
151
+ a11y: {
152
+ enabled: true
153
+ }
154
+ }
155
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
132
156
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
133
- }, ref: ref, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
157
+ }, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
134
158
  bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
135
159
  fontSize: '14px'
136
160
  } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -143,9 +167,9 @@ Made in Italy` })));
143
167
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
144
168
  opacity: 1
145
169
  }
146
- }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
170
+ }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
147
171
  var _a;
148
- return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
172
+ return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
149
173
  react_1.default.createElement("div", { style: {
150
174
  overflow: 'hidden',
151
175
  width,
@@ -196,7 +220,7 @@ Made in Italy` })));
196
220
  react_1.default.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: {
197
221
  __html: (0, tool_1.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)
198
222
  } }))),
199
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.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 },
223
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.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 },
200
224
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
201
225
  __html: (0, tool_1.setFontForText)((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
202
226
  } }))),