@searchspring/snap-preact-components 0.39.3 → 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 (79) 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/Molecules/Slideout/Slideout.d.ts +1 -0
  6. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  7. package/dist/cjs/components/Molecules/Slideout/Slideout.js +4 -31
  8. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts +14 -0
  9. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts.map +1 -1
  10. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.js +9 -0
  11. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts +7 -2
  12. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  13. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +81 -27
  14. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +75 -0
  15. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
  16. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.js +51 -1
  17. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  18. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +10 -48
  19. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
  20. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
  21. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +51 -0
  22. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
  23. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
  24. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +106 -0
  25. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
  26. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
  27. package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.js +17 -0
  28. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
  29. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
  30. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +54 -0
  31. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
  32. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
  33. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +116 -0
  34. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
  35. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
  36. package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.js +17 -0
  37. package/dist/cjs/index.d.ts +2 -0
  38. package/dist/cjs/index.d.ts.map +1 -1
  39. package/dist/cjs/index.js +2 -0
  40. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +2 -1
  41. package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
  42. package/dist/esm/components/Molecules/Carousel/Carousel.js +16 -2
  43. package/dist/esm/components/Molecules/Carousel/Carousel.stories.js +3 -3
  44. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts +1 -0
  45. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  46. package/dist/esm/components/Molecules/Slideout/Slideout.js +4 -31
  47. package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts +14 -0
  48. package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts.map +1 -1
  49. package/dist/esm/components/Molecules/Slideout/Slideout.stories.js +10 -0
  50. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts +7 -2
  51. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  52. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +80 -25
  53. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +75 -0
  54. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
  55. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js +56 -1
  56. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  57. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +9 -47
  58. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
  59. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
  60. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +40 -0
  61. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
  62. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
  63. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +48 -0
  64. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
  65. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
  66. package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.js +1 -0
  67. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
  68. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
  69. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +43 -0
  70. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
  71. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
  72. package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +58 -0
  73. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
  74. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
  75. package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.js +1 -0
  76. package/dist/esm/index.d.ts +2 -0
  77. package/dist/esm/index.d.ts.map +1 -1
  78. package/dist/esm/index.js +2 -0
  79. package/package.json +11 -11
@@ -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"}
@@ -235,7 +235,8 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
235
235
  }
236
236
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme_1 });
237
237
  }
238
- var children = props.children, breakpoints = props.breakpoints, loop = props.loop, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, autoAdjustSlides = props.autoAdjustSlides, onInit = props.onInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, style = props.style, modules = props.modules, className = props.className, additionalProps = __rest(props, ["children", "breakpoints", "loop", "pagination", "nextButton", "prevButton", "hideButtons", "vertical", "autoAdjustSlides", "onInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "modules", "className"]);
238
+ var children = props.children, breakpoints = props.breakpoints, loop = props.loop, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, autoAdjustSlides = props.autoAdjustSlides, onInit = props.onInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, style = props.style, modules = props.modules, className = props.className, additionalProps = __rest(props, ["children", "breakpoints", "loop", "nextButton", "prevButton", "hideButtons", "vertical", "autoAdjustSlides", "onInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "modules", "className"]);
239
+ var pagination = props.pagination;
239
240
  var subProps = {
240
241
  icon: __assign(__assign(__assign({
241
242
  // default props
@@ -259,6 +260,16 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
259
260
  else if (style) {
260
261
  styling.css = [style];
261
262
  }
263
+ if (pagination) {
264
+ if (typeof pagination == 'object') {
265
+ pagination = __assign({ clickable: true }, pagination);
266
+ }
267
+ else {
268
+ pagination = {
269
+ clickable: true,
270
+ };
271
+ }
272
+ }
262
273
  return (children === null || children === void 0 ? void 0 : children.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
263
274
  (0, react_1.jsx)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) }),
264
275
  (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
@@ -273,7 +284,7 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
273
284
  }
274
285
  }, onClick: function (swiper, e) {
275
286
  onClick && onClick(swiper, e);
276
- }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7 }, additionalProps, displaySettings, { pagination: pagination ? { clickable: true } : false }), children.map(function (child) {
287
+ }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7 }, additionalProps, displaySettings, { pagination: pagination }), children.map(function (child) {
277
288
  return (0, react_1.jsx)(react_2.SwiperSlide, null, child);
278
289
  })),
279
290
  (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
@@ -50,14 +50,14 @@ exports.default = {
50
50
  control: { type: 'boolean' },
51
51
  }, pagination: {
52
52
  defaultValue: false,
53
- description: 'Display pagination dots',
53
+ description: 'Configuration for pagination dots',
54
54
  table: {
55
55
  type: {
56
- summary: 'boolean',
56
+ summary: 'boolean | SwiperOptions.pagination',
57
57
  },
58
58
  defaultValue: { summary: false },
59
59
  },
60
- control: { type: 'boolean' },
60
+ control: { type: 'boolean | SwiperOptions.pagination' },
61
61
  }, vertical: {
62
62
  defaultValue: false,
63
63
  description: 'Carousel vertical slide direction',
@@ -7,6 +7,7 @@ export interface SlideoutProps extends ComponentProps {
7
7
  children?: ComponentChildren;
8
8
  active?: boolean;
9
9
  buttonContent?: string | JSX.Element;
10
+ noButtonWrapper?: boolean;
10
11
  width?: string;
11
12
  displayAt?: string;
12
13
  transitionSpeed?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqE/D;AAiCD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
1
+ {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0F/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
@@ -46,14 +46,13 @@ var CSS = {
46
46
  });
47
47
  },
48
48
  };
49
- var buttonClass = 'ss__slideout__button';
50
49
  function Slideout(properties) {
51
50
  var _a, _b, _c, _d;
52
51
  var globalTheme = (0, providers_1.useTheme)();
53
52
  var props = __assign(__assign(__assign({
54
53
  // default props
55
- active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: (0, react_1.jsx)("div", { className: buttonClass }, "click me"), overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
56
- var children = props.children, active = props.active, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, buttonContent = props.buttonContent, disableStyles = props.disableStyles, className = props.className, style = props.style;
54
+ active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: 'click me', overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
55
+ var children = props.children, active = props.active, buttonContent = props.buttonContent, noButtonWrapper = props.noButtonWrapper, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, disableStyles = props.disableStyles, className = props.className, style = props.style;
57
56
  var subProps = {
58
57
  overlay: __assign(__assign(__assign({
59
58
  // default props
@@ -83,35 +82,9 @@ function Slideout(properties) {
83
82
  styling.css = [style];
84
83
  }
85
84
  return isVisible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
86
- (0, react_1.jsx)(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
85
+ buttonContent &&
86
+ (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive })) : ((0, react_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); } }, (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive })))),
87
87
  (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
88
88
  (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
89
89
  }
90
90
  exports.Slideout = Slideout;
91
- var ButtonContent = function (props) {
92
- var content = props.content, toggleActive = props.toggleActive;
93
- if (content && typeof content == 'string') {
94
- return ((0, react_1.jsx)("div", { className: buttonClass, onClick: function () { return toggleActive(); } }, content));
95
- }
96
- else if (content && typeof content == 'object') {
97
- var clone = (0, utilities_1.cloneWithProps)(content, {
98
- onClick: function () { return toggleActive(); },
99
- });
100
- if (clone.props.class || clone.props.className) {
101
- // check if class
102
- if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
103
- clone.props.class = "".concat(clone.props.class, " ").concat(buttonClass);
104
- }
105
- // check if classname
106
- if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
107
- clone.props.className = "".concat(clone.props.className, " ").concat(buttonClass);
108
- }
109
- }
110
- else {
111
- clone.props.className = clone.props.class = buttonClass;
112
- }
113
- return clone;
114
- }
115
- else
116
- return (0, react_1.jsx)(preact_1.Fragment, null);
117
- };
@@ -164,6 +164,20 @@ declare const _default: {
164
164
  type: string;
165
165
  };
166
166
  };
167
+ noButtonWrapper: {
168
+ description: string;
169
+ table: {
170
+ type: {
171
+ summary: string;
172
+ };
173
+ defaultValue: {
174
+ summary: boolean;
175
+ };
176
+ };
177
+ control: {
178
+ type: string;
179
+ };
180
+ };
167
181
  };
168
182
  };
169
183
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrD,wBA4FE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;CAI1C,CAAC"}
1
+ {"version":3,"file":"Slideout.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrD,wBAsGE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;CAI1C,CAAC"}
@@ -99,6 +99,15 @@ exports.default = {
99
99
  defaultValue: { summary: 'rgba(0,0,0,0.8)' },
100
100
  },
101
101
  control: { type: 'color' },
102
+ }, noButtonWrapper: {
103
+ description: 'Prevent the wrapper element from rendering (this element has the onClick handler to toggle the state)',
104
+ table: {
105
+ type: {
106
+ summary: 'boolean',
107
+ },
108
+ defaultValue: { summary: false },
109
+ },
110
+ control: { type: 'boolean' },
102
111
  } }, utilities_1.componentArgs),
103
112
  };
104
113
  var Default = function (args) { return ((0, preact_1.h)(Slideout_1.Slideout, __assign({}, args),
@@ -12,10 +12,15 @@ export interface AutocompleteProps extends ComponentProps {
12
12
  hideContent?: boolean;
13
13
  hideBanners?: boolean;
14
14
  hideLink?: boolean;
15
+ hideHistory?: boolean;
16
+ hideTrending?: boolean;
17
+ retainHistory?: boolean;
18
+ retainTrending?: boolean;
15
19
  horizontalTerms?: boolean;
16
20
  vertical?: boolean;
17
21
  termsTitle?: string;
18
22
  trendingTitle?: string;
23
+ historyTitle?: string;
19
24
  facetsTitle?: string;
20
25
  contentTitle?: string;
21
26
  viewportMaxHeight?: boolean;
@@ -27,7 +32,7 @@ export interface AutocompleteProps extends ComponentProps {
27
32
  linkSlot?: JSX.Element;
28
33
  breakpoints?: BreakpointsProps;
29
34
  width?: string;
30
- onFacetOptionClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
31
- onTermClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
35
+ onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
36
+ onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
32
37
  }
33
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;AAmJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAkY/E,CAAC;AAkCH,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,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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"}
@@ -53,7 +53,7 @@ var CSS = {
53
53
  '&.ss__autocomplete--only-terms': {
54
54
  width: "".concat(vertical || horizontalTerms || contentSlotExists ? width : '150px'),
55
55
  },
56
- '.ss__autocomplete__title--trending': {
56
+ '.ss__autocomplete__title--trending, .ss__autocomplete__title--history, .ss__autocomplete__title--terms': {
57
57
  fontWeight: 'normal',
58
58
  margin: 0,
59
59
  color: '#c5c5c5',
@@ -68,6 +68,8 @@ var CSS = {
68
68
  order: vertical ? 2 : undefined,
69
69
  },
70
70
  '& .ss__autocomplete__terms': {
71
+ display: 'flex',
72
+ flexDirection: 'column',
71
73
  flex: "1 1 auto",
72
74
  maxWidth: "".concat(vertical || horizontalTerms ? 'auto' : '150px'),
73
75
  order: 1,
@@ -156,7 +158,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
156
158
  var globalTheme = (0, providers_1.useTheme)();
157
159
  var props = __assign(__assign(__assign({
158
160
  // default props
159
- termsTitle: '', trendingTitle: 'Popular Searches', facetsTitle: '', contentTitle: '', width: '100%' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.autocomplete), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.autocomplete);
161
+ termsTitle: '', trendingTitle: 'Popular Searches', historyTitle: 'Previously Searched', facetsTitle: '', contentTitle: '', width: '100%' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.autocomplete), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.autocomplete);
160
162
  //passed in or default breakpoints result props
161
163
  var breakpoints = props.breakpoints || {
162
164
  0: {
@@ -164,11 +166,15 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
164
166
  rows: 1,
165
167
  hideFacets: props.hideFacets || true,
166
168
  vertical: props.vertical || true,
169
+ hideHistory: props.hideHistory || true,
170
+ hideTrending: props.hideTrending || true,
167
171
  },
168
172
  540: {
169
173
  columns: 3,
170
174
  rows: 1,
171
175
  vertical: props.vertical || true,
176
+ hideHistory: props.hideHistory || true,
177
+ hideTrending: props.hideTrending || true,
172
178
  },
173
179
  768: {
174
180
  columns: 2,
@@ -188,6 +194,16 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
188
194
  clearTimeout(delayTimeout);
189
195
  },
190
196
  };
197
+ var facetClickEvent = function (e) {
198
+ properties.onFacetOptionClick && properties.onFacetOptionClick(e);
199
+ // remove focus from input (close the autocomplete)
200
+ (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
201
+ };
202
+ var termClickEvent = function (e) {
203
+ properties.onTermClick && properties.onTermClick(e);
204
+ // remove focus from input (close the autocomplete)
205
+ (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
206
+ };
191
207
  var themeOverride = {
192
208
  components: {
193
209
  facet: {
@@ -199,21 +215,21 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
199
215
  },
200
216
  facetGridOptions: {
201
217
  columns: 3,
202
- onClick: properties.onFacetOptionClick,
218
+ onClick: facetClickEvent,
203
219
  },
204
220
  facetHierarchyOptions: {
205
221
  hideCount: true,
206
- onClick: properties.onFacetOptionClick,
222
+ onClick: facetClickEvent,
207
223
  },
208
224
  facetListOptions: {
209
225
  hideCheckbox: true,
210
226
  hideCount: true,
211
- onClick: properties.onFacetOptionClick,
227
+ onClick: facetClickEvent,
212
228
  },
213
229
  facetPaletteOptions: {
214
230
  hideLabel: true,
215
231
  columns: 3,
216
- onClick: properties.onFacetOptionClick,
232
+ onClick: facetClickEvent,
217
233
  },
218
234
  result: {
219
235
  hideBadge: true,
@@ -232,7 +248,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
232
248
  var rect = input === null || input === void 0 ? void 0 : input.getBoundingClientRect();
233
249
  inputViewportOffsetBottom = (rect === null || rect === void 0 ? void 0 : rect.bottom) || 0;
234
250
  }
235
- var hideTerms = props.hideTerms, hideFacets = props.hideFacets, hideContent = props.hideContent, hideBanners = props.hideBanners, hideLink = props.hideLink, horizontalTerms = props.horizontalTerms, vertical = props.vertical, termsTitle = props.termsTitle, trendingTitle = props.trendingTitle, facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, viewportMaxHeight = props.viewportMaxHeight, termsSlot = props.termsSlot, facetsSlot = props.facetsSlot, contentSlot = props.contentSlot, resultsSlot = props.resultsSlot, noResultsSlot = props.noResultsSlot, linkSlot = props.linkSlot, onTermClick = props.onTermClick, disableStyles = props.disableStyles, className = props.className, width = props.width, style = props.style, controller = props.controller;
251
+ var hideTerms = props.hideTerms, hideFacets = props.hideFacets, hideContent = props.hideContent, hideBanners = props.hideBanners, hideLink = props.hideLink, hideHistory = props.hideHistory, hideTrending = props.hideTrending, retainTrending = props.retainTrending, retainHistory = props.retainHistory, horizontalTerms = props.horizontalTerms, vertical = props.vertical, termsTitle = props.termsTitle, trendingTitle = props.trendingTitle, historyTitle = props.historyTitle, facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, viewportMaxHeight = props.viewportMaxHeight, termsSlot = props.termsSlot, facetsSlot = props.facetsSlot, contentSlot = props.contentSlot, resultsSlot = props.resultsSlot, noResultsSlot = props.noResultsSlot, linkSlot = props.linkSlot, onTermClick = props.onTermClick, disableStyles = props.disableStyles, className = props.className, width = props.width, style = props.style, controller = props.controller;
236
252
  var subProps = {
237
253
  facets: __assign(__assign(__assign({
238
254
  // default props
@@ -262,6 +278,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
262
278
  theme: props.theme }),
263
279
  };
264
280
  var _o = controller.store, search = _o.search, terms = _o.terms, trending = _o.trending, results = _o.results, merchandising = _o.merchandising, pagination = _o.pagination, loaded = _o.loaded, filters = _o.filters, facets = _o.facets, state = _o.state;
281
+ var history = controller.store.history || [];
265
282
  // you can pass in a selector or the actual input element,
266
283
  // if its the selector, we need to bind it to the controller here.
267
284
  if (controller && typeof input == 'string') {
@@ -271,17 +288,33 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
271
288
  controller.bind();
272
289
  }, []);
273
290
  }
274
- var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (state.input && controller.store.loaded));
291
+ var visible = Boolean(input === state.focusedInput) &&
292
+ (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (history === null || history === void 0 ? void 0 : history.length) > 0 || (state.input && controller.store.loaded));
275
293
  var showTrending = false;
276
- if (!results.length && !state.input && (trending === null || trending === void 0 ? void 0 : trending.length)) {
294
+ if ((trending === null || trending === void 0 ? void 0 : trending.length) && (retainTrending || (!results.length && !state.input))) {
277
295
  showTrending = true;
278
296
  }
279
297
  else if ((trending === null || trending === void 0 ? void 0 : trending.length) && !terms.length) {
280
298
  // has results and trending -> show trending terms while term load
281
299
  showTrending = true;
282
300
  }
301
+ var showHistory = false;
302
+ if ((history === null || history === void 0 ? void 0 : history.length) && (retainHistory || (!results.length && !state.input))) {
303
+ showHistory = true;
304
+ }
305
+ else if ((history === null || history === void 0 ? void 0 : history.length) && !terms.length) {
306
+ // has results and trending -> show trending terms while term load
307
+ showHistory = true;
308
+ }
283
309
  var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
284
- var onlyTerms = (trending === null || trending === void 0 ? void 0 : trending.length) && !loaded;
310
+ var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded;
311
+ // results logic
312
+ var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
313
+ var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
314
+ var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
315
+ if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
316
+ showResults = false;
317
+ }
285
318
  var styling = {};
286
319
  if (!disableStyles) {
287
320
  styling.css = [
@@ -289,7 +322,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
289
322
  inputViewportOffsetBottom: inputViewportOffsetBottom,
290
323
  hideFacets: hideFacets,
291
324
  horizontalTerms: horizontalTerms,
292
- noResults: Boolean(((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string) && results.length === 0),
325
+ noResults: Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0),
293
326
  contentSlotExists: Boolean(contentSlot),
294
327
  viewportMaxHeight: viewportMaxHeight,
295
328
  vertical: vertical,
@@ -304,21 +337,40 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
304
337
  }
305
338
  return visible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
306
339
  (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: function (e) { return e.stopPropagation(); } }),
307
- !hideTerms && (showTrending || terms.length > 0 || termsSlot) && ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, { terms: terms, trending: trending, termsTitle: termsTitle, trendingTitle: trendingTitle, showTrending: showTrending, valueProps: valueProps, emIfy: emIfy, onTermClick: onTermClick, controller: controller })) : ((0, react_1.jsx)(preact_1.Fragment, null,
308
- terms.length > 0 ? ((0, react_1.jsx)(preact_1.Fragment, null,
309
- termsTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
340
+ !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
341
+ terms: terms,
342
+ trending: trending,
343
+ termsTitle: termsTitle,
344
+ trendingTitle: trendingTitle,
345
+ showTrending: showTrending,
346
+ history: history,
347
+ historyTitle: historyTitle,
348
+ valueProps: valueProps,
349
+ emIfy: emIfy,
350
+ onTermClick: onTermClick,
351
+ controller: controller,
352
+ })) : ((0, react_1.jsx)(preact_1.Fragment, null,
353
+ terms.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__suggestions" },
354
+ termsTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
310
355
  (0, react_1.jsx)("h5", null, termsTitle))) : null,
311
356
  (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, terms.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
312
357
  'ss__autocomplete__terms__option--active': term.active,
313
358
  }) },
314
- (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
315
- showTrending ? ((0, react_1.jsx)(preact_1.Fragment, null,
359
+ (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
360
+ showTrending && !hideTrending ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__trending" },
316
361
  trendingTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
317
362
  (0, react_1.jsx)("h5", null, trendingTitle))) : null,
318
363
  (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, trending.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
319
364
  'ss__autocomplete__terms__option--active': term.active,
320
365
  }) },
321
- (0, react_1.jsx)("a", __assign({ onClick: function (e) { return onTermClick && onTermClick(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null)))),
366
+ (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null,
367
+ showHistory && !hideHistory ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__history" },
368
+ historyTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
369
+ (0, react_1.jsx)("h5", null, historyTitle))) : null,
370
+ (0, react_1.jsx)("div", { className: "ss__autocomplete__terms__options" }, history.map(function (term) { return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
371
+ 'ss__autocomplete__terms__option--active': term.active,
372
+ }) },
373
+ (0, react_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, valueProps, { onFocus: function () { return term.preview(); } }), emIfy(term.value, state.input || '')))); })))) : null)))),
322
374
  !hideFacets &&
323
375
  (facetsSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__facets" }, (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps }))) : (facetsToShow.length > 0 && ((0, react_1.jsx)(preact_1.Fragment, null,
324
376
  facetsTitle && vertical ? ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
@@ -328,7 +380,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
328
380
  (0, react_1.jsx)("h5", null, facetsTitle))) : null,
329
381
  (0, react_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })),
330
382
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT })) : null))))),
331
- !hideContent ? (contentSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" }, (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" },
383
+ !hideContent ? (contentSlot ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" }, (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller }))) : showResults ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content" },
332
384
  (0, react_1.jsx)(preact_1.Fragment, null,
333
385
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER })) : null,
334
386
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER })) : null,
@@ -343,7 +395,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
343
395
  (0, react_1.jsx)("p", null, "Please try another search."))))),
344
396
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER })) : null,
345
397
  !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller })) : ((_m = search === null || search === void 0 ? void 0 : search.query) === null || _m === void 0 ? void 0 : _m.string) && results.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__content__info" },
346
- (0, react_1.jsx)("a", { href: state.url.href },
398
+ (0, react_1.jsx)("a", { href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } },
347
399
  "See ",
348
400
  pagination.totalResults,
349
401
  " ",
@@ -356,14 +408,16 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
356
408
  (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon))))) : null) : null))) : null) : null))) : ((0, react_1.jsx)(preact_1.Fragment, null));
357
409
  });
358
410
  var emIfy = function (term, search) {
359
- var match = term.match(escapeRegExp(search));
360
- if (search && term && match && match.index) {
361
- var beforeMatch = term.slice(0, match.index);
362
- var afterMatch = term.slice(match.index + search.length, term.length);
363
- return ((0, react_1.jsx)(preact_1.Fragment, null,
364
- beforeMatch ? (0, react_1.jsx)("em", null, beforeMatch) : '',
365
- search,
366
- afterMatch ? (0, react_1.jsx)("em", null, afterMatch) : ''));
411
+ if (term && search) {
412
+ var match = term.match(escapeRegExp(search));
413
+ if (search && term && match && match.index) {
414
+ var beforeMatch = term.slice(0, match.index);
415
+ var afterMatch = term.slice(match.index + search.length, term.length);
416
+ return ((0, react_1.jsx)(preact_1.Fragment, null,
417
+ beforeMatch ? (0, react_1.jsx)("em", null, beforeMatch) : '',
418
+ search,
419
+ afterMatch ? (0, react_1.jsx)("em", null, afterMatch) : ''));
420
+ }
367
421
  }
368
422
  return ((0, react_1.jsx)(preact_1.Fragment, null,
369
423
  (0, react_1.jsx)("em", null, term)));
@@ -123,6 +123,66 @@ declare const _default: {
123
123
  type: string;
124
124
  };
125
125
  };
126
+ hideHistory: {
127
+ defaultValue: boolean;
128
+ description: string;
129
+ table: {
130
+ type: {
131
+ summary: string;
132
+ };
133
+ defaultValue: {
134
+ summary: boolean;
135
+ };
136
+ };
137
+ control: {
138
+ type: string;
139
+ };
140
+ };
141
+ hideTrending: {
142
+ defaultValue: boolean;
143
+ description: string;
144
+ table: {
145
+ type: {
146
+ summary: string;
147
+ };
148
+ defaultValue: {
149
+ summary: boolean;
150
+ };
151
+ };
152
+ control: {
153
+ type: string;
154
+ };
155
+ };
156
+ retainHistory: {
157
+ defaultValue: boolean;
158
+ description: string;
159
+ table: {
160
+ type: {
161
+ summary: string;
162
+ };
163
+ defaultValue: {
164
+ summary: boolean;
165
+ };
166
+ };
167
+ control: {
168
+ type: string;
169
+ };
170
+ };
171
+ retainTrending: {
172
+ defaultValue: boolean;
173
+ description: string;
174
+ table: {
175
+ type: {
176
+ summary: string;
177
+ };
178
+ defaultValue: {
179
+ summary: boolean;
180
+ };
181
+ };
182
+ control: {
183
+ type: string;
184
+ };
185
+ };
126
186
  hideFacets: {
127
187
  defaultValue: boolean;
128
188
  description: string;
@@ -243,6 +303,21 @@ declare const _default: {
243
303
  type: string;
244
304
  };
245
305
  };
306
+ historyTitle: {
307
+ defaultValue: string;
308
+ description: string;
309
+ table: {
310
+ type: {
311
+ summary: string;
312
+ };
313
+ defaultValue: {
314
+ summary: string;
315
+ };
316
+ };
317
+ control: {
318
+ type: string;
319
+ };
320
+ };
246
321
  facetsTitle: {
247
322
  defaultValue: string;
248
323
  description: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgBlE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwRE;AAeF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAM1H,CAAC"}
1
+ {"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAY,MAAM,QAAQ,CAAC;AAIrC,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgBlE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA+UE;AAeF,eAAO,MAAM,OAAO;WAAU,iBAAiB;;wBAAsD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAM1H,CAAC"}