@searchspring/snap-preact-components 0.65.1 → 0.66.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 (79) hide show
  1. package/dist/cjs/components/Atoms/Icon/Icon.d.ts +1 -0
  2. package/dist/cjs/components/Atoms/Icon/Icon.d.ts.map +1 -1
  3. package/dist/cjs/components/Atoms/Icon/Icon.js +14 -12
  4. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts +2 -0
  5. package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  6. package/dist/cjs/components/Molecules/Carousel/Carousel.js +32 -3
  7. package/dist/cjs/components/Molecules/Result/Result.d.ts.map +1 -1
  8. package/dist/cjs/components/Molecules/Result/Result.js +2 -6
  9. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +1 -0
  10. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  11. package/dist/cjs/components/Organisms/RecommendationBundle/RecommendationBundle.js +1 -1
  12. package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
  13. package/dist/cjs/components/Organisms/Results/Results.js +11 -9
  14. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +3 -0
  15. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -1
  16. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +3 -0
  17. package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -1
  18. package/dist/cjs/components/Trackers/ResultTracker/ResultTracker.js +11 -21
  19. package/dist/cjs/hooks/index.d.ts +2 -0
  20. package/dist/cjs/hooks/index.d.ts.map +1 -1
  21. package/dist/cjs/hooks/index.js +2 -0
  22. package/dist/cjs/hooks/useIntersectionAdvanced.d.ts +11 -0
  23. package/dist/cjs/hooks/useIntersectionAdvanced.d.ts.map +1 -0
  24. package/dist/cjs/hooks/useIntersectionAdvanced.js +85 -0
  25. package/dist/cjs/hooks/useTracking.d.ts +12 -0
  26. package/dist/cjs/hooks/useTracking.d.ts.map +1 -0
  27. package/dist/cjs/hooks/useTracking.js +41 -0
  28. package/dist/cjs/providers/index.d.ts +1 -0
  29. package/dist/cjs/providers/index.d.ts.map +1 -1
  30. package/dist/cjs/providers/index.js +1 -0
  31. package/dist/cjs/providers/withTracking.d.ts +11 -0
  32. package/dist/cjs/providers/withTracking.d.ts.map +1 -0
  33. package/dist/cjs/providers/withTracking.js +66 -0
  34. package/dist/cjs/utilities/createImpressionObserver.d.ts +8 -0
  35. package/dist/cjs/utilities/createImpressionObserver.d.ts.map +1 -0
  36. package/dist/cjs/utilities/createImpressionObserver.js +19 -0
  37. package/dist/cjs/utilities/index.d.ts +1 -0
  38. package/dist/cjs/utilities/index.d.ts.map +1 -1
  39. package/dist/cjs/utilities/index.js +1 -0
  40. package/dist/esm/components/Atoms/Icon/Icon.d.ts +1 -0
  41. package/dist/esm/components/Atoms/Icon/Icon.d.ts.map +1 -1
  42. package/dist/esm/components/Atoms/Icon/Icon.js +14 -12
  43. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +2 -0
  44. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  45. package/dist/esm/components/Molecules/Carousel/Carousel.js +35 -3
  46. package/dist/esm/components/Molecules/Result/Result.d.ts.map +1 -1
  47. package/dist/esm/components/Molecules/Result/Result.js +2 -4
  48. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +1 -0
  49. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  50. package/dist/esm/components/Organisms/RecommendationBundle/RecommendationBundle.js +1 -1
  51. package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
  52. package/dist/esm/components/Organisms/Results/Results.js +5 -5
  53. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +3 -0
  54. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -1
  55. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +3 -0
  56. package/dist/esm/components/Trackers/ResultTracker/ResultTracker.d.ts.map +1 -1
  57. package/dist/esm/components/Trackers/ResultTracker/ResultTracker.js +10 -18
  58. package/dist/esm/hooks/index.d.ts +2 -0
  59. package/dist/esm/hooks/index.d.ts.map +1 -1
  60. package/dist/esm/hooks/index.js +2 -0
  61. package/dist/esm/hooks/useIntersectionAdvanced.d.ts +11 -0
  62. package/dist/esm/hooks/useIntersectionAdvanced.d.ts.map +1 -0
  63. package/dist/esm/hooks/useIntersectionAdvanced.js +70 -0
  64. package/dist/esm/hooks/useTracking.d.ts +12 -0
  65. package/dist/esm/hooks/useTracking.d.ts.map +1 -0
  66. package/dist/esm/hooks/useTracking.js +36 -0
  67. package/dist/esm/providers/index.d.ts +1 -0
  68. package/dist/esm/providers/index.d.ts.map +1 -1
  69. package/dist/esm/providers/index.js +1 -0
  70. package/dist/esm/providers/withTracking.d.ts +11 -0
  71. package/dist/esm/providers/withTracking.d.ts.map +1 -0
  72. package/dist/esm/providers/withTracking.js +45 -0
  73. package/dist/esm/utilities/createImpressionObserver.d.ts +8 -0
  74. package/dist/esm/utilities/createImpressionObserver.d.ts.map +1 -0
  75. package/dist/esm/utilities/createImpressionObserver.js +15 -0
  76. package/dist/esm/utilities/index.d.ts +1 -0
  77. package/dist/esm/utilities/index.d.ts.map +1 -1
  78. package/dist/esm/utilities/index.js +1 -0
  79. package/package.json +11 -11
@@ -0,0 +1,66 @@
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 __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ Object.defineProperty(exports, "__esModule", { value: true });
25
+ exports.withTracking = void 0;
26
+ var preact_1 = require("preact");
27
+ var utilities_1 = require("../utilities");
28
+ var hooks_1 = require("preact/hooks");
29
+ function withTracking(WrappedComponent) {
30
+ var WithTracking = function (props) {
31
+ var controller = props.controller, result = props.result, restProps = __rest(props, ["controller", "result"]);
32
+ if (!controller) {
33
+ console.warn('Warning: No controller provided to withTracking');
34
+ }
35
+ if (!result) {
36
+ console.warn('Warning: No result provided to withTracking');
37
+ }
38
+ var additionalEffectKeys = [];
39
+ if ((controller === null || controller === void 0 ? void 0 : controller.type) === 'autocomplete') {
40
+ additionalEffectKeys.push(controller.store.state.input);
41
+ }
42
+ var _a = (0, utilities_1.createImpressionObserver)({ additionalEffectKeys: additionalEffectKeys }), ref = _a.ref, inViewport = _a.inViewport;
43
+ if (inViewport) {
44
+ // TODO: add support for disabling tracking events via config like in ResultTracker
45
+ if ((result === null || result === void 0 ? void 0 : result.type) === 'product') {
46
+ controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
47
+ }
48
+ else {
49
+ // track banner in future
50
+ }
51
+ }
52
+ var currentRef = ref.current;
53
+ if (currentRef) {
54
+ var handleClick = (0, hooks_1.useCallback)(function (e) {
55
+ controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
56
+ }, []);
57
+ currentRef.setAttribute('sstracking', 'true');
58
+ currentRef.removeEventListener('click', handleClick);
59
+ currentRef.addEventListener('click', handleClick);
60
+ }
61
+ var trackingProps = __assign(__assign({}, restProps), { controller: controller, result: result, trackingRef: ref });
62
+ return (0, preact_1.h)(WrappedComponent, __assign({}, trackingProps));
63
+ };
64
+ return WithTracking;
65
+ }
66
+ exports.withTracking = withTracking;
@@ -0,0 +1,8 @@
1
+ import { type Ref } from 'preact/hooks';
2
+ export declare function createImpressionObserver(options?: {
3
+ additionalEffectKeys?: unknown[];
4
+ }): {
5
+ ref: Ref<HTMLElement | null>;
6
+ inViewport: boolean;
7
+ };
8
+ //# sourceMappingURL=createImpressionObserver.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createImpressionObserver.d.ts","sourceRoot":"","sources":["../../../src/utilities/createImpressionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAU,MAAM,cAAc,CAAC;AAGhD,wBAAgB,wBAAwB,CAAC,OAAO,CAAC,EAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,EAAE,CAAA;CAAE,GAAG;IACzF,GAAG,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACpB,CAYA"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.createImpressionObserver = void 0;
4
+ var hooks_1 = require("preact/hooks");
5
+ var hooks_2 = require("../hooks");
6
+ function createImpressionObserver(options) {
7
+ var ref = (0, hooks_1.useRef)(null);
8
+ var inViewport = (0, hooks_2.useIntersectionAdvanced)(ref, {
9
+ fireOnce: true,
10
+ threshold: 0.75,
11
+ minVisibleTime: 1000,
12
+ additionalEffectKeys: (options === null || options === void 0 ? void 0 : options.additionalEffectKeys) || [],
13
+ });
14
+ return {
15
+ ref: ref,
16
+ inViewport: inViewport,
17
+ };
18
+ }
19
+ exports.createImpressionObserver = createImpressionObserver;
@@ -5,4 +5,5 @@ export * from './sprintf';
5
5
  export * from './LightenDarkenColor';
6
6
  export * from './shiftColor';
7
7
  export * from './defaultBadgeComponentMap';
8
+ export * from './createImpressionObserver';
8
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC"}
@@ -21,3 +21,4 @@ __exportStar(require("./sprintf"), exports);
21
21
  __exportStar(require("./LightenDarkenColor"), exports);
22
22
  __exportStar(require("./shiftColor"), exports);
23
23
  __exportStar(require("./defaultBadgeComponentMap"), exports);
24
+ __exportStar(require("./createImpressionObserver"), exports);
@@ -15,6 +15,7 @@ export interface IconProps extends ComponentProps {
15
15
  icon?: IconType | string;
16
16
  path?: string | SVGPathElement[];
17
17
  children?: ComponentChildren;
18
+ title?: string;
18
19
  size?: string | number;
19
20
  width?: string | number;
20
21
  height?: string | number;
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAkDvD;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAmDvD;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -26,7 +26,7 @@ export function Icon(properties) {
26
26
  ...properties,
27
27
  ...properties.theme?.components?.icon,
28
28
  };
29
- const { color, icon, path, children, size, width, height, viewBox, disableStyles, className, style, ...otherProps } = props;
29
+ const { color, icon, path, children, size, width, title, height, viewBox, disableStyles, className, style, ...otherProps } = props;
30
30
  const iconPath = iconPaths[icon] || path;
31
31
  const pathType = typeof iconPath;
32
32
  const styling = {};
@@ -37,15 +37,17 @@ export function Icon(properties) {
37
37
  styling.css = [style];
38
38
  }
39
39
  return children || (iconPath && (pathType === 'string' || (pathType === 'object' && Array.isArray(iconPath)))) ? (jsx(CacheProvider, null,
40
- jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined, ...otherProps }, (() => {
41
- if (children) {
42
- return children;
43
- }
44
- else if (pathType === 'string') {
45
- return jsx("path", { fill: disableStyles ? color : undefined, d: iconPath });
46
- }
47
- else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
48
- return iconPath.map((p, i) => jsx(p.type, { key: i, ...p.attributes }));
49
- }
50
- })()))) : (jsx(Fragment, null));
40
+ jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined, ...otherProps },
41
+ title ? jsx("title", null, title) : null,
42
+ (() => {
43
+ if (children) {
44
+ return children;
45
+ }
46
+ else if (pathType === 'string') {
47
+ return jsx("path", { fill: disableStyles ? color : undefined, d: iconPath });
48
+ }
49
+ else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
50
+ return iconPath.map((p, i) => jsx(p.type, { key: i, ...p.attributes }));
51
+ }
52
+ })()))) : (jsx(Fragment, null));
51
53
  }
@@ -2,6 +2,7 @@
2
2
  import type { Swiper as SwiperTypes } from 'swiper';
3
3
  import type { PaginationOptions } from 'swiper/types/modules/pagination';
4
4
  import type { NavigationOptions } from 'swiper/types/modules/navigation';
5
+ import type { ScrollbarOptions } from 'swiper/types/modules/scrollbar';
5
6
  import { ComponentProps, BreakpointsProps } from '../../../types';
6
7
  export declare const defaultCarouselBreakpoints: {
7
8
  0: {
@@ -48,6 +49,7 @@ export interface CarouselProps extends ComponentProps {
48
49
  vertical?: boolean;
49
50
  pagination?: boolean | PaginationOptions;
50
51
  navigation?: boolean | NavigationOptions;
52
+ scrollbar?: boolean | ScrollbarOptions;
51
53
  autoAdjustSlides?: boolean;
52
54
  onClick?: (swiper: SwiperTypes, e: MouseEvent | TouchEvent | PointerEvent) => void;
53
55
  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":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAIzE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkI9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2P5D,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,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,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,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":";AAWA,OAAO,KAAK,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAkJ9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WA2Q5D,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACnF,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,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
@@ -6,7 +6,7 @@ import classnames from 'classnames';
6
6
  import { observer } from 'mobx-react';
7
7
  import deepmerge from 'deepmerge';
8
8
  import { Swiper, SwiperSlide } from 'swiper/react';
9
- import { Navigation, Pagination, A11y } from 'swiper/modules';
9
+ import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
10
10
  import { Icon } from '../../Atoms/Icon/Icon';
11
11
  import { defined } from '../../../utilities';
12
12
  import { useTheme, CacheProvider } from '../../../providers';
@@ -128,6 +128,22 @@ const CSS = {
128
128
  '.swiper-vertical': {
129
129
  touchAction: 'pan-x',
130
130
  },
131
+ '.swiper-scrollbar': {
132
+ position: 'absolute',
133
+ bottom: '0',
134
+ left: '0',
135
+ width: '100%',
136
+ height: '2px',
137
+ backgroundColor: '#d9d9d9',
138
+ '&:empty': {
139
+ display: 'none',
140
+ },
141
+ '.swiper-scrollbar-drag': {
142
+ position: 'relative',
143
+ height: '100%',
144
+ backgroundColor: theme?.colors?.primary || '#000',
145
+ },
146
+ },
131
147
  }),
132
148
  };
133
149
  export const defaultCarouselBreakpoints = {
@@ -205,6 +221,7 @@ export const Carousel = observer((properties) => {
205
221
  const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, modules, className, ...additionalProps } = props;
206
222
  let pagination = props.pagination;
207
223
  let navigation = props.navigation;
224
+ let scrollbar = props.scrollbar;
208
225
  const subProps = {
209
226
  icon: {
210
227
  // default props
@@ -219,7 +236,9 @@ export const Carousel = observer((properties) => {
219
236
  theme: props.theme,
220
237
  },
221
238
  };
222
- const swiperModulesUnfiltered = Array.isArray(modules) ? [Navigation, Pagination, A11y].concat(modules) : [Navigation, Pagination, A11y];
239
+ const swiperModulesUnfiltered = Array.isArray(modules)
240
+ ? [Navigation, Pagination, Scrollbar, A11y].concat(modules)
241
+ : [Navigation, Pagination, Scrollbar, A11y];
223
242
  //remove any duplicates, in case user passes in Navigation or Pagination
224
243
  const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
225
244
  const navigationPrevRef = useRef(null);
@@ -270,6 +289,19 @@ export const Carousel = observer((properties) => {
270
289
  prevEl: '.ss_carousel_DNE',
271
290
  };
272
291
  }
292
+ if (scrollbar) {
293
+ if (typeof scrollbar == 'object') {
294
+ scrollbar = {
295
+ enabled: true,
296
+ ...scrollbar,
297
+ };
298
+ }
299
+ else {
300
+ scrollbar = {
301
+ enabled: true,
302
+ };
303
+ }
304
+ }
273
305
  const attachClasstoLastVisibleSlide = () => {
274
306
  if (rootComponentRef.current) {
275
307
  const swiperElem = rootComponentRef.current;
@@ -321,7 +353,7 @@ export const Carousel = observer((properties) => {
321
353
  }
322
354
  }, onClick: (swiper, e) => {
323
355
  onClick && onClick(swiper, e);
324
- }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, navigation: navigation, pagination: pagination, onResize: (swiper) => {
356
+ }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: (swiper) => {
325
357
  if (additionalProps.onResize) {
326
358
  additionalProps.onResize();
327
359
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAuJxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA4D7D,eAAO,MAAM,MAAM,eAAyB,WAAW,KAAG,WAmKxD,CAAC;AAQH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
@@ -74,7 +74,7 @@ export const Result = observer((properties) => {
74
74
  ...properties,
75
75
  ...properties.theme?.components?.result,
76
76
  };
77
- const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller } = props;
77
+ const { trackingRef, result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, onClick, style, controller, } = props;
78
78
  const core = result?.display?.mappings.core || result?.mappings?.core;
79
79
  const subProps = {
80
80
  price: {
@@ -142,11 +142,10 @@ export const Result = observer((properties) => {
142
142
  styling.css = [style];
143
143
  }
144
144
  return core ? (jsx(CacheProvider, null,
145
- jsx("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, className) },
145
+ jsx("article", { ...styling, ref: trackingRef, className: classnames('ss__result', `ss__result--${layout}`, className) },
146
146
  jsx("div", { className: "ss__result__image-wrapper" },
147
147
  jsx("a", { href: core.url, onClick: (e) => {
148
148
  onClick && onClick(e);
149
- controller?.track?.product?.click(e, result);
150
149
  } }, !hideImage &&
151
150
  (!hideBadge ? (jsx(OverlayBadge, { ...subProps.overlayBadge, controller: controller },
152
151
  jsx(Image, { ...subProps.image }))) : (jsx(Image, { ...subProps.image }))))),
@@ -155,7 +154,6 @@ export const Result = observer((properties) => {
155
154
  !hideTitle && (jsx("div", { className: "ss__result__details__title" },
156
155
  jsx("a", { href: core.url, onClick: (e) => {
157
156
  onClick && onClick(e);
158
- controller?.track?.product?.click(e, result);
159
157
  }, dangerouslySetInnerHTML: {
160
158
  __html: displayName || '',
161
159
  } }))),
@@ -17,6 +17,7 @@ export interface RecommendationProps extends ComponentProps {
17
17
  controller: RecommendationController;
18
18
  children?: ComponentChildren;
19
19
  vertical?: boolean;
20
+ scrollbar?: boolean;
20
21
  lazyRender?: {
21
22
  enabled: boolean;
22
23
  offset?: string;
@@ -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;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"}
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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF"}
@@ -276,7 +276,7 @@ export const RecommendationBundle = observer((properties) => {
276
276
  };
277
277
  const addToCart = (e) => {
278
278
  // add to cart tracking
279
- controller.track.bundle.addToCart(selectedItems);
279
+ controller.addToCart(selectedItems);
280
280
  //call the function passed
281
281
  onAddToCart && onAddToCart(e, selectedItems);
282
282
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA+BlG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA8GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
1
+ {"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,+BAA+B,CAAC;AAIxF,OAAO,EAAE,cAAc,EAAU,UAAU,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAgClG,eAAO,MAAM,OAAO,eAAyB,WAAW,KAAG,WA4GzD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
@@ -9,9 +9,8 @@ import { InlineBanner } from '../../Atoms/Merchandising/InlineBanner';
9
9
  import { Result } from '../../Molecules/Result';
10
10
  import { Layout } from '../../../types';
11
11
  import { defined } from '../../../utilities';
12
- import { useTheme, CacheProvider } from '../../../providers';
12
+ import { useTheme, CacheProvider, withTracking } from '../../../providers';
13
13
  import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
14
- import { ResultTracker } from '../../Trackers/ResultTracker';
15
14
  const CSS = {
16
15
  results: ({ columns, gapSize }) => css({
17
16
  display: 'flex',
@@ -33,6 +32,7 @@ const CSS = {
33
32
  },
34
33
  }),
35
34
  };
35
+ const ResultComponent = withTracking(Result);
36
36
  export const Results = observer((properties) => {
37
37
  const globalTheme = useTheme();
38
38
  const defaultBreakpointsProps = {
@@ -108,12 +108,12 @@ export const Results = observer((properties) => {
108
108
  styling.css = [style];
109
109
  }
110
110
  return results?.length ? (jsx(CacheProvider, null,
111
- jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (jsx(ResultTracker, { result: result, controller: controller }, (() => {
111
+ jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (() => {
112
112
  switch (result.type) {
113
113
  case ContentType.BANNER:
114
114
  return jsx(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
115
115
  default:
116
- return (jsx(Result, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
116
+ return (jsx(ResultComponent, { key: result.id, ...subProps.result, result: result, layout: props.layout, controller: controller }));
117
117
  }
118
- })())))))) : (jsx(Fragment, null));
118
+ })())))) : (jsx(Fragment, null));
119
119
  });
@@ -3,6 +3,9 @@
3
3
  import { ComponentChildren } from 'preact';
4
4
  import type { RecommendationController } from '@searchspring/snap-controller';
5
5
  import { ComponentProps } from '../../../../types';
6
+ /**
7
+ * @deprecated RecommendationProfileTracker is deprecated and is no longer functional
8
+ */
6
9
  export declare const RecommendationProfileTracker: (properties: RecommendationProfileTrackerProps) => JSX.Element;
7
10
  export interface RecommendationProfileTrackerProps extends ComponentProps {
8
11
  children: ComponentChildren;
@@ -1 +1 @@
1
- {"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAA6B,MAAM,QAAQ,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA8BpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
1
+ {"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAA6B,MAAM,QAAQ,CAAC;AAItE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D;;GAEG;AACH,eAAO,MAAM,4BAA4B,eAAyB,iCAAiC,KAAG,WA8BpG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
@@ -7,6 +7,9 @@ import classnames from 'classnames';
7
7
  const CSS = {
8
8
  RecommendationProfileTracker: () => css({}),
9
9
  };
10
+ /**
11
+ * @deprecated RecommendationProfileTracker is deprecated and is no longer functional
12
+ */
10
13
  export const RecommendationProfileTracker = observer((properties) => {
11
14
  const globalTheme = useTheme();
12
15
  const props = {
@@ -1 +1 @@
1
- {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WA+DtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
1
+ {"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AASrE,eAAO,MAAM,aAAa,eAAyB,kBAAkB,KAAG,WAsDtE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}
@@ -1,9 +1,8 @@
1
1
  import { jsx, css } from '@emotion/react';
2
- import { useRef, useEffect } from 'preact/hooks';
3
2
  import { observer } from 'mobx-react';
4
3
  import { useTheme } from '../../../providers';
5
- import { useIntersection } from '../../../hooks';
6
4
  import classnames from 'classnames';
5
+ import { createImpressionObserver } from '../../../utilities';
7
6
  const CSS = {
8
7
  ResultTracker: () => css({}),
9
8
  };
@@ -27,18 +26,13 @@ export const ResultTracker = observer((properties) => {
27
26
  ...defaultTrack,
28
27
  ...track,
29
28
  };
30
- const resultRef = useRef(null);
31
- const resultInViewport = useIntersection(resultRef, '0px', true);
32
- useEffect(() => {
33
- if (mergedTrack.render) {
34
- if (result.type === 'product') {
35
- controller?.track?.product?.render(result);
36
- }
29
+ const { ref, inViewport } = createImpressionObserver();
30
+ if (inViewport && mergedTrack.impression) {
31
+ if (result.type === 'product') {
32
+ controller?.track.product.impression(result);
37
33
  }
38
- }, [result]);
39
- if (resultInViewport && mergedTrack.impression) {
40
- if (result.type === 'product' && controller?.track) {
41
- controller?.track?.product?.impression(result);
34
+ else {
35
+ // track banner in future
42
36
  }
43
37
  }
44
38
  const styling = {};
@@ -49,10 +43,8 @@ export const ResultTracker = observer((properties) => {
49
43
  styling.css = [style];
50
44
  }
51
45
  return (jsx("div", { className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className), onClick: (e) => {
52
- if (mergedTrack.click) {
53
- if (result.type === 'product') {
54
- controller?.track?.product?.click(e, result);
55
- }
46
+ if (result.type === 'product' && mergedTrack.click) {
47
+ controller?.track.product.click(e, result);
56
48
  }
57
- }, ref: resultRef, ...styling }, children));
49
+ }, ref: ref, ...styling }, children));
58
50
  });
@@ -2,8 +2,10 @@ export * from './useClickOutside';
2
2
  export * from './useConstructor';
3
3
  export * from './useMediaQuery';
4
4
  export * from './useIntersection';
5
+ export * from './useIntersectionAdvanced';
5
6
  export * from './useDisplaySettings';
6
7
  export * from './useA11y';
7
8
  export * from './useDeepCompareEffect';
8
9
  export * from './useComponent';
10
+ export * from './useTracking';
9
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
@@ -2,7 +2,9 @@ export * from './useClickOutside';
2
2
  export * from './useConstructor';
3
3
  export * from './useMediaQuery';
4
4
  export * from './useIntersection';
5
+ export * from './useIntersectionAdvanced';
5
6
  export * from './useDisplaySettings';
6
7
  export * from './useA11y';
7
8
  export * from './useDeepCompareEffect';
8
9
  export * from './useComponent';
10
+ export * from './useTracking';
@@ -0,0 +1,11 @@
1
+ import { MutableRef } from 'preact/hooks';
2
+ interface UseIntersectionOptions {
3
+ rootMargin?: string;
4
+ fireOnce?: boolean;
5
+ threshold?: number | number[];
6
+ minVisibleTime?: number;
7
+ additionalEffectKeys?: unknown[];
8
+ }
9
+ export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => boolean;
10
+ export {};
11
+ //# sourceMappingURL=useIntersectionAdvanced.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU,sBAAsB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,uBAAuB,QAAS,WAAW,WAAW,GAAG,IAAI,CAAC,YAAW,sBAAsB,KAAQ,OAiFnH,CAAC"}
@@ -0,0 +1,70 @@
1
+ import { useState, useEffect, useRef } from 'preact/hooks';
2
+ export const useIntersectionAdvanced = (ref, options = {}) => {
3
+ const { rootMargin = '0px', fireOnce = false, threshold = 0, minVisibleTime = 0 } = options;
4
+ // State and setter for storing whether element is visible
5
+ const [isIntersecting, setIntersecting] = useState(false);
6
+ // Timer reference to track visibility duration
7
+ const visibleTimerRef = useRef(null);
8
+ // Track when the element started being visible
9
+ const visibleStartRef = useRef(null);
10
+ useEffect(() => {
11
+ setIntersecting(false);
12
+ let observer = null;
13
+ if (!ref.current)
14
+ return;
15
+ observer = new IntersectionObserver(([entry]) => {
16
+ // If element becomes visible
17
+ if (entry.isIntersecting) {
18
+ // Start tracking visibility time if minVisibleTime is set
19
+ if (minVisibleTime > 0) {
20
+ visibleStartRef.current = Date.now();
21
+ // Clear any existing timer
22
+ if (visibleTimerRef.current) {
23
+ window.clearTimeout(visibleTimerRef.current);
24
+ }
25
+ // Set up a timer for the minimum visibility duration
26
+ visibleTimerRef.current = window.setTimeout(() => {
27
+ setIntersecting(true);
28
+ if (fireOnce && ref.current && observer) {
29
+ observer.unobserve(ref.current);
30
+ }
31
+ }, minVisibleTime);
32
+ }
33
+ else {
34
+ // If no minimum time required, update state immediately
35
+ setIntersecting(true);
36
+ if (fireOnce && ref.current && observer) {
37
+ observer.unobserve(ref.current);
38
+ }
39
+ }
40
+ }
41
+ else {
42
+ // Element is no longer visible
43
+ if (visibleTimerRef.current) {
44
+ // Clear the timer if element goes out of view before minimum time
45
+ window.clearTimeout(visibleTimerRef.current);
46
+ }
47
+ visibleTimerRef.current = null;
48
+ visibleStartRef.current = null;
49
+ setIntersecting(false);
50
+ }
51
+ }, {
52
+ rootMargin,
53
+ threshold,
54
+ });
55
+ if (ref.current) {
56
+ observer.observe(ref.current);
57
+ }
58
+ return () => {
59
+ setIntersecting(false);
60
+ if (visibleTimerRef.current) {
61
+ window.clearTimeout(visibleTimerRef.current);
62
+ }
63
+ // Clean up observer
64
+ if (observer && ref.current) {
65
+ observer.unobserve(ref.current);
66
+ }
67
+ };
68
+ }, [ref, ...(options?.additionalEffectKeys || [])]);
69
+ return isIntersecting;
70
+ };
@@ -0,0 +1,12 @@
1
+ import { Product } from '@searchspring/snap-store-mobx';
2
+ import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
3
+ import { type Ref } from 'preact/hooks';
4
+ interface UseTrackingProps {
5
+ controller: SearchController | AutocompleteController | RecommendationController;
6
+ result: Product;
7
+ }
8
+ export declare function useTracking({ controller, result }: UseTrackingProps): {
9
+ trackingRef: Ref<HTMLElement | null>;
10
+ };
11
+ export {};
12
+ //# sourceMappingURL=useTracking.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTracking.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTracking.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnD,UAAU,gBAAgB;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG;IAAE,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAE,CAuC9G"}