@searchspring/snap-preact-components 0.40.0 → 0.41.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 (61) hide show
  1. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts +2 -1
  2. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  3. package/dist/cjs/components/Molecules/Carousel/Carousel.js +13 -2
  4. package/dist/cjs/components/Molecules/Carousel/Carousel.stories.js +3 -3
  5. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts +2 -2
  6. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  7. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +19 -9
  8. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  9. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +10 -48
  10. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
  11. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
  12. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +51 -0
  13. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
  14. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
  15. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +106 -0
  16. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
  17. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
  18. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.js +17 -0
  19. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
  20. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
  21. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +54 -0
  22. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
  23. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
  24. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +116 -0
  25. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
  26. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
  27. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.js +17 -0
  28. package/dist/cjs/index.d.ts +2 -0
  29. package/dist/cjs/index.d.ts.map +1 -1
  30. package/dist/cjs/index.js +2 -0
  31. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +2 -1
  32. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  33. package/dist/esm/components/Molecules/Carousel/Carousel.js +16 -2
  34. package/dist/esm/components/Molecules/Carousel/Carousel.stories.js +3 -3
  35. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts +2 -2
  36. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  37. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +19 -9
  38. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  39. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +9 -47
  40. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
  41. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
  42. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +40 -0
  43. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
  44. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
  45. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +48 -0
  46. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
  47. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
  48. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.js +1 -0
  49. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
  50. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
  51. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +43 -0
  52. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
  53. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
  54. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +58 -0
  55. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
  56. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
  57. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.js +1 -0
  58. package/dist/esm/index.d.ts +2 -0
  59. package/dist/esm/index.d.ts.map +1 -1
  60. package/dist/esm/index.js +2 -0
  61. package/package.json +11 -11
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.RecommendationResultTracker = void 0;
18
+ var react_1 = require("@emotion/react");
19
+ var hooks_1 = require("preact/hooks");
20
+ var mobx_react_lite_1 = require("mobx-react-lite");
21
+ var providers_1 = require("../../../../providers");
22
+ var hooks_2 = require("../../../../hooks");
23
+ var classnames_1 = __importDefault(require("classnames"));
24
+ var CSS = {
25
+ RecommendationResultTracker: function () { return (0, react_1.css)({}); },
26
+ };
27
+ exports.RecommendationResultTracker = (0, mobx_react_lite_1.observer)(function (properties) {
28
+ var _a, _b, _c;
29
+ var globalTheme = (0, providers_1.useTheme)();
30
+ var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.RecommendationResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.RecommendationResultTracker);
31
+ var children = props.children, result = props.result, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
32
+ var resultRef = (0, hooks_1.useRef)(null);
33
+ var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px');
34
+ if (!controller.events.render) {
35
+ controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
36
+ }
37
+ controller.track.product.render(result);
38
+ if (resultInViewport) {
39
+ // intersection observer can trigger in any random order,
40
+ // so we need to check if profile impression has been sent and send if not.
41
+ if (!controller.events.impression) {
42
+ controller.track.impression();
43
+ }
44
+ controller.track.product.impression(result);
45
+ }
46
+ var styling = {};
47
+ if (!disableStyles) {
48
+ styling.css = [CSS.RecommendationResultTracker(), style];
49
+ }
50
+ else if (style) {
51
+ styling.css = [style];
52
+ }
53
+ return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
54
+ });
@@ -0,0 +1,109 @@
1
+ /// <reference types="react" />
2
+ import { h } from 'preact';
3
+ import { RecommendationResultTrackerProps } from './RecommendationResultTracker';
4
+ import type { RecommendationController } from '@searchspring/snap-controller';
5
+ declare const _default: {
6
+ title: string;
7
+ component: ((properties: RecommendationResultTrackerProps) => JSX.Element) & {
8
+ displayName: string;
9
+ };
10
+ parameters: {
11
+ docs: {
12
+ page: () => h.JSX.Element;
13
+ };
14
+ };
15
+ decorators: ((Story: any) => h.JSX.Element)[];
16
+ argTypes: {
17
+ className: {
18
+ description: string;
19
+ table: {
20
+ type: {
21
+ summary: string;
22
+ };
23
+ defaultValue: {
24
+ summary: string;
25
+ };
26
+ };
27
+ control: {
28
+ type: string;
29
+ };
30
+ };
31
+ disableStyles: {
32
+ defaultValue: boolean;
33
+ description: string;
34
+ table: {
35
+ type: {
36
+ summary: string;
37
+ };
38
+ defaultValue: {
39
+ summary: boolean;
40
+ };
41
+ };
42
+ control: {
43
+ type: string;
44
+ };
45
+ };
46
+ style: {
47
+ description: string;
48
+ table: {
49
+ type: {
50
+ summary: string;
51
+ };
52
+ };
53
+ control: {
54
+ type: string;
55
+ };
56
+ };
57
+ theme: {
58
+ description: string;
59
+ table: {
60
+ type: {
61
+ summary: string;
62
+ };
63
+ };
64
+ control: {
65
+ type: string;
66
+ };
67
+ };
68
+ controller: {
69
+ description: string;
70
+ type: {
71
+ required: boolean;
72
+ };
73
+ table: {
74
+ type: {
75
+ summary: string;
76
+ };
77
+ };
78
+ control: {
79
+ type: string;
80
+ };
81
+ };
82
+ result: {
83
+ description: string;
84
+ type: {
85
+ required: boolean;
86
+ };
87
+ table: {
88
+ type: {
89
+ summary: string;
90
+ };
91
+ };
92
+ control: {
93
+ type: string;
94
+ };
95
+ };
96
+ };
97
+ };
98
+ export default _default;
99
+ export declare const Default: {
100
+ (props: RecommendationResultTrackerProps, { loaded: { controller } }: {
101
+ loaded: {
102
+ controller: RecommendationController;
103
+ };
104
+ }): h.JSX.Element;
105
+ loaders: (() => Promise<{
106
+ controller: RecommendationController;
107
+ }>)[];
108
+ };
109
+ //# sourceMappingURL=RecommendationResultTracker.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RecommendationResultTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAA+B,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAI9G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAiBpE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA4CE;AAIF,eAAO,MAAM,OAAO;YACZ,gCAAgC;;wBACa,wBAAwB;;;;;;CAO5E,CAAC"}
@@ -0,0 +1,116 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (_) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
49
+ var __importDefault = (this && this.__importDefault) || function (mod) {
50
+ return (mod && mod.__esModule) ? mod : { "default": mod };
51
+ };
52
+ Object.defineProperty(exports, "__esModule", { value: true });
53
+ exports.Default = void 0;
54
+ var preact_1 = require("preact");
55
+ var blocks_1 = require("@storybook/addon-docs/blocks");
56
+ var RecommendationResultTracker_1 = require("./RecommendationResultTracker");
57
+ var utilities_1 = require("../../../../utilities");
58
+ var readme_md_1 = __importDefault(require("../ResultTracker/readme.md"));
59
+ var snapify_1 = require("../../../../utilities/snapify");
60
+ var Result_1 = require("../../../Molecules/Result");
61
+ exports.default = {
62
+ title: "Trackers/Recommendation/Result",
63
+ component: RecommendationResultTracker_1.RecommendationResultTracker,
64
+ parameters: {
65
+ docs: {
66
+ page: function () { return ((0, preact_1.h)("div", null,
67
+ (0, preact_1.h)(readme_md_1.default, null),
68
+ (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
69
+ },
70
+ },
71
+ decorators: [
72
+ function (Story) { return ((0, preact_1.h)("div", { style: { maxWidth: '250px' } },
73
+ (0, preact_1.h)(Story, null))); },
74
+ ],
75
+ argTypes: __assign({ controller: {
76
+ description: 'Recommendation Controller reference',
77
+ type: { required: true },
78
+ table: {
79
+ type: {
80
+ summary: 'Controller',
81
+ },
82
+ },
83
+ control: { type: 'none' },
84
+ }, result: {
85
+ description: 'Result store Product reference',
86
+ type: { required: true },
87
+ table: {
88
+ type: {
89
+ summary: 'result store Product object',
90
+ },
91
+ },
92
+ control: { type: 'none' },
93
+ } }, utilities_1.componentArgs),
94
+ };
95
+ var snapInstance = snapify_1.Snapify.recommendation({ id: 'Recommendation', tag: 'trending', globals: { siteId: '8uyt2m' } });
96
+ var Default = function (props, _a) {
97
+ var _b, _c;
98
+ var controller = _a.loaded.controller;
99
+ return ((0, preact_1.h)(RecommendationResultTracker_1.RecommendationResultTracker, __assign({}, props, { controller: controller, result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] }),
100
+ (0, preact_1.h)(Result_1.Result, { result: (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.results[0] })));
101
+ };
102
+ exports.Default = Default;
103
+ exports.Default.loaders = [
104
+ function () { return __awaiter(void 0, void 0, void 0, function () {
105
+ return __generator(this, function (_a) {
106
+ switch (_a.label) {
107
+ case 0: return [4 /*yield*/, snapInstance.search()];
108
+ case 1:
109
+ _a.sent();
110
+ return [2 /*return*/, {
111
+ controller: snapInstance,
112
+ }];
113
+ }
114
+ });
115
+ }); },
116
+ ];
@@ -0,0 +1,2 @@
1
+ export * from './RecommendationResultTracker';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./RecommendationResultTracker"), exports);
@@ -10,6 +10,8 @@ export * from './components/Atoms/Merchandising';
10
10
  export * from './components/Atoms/Overlay';
11
11
  export * from './components/Atoms/Price';
12
12
  export * from './components/Atoms/Skeleton';
13
+ export * from './components/Trackers/Recommendation/ResultTracker';
14
+ export * from './components/Trackers/Recommendation/ProfileTracker';
13
15
  export * from './components/Molecules/Carousel';
14
16
  export * from './components/Molecules/Checkbox';
15
17
  export * from './components/Molecules/ErrorHandler';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -27,6 +27,8 @@ __exportStar(require("./components/Atoms/Merchandising"), exports);
27
27
  __exportStar(require("./components/Atoms/Overlay"), exports);
28
28
  __exportStar(require("./components/Atoms/Price"), exports);
29
29
  __exportStar(require("./components/Atoms/Skeleton"), exports);
30
+ __exportStar(require("./components/Trackers/Recommendation/ResultTracker"), exports);
31
+ __exportStar(require("./components/Trackers/Recommendation/ProfileTracker"), exports);
30
32
  // MOLECULES
31
33
  __exportStar(require("./components/Molecules/Carousel"), exports);
32
34
  __exportStar(require("./components/Molecules/Checkbox"), exports);
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import SwiperCore from 'swiper/core';
3
+ import { SwiperOptions } from 'swiper';
3
4
  import { ComponentProps, BreakpointsProps } from '../../../types';
4
5
  export declare const defaultCarouselBreakpoints: {
5
6
  0: {
@@ -45,7 +46,7 @@ export interface CarouselProps extends ComponentProps {
45
46
  hideButtons?: boolean;
46
47
  loop?: boolean;
47
48
  vertical?: boolean;
48
- pagination?: boolean;
49
+ pagination?: boolean | SwiperOptions['pagination'];
49
50
  autoAdjustSlides?: boolean;
50
51
  onClick?: (swiper: SwiperCore, e: MouseEvent | TouchEvent | PointerEvent) => void;
51
52
  onNextButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AAMjE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAgJvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
@@ -192,7 +192,8 @@ export const Carousel = observer((properties) => {
192
192
  theme,
193
193
  };
194
194
  }
195
- const { children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, vertical, autoAdjustSlides, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, modules, className, ...additionalProps } = props;
195
+ const { children, breakpoints, loop, nextButton, prevButton, hideButtons, vertical, autoAdjustSlides, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, modules, className, ...additionalProps } = props;
196
+ let pagination = props.pagination;
196
197
  const subProps = {
197
198
  icon: {
198
199
  // default props
@@ -221,6 +222,19 @@ export const Carousel = observer((properties) => {
221
222
  else if (style) {
222
223
  styling.css = [style];
223
224
  }
225
+ if (pagination) {
226
+ if (typeof pagination == 'object') {
227
+ pagination = {
228
+ clickable: true,
229
+ ...pagination,
230
+ };
231
+ }
232
+ else {
233
+ pagination = {
234
+ clickable: true,
235
+ };
236
+ }
237
+ }
224
238
  return children?.length ? (jsx(CacheProvider, null,
225
239
  jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) },
226
240
  jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
@@ -235,7 +249,7 @@ export const Carousel = observer((properties) => {
235
249
  }
236
250
  }, onClick: (swiper, e) => {
237
251
  onClick && onClick(swiper, e);
238
- }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, ...additionalProps, ...displaySettings, pagination: pagination ? { clickable: true } : false }, children.map((child) => {
252
+ }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, ...additionalProps, ...displaySettings, pagination: pagination }, children.map((child) => {
239
253
  return jsx(SwiperSlide, null, child);
240
254
  })),
241
255
  jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
@@ -35,14 +35,14 @@ export default {
35
35
  },
36
36
  pagination: {
37
37
  defaultValue: false,
38
- description: 'Display pagination dots',
38
+ description: 'Configuration for pagination dots',
39
39
  table: {
40
40
  type: {
41
- summary: 'boolean',
41
+ summary: 'boolean | SwiperOptions.pagination',
42
42
  },
43
43
  defaultValue: { summary: false },
44
44
  },
45
- control: { type: 'boolean' },
45
+ control: { type: 'boolean | SwiperOptions.pagination' },
46
46
  },
47
47
  vertical: {
48
48
  defaultValue: false,
@@ -32,7 +32,7 @@ export interface AutocompleteProps extends ComponentProps {
32
32
  linkSlot?: JSX.Element;
33
33
  breakpoints?: BreakpointsProps;
34
34
  width?: string;
35
- onFacetOptionClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
36
- onTermClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
35
+ onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
36
+ onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
37
37
  }
38
38
  //# sourceMappingURL=Autocomplete.d.ts.map
@@ -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;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAuc/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,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E"}
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;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqd/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"}
@@ -183,6 +183,16 @@ export const Autocomplete = observer((properties) => {
183
183
  clearTimeout(delayTimeout);
184
184
  },
185
185
  };
186
+ const facetClickEvent = (e) => {
187
+ properties.onFacetOptionClick && properties.onFacetOptionClick(e);
188
+ // remove focus from input (close the autocomplete)
189
+ controller?.setFocused && controller?.setFocused();
190
+ };
191
+ const termClickEvent = (e) => {
192
+ properties.onTermClick && properties.onTermClick(e);
193
+ // remove focus from input (close the autocomplete)
194
+ controller?.setFocused && controller?.setFocused();
195
+ };
186
196
  const themeOverride = {
187
197
  components: {
188
198
  facet: {
@@ -194,21 +204,21 @@ export const Autocomplete = observer((properties) => {
194
204
  },
195
205
  facetGridOptions: {
196
206
  columns: 3,
197
- onClick: properties.onFacetOptionClick,
207
+ onClick: facetClickEvent,
198
208
  },
199
209
  facetHierarchyOptions: {
200
210
  hideCount: true,
201
- onClick: properties.onFacetOptionClick,
211
+ onClick: facetClickEvent,
202
212
  },
203
213
  facetListOptions: {
204
214
  hideCheckbox: true,
205
215
  hideCount: true,
206
- onClick: properties.onFacetOptionClick,
216
+ onClick: facetClickEvent,
207
217
  },
208
218
  facetPaletteOptions: {
209
219
  hideLabel: true,
210
220
  columns: 3,
211
- onClick: properties.onFacetOptionClick,
221
+ onClick: facetClickEvent,
212
222
  },
213
223
  result: {
214
224
  hideBadge: true,
@@ -314,7 +324,7 @@ export const Autocomplete = observer((properties) => {
314
324
  showHistory = true;
315
325
  }
316
326
  const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
317
- const onlyTerms = trending?.length && !loaded;
327
+ const onlyTerms = (trending?.length || history.length) && !loaded;
318
328
  // results logic
319
329
  let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
320
330
  const trendingActive = trending?.filter((term) => term.active).pop();
@@ -363,21 +373,21 @@ export const Autocomplete = observer((properties) => {
363
373
  jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
364
374
  'ss__autocomplete__terms__option--active': term.active,
365
375
  }) },
366
- jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
376
+ jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
367
377
  showTrending && !hideTrending ? (jsx("div", { className: "ss__autocomplete__terms__trending" },
368
378
  trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
369
379
  jsx("h5", null, trendingTitle))) : null,
370
380
  jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
371
381
  'ss__autocomplete__terms__option--active': term.active,
372
382
  }) },
373
- jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
383
+ jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
374
384
  showHistory && !hideHistory ? (jsx("div", { className: "ss__autocomplete__terms__history" },
375
385
  historyTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
376
386
  jsx("h5", null, historyTitle))) : null,
377
387
  jsx("div", { className: "ss__autocomplete__terms__options" }, history.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
378
388
  'ss__autocomplete__terms__option--active': term.active,
379
389
  }) },
380
- jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
390
+ jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
381
391
  !hideFacets &&
382
392
  (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
383
393
  facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
@@ -402,7 +412,7 @@ export const Autocomplete = observer((properties) => {
402
412
  jsx("p", null, "Please try another search."))))),
403
413
  !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.FOOTER }) : null,
404
414
  !hideLink ? (linkSlot ? (cloneWithProps(linkSlot, { search, results, pagination, filters, controller })) : search?.query?.string && results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__info" },
405
- jsx("a", { href: state.url.href },
415
+ jsx("a", { href: state.url.href, onClick: () => controller?.setFocused && controller.setFocused() },
406
416
  "See ",
407
417
  pagination.totalResults,
408
418
  " ",
@@ -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;AAQxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAc9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAyKnF,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,iBAAiB,CAAC;IAC5B,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,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CA+HnF,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,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
@@ -1,6 +1,5 @@
1
1
  /** @jsx jsx */
2
2
  import { Fragment } from 'preact';
3
- import { useState, useRef } from 'preact/hooks';
4
3
  import { jsx, css } from '@emotion/react';
5
4
  import classnames from 'classnames';
6
5
  import { observer } from 'mobx-react-lite';
@@ -9,8 +8,9 @@ import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoint
9
8
  import { Result } from '../../Molecules/Result';
10
9
  import { defined } from '../../../utilities';
11
10
  import { useTheme, CacheProvider } from '../../../providers';
12
- import { useIntersection } from '../../../hooks';
13
11
  import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
12
+ import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
13
+ import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
14
14
  const CSS = {
15
15
  recommendation: ({ vertical }) => css({
16
16
  height: vertical ? '100%' : undefined,
@@ -79,31 +79,6 @@ export const Recommendation = observer((properties) => {
79
79
  theme: props?.theme,
80
80
  },
81
81
  };
82
- const rootComponentRef = useRef(null);
83
- const [initialIndexes, setInitialIndexes] = useState([0, 0]);
84
- const inViewport = useIntersection(rootComponentRef, '0px', true);
85
- const sendProductImpression = (index, count) => {
86
- if (!inViewport)
87
- return;
88
- let resultLoopCount = [index, index + count];
89
- let resultLoopOverCount;
90
- if (index + count > resultsToRender.length - 1) {
91
- resultLoopCount = [index];
92
- resultLoopOverCount = [0, index + count - resultsToRender.length];
93
- }
94
- let resultsImpressions = resultsToRender.slice(...resultLoopCount);
95
- if (resultLoopOverCount) {
96
- resultsImpressions = resultsImpressions.concat(resultsToRender.slice(...resultLoopOverCount));
97
- }
98
- resultsImpressions.map((result) => {
99
- controller.track.product.impression(result);
100
- });
101
- };
102
- if (inViewport) {
103
- controller.track.impression();
104
- sendProductImpression(initialIndexes[0], initialIndexes[1]);
105
- }
106
- (children || resultsToRender.length) && controller?.track?.render();
107
82
  const styling = {};
108
83
  if (!disableStyles) {
109
84
  styling.css = [CSS.recommendation({ vertical }), style];
@@ -112,24 +87,11 @@ export const Recommendation = observer((properties) => {
112
87
  styling.css = [style];
113
88
  }
114
89
  return children || resultsToRender?.length ? (jsx(CacheProvider, null,
115
- jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__recommendation', className) },
116
- title && jsx("h3", { className: "ss__recommendation__title" }, title),
117
- jsx(Carousel, { onInit: (swiper) => {
118
- //@ts-ignore
119
- setInitialIndexes([swiper.realIndex, swiper.passedParams.slidesPerView]);
120
- }, onBreakpoint: (swiper) => {
121
- //@ts-ignore
122
- sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
123
- }, onSlideChange: (swiper) => {
124
- //@ts-ignore
125
- sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
126
- }, prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, onNextButtonClick: (e) => controller.track.click(e), onPrevButtonClick: (e) => controller.track.click(e), onClick: (swiper, e) => {
127
- const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
128
- controller.track.click(e);
129
- if (!Number.isNaN(clickedIndex)) {
130
- controller.track.product.click(e, resultsToRender[clickedIndex]);
131
- }
132
- }, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
133
- ? children.map((child) => child)
134
- : resultsToRender.map((result) => jsx(Result, { ...subProps.result, controller: controller, result: result })))))) : (jsx(Fragment, 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));
135
97
  });
@@ -0,0 +1,10 @@
1
+ import type { RecommendationController } from '@searchspring/snap-controller';
2
+ import { ComponentProps } from '../../../../types';
3
+ export declare const RecommendationProfileTracker: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
4
+ displayName: string;
5
+ };
6
+ export interface RecommendationProfileTrackerProps extends ComponentProps {
7
+ children: any;
8
+ controller: RecommendationController;
9
+ }
10
+ //# sourceMappingURL=RecommendationProfileTracker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC,KAAG,WAAW;;CA+C/G,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,wBAAwB,CAAC;CACrC"}