@athoscommerce/snap-preact 1.5.1-beta.114 → 1.5.1-beta.116

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 (21) hide show
  1. package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  2. package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js +15 -3
  3. package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.d.ts.map +1 -1
  4. package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +22 -2
  5. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  6. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +96 -66
  7. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  8. package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +218 -43
  9. package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
  10. package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.js +211 -175
  11. package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  12. package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js +14 -3
  13. package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.d.ts.map +1 -1
  14. package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +22 -2
  15. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  16. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +94 -65
  17. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  18. package/dist/esm/components/src/components/Organisms/Chat/Chat.js +194 -23
  19. package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.d.ts.map +1 -1
  20. package/dist/esm/components/src/components/Organisms/Chat/Chat.styles.js +67 -5
  21. package/package.json +12 -12
package/dist/cjs/components/src/components/Organisms/Chat/Chat.styles.js CHANGED
@@ -30,179 +30,215 @@ var chatDefaultStyles = function (_a) {
30
30
  var colorSecondaryAccentText = secondaryAccentColorFg;
31
31
  var colorSecondaryAccentHover = new utilities_1.Colour(secondaryAccentColorBg).darkenHex();
32
32
  var offsetValue = offset !== undefined ? (typeof offset === 'number' ? "".concat(offset, "px") : offset) : undefined;
33
- return (0, react_1.css)((_b = {
34
- position: 'fixed'
35
- },
36
- _b[horizontalAnchor] = '20px',
37
- _b.bottom = '20px',
38
- _b.zIndex = 1002,
39
- _b.color = '#333',
40
- _b['@keyframes ss-chat-slide-up'] = {
41
- from: { transform: 'translateY(100%)' },
42
- to: { transform: 'translateY(0)' },
43
- },
44
- _b['.ss__chat__primary'] = __assign(__assign({}, (mobile
45
- ? { width: '100%', height: '100%' }
46
- : hasSideChat
47
- ? { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh' }
48
- : { width: 600, maxWidth: 'calc(100vw - 60px)', height: '70vh' })), { display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', overflow: 'hidden', order: isRight ? 2 : 1, '.ss__chat__header__title': {
49
- gap: '22px',
50
- }, '.ss__chat__messages': {
51
- padding: '1em',
52
- } }),
53
- _b['.ss__chat__secondary'] = __assign(__assign(__assign(__assign(__assign(__assign({}, (mobile
54
- ? {
55
- width: '100%',
56
- maxWidth: '100%',
57
- height: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
58
- maxHeight: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
59
- }
60
- : { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh', maxHeight: '70vh' })), { display: 'flex', flexDirection: 'column', overflow: 'hidden', order: isRight ? 1 : 2 }), (mobile
61
- ? {
62
- position: 'absolute',
63
- bottom: footerHeight > 0 ? footerHeight : 0,
64
- left: 0,
65
- right: 0,
66
- zIndex: 10,
67
- borderTopLeftRadius: '12px',
68
- borderTopRightRadius: '12px',
69
- overflow: 'hidden',
70
- overscrollBehavior: 'contain',
71
- boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
72
- background: '#fff',
73
- willChange: 'transform',
74
- animation: 'ss-chat-slide-up 0.3s ease-out',
75
- }
76
- : {})), { '.ss__chat__secondary__drag-handle': {
77
- display: 'flex',
78
- justifyContent: 'center',
79
- alignItems: 'center',
80
- padding: '10px 0 2px',
81
- background: colorPrimary,
33
+ return (0, react_1.css)(__assign(__assign((_b = { position: 'fixed' }, _b[horizontalAnchor] = '20px', _b.bottom = '20px', _b.zIndex = 1002, _b.color = '#333', _b['@keyframes ss-chat-slide-up'] = {
34
+ from: { transform: 'translateY(100%)' },
35
+ to: { transform: 'translateY(0)' },
36
+ }, _b['.ss__chat__primary'] = __assign(__assign({}, (mobile
37
+ ? { width: '100%', height: '100%' }
38
+ : hasSideChat
39
+ ? { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh' }
40
+ : { width: 600, maxWidth: 'calc(100vw - 60px)', height: '70vh' })), { display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', overflow: 'hidden', order: isRight ? 2 : 1, '.ss__chat__header__title': {
41
+ gap: '22px',
42
+ }, '.ss__chat__messages': {
43
+ padding: '1em',
44
+ } }), _b['.ss__chat__secondary'] = __assign(__assign(__assign(__assign(__assign(__assign({}, (mobile
45
+ ? {
46
+ width: '100%',
47
+ maxWidth: '100%',
48
+ height: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
49
+ maxHeight: "calc(100% - 70px".concat(footerHeight > 0 ? " - ".concat(footerHeight, "px") : '', ")"),
50
+ }
51
+ : { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh', maxHeight: '70vh' })), { display: 'flex', flexDirection: 'column', overflow: 'hidden', order: isRight ? 1 : 2 }), (mobile
52
+ ? {
53
+ position: 'absolute',
54
+ bottom: footerHeight > 0 ? footerHeight : 0,
55
+ left: 0,
56
+ right: 0,
57
+ zIndex: 10,
58
+ borderTopLeftRadius: '12px',
59
+ borderTopRightRadius: '12px',
60
+ overflow: 'hidden',
61
+ overscrollBehavior: 'contain',
62
+ boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
63
+ background: '#fff',
64
+ willChange: 'transform',
65
+ animation: 'ss-chat-slide-up 0.3s ease-out',
66
+ }
67
+ : {})), { '.ss__chat__secondary__drag-handle': {
68
+ display: 'flex',
69
+ justifyContent: 'center',
70
+ alignItems: 'center',
71
+ padding: '10px 0 2px',
72
+ background: colorPrimary,
73
+ touchAction: 'none',
74
+ cursor: 'grab',
75
+ '.ss__chat__secondary__drag-handle__indicator': {
76
+ width: '36px',
77
+ height: '4px',
78
+ borderRadius: '2px',
79
+ background: 'rgba(255, 255, 255, 0.4)',
80
+ },
81
+ } }), (mobile
82
+ ? {
83
+ '.ss__chat__header': {
82
84
  touchAction: 'none',
83
85
  cursor: 'grab',
84
- '.ss__chat__secondary__drag-handle__indicator': {
85
- width: '36px',
86
- height: '4px',
87
- borderRadius: '2px',
88
- background: 'rgba(255, 255, 255, 0.4)',
89
- },
90
- } }), (mobile
91
- ? {
92
- '.ss__chat__header': {
93
- touchAction: 'none',
94
- cursor: 'grab',
95
- },
96
- }
97
- : {})), { '.ss__chat__header__title': {
98
- flexDirection: 'column',
99
- gap: '2px',
100
- '.ss__chat__header__title__primary': {
101
- fontWeight: 'bold',
102
- },
103
- '.ss__chat__header__title__secondary': {
104
- fontSize: '80%',
105
- opacity: 0.85,
106
- },
107
- }, '.ss__chat__messages': {
108
- background: '#fff!important',
109
- } }),
110
- _b['.ss__button'] = {
111
- border: 'none',
112
- background: 'none',
113
- color: 'inherit',
114
- '&:not(.ss__button--disabled):hover': {
115
- background: new utilities_1.Colour(colorPrimary).lightenHex(0.85),
116
86
  },
117
- svg: {
118
- fill: colorPrimary,
119
- stroke: colorPrimary,
120
- },
121
- },
122
- _b['.ss__chat__bubble'] = (_c = {
123
- position: mobile ? 'fixed' : 'absolute',
124
- bottom: mobile ? '20px' : 0
125
- },
126
- _c[horizontalAnchor] = mobile ? '20px' : 0,
127
- _c.width = '60px',
128
- _c.height = '60px',
129
- _c.borderRadius = '50%',
130
- _c.background = colorPrimary,
131
- _c.color = colorPrimaryText,
132
- _c.display = 'flex',
133
- _c.alignItems = 'center',
134
- _c.justifyContent = 'center',
135
- _c.cursor = 'pointer',
136
- _c.fontSize = '24px',
137
- _c.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)',
138
- _c.zIndex = 10,
139
- _c.border = 'none',
140
- _c.padding = 0,
141
- _c.font = 'inherit',
142
- _c['&:hover'] = {
143
- background: colorPrimaryHover,
144
- transform: 'scale(1.05)',
145
- },
146
- _c['&:focus-visible'] = {
147
- outline: "2px solid ".concat(colorPrimary),
148
- outlineOffset: '4px',
149
- },
150
- _c['.ss__icon'] = {
151
- height: '33px',
152
- width: '33px',
153
- fill: colorPrimaryText,
154
- stroke: colorPrimaryText,
87
+ }
88
+ : {})), { '.ss__chat__header__title': {
89
+ flexDirection: 'column',
90
+ gap: '2px',
91
+ '.ss__chat__header__title__primary': {
92
+ fontWeight: 'bold',
155
93
  },
156
- _c),
157
- _b['.ss__chat__suggested-questions'] = (_d = {
158
- position: mobile ? 'fixed' : 'absolute',
159
- bottom: mobile ? '90px' : '70px'
94
+ '.ss__chat__header__title__secondary': {
95
+ fontSize: '80%',
96
+ opacity: 0.85,
160
97
  },
161
- _d[horizontalAnchor] = mobile ? '20px' : 0,
162
- _d.display = 'flex',
163
- _d.flexDirection = 'column',
164
- _d.gap = '8px',
165
- _d.width = '250px',
166
- _d.zIndex = 10,
167
- _d['.ss__chat__suggested-questions__item'] = {
168
- background: '#fff',
169
- borderRadius: '12px',
170
- padding: '12px 16px',
171
- fontSize: '14px',
172
- color: '#333',
173
- boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
174
- cursor: 'pointer',
175
- lineHeight: 1.4,
176
- '&:hover': {
177
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
178
- },
98
+ }, '.ss__chat__messages': {
99
+ background: '#fff!important',
100
+ } }), _b['.ss__button'] = {
101
+ border: 'none',
102
+ background: 'none',
103
+ color: 'inherit',
104
+ '&:not(.ss__button--disabled):hover': {
105
+ background: new utilities_1.Colour(colorPrimary).lightenHex(0.85),
106
+ },
107
+ svg: {
108
+ fill: colorPrimary,
109
+ stroke: colorPrimary,
110
+ },
111
+ }, _b['.ss__chat__bubble'] = (_c = {
112
+ position: mobile ? 'fixed' : 'absolute',
113
+ bottom: mobile ? '20px' : 0
114
+ },
115
+ _c[horizontalAnchor] = mobile ? '20px' : 0,
116
+ _c.width = '60px',
117
+ _c.height = '60px',
118
+ _c.borderRadius = '50%',
119
+ _c.background = colorPrimary,
120
+ _c.color = colorPrimaryText,
121
+ _c.display = 'flex',
122
+ _c.alignItems = 'center',
123
+ _c.justifyContent = 'center',
124
+ _c.cursor = 'pointer',
125
+ _c.fontSize = '24px',
126
+ _c.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)',
127
+ _c.zIndex = 10,
128
+ _c.border = 'none',
129
+ _c.padding = 0,
130
+ _c.font = 'inherit',
131
+ _c['&:hover'] = {
132
+ background: colorPrimaryHover,
133
+ transform: 'scale(1.05)',
134
+ },
135
+ _c['&:focus-visible'] = {
136
+ outline: "2px solid ".concat(colorPrimary),
137
+ outlineOffset: '4px',
138
+ },
139
+ _c['.ss__icon'] = {
140
+ height: '33px',
141
+ width: '33px',
142
+ fill: colorPrimaryText,
143
+ stroke: colorPrimaryText,
144
+ },
145
+ _c), _b['.ss__chat__suggested-questions'] = (_d = {
146
+ position: mobile ? 'fixed' : 'absolute',
147
+ bottom: mobile ? '90px' : '70px'
148
+ },
149
+ _d[horizontalAnchor] = mobile ? '20px' : 0,
150
+ _d.display = 'flex',
151
+ _d.flexDirection = 'column',
152
+ _d.gap = '8px',
153
+ _d.width = '250px',
154
+ _d.zIndex = 10,
155
+ _d['.ss__chat__suggested-questions__item'] = {
156
+ background: '#fff',
157
+ borderRadius: '12px',
158
+ padding: '12px 16px',
159
+ fontSize: '14px',
160
+ color: '#333',
161
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
162
+ cursor: 'pointer',
163
+ lineHeight: 1.4,
164
+ '&:hover': {
165
+ boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
179
166
  },
180
- _d),
181
- _b['&.ss__chat--minimized'] = {
182
- width: '60px',
183
- height: '60px',
184
- minHeight: '60px',
185
167
  },
186
- _b['&.ss__chat--open'] = __assign(__assign({ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 0 : '12px' }, (mobile
187
- ? {
168
+ _d), _b['&.ss__chat--minimized'] = {
169
+ width: '60px',
170
+ height: '60px',
171
+ minHeight: '60px',
172
+ }, _b['&.ss__chat--open'] = __assign(__assign(__assign({ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 0 : '12px' }, (mobile
173
+ ? {
174
+ top: offsetValue || 0,
175
+ left: 0,
176
+ right: 0,
177
+ bottom: 0,
178
+ width: '100%',
179
+ height: offsetValue ? "calc(100% - ".concat(offsetValue, ")") : '100%',
180
+ }
181
+ : {
182
+ // Hug the content width — two 600px panels + 12px gap — so the
183
+ // container stays anchored to its side instead of stretching to
184
+ // the opposite viewport edge when the side chat opens.
185
+ width: hasSideChat ? 'min(calc(100vw - 60px), 1212px)' : 'auto',
186
+ maxWidth: 'calc(100vw - 60px)',
187
+ maxHeight: 'calc(100vh - 40px)',
188
+ })), { '.ss__chat__bubble': {
189
+ display: 'none',
190
+ } }), (mobile
191
+ ? {}
192
+ : {
193
+ '@media (max-height: 800px)': {
188
194
  top: offsetValue || 0,
189
- left: 0,
190
- right: 0,
191
195
  bottom: 0,
192
- width: '100%',
193
- height: offsetValue ? "calc(100% - ".concat(offsetValue, ")") : '100%',
194
- }
195
- : {
196
- // Hug the content width — two 600px panels + 12px gap — so the
197
- // container stays anchored to its side instead of stretching to
198
- // the opposite viewport edge when the side chat opens.
199
- width: hasSideChat ? 'min(calc(100vw - 60px), 1212px)' : 'auto',
200
- maxWidth: 'calc(100vw - 60px)',
201
- maxHeight: 'calc(100vh - 40px)',
202
- })), { '.ss__chat__bubble': {
203
- display: 'none',
204
- } }),
205
- _b['.ss__chat__header'] = {
196
+ height: offsetValue ? "calc(100vh - ".concat(offsetValue, ")") : '100vh',
197
+ maxHeight: offsetValue ? "calc(100vh - ".concat(offsetValue, ")") : '100vh',
198
+ '.ss__chat__primary': {
199
+ height: '100%',
200
+ },
201
+ '.ss__chat__secondary': {
202
+ height: '100%',
203
+ maxHeight: '100%',
204
+ },
205
+ // The default 90vh cap on chat content would leave unfilled space when
206
+ // the chat stretches to 100vh; primary's justifyContent: flex-end then
207
+ // pushes its content down while secondary stays anchored to the top,
208
+ // making the panels appear misaligned.
209
+ '.ss__chat__content': {
210
+ maxHeight: '100%',
211
+ },
212
+ },
213
+ })), _b), (mobile
214
+ ? {}
215
+ : {
216
+ '&.ss__chat--welcome.ss__chat--open': {
217
+ '.ss__chat__primary': {
218
+ height: 'auto',
219
+ },
220
+ // With an auto-sized panel, the messages container's overflow/maxHeight
221
+ // constraints (and the welcome's minHeight: 100%) resolve against an
222
+ // undefined parent height and produce a stray scrollbar / clipped layout.
223
+ // Let everything flow at its natural size.
224
+ '.ss__chat__messages': {
225
+ overflow: 'visible',
226
+ maxHeight: 'none',
227
+ },
228
+ '.ss__chat__welcome': {
229
+ minHeight: 0,
230
+ },
231
+ '@media (max-height: 800px)': {
232
+ top: 'auto',
233
+ bottom: '20px',
234
+ height: 'auto',
235
+ maxHeight: 'calc(100vh - 40px)',
236
+ '.ss__chat__primary': {
237
+ height: 'auto',
238
+ },
239
+ },
240
+ },
241
+ })), { '.ss__chat__header': {
206
242
  display: 'flex',
207
243
  justifyContent: 'space-between',
208
244
  alignItems: 'center',
@@ -318,8 +354,7 @@ var chatDefaultStyles = function (_a) {
318
354
  },
319
355
  },
320
356
  },
321
- },
322
- _b['.ss__chat__session-feedback'] = {
357
+ }, '.ss__chat__session-feedback': {
323
358
  display: 'flex',
324
359
  alignItems: 'center',
325
360
  gap: '10px',
@@ -385,8 +420,7 @@ var chatDefaultStyles = function (_a) {
385
420
  stroke: colorPrimaryText,
386
421
  },
387
422
  },
388
- },
389
- _b['.ss__chat__content'] = {
423
+ }, '.ss__chat__content': {
390
424
  background: '#fff',
391
425
  maxHeight: mobile ? undefined : '90vh',
392
426
  overflow: 'hidden',
@@ -421,9 +455,9 @@ var chatDefaultStyles = function (_a) {
421
455
  '.ss__chat__content__header__comparisons': {
422
456
  display: 'flex',
423
457
  flexDirection: 'column',
424
- gap: '1em',
458
+ gap: '0.5em',
425
459
  background: new utilities_1.Colour(colorPrimary).lightenHex(0.95),
426
- padding: '1em',
460
+ padding: '0.5em 1em',
427
461
  '.ss__chat__content__header__comparisons__header': {
428
462
  display: 'flex',
429
463
  justifyContent: 'space-between',
@@ -527,7 +561,7 @@ var chatDefaultStyles = function (_a) {
527
561
  overscrollBehavior: 'contain',
528
562
  margin: 0,
529
563
  maxHeight: '100%',
530
- background: '#f9fafc',
564
+ background: new utilities_1.Colour(colorPrimary).lightenHex(0.95),
531
565
  '.ss__chat__messages__end': {
532
566
  height: '1px',
533
567
  },
@@ -589,10 +623,13 @@ var chatDefaultStyles = function (_a) {
589
623
  lineHeight: 1.5,
590
624
  color: '#333',
591
625
  padding: '2em',
592
- textAlign: 'center',
626
+ textAlign: 'left',
593
627
  },
594
- '.ss__chat__suggestions': {
628
+ '.ss__chat-suggested-questions': {
595
629
  marginTop: 'auto',
630
+ '.ss__chat-suggested-questions__item': {
631
+ padding: '8px 16px',
632
+ },
596
633
  },
597
634
  },
598
635
  },
@@ -1087,7 +1124,6 @@ var chatDefaultStyles = function (_a) {
1087
1124
  alignSelf: 'center',
1088
1125
  },
1089
1126
  },
1090
- },
1091
- _b));
1127
+ } }));
1092
1128
  };
1093
1129
  exports.chatDefaultStyles = chatDefaultStyles;
package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwPzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;CAC9C,CAAC"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAqC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAmQzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;CAC9C,CAAC"}
package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js CHANGED
@@ -88,9 +88,15 @@ export const Dropdown = observer((properties) => {
88
88
  const updateCoords = () => {
89
89
  if (buttonRef.current) {
90
90
  const rect = buttonRef.current.getBoundingClientRect();
91
+ // Clamp the anchor to the boundary's horizontal range so the dropdown
92
+ // stays visible inside the boundary even when the button scrolls out
93
+ // of view (e.g. a horizontally-scrolling facets row). The right edge
94
+ // is handled by the flip-x logic below.
95
+ const boundaryRect = boundaryRef?.current?.getBoundingClientRect();
96
+ const left = boundaryRect ? Math.max(boundaryRect.left, Math.min(rect.left, boundaryRect.right)) : rect.left;
91
97
  setCoords({
92
98
  top: dropUp ? rect.top : rect.bottom,
93
- left: rect.left,
99
+ left,
94
100
  width: rect.width,
95
101
  });
96
102
  }
@@ -117,9 +123,14 @@ export const Dropdown = observer((properties) => {
117
123
  // useLayoutEffect fires before paint to avoid flash.
118
124
  useLayoutEffect(() => {
119
125
  if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
120
- const rect = contentRef.current.getBoundingClientRect();
126
+ // Measure against the would-be unflipped right edge so the check is
127
+ // stable regardless of the current flipX state. Reading rect.right
128
+ // after a flip reports the anchored edge instead of the natural one,
129
+ // which causes the dropdown to oscillate between flipped/unflipped on
130
+ // every scroll tick.
131
+ const contentWidth = contentRef.current.offsetWidth;
121
132
  const limit = boundaryRef?.current?.getBoundingClientRect().right ?? window.innerWidth;
122
- const shouldFlip = rect.right > limit;
133
+ const shouldFlip = coords.left + contentWidth > limit;
123
134
  setFlipX(shouldFlip);
124
135
  if (shouldFlip)
125
136
  setFlipRight(Math.max(0, window.innerWidth - limit));
package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductComparisonMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAoE/E,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CA0FjG,CAAC;AAMH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACjD,GAAG,+CAA+C,GAClD,cAAc,CAAC,iCAAiC,CAAC,CAAC;AAEnD,MAAM,MAAM,+CAA+C,GAAG;IAC7D,QAAQ,EAAE,iCAAiC,CAAC;CAC5C,CAAC;AAEF,MAAM,WAAW,gCAAgC;CAKhD"}
1
+ {"version":3,"file":"ChatProductComparisonMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAmF/E,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CAsGjG,CAAC;AAMH,MAAM,MAAM,iCAAiC,GAAG;IAC/C,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACjD,GAAG,+CAA+C,GAClD,cAAc,CAAC,iCAAiC,CAAC,CAAC;AAEnD,MAAM,MAAM,+CAA+C,GAAG;IAC7D,QAAQ,EAAE,iCAAiC,CAAC;CAC5C,CAAC;AAEF,MAAM,WAAW,gCAAgC;CAKhD"}
package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js CHANGED
@@ -37,6 +37,20 @@ const defaultStyles = () => {
37
37
  '.ss__chat-product-comparison-message__table__product-header': {
38
38
  textAlign: 'center',
39
39
  minWidth: '120px',
40
+ '.ss__chat-product-comparison-message__table__product-header__link': {
41
+ background: 'none',
42
+ border: 'none',
43
+ padding: 0,
44
+ font: 'inherit',
45
+ color: 'inherit',
46
+ display: 'block',
47
+ width: '100%',
48
+ cursor: 'pointer',
49
+ textAlign: 'center',
50
+ '&:hover .ss__chat-product-comparison-message__table__product-header__name': {
51
+ textDecoration: 'underline',
52
+ },
53
+ },
40
54
  '.ss__chat-product-comparison-message__table__product-header__image': {
41
55
  width: '80px',
42
56
  height: '80px',
@@ -67,7 +81,7 @@ export const ChatProductComparisonMessage = observer((properties) => {
67
81
  treePath: globalTreePath,
68
82
  };
69
83
  const props = mergeProps('chatProductComparisonMessage', globalTheme, defaultProps, properties);
70
- const { chatItem, className, internalClassName } = props;
84
+ const { chatItem, controller, className, internalClassName } = props;
71
85
  // const subProps: ChatProductComparisonMessageSubProps = {
72
86
  // };
73
87
  const styling = mergeStyles(props, defaultStyles);
@@ -95,6 +109,12 @@ export const ChatProductComparisonMessage = observer((properties) => {
95
109
  const product = searchResults.find((r) => r?.id === heading);
96
110
  const display = getDisplay(product);
97
111
  const productName = display?.mappings?.core?.name ?? heading;
98
- return (_jsxs("th", { scope: "col", className: classnames('ss__chat-product-comparison-message__table__product-header'), children: [allProductsHaveImage && (_jsx("img", { className: classnames('ss__chat-product-comparison-message__table__product-header__image'), src: (display.mappings.core.imageUrl || display.mappings.core.parentImageUrl), alt: productName })), _jsx("div", { className: classnames('ss__chat-product-comparison-message__table__product-header__name'), children: productName })] }, heading));
112
+ const handleOpenProduct = (e) => {
113
+ if (!controller || !product)
114
+ return;
115
+ controller.track.product.click(e, product);
116
+ controller.productQuickView(product);
117
+ };
118
+ return (_jsx("th", { scope: "col", className: classnames('ss__chat-product-comparison-message__table__product-header'), children: _jsxs("button", { type: "button", className: classnames('ss__chat-product-comparison-message__table__product-header__link'), onClick: handleOpenProduct, "aria-label": `View details for ${productName}`, children: [allProductsHaveImage && (_jsx("img", { className: classnames('ss__chat-product-comparison-message__table__product-header__image'), src: (display.mappings.core.imageUrl || display.mappings.core.parentImageUrl), alt: productName })), _jsx("div", { className: classnames('ss__chat-product-comparison-message__table__product-header__name'), children: productName })] }) }, heading));
99
119
  })] }) }), _jsx("tbody", { children: comparisonData.features.map((feature, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", className: classnames('ss__chat-product-comparison-message__table__feature-name'), children: feature.featureName }), headings.map((heading) => (_jsx("td", { className: classnames('ss__chat-product-comparison-message__table__value'), children: feature.values[heading] ?? '—' }, heading)))] }, index))) })] }) }) }) })) : null;
100
120
  });
package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAiQvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
1
+ {"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AA2crE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAyQvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}