@searchspring/snap-preact-components 0.58.3 → 0.60.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 (13) hide show
  1. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +4 -0
  2. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  3. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +20 -8
  4. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +4 -0
  5. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  6. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +61 -53
  7. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +4 -0
  8. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  9. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +24 -8
  10. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts +4 -0
  11. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map +1 -1
  12. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +66 -54
  13. package/package.json +11 -11
package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts CHANGED
@@ -17,5 +17,9 @@ export interface RecommendationProps extends ComponentProps {
17
17
  controller: RecommendationController;
18
18
  children?: ComponentChildren;
19
19
  vertical?: boolean;
20
+ lazyRender?: {
21
+ enabled: boolean;
22
+ offset?: string;
23
+ };
20
24
  }
21
25
  //# sourceMappingURL=Recommendation.d.ts.map
package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAM7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA+HxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/cjs/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -32,9 +32,11 @@ var react_1 = require("@emotion/react");
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var mobx_react_1 = require("mobx-react");
34
34
  var deepmerge_1 = __importDefault(require("deepmerge"));
35
+ var hooks_1 = require("preact/hooks");
35
36
  var Carousel_1 = require("../../Molecules/Carousel");
36
37
  var Result_1 = require("../../Molecules/Result");
37
38
  var utilities_1 = require("../../../utilities");
39
+ var hooks_2 = require("../../../hooks");
38
40
  var providers_1 = require("../../../providers");
39
41
  var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
40
42
  var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
@@ -63,7 +65,8 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
63
65
  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
66
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
65
67
  }
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"]);
68
+ 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, lazyRender = props.lazyRender, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "lazyRender", "vertical"]);
69
+ var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
67
70
  if (!controller || controller.type !== 'recommendation') {
68
71
  throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
69
72
  }
@@ -96,12 +99,21 @@ exports.Recommendation = (0, mobx_react_1.observer)(function (properties) {
96
99
  else if (style) {
97
100
  styling.css = [style];
98
101
  }
102
+ var _g = (0, hooks_1.useState)(false), isVisible = _g[0], setIsVisible = _g[1];
103
+ var recsRef = (0, hooks_1.useRef)(null);
104
+ var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
105
+ if (inView) {
106
+ setIsVisible(true);
107
+ }
99
108
  return children || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
100
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className) }),
101
- (0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
102
- title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
103
- (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), Array.isArray(children) && children.length
104
- ? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
105
- : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
106
- (0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result })))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
109
+ (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation', className), ref: recsRef }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
110
+ title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
111
+ (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), Array.isArray(children) && children.length
112
+ ? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)); })
113
+ : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
114
+ (0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result })))); })))) : ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
115
+ ? children.map(function (child, idx) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] },
116
+ (0, react_1.jsx)(preact_1.Fragment, null))); })
117
+ : resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
118
+ (0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
107
119
  });
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -31,6 +31,10 @@ export interface RecommendationBundleProps extends ComponentProps {
31
31
  ctaSlot?: JSX.Element;
32
32
  vertical?: boolean;
33
33
  carousel?: BundleCarouselProps;
34
+ lazyRender?: {
35
+ enabled: boolean;
36
+ offset?: string;
37
+ };
34
38
  }
35
39
  export {};
36
40
  //# sourceMappingURL=RecommendationBundle.d.ts.map
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
1
+ {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA4epF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -42,6 +42,7 @@ var ProfileTracker_1 = require("../../Trackers/Recommendation/ProfileTracker");
42
42
  var ResultTracker_1 = require("../../Trackers/Recommendation/ResultTracker");
43
43
  var BundleSelector_1 = require("./BundleSelector");
44
44
  var BundleCTA_1 = require("./BundleCTA");
45
+ var hooks_2 = require("../../../hooks");
45
46
  var CSS = {
46
47
  recommendationBundle: function (_a) {
47
48
  var slidesPerView = _a.slidesPerView, spaceBetween = _a.spaceBetween, ctaInline = _a.ctaInline, vertical = _a.vertical, separatorIcon = _a.separatorIcon;
@@ -156,7 +157,8 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
156
157
  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; } });
157
158
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
158
159
  }
159
- var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "className"]);
160
+ var title = props.title, controller = props.controller, breakpoints = props.breakpoints, results = props.results, carousel = props.carousel, preselectedCount = props.preselectedCount, separatorIcon = props.separatorIcon, hideCheckboxes = props.hideCheckboxes, limit = props.limit, seedText = props.seedText, vertical = props.vertical, onAddToCart = props.onAddToCart, separatorIconSeedOnly = props.separatorIconSeedOnly, resultComponent = props.resultComponent, ctaSlot = props.ctaSlot, hideSeed = props.hideSeed, ctaButtonText = props.ctaButtonText, ctaButtonSuccessText = props.ctaButtonSuccessText, ctaButtonSuccessTimeout = props.ctaButtonSuccessTimeout, disableStyles = props.disableStyles, ctaIcon = props.ctaIcon, ctaInline = props.ctaInline, style = props.style, lazyRender = props.lazyRender, className = props.className, additionalProps = __rest(props, ["title", "controller", "breakpoints", "results", "carousel", "preselectedCount", "separatorIcon", "hideCheckboxes", "limit", "seedText", "vertical", "onAddToCart", "separatorIconSeedOnly", "resultComponent", "ctaSlot", "hideSeed", "ctaButtonText", "ctaButtonSuccessText", "ctaButtonSuccessTimeout", "disableStyles", "ctaIcon", "ctaInline", "style", "lazyRender", "className"]);
161
+ var mergedlazyRender = __assign({ enabled: true, offset: '10%' }, lazyRender);
160
162
  var mergedCarouselProps = __assign({ enabled: true, loop: false, spaceBetween: 10 }, carousel);
161
163
  var seedInCarousel = mergedCarouselProps.seedInCarousel, prevButton = mergedCarouselProps.prevButton, nextButton = mergedCarouselProps.nextButton, hideButtons = mergedCarouselProps.hideButtons, loop = mergedCarouselProps.loop, spaceBetween = mergedCarouselProps.spaceBetween, pagination = mergedCarouselProps.pagination;
162
164
  var carouselEnabled = mergedCarouselProps.enabled;
@@ -284,59 +286,65 @@ exports.RecommendationBundle = (0, mobx_react_1.observer)(function (properties)
284
286
  };
285
287
  var seedRef = (0, hooks_1.useRef)();
286
288
  var carouselRef = (0, hooks_1.useRef)();
289
+ var _l = (0, hooks_1.useState)(false), isVisible = _l[0], setIsVisible = _l[1];
290
+ var recsRef = (0, hooks_1.useRef)(null);
291
+ var inView = (mergedlazyRender === null || mergedlazyRender === void 0 ? void 0 : mergedlazyRender.enabled) ? (0, hooks_2.useIntersection)(recsRef, "".concat(mergedlazyRender.offset, " 0px ").concat(mergedlazyRender.offset, " 0px"), true) : true;
292
+ if (inView) {
293
+ setIsVisible(true);
294
+ }
287
295
  return (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
288
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }),
289
- (0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
290
- title && ((0, react_1.jsx)("h3", { className: "ss__recommendation-bundle__title" },
291
- (0, react_1.jsx)("span", null, title))),
292
- (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper', {
293
- 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
294
- 'ss__recommendation-bundle__wrapper--vertical': vertical,
295
- }) },
296
- carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
297
- !seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
298
- (0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
299
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () { return onProductSelect(seed); }, checked: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, {
300
- result: seed,
301
- seed: true,
302
- selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
303
- onProductSelect: onProductSelect,
304
- })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
305
- (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
306
- (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
307
- ? resultsToRender
308
- .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
309
- .map(function (result, idx) {
310
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
311
- if (idx == 0 && !hideSeed) {
312
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
313
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
314
- }
315
- else {
316
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
317
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
318
- }
319
- })
320
- : resultsToRender
321
- .filter(function (result, idx) { return idx !== 0; })
322
- .map(function (result, idx, results) {
323
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
296
+ (0, react_1.jsx)("div", __assign({}, styling, { ref: recsRef, className: (0, classnames_1.default)('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }), isVisible ? ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller },
297
+ title && ((0, react_1.jsx)("h3", { className: "ss__recommendation-bundle__title" },
298
+ (0, react_1.jsx)("span", null, title))),
299
+ (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-bundle__wrapper', {
300
+ 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
301
+ 'ss__recommendation-bundle__wrapper--vertical': vertical,
302
+ }) },
303
+ carouselEnabled ? ((0, react_1.jsx)(preact_1.Fragment, null,
304
+ !seedInCarousel && !hideSeed && ((0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
305
+ (0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
306
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, onCheck: function () { return onProductSelect(seed); }, checked: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, {
307
+ result: seed,
308
+ seed: true,
309
+ selected: selectedItems.findIndex(function (item) { return item.id == seed.id; }) > -1,
310
+ onProductSelect: onProductSelect,
311
+ })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: seed }))))))),
312
+ (0, react_1.jsx)("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
313
+ (0, react_1.jsx)(Carousel_1.Carousel, __assign({ prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: function () { return setSeedwidth(); } }, subProps.carousel, additionalProps, displaySettings, { ref: carouselRef }), seedInCarousel
314
+ ? resultsToRender
315
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
316
+ .map(function (result, idx) {
317
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
318
+ if (idx == 0 && !hideSeed) {
319
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
320
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
321
+ }
322
+ else {
324
323
  return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
325
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
326
- }))))) : (resultsToRender
327
- .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
328
- .map(function (result, idx) {
329
- var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
330
- if (idx == 0 && !hideSeed) {
331
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
332
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
333
- }
334
- else {
335
- return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
336
- (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
337
- }
338
- })),
339
- ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
340
- !ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
324
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
325
+ }
326
+ })
327
+ : resultsToRender
328
+ .filter(function (result, idx) { return idx !== 0; })
329
+ .map(function (result, idx, results) {
330
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
331
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
332
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
333
+ }))))) : (resultsToRender
334
+ .filter(function (result, idx) { return (hideSeed && idx == 0 ? false : true); })
335
+ .map(function (result, idx) {
336
+ var selected = selectedItems.findIndex(function (item) { return item.id == result.id; }) > -1;
337
+ if (idx == 0 && !hideSeed) {
338
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
339
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: true, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
340
+ }
341
+ else {
342
+ return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
343
+ (0, react_1.jsx)(BundleSelector_1.BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: function () { return onProductSelect(result); }, checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? ((0, utilities_1.cloneWithProps)(resultComponent, { result: result, seed: false, selected: selected, onProductSelect: onProductSelect })) : ((0, react_1.jsx)(Result_1.Result, __assign({}, subProps.result, { controller: controller, result: result }))))));
344
+ }
345
+ })),
346
+ ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
347
+ !ctaInline && ((0, react_1.jsx)(BundleCTA_1.BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: function (e) { return addToCart(e); }, ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : ((0, react_1.jsx)(ProfileTracker_1.RecommendationProfileTracker, { controller: controller }, resultsToRender.map(function (result) { return ((0, react_1.jsx)(ResultTracker_1.RecommendationResultTracker, { controller: controller, result: result },
348
+ (0, react_1.jsx)(preact_1.Fragment, null))); })))))) : ((0, react_1.jsx)(preact_1.Fragment, null));
341
349
  return (0, react_1.jsx)(preact_1.Fragment, null);
342
350
  });
package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts CHANGED
@@ -17,5 +17,9 @@ export interface RecommendationProps extends ComponentProps {
17
17
  controller: RecommendationController;
18
18
  children?: ComponentChildren;
19
19
  vertical?: boolean;
20
+ lazyRender?: {
21
+ enabled: boolean;
22
+ offset?: string;
23
+ };
20
24
  }
21
25
  //# sourceMappingURL=Recommendation.d.ts.map
package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAM7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA+HxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,eAAyB,mBAAmB,KAAG,WA8JxE,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/esm/components/Organisms/Recommendation/Recommendation.js CHANGED
@@ -4,9 +4,11 @@ import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
5
  import { observer } from 'mobx-react';
6
6
  import deepmerge from 'deepmerge';
7
+ import { useState, useRef } from 'preact/hooks';
7
8
  import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoints } from '../../Molecules/Carousel';
8
9
  import { Result } from '../../Molecules/Result';
9
10
  import { defined } from '../../../utilities';
11
+ import { useIntersection } from '../../../hooks';
10
12
  import { useTheme, CacheProvider } from '../../../providers';
11
13
  import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
12
14
  import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
@@ -43,7 +45,12 @@ export const Recommendation = observer((properties) => {
43
45
  theme,
44
46
  };
45
47
  }
46
- const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
48
+ const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, lazyRender, vertical, ...additionalProps } = props;
49
+ const mergedlazyRender = {
50
+ enabled: true,
51
+ offset: '10%',
52
+ ...lazyRender,
53
+ };
47
54
  if (!controller || controller.type !== 'recommendation') {
48
55
  throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
49
56
  }
@@ -86,12 +93,21 @@ export const Recommendation = observer((properties) => {
86
93
  else if (style) {
87
94
  styling.css = [style];
88
95
  }
96
+ const [isVisible, setIsVisible] = useState(false);
97
+ const recsRef = useRef(null);
98
+ const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
99
+ if (inView) {
100
+ setIsVisible(true);
101
+ }
89
102
  return children || resultsToRender?.length ? (jsx(CacheProvider, null,
90
- jsx("div", { ...styling, className: classnames('ss__recommendation', className) },
91
- jsx(RecommendationProfileTracker, { controller: controller },
92
- title && jsx("h3", { className: "ss__recommendation__title" }, title),
93
- jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
94
- ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
95
- : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
96
- jsx(Result, { ...subProps.result, controller: controller, result: result }))))))))) : (jsx(Fragment, null));
103
+ jsx("div", { ...styling, className: classnames('ss__recommendation', className), ref: recsRef }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
104
+ title && jsx("h3", { className: "ss__recommendation__title" }, title),
105
+ jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
106
+ ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
107
+ : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
108
+ jsx(Result, { ...subProps.result, controller: controller, result: result }))))))) : (jsx(RecommendationProfileTracker, { controller: controller }, Array.isArray(children) && children.length
109
+ ? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] },
110
+ jsx(Fragment, null))))
111
+ : resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
112
+ jsx(Fragment, null))))))))) : (jsx(Fragment, null));
97
113
  });
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts CHANGED
@@ -31,6 +31,10 @@ export interface RecommendationBundleProps extends ComponentProps {
31
31
  ctaSlot?: JSX.Element;
32
32
  vertical?: boolean;
33
33
  carousel?: BundleCarouselProps;
34
+ lazyRender?: {
35
+ enabled: boolean;
36
+ offset?: string;
37
+ };
34
38
  }
35
39
  export {};
36
40
  //# sourceMappingURL=RecommendationBundle.d.ts.map
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAwG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WAidpF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
1
+ {"version":3,"file":"RecommendationBundle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,aAAa,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAI9E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAyG7D,eAAO,MAAM,oBAAoB,eAAyB,yBAAyB,KAAG,WA4epF,CAAC;AAEH,KAAK,mBAAmB,GAAG;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE3B,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAChE,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,wBAAwB,CAAC;IACrC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Fragment } from 'preact';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import classnames from 'classnames';
5
- import { useRef, useEffect } from 'preact/hooks';
5
+ import { useRef, useEffect, useState } from 'preact/hooks';
6
6
  import { observer } from 'mobx-react';
7
7
  import deepmerge from 'deepmerge';
8
8
  import { Carousel } from '../../Molecules/Carousel';
@@ -14,6 +14,7 @@ import { RecommendationProfileTracker } from '../../Trackers/Recommendation/Prof
14
14
  import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
15
15
  import { BundleSelector } from './BundleSelector';
16
16
  import { BundledCTA } from './BundleCTA';
17
+ import { useIntersection } from '../../../hooks';
17
18
  const CSS = {
18
19
  recommendationBundle: ({ slidesPerView, spaceBetween, ctaInline, vertical, separatorIcon }) => css({
19
20
  '.ss__recommendation-bundle__wrapper': {
@@ -143,7 +144,12 @@ export const RecommendationBundle = observer((properties) => {
143
144
  theme,
144
145
  };
145
146
  }
146
- const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, className, ...additionalProps } = props;
147
+ const { title, controller, breakpoints, results, carousel, preselectedCount, separatorIcon, hideCheckboxes, limit, seedText, vertical, onAddToCart, separatorIconSeedOnly, resultComponent, ctaSlot, hideSeed, ctaButtonText, ctaButtonSuccessText, ctaButtonSuccessTimeout, disableStyles, ctaIcon, ctaInline, style, lazyRender, className, ...additionalProps } = props;
148
+ const mergedlazyRender = {
149
+ enabled: true,
150
+ offset: '10%',
151
+ ...lazyRender,
152
+ };
147
153
  const mergedCarouselProps = {
148
154
  enabled: true,
149
155
  loop: false,
@@ -289,59 +295,65 @@ export const RecommendationBundle = observer((properties) => {
289
295
  };
290
296
  const seedRef = useRef();
291
297
  const carouselRef = useRef();
298
+ const [isVisible, setIsVisible] = useState(false);
299
+ const recsRef = useRef(null);
300
+ const inView = mergedlazyRender?.enabled ? useIntersection(recsRef, `${mergedlazyRender.offset} 0px ${mergedlazyRender.offset} 0px`, true) : true;
301
+ if (inView) {
302
+ setIsVisible(true);
303
+ }
292
304
  return resultsToRender?.length ? (jsx(CacheProvider, null,
293
- jsx("div", { ...styling, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) },
294
- jsx(RecommendationProfileTracker, { controller: controller },
295
- title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
296
- jsx("span", null, title))),
297
- jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
298
- 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
299
- 'ss__recommendation-bundle__wrapper--vertical': vertical,
300
- }) },
301
- carouselEnabled ? (jsx(Fragment, null,
302
- !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
303
- jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
304
- jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
305
- result: seed,
306
- seed: true,
307
- selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
308
- onProductSelect,
309
- })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
310
- jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
311
- jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
312
- ? resultsToRender
313
- .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
314
- .map((result, idx) => {
315
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
316
- if (idx == 0 && !hideSeed) {
317
- return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
318
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
319
- }
320
- else {
321
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
322
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
323
- }
324
- })
325
- : resultsToRender
326
- .filter((result, idx) => idx !== 0)
327
- .map((result, idx, results) => {
328
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
305
+ jsx("div", { ...styling, ref: recsRef, className: classnames('ss__recommendation-bundle', { 'ss__recommendation-bundle--stacked': !ctaInline }, className) }, isVisible ? (jsx(RecommendationProfileTracker, { controller: controller },
306
+ title && (jsx("h3", { className: "ss__recommendation-bundle__title" },
307
+ jsx("span", null, title))),
308
+ jsx("div", { className: classnames('ss__recommendation-bundle__wrapper', {
309
+ 'ss__recommendation-bundle__wrapper--seed-in-carousel': seedInCarousel,
310
+ 'ss__recommendation-bundle__wrapper--vertical': vertical,
311
+ }) },
312
+ carouselEnabled ? (jsx(Fragment, null,
313
+ !seedInCarousel && !hideSeed && (jsx("div", { className: "ss__recommendation-bundle__wrapper__seed-container" },
314
+ jsx(RecommendationResultTracker, { controller: controller, result: seed, track: { impression: false } },
315
+ jsx(BundleSelector, { seedText: seedText, seed: true, onCheck: () => onProductSelect(seed), checked: selectedItems.findIndex((item) => item.id == seed.id) > -1, icon: separatorIcon, hideCheckboxes: hideCheckboxes, theme: props.theme, ref: seedRef }, resultComponent ? (cloneWithProps(resultComponent, {
316
+ result: seed,
317
+ seed: true,
318
+ selected: selectedItems.findIndex((item) => item.id == seed.id) > -1,
319
+ onProductSelect,
320
+ })) : (jsx(Result, { ...subProps.result, controller: controller, result: seed })))))),
321
+ jsx("div", { className: "ss__recommendation-bundle__wrapper__carousel" },
322
+ jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, spaceBetween: spaceBetween, pagination: pagination, breakpoints: modifiedBreakpoints, watchSlidesProgress: true, observer: true, vertical: vertical, onResize: () => setSeedwidth(), ...subProps.carousel, ...additionalProps, ...displaySettings, ref: carouselRef }, seedInCarousel
323
+ ? resultsToRender
324
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
325
+ .map((result, idx) => {
326
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
327
+ if (idx == 0 && !hideSeed) {
328
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
329
+ jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
330
+ }
331
+ else {
329
332
  return (jsx(RecommendationResultTracker, { controller: controller, result: result },
330
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
331
- }))))) : (resultsToRender
332
- .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
333
- .map((result, idx) => {
334
- const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
335
- if (idx == 0 && !hideSeed) {
336
- return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
337
- jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
338
- }
339
- else {
340
- return (jsx(RecommendationResultTracker, { controller: controller, result: result },
341
- jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
342
- }
343
- })),
344
- ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
345
- !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))))) : (jsx(Fragment, null));
333
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
334
+ }
335
+ })
336
+ : resultsToRender
337
+ .filter((result, idx) => idx !== 0)
338
+ .map((result, idx, results) => {
339
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
340
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result },
341
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == results.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
342
+ }))))) : (resultsToRender
343
+ .filter((result, idx) => (hideSeed && idx == 0 ? false : true))
344
+ .map((result, idx) => {
345
+ const selected = selectedItems.findIndex((item) => item.id == result.id) > -1;
346
+ if (idx == 0 && !hideSeed) {
347
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result, track: { impression: false } },
348
+ jsx(BundleSelector, { seedText: seedText, seed: true, icon: separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: true, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
349
+ }
350
+ else {
351
+ return (jsx(RecommendationResultTracker, { controller: controller, result: result },
352
+ jsx(BundleSelector, { icon: separatorIconSeedOnly ? false : separatorIcon, onCheck: () => onProductSelect(result), checked: selected, hideCheckboxes: hideCheckboxes, theme: props.theme, className: idx + 1 == resultsToRender.length ? 'ss__recommendation-bundle__wrapper__selector--last' : '' }, resultComponent ? (cloneWithProps(resultComponent, { result: result, seed: false, selected, onProductSelect })) : (jsx(Result, { ...subProps.result, controller: controller, result: result })))));
353
+ }
354
+ })),
355
+ ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon }))),
356
+ !ctaInline && (jsx(BundledCTA, { ctaSlot: ctaSlot, cartStore: cartStore, onAddToCart: (e) => addToCart(e), ctaButtonText: ctaButtonText, ctaButtonSuccessText: ctaButtonSuccessText, ctaButtonSuccessTimeout: ctaButtonSuccessTimeout, ctaIcon: ctaIcon })))) : (jsx(RecommendationProfileTracker, { controller: controller }, resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
357
+ jsx(Fragment, null))))))))) : (jsx(Fragment, null));
346
358
  return jsx(Fragment, null);
347
359
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.58.3",
3
+ "version": "0.60.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@cypress/react": "^8.0.0",
31
31
  "@emotion/react": "11.9.0",
32
- "@searchspring/snap-toolbox": "^0.58.3",
32
+ "@searchspring/snap-toolbox": "^0.60.0",
33
33
  "classnames": "^2.3.2",
34
34
  "cypress": "^13.7.1",
35
35
  "cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
52
52
  "@babel/preset-env": "^7.21.4",
53
53
  "@babel/preset-react": "^7.18.6",
54
54
  "@babel/runtime": "^7.21.0",
55
- "@searchspring/snap-client": "^0.58.3",
56
- "@searchspring/snap-controller": "^0.58.3",
57
- "@searchspring/snap-event-manager": "^0.58.3",
58
- "@searchspring/snap-logger": "^0.58.3",
59
- "@searchspring/snap-profiler": "^0.58.3",
60
- "@searchspring/snap-store-mobx": "^0.58.3",
61
- "@searchspring/snap-tracker": "^0.58.3",
62
- "@searchspring/snap-url-manager": "^0.58.3",
55
+ "@searchspring/snap-client": "^0.60.0",
56
+ "@searchspring/snap-controller": "^0.60.0",
57
+ "@searchspring/snap-event-manager": "^0.60.0",
58
+ "@searchspring/snap-logger": "^0.60.0",
59
+ "@searchspring/snap-profiler": "^0.60.0",
60
+ "@searchspring/snap-store-mobx": "^0.60.0",
61
+ "@searchspring/snap-tracker": "^0.60.0",
62
+ "@searchspring/snap-url-manager": "^0.60.0",
63
63
  "@storybook/addon-actions": "6.4.22",
64
64
  "@storybook/addon-controls": "6.4.22",
65
65
  "@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
84
84
  "webpack-merge": "^5.8.0"
85
85
  },
86
86
  "sideEffects": false,
87
- "gitHead": "d46572dc3453d97aac5ebc3d6c2d41333539de2e"
87
+ "gitHead": "c1b320737bc856b18032888f7b6825fd4706def9"
88
88
  }