@searchspring/snap-preact-components 0.43.0 → 0.44.0

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 (17) hide show
  1. package/dist/cjs/components/Molecules/Carousel/Carousel.js +1 -1
  2. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  3. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +26 -22
  4. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +1 -1
  5. package/dist/cjs/components/Organisms/Results/Results.js +1 -1
  6. package/dist/cjs/hooks/useDeepCompareEffect.js +1 -1
  7. package/dist/cjs/hooks/useDisplaySettings.d.ts.map +1 -1
  8. package/dist/cjs/hooks/useDisplaySettings.js +9 -2
  9. package/dist/esm/components/Molecules/Carousel/Carousel.js +1 -1
  10. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  11. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +16 -12
  12. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +1 -1
  13. package/dist/esm/components/Organisms/Results/Results.js +1 -1
  14. package/dist/esm/hooks/useDeepCompareEffect.js +1 -1
  15. package/dist/esm/hooks/useDisplaySettings.d.ts.map +1 -1
  16. package/dist/esm/hooks/useDisplaySettings.js +9 -2
  17. package/package.json +11 -11
package/dist/cjs/components/Molecules/Carousel/Carousel.js CHANGED
@@ -231,7 +231,7 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
231
231
  : JSON.parse(JSON.stringify(exports.defaultCarouselBreakpoints)), pagination: false, loop: true, autoAdjustSlides: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.carousel), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.carousel);
232
232
  var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
233
233
  if (displaySettings && Object.keys(displaySettings).length) {
234
- var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
234
+ var theme_1 = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
235
235
  if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
236
236
  displaySettings.slidesPerView = props.children.length;
237
237
  displaySettings.slidesPerGroup = props.children.length;
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA6c/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAod/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -73,6 +73,7 @@ var CSS = {
73
73
  flexDirection: 'column',
74
74
  flex: "1 1 auto",
75
75
  maxWidth: "".concat(vertical || horizontalTerms ? 'auto' : '150px'),
76
+ minWidth: '150px',
76
77
  order: 1,
77
78
  background: '#f8f8f8',
78
79
  '& .ss__autocomplete__terms__options': {
@@ -155,7 +156,7 @@ var CSS = {
155
156
  },
156
157
  };
157
158
  exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
158
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
159
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
159
160
  var globalTheme = (0, providers_1.useTheme)();
160
161
  var props = __assign(__assign(__assign({
161
162
  // default props
@@ -165,17 +166,17 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
165
166
  0: {
166
167
  columns: 2,
167
168
  rows: 1,
168
- hideFacets: props.hideFacets || true,
169
- vertical: props.vertical || true,
170
- hideHistory: props.hideHistory || true,
171
- hideTrending: props.hideTrending || true,
169
+ hideFacets: (_d = props.hideFacets) !== null && _d !== void 0 ? _d : true,
170
+ vertical: (_e = props.vertical) !== null && _e !== void 0 ? _e : true,
171
+ hideHistory: (_f = props.hideHistory) !== null && _f !== void 0 ? _f : true,
172
+ hideTrending: (_g = props.hideTrending) !== null && _g !== void 0 ? _g : true,
172
173
  },
173
174
  540: {
174
175
  columns: 3,
175
176
  rows: 1,
176
- vertical: props.vertical || true,
177
- hideHistory: props.hideHistory || true,
178
- hideTrending: props.hideTrending || true,
177
+ vertical: (_h = props.vertical) !== null && _h !== void 0 ? _h : true,
178
+ hideHistory: (_j = props.hideHistory) !== null && _j !== void 0 ? _j : true,
179
+ hideTrending: (_k = props.hideTrending) !== null && _k !== void 0 ? _k : true,
179
180
  },
180
181
  768: {
181
182
  columns: 2,
@@ -193,7 +194,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
193
194
  // remove focus from input (close the autocomplete)
194
195
  (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
195
196
  };
196
- var themeOverride = {
197
+ var themeDefaults = {
197
198
  components: {
198
199
  facet: {
199
200
  limit: 6,
@@ -226,7 +227,8 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
226
227
  },
227
228
  };
228
229
  var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(breakpoints) || {};
229
- var theme = (0, deepmerge_1.default)(themeOverride, (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}));
230
+ // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
231
+ var theme = (0, deepmerge_1.default)(themeDefaults, (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } }), { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
230
232
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
231
233
  var input = props.input;
232
234
  var inputViewportOffsetBottom = 0;
@@ -241,32 +243,32 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
241
243
  var subProps = {
242
244
  facets: __assign(__assign(__assign({
243
245
  // default props
244
- limit: 3 }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.facets), (0, utilities_1.defined)({
246
+ limit: 3 }, (_l = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _l === void 0 ? void 0 : _l.facets), (0, utilities_1.defined)({
245
247
  disableStyles: disableStyles,
246
248
  })), { theme: props.theme }),
247
249
  banner: __assign(__assign(__assign({
248
250
  // default props
249
- className: 'ss__autocomplete__banner' }, (_e = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _e === void 0 ? void 0 : _e.banner), (0, utilities_1.defined)({
251
+ className: 'ss__autocomplete__banner' }, (_m = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _m === void 0 ? void 0 : _m.banner), (0, utilities_1.defined)({
250
252
  disableStyles: disableStyles,
251
253
  })), {
252
254
  // component theme overrides
253
255
  theme: props.theme }),
254
256
  results: __assign(__assign(__assign({
255
257
  // default props
256
- className: 'ss__autocomplete__results', breakpoints: breakpoints }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.results), (0, utilities_1.defined)({
258
+ className: 'ss__autocomplete__results', breakpoints: breakpoints }, (_o = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _o === void 0 ? void 0 : _o.results), (0, utilities_1.defined)({
257
259
  disableStyles: disableStyles,
258
260
  })), {
259
261
  // component theme overrides
260
262
  theme: props.theme }),
261
263
  icon: __assign(__assign(__assign({
262
264
  // default props
263
- className: 'ss__autocomplete__icon', icon: 'angle-right', size: '10px' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
265
+ className: 'ss__autocomplete__icon', icon: 'angle-right', size: '10px' }, (_p = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _p === void 0 ? void 0 : _p.icon), (0, utilities_1.defined)({
264
266
  disableStyles: disableStyles,
265
267
  })), {
266
268
  // component theme overrides
267
269
  theme: props.theme }),
268
270
  };
269
- var _o = controller.store, search = _o.search, terms = _o.terms, trending = _o.trending, results = _o.results, merchandising = _o.merchandising, pagination = _o.pagination, loaded = _o.loaded, filters = _o.filters, facets = _o.facets, state = _o.state, loading = _o.loading;
271
+ var _v = controller.store, search = _v.search, terms = _v.terms, trending = _v.trending, results = _v.results, merchandising = _v.merchandising, pagination = _v.pagination, loaded = _v.loaded, filters = _v.filters, facets = _v.facets, state = _v.state, loading = _v.loading;
270
272
  var history = controller.store.history || [];
271
273
  // you can pass in a selector or the actual input element,
272
274
  // if its the selector, we need to bind it to the controller here.
@@ -290,13 +292,15 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
290
292
  showHistory = true;
291
293
  }
292
294
  if (!state.input && (historyActive || trendingActive)) {
293
- showHistory = true;
294
- showTrending = true;
295
+ if (history === null || history === void 0 ? void 0 : history.length)
296
+ showHistory = true;
297
+ if (trending === null || trending === void 0 ? void 0 : trending.length)
298
+ showTrending = true;
295
299
  }
296
300
  var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
297
301
  var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded && !loading;
298
302
  // results logic
299
- var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
303
+ var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_q = search === null || search === void 0 ? void 0 : search.query) === null || _q === void 0 ? void 0 : _q.string));
300
304
  if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
301
305
  showResults = false;
302
306
  }
@@ -307,7 +311,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
307
311
  inputViewportOffsetBottom: inputViewportOffsetBottom,
308
312
  hideFacets: hideFacets,
309
313
  horizontalTerms: horizontalTerms,
310
- noResults: Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0),
314
+ noResults: Boolean(((_r = search === null || search === void 0 ? void 0 : search.query) === null || _r === void 0 ? void 0 : _r.string) && results.length === 0),
311
315
  contentSlotExists: Boolean(contentSlot),
312
316
  viewportMaxHeight: viewportMaxHeight,
313
317
  vertical: vertical,
@@ -375,11 +379,11 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
375
379
  (0, react_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller })))))) : ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__no-results" }, noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
376
380
  (0, react_1.jsx)("p", null,
377
381
  "No results found for \"",
378
- ((_k = search.originalQuery) === null || _k === void 0 ? void 0 : _k.string) || ((_l = search.query) === null || _l === void 0 ? void 0 : _l.string),
382
+ ((_s = search.originalQuery) === null || _s === void 0 ? void 0 : _s.string) || ((_t = search.query) === null || _t === void 0 ? void 0 : _t.string),
379
383
  "\"."),
380
384
  (0, react_1.jsx)("p", null, "Please try another search."))))),
381
385
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER })) : null,
382
- !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller })) : ((_m = search === null || search === void 0 ? void 0 : search.query) === null || _m === void 0 ? void 0 : _m.string) && results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__info" },
386
+ !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller })) : ((_u = search === null || search === void 0 ? void 0 : search.query) === null || _u === void 0 ? void 0 : _u.string) && results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__info" },
383
387
  (0, react_1.jsx)("a", { href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } },
384
388
  "See ",
385
389
  pagination.totalResults,
@@ -395,7 +399,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
395
399
  var emIfy = function (term, search) {
396
400
  if (term && search) {
397
401
  var match = term.match(escapeRegExp(search));
398
- if (search && term && match && match.index) {
402
+ if (search && term && match && typeof match.index == 'number') {
399
403
  var beforeMatch = term.slice(0, match.index);
400
404
  var afterMatch = term.slice(match.index + search.length, term.length);
401
405
  return ((0, react_1.jsx)(preact_1.Fragment, null,
package/dist/cjs/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -60,7 +60,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
60
60
  : JSON.parse(JSON.stringify(Carousel_1.defaultCarouselBreakpoints)), pagination: false, loop: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.recommendation), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.recommendation);
61
61
  var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
62
62
  if (displaySettings && Object.keys(displaySettings).length) {
63
- var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
63
+ var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
64
64
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
65
65
  }
66
66
  var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
package/dist/cjs/components/Organisms/Results/Results.js CHANGED
@@ -83,7 +83,7 @@ exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
83
83
  // default props
84
84
  results: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.results, columns: 4, gapSize: '20px', layout: types_1.Layout.GRID, breakpoints: defaultBreakpointsProps }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.results), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.results);
85
85
  var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)((props === null || props === void 0 ? void 0 : props.breakpoints) || {});
86
- var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
86
+ var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
87
87
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
88
88
  var disableStyles = props.disableStyles, className = props.className, layout = props.layout, style = props.style, controller = props.controller;
89
89
  var subProps = {
package/dist/cjs/hooks/useDeepCompareEffect.js CHANGED
@@ -14,6 +14,6 @@ function useDeepCompareMemoize(value) {
14
14
  }
15
15
  exports.useDeepCompareMemoize = useDeepCompareMemoize;
16
16
  function useDeepCompareEffect(callback, dependencies) {
17
- return (0, hooks_1.useEffect)(callback, useDeepCompareMemoize(dependencies));
17
+ return (0, hooks_1.useEffect)(callback, [useDeepCompareMemoize(dependencies)]);
18
18
  }
19
19
  exports.useDeepCompareEffect = useDeepCompareEffect;
package/dist/cjs/hooks/useDisplaySettings.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,CAyBjG"}
1
+ {"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,CAkCjG"}
package/dist/cjs/hooks/useDisplaySettings.js CHANGED
@@ -9,20 +9,27 @@ function useDisplaySettings(breakpointsObj) {
9
9
  return;
10
10
  // Call getDisplaySettings right away to prevent flashing
11
11
  var _a = (0, hooks_1.useState)(getDisplaySettings(breakpointsObj)), displaySettings = _a[0], setDisplaySettings = _a[1];
12
- (0, hooks_1.useEffect)(function () {
12
+ var debouncedHandleResize;
13
+ var resetResizeListener = function () {
13
14
  function handleResize() {
14
15
  // Set display settings to state
15
16
  setDisplaySettings(getDisplaySettings(breakpointsObj));
16
17
  }
17
18
  // Add event listener
18
- var debouncedHandleResize = debounce(function () { return handleResize(); });
19
+ debouncedHandleResize = debounce(function () {
20
+ handleResize();
21
+ }, 50);
19
22
  window.addEventListener('resize', debouncedHandleResize);
23
+ };
24
+ (0, hooks_1.useEffect)(function () {
25
+ resetResizeListener();
20
26
  // Remove event listener on cleanup
21
27
  return function () { return window.removeEventListener('resize', debouncedHandleResize); };
22
28
  }, []);
23
29
  // when breakpointsObj changes (due to computed values)
24
30
  (0, useDeepCompareEffect_1.useDeepCompareEffect)(function () {
25
31
  setDisplaySettings(getDisplaySettings(breakpointsObj));
32
+ resetResizeListener();
26
33
  }, [breakpointsObj]);
27
34
  return displaySettings;
28
35
  }
package/dist/esm/components/Molecules/Carousel/Carousel.js CHANGED
@@ -184,7 +184,7 @@ export const Carousel = observer((properties) => {
184
184
  };
185
185
  const displaySettings = useDisplaySettings(props.breakpoints);
186
186
  if (displaySettings && Object.keys(displaySettings).length) {
187
- const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
187
+ const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
188
188
  if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
189
189
  displaySettings.slidesPerView = props.children.length;
190
190
  displaySettings.slidesPerGroup = props.children.length;
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CA6c/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAsJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAod/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -53,6 +53,7 @@ const CSS = {
53
53
  flexDirection: 'column',
54
54
  flex: `1 1 auto`,
55
55
  maxWidth: `${vertical || horizontalTerms ? 'auto' : '150px'}`,
56
+ minWidth: '150px',
56
57
  order: 1,
57
58
  background: '#f8f8f8',
58
59
  '& .ss__autocomplete__terms__options': {
@@ -154,17 +155,17 @@ export const Autocomplete = observer((properties) => {
154
155
  0: {
155
156
  columns: 2,
156
157
  rows: 1,
157
- hideFacets: props.hideFacets || true,
158
- vertical: props.vertical || true,
159
- hideHistory: props.hideHistory || true,
160
- hideTrending: props.hideTrending || true,
158
+ hideFacets: props.hideFacets ?? true,
159
+ vertical: props.vertical ?? true,
160
+ hideHistory: props.hideHistory ?? true,
161
+ hideTrending: props.hideTrending ?? true,
161
162
  },
162
163
  540: {
163
164
  columns: 3,
164
165
  rows: 1,
165
- vertical: props.vertical || true,
166
- hideHistory: props.hideHistory || true,
167
- hideTrending: props.hideTrending || true,
166
+ vertical: props.vertical ?? true,
167
+ hideHistory: props.hideHistory ?? true,
168
+ hideTrending: props.hideTrending ?? true,
168
169
  },
169
170
  768: {
170
171
  columns: 2,
@@ -182,7 +183,7 @@ export const Autocomplete = observer((properties) => {
182
183
  // remove focus from input (close the autocomplete)
183
184
  controller?.setFocused && controller?.setFocused();
184
185
  };
185
- const themeOverride = {
186
+ const themeDefaults = {
186
187
  components: {
187
188
  facet: {
188
189
  limit: 6,
@@ -215,7 +216,8 @@ export const Autocomplete = observer((properties) => {
215
216
  },
216
217
  };
217
218
  const displaySettings = useDisplaySettings(breakpoints) || {};
218
- const theme = deepmerge(themeOverride, deepmerge(props?.theme || {}, displaySettings?.theme || {}));
219
+ // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
220
+ const theme = deepmerge(themeDefaults, deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray }), { arrayMerge: (destinationArray, sourceArray) => sourceArray });
219
221
  props = {
220
222
  ...props,
221
223
  ...displaySettings,
@@ -307,8 +309,10 @@ export const Autocomplete = observer((properties) => {
307
309
  showHistory = true;
308
310
  }
309
311
  if (!state.input && (historyActive || trendingActive)) {
310
- showHistory = true;
311
- showTrending = true;
312
+ if (history?.length)
313
+ showHistory = true;
314
+ if (trending?.length)
315
+ showTrending = true;
312
316
  }
313
317
  const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
314
318
  const onlyTerms = (trending?.length || history.length) && !loaded && !loading;
@@ -412,7 +416,7 @@ export const Autocomplete = observer((properties) => {
412
416
  const emIfy = (term, search) => {
413
417
  if (term && search) {
414
418
  const match = term.match(escapeRegExp(search));
415
- if (search && term && match && match.index) {
419
+ if (search && term && match && typeof match.index == 'number') {
416
420
  const beforeMatch = term.slice(0, match.index);
417
421
  const afterMatch = term.slice(match.index + search.length, term.length);
418
422
  return (jsx(Fragment, null,
package/dist/esm/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -36,7 +36,7 @@ export const Recommendation = observer((properties) => {
36
36
  };
37
37
  const displaySettings = useDisplaySettings(props.breakpoints);
38
38
  if (displaySettings && Object.keys(displaySettings).length) {
39
- const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
39
+ const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
40
40
  props = {
41
41
  ...props,
42
42
  ...displaySettings,
package/dist/esm/components/Organisms/Results/Results.js CHANGED
@@ -70,7 +70,7 @@ export const Results = observer((properties) => {
70
70
  ...properties.theme?.components?.results,
71
71
  };
72
72
  const displaySettings = useDisplaySettings(props?.breakpoints || {});
73
- const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {});
73
+ const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
74
74
  props = {
75
75
  ...props,
76
76
  ...displaySettings,
package/dist/esm/hooks/useDeepCompareEffect.js CHANGED
@@ -10,5 +10,5 @@ export function useDeepCompareMemoize(value) {
10
10
  return useMemo(() => ref.current, [signalRef.current]);
11
11
  }
12
12
  export function useDeepCompareEffect(callback, dependencies) {
13
- return useEffect(callback, useDeepCompareMemoize(dependencies));
13
+ return useEffect(callback, [useDeepCompareMemoize(dependencies)]);
14
14
  }
package/dist/esm/hooks/useDisplaySettings.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,CAyBjG"}
1
+ {"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,CAkCjG"}
package/dist/esm/hooks/useDisplaySettings.js CHANGED
@@ -5,20 +5,27 @@ export function useDisplaySettings(breakpointsObj) {
5
5
  return;
6
6
  // Call getDisplaySettings right away to prevent flashing
7
7
  const [displaySettings, setDisplaySettings] = useState(getDisplaySettings(breakpointsObj));
8
- useEffect(() => {
8
+ let debouncedHandleResize;
9
+ const resetResizeListener = () => {
9
10
  function handleResize() {
10
11
  // Set display settings to state
11
12
  setDisplaySettings(getDisplaySettings(breakpointsObj));
12
13
  }
13
14
  // Add event listener
14
- const debouncedHandleResize = debounce(() => handleResize());
15
+ debouncedHandleResize = debounce(() => {
16
+ handleResize();
17
+ }, 50);
15
18
  window.addEventListener('resize', debouncedHandleResize);
19
+ };
20
+ useEffect(() => {
21
+ resetResizeListener();
16
22
  // Remove event listener on cleanup
17
23
  return () => window.removeEventListener('resize', debouncedHandleResize);
18
24
  }, []);
19
25
  // when breakpointsObj changes (due to computed values)
20
26
  useDeepCompareEffect(() => {
21
27
  setDisplaySettings(getDisplaySettings(breakpointsObj));
28
+ resetResizeListener();
22
29
  }, [breakpointsObj]);
23
30
  return displaySettings;
24
31
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.43.0",
3
+ "version": "0.44.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@emotion/react": "11.9.0",
29
- "@searchspring/snap-toolbox": "^0.43.0",
29
+ "@searchspring/snap-toolbox": "^0.44.0",
30
30
  "classnames": "^2.3.2",
31
31
  "deepmerge": "4.3.1",
32
32
  "dequal": "2.0.3",
@@ -38,14 +38,14 @@
38
38
  "preact": "10.9.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@searchspring/snap-client": "^0.43.0",
42
- "@searchspring/snap-controller": "^0.43.0",
43
- "@searchspring/snap-event-manager": "^0.43.0",
44
- "@searchspring/snap-logger": "^0.43.0",
45
- "@searchspring/snap-profiler": "^0.43.0",
46
- "@searchspring/snap-store-mobx": "^0.43.0",
47
- "@searchspring/snap-tracker": "^0.43.0",
48
- "@searchspring/snap-url-manager": "^0.43.0",
41
+ "@searchspring/snap-client": "^0.44.0",
42
+ "@searchspring/snap-controller": "^0.44.0",
43
+ "@searchspring/snap-event-manager": "^0.44.0",
44
+ "@searchspring/snap-logger": "^0.44.0",
45
+ "@searchspring/snap-profiler": "^0.44.0",
46
+ "@searchspring/snap-store-mobx": "^0.44.0",
47
+ "@searchspring/snap-tracker": "^0.44.0",
48
+ "@searchspring/snap-url-manager": "^0.44.0",
49
49
  "@storybook/addon-actions": "6.4.22",
50
50
  "@storybook/addon-controls": "6.4.22",
51
51
  "@storybook/addon-docs": "6.4.22",
@@ -67,5 +67,5 @@
67
67
  "ts-loader": "9.3.0"
68
68
  },
69
69
  "sideEffects": false,
70
- "gitHead": "60b06644edb6f2f8258334321e15cafb5d7d4888"
70
+ "gitHead": "d22fcf1a316fdae0866c21dbd697da8c4a706965"
71
71
  }