@searchspring/snap-preact-components 0.23.1 → 0.25.1

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 (53) hide show
  1. package/dist/cjs/components/Atoms/Skeleton/Skeleton.stories.js +1 -1
  2. package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.d.ts +14 -0
  3. package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.d.ts.map +1 -1
  4. package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.js +9 -0
  5. package/dist/cjs/components/Molecules/ErrorHandler/ErrorHandler.js +1 -1
  6. package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts +1 -0
  7. package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
  8. package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.js +1 -0
  9. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts +1 -2
  10. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  11. package/dist/cjs/components/Molecules/Slideout/Slideout.js +0 -1
  12. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +3 -3
  13. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +2 -1
  14. package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  15. package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +12 -12
  16. package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.d.ts +14 -0
  17. package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.d.ts.map +1 -1
  18. package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.js +9 -0
  19. package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
  20. package/dist/cjs/components/Organisms/Results/Results.js +15 -15
  21. package/dist/cjs/components/Organisms/Results/Results.stories.d.ts +14 -1
  22. package/dist/cjs/components/Organisms/Results/Results.stories.d.ts.map +1 -1
  23. package/dist/cjs/components/Organisms/Results/Results.stories.js +14 -1
  24. package/dist/cjs/mocks/searchResponse.d.ts +25 -0
  25. package/dist/cjs/mocks/searchResponse.d.ts.map +1 -1
  26. package/dist/cjs/mocks/searchResponse.js +106 -1
  27. package/dist/esm/components/Atoms/Skeleton/Skeleton.stories.js +1 -1
  28. package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts +14 -0
  29. package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts.map +1 -1
  30. package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.js +10 -0
  31. package/dist/esm/components/Molecules/ErrorHandler/ErrorHandler.js +2 -2
  32. package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts +1 -0
  33. package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
  34. package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.js +1 -0
  35. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts +1 -2
  36. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  37. package/dist/esm/components/Molecules/Slideout/Slideout.js +1 -3
  38. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +3 -3
  39. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +2 -1
  40. package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
  41. package/dist/esm/components/Organisms/Recommendation/Recommendation.js +12 -12
  42. package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.d.ts +14 -0
  43. package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.d.ts.map +1 -1
  44. package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.js +10 -0
  45. package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
  46. package/dist/esm/components/Organisms/Results/Results.js +15 -15
  47. package/dist/esm/components/Organisms/Results/Results.stories.d.ts +14 -1
  48. package/dist/esm/components/Organisms/Results/Results.stories.d.ts.map +1 -1
  49. package/dist/esm/components/Organisms/Results/Results.stories.js +14 -1
  50. package/dist/esm/mocks/searchResponse.d.ts +25 -0
  51. package/dist/esm/mocks/searchResponse.d.ts.map +1 -1
  52. package/dist/esm/mocks/searchResponse.js +105 -0
  53. package/package.json +11 -11
@@ -20,7 +20,7 @@ var preact_1 = require("preact");
20
20
  var blocks_1 = require("@storybook/addon-docs/blocks");
21
21
  var utilities_1 = require("../../../utilities");
22
22
  var Skeleton_1 = require("./Skeleton");
23
- var readme_md_1 = __importDefault(require("../Badge/readme.md"));
23
+ var readme_md_1 = __importDefault(require("../Skeleton/readme.md"));
24
24
  exports.default = {
25
25
  title: "Atoms/Skeleton",
26
26
  component: Skeleton_1.Skeleton,
@@ -150,6 +150,20 @@ declare const _default: {
150
150
  type: string;
151
151
  };
152
152
  };
153
+ startChecked: {
154
+ description: string;
155
+ table: {
156
+ type: {
157
+ summary: string;
158
+ };
159
+ defaultValue: {
160
+ summary: boolean;
161
+ };
162
+ };
163
+ control: {
164
+ type: string;
165
+ };
166
+ };
153
167
  native: {
154
168
  description: string;
155
169
  table: {
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAoGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
1
+ {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
@@ -99,6 +99,15 @@ exports.default = {
99
99
  defaultValue: { summary: 'theme.colors.primary' },
100
100
  },
101
101
  control: { type: 'color' },
102
+ }, startChecked: {
103
+ description: 'Checkbox is checked initially(managed state)',
104
+ table: {
105
+ type: {
106
+ summary: 'boolean',
107
+ },
108
+ defaultValue: { summary: false },
109
+ },
110
+ control: { type: 'boolean' },
102
111
  }, native: {
103
112
  description: 'Render as unstyled native checkbox',
104
113
  table: {
@@ -89,7 +89,7 @@ exports.ErrorHandler = (0, mobx_react_lite_1.observer)(function (properties) {
89
89
  var _a, _b, _c, _d, _e, _f;
90
90
  var globalTheme = (0, providers_1.useTheme)();
91
91
  var theme = __assign(__assign({}, globalTheme), properties.theme);
92
- var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.carousel), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.carousel);
92
+ var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.errorHandler), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.errorHandler);
93
93
  var controller = props.controller, error = props.error, disableStyles = props.disableStyles, style = props.style, onRetryClick = props.onRetryClick, className = props.className;
94
94
  var subProps = {
95
95
  icon: __assign(__assign(__assign({
@@ -93,6 +93,7 @@ declare const _default: {
93
93
  };
94
94
  };
95
95
  tickSize: {
96
+ defaultValue: number;
96
97
  description: string;
97
98
  table: {
98
99
  type: {
@@ -1 +1 @@
1
- {"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAuIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
1
+ {"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAwIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
@@ -54,6 +54,7 @@ exports.default = {
54
54
  },
55
55
  control: { type: 'boolean' },
56
56
  }, tickSize: {
57
+ defaultValue: 20,
57
58
  description: 'distance between ticks',
58
59
  table: {
59
60
  type: {
@@ -11,6 +11,5 @@ export interface SlideoutProps extends ComponentProps {
11
11
  overlayColor?: string;
12
12
  slideDirection?: SlideDirectionType;
13
13
  }
14
- declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
15
- export {};
14
+ export declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
16
15
  //# sourceMappingURL=Slideout.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0BhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,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,aAAK,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":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAyBhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,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"}
@@ -25,7 +25,6 @@ var Overlay_1 = require("../../Atoms/Overlay");
25
25
  var CSS = {
26
26
  slideout: function (_a) {
27
27
  var isActive = _a.isActive, width = _a.width, transitionSpeed = _a.transitionSpeed, slideDirection = _a.slideDirection;
28
- //@ts-ignore
29
28
  return (0, react_1.css)({
30
29
  display: 'block',
31
30
  position: 'fixed',
@@ -147,13 +147,13 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
147
147
  0: {
148
148
  columns: 2,
149
149
  rows: 1,
150
- hideFacets: true,
151
- vertical: true,
150
+ hideFacets: props.hideFacets || true,
151
+ vertical: props.vertical || true,
152
152
  },
153
153
  540: {
154
154
  columns: 3,
155
155
  rows: 1,
156
- vertical: true,
156
+ vertical: props.vertical || true,
157
157
  },
158
158
  768: {
159
159
  columns: 2,
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { RecommendationController } from '@searchspring/snap-controller';
3
- import { ComponentProps, BreakpointsProps } from '../../../types';
3
+ import { ComponentProps, BreakpointsProps, Result as ResultType, InlineBannerContent } from '../../../types';
4
4
  export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
5
5
  displayName: string;
6
6
  };
@@ -11,6 +11,7 @@ export interface RecommendationProps extends ComponentProps {
11
11
  nextButton?: JSX.Element | string;
12
12
  hideButtons?: boolean;
13
13
  loop?: boolean;
14
+ results?: ResultType[] | InlineBannerContent[];
14
15
  pagination?: boolean;
15
16
  controller: RecommendationController;
16
17
  children?: JSX.Element[];
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAoKnF,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,IAAI,UAAU,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAc7G,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAuKnF,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,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
@@ -59,15 +59,15 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
59
59
  var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
60
60
  props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
61
61
  }
62
- var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
62
+ var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
63
63
  if (!controller || controller.type !== 'recommendation') {
64
64
  throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
65
65
  }
66
- if (children && children.length !== controller.store.results.length) {
67
- controller.log.error("<Recommendation> Component received invalid number of children");
66
+ var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
67
+ if (children && children.length !== resultsToRender.length) {
68
+ controller.log.error("<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'");
68
69
  return;
69
70
  }
70
- var results = (_d = controller.store) === null || _d === void 0 ? void 0 : _d.results;
71
71
  var subProps = {
72
72
  carousel: __assign(__assign(__assign({
73
73
  // default props
@@ -93,13 +93,13 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
93
93
  return;
94
94
  var resultLoopCount = [index, index + count];
95
95
  var resultLoopOverCount;
96
- if (index + count > results.length - 1) {
96
+ if (index + count > resultsToRender.length - 1) {
97
97
  resultLoopCount = [index];
98
- resultLoopOverCount = [0, index + count - results.length];
98
+ resultLoopOverCount = [0, index + count - resultsToRender.length];
99
99
  }
100
- var resultsImpressions = results.slice.apply(results, resultLoopCount);
100
+ var resultsImpressions = resultsToRender.slice.apply(resultsToRender, resultLoopCount);
101
101
  if (resultLoopOverCount) {
102
- resultsImpressions = resultsImpressions.concat(results.slice.apply(results, resultLoopOverCount));
102
+ resultsImpressions = resultsImpressions.concat(resultsToRender.slice.apply(resultsToRender, resultLoopOverCount));
103
103
  }
104
104
  resultsImpressions.map(function (result) {
105
105
  controller.track.product.impression(result);
@@ -109,7 +109,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
109
109
  controller.track.impression();
110
110
  sendProductImpression(initialIndexes[0], initialIndexes[1]);
111
111
  }
112
- (children || results.length) && ((_g = controller === null || controller === void 0 ? void 0 : controller.track) === null || _g === void 0 ? void 0 : _g.render());
112
+ (children || resultsToRender.length) && ((_g = controller === null || controller === void 0 ? void 0 : controller.track) === null || _g === void 0 ? void 0 : _g.render());
113
113
  var styling = {};
114
114
  if (!disableStyles) {
115
115
  styling.css = [CSS.recommendation({ vertical: vertical }), style];
@@ -117,7 +117,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
117
117
  else if (style) {
118
118
  styling.css = [style];
119
119
  }
120
- return ((children || (results === null || results === void 0 ? void 0 : results.length)) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
120
+ return ((children || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length)) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
121
121
  (0, react_1.jsx)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__recommendation', className) }),
122
122
  title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
123
123
  (0, react_1.jsx)(Carousel_1.Carousel, __assign({ onInit: function (swiper) {
@@ -133,9 +133,9 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
133
133
  var clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
134
134
  controller.track.click(e);
135
135
  if (!Number.isNaN(clickedIndex)) {
136
- controller.track.product.click(e, results[clickedIndex]);
136
+ controller.track.product.click(e, resultsToRender[clickedIndex]);
137
137
  }
138
138
  }, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), children
139
139
  ? children.map(function (child) { return child; })
140
- : results.map(function (result) { return (0, react_1.jsx)(Result_1.Result, __assign({ controller: controller, result: result }, subProps.result)); }))))));
140
+ : resultsToRender.map(function (result) { return (0, react_1.jsx)(Result_1.Result, __assign({ controller: controller, result: result }, subProps.result)); }))))));
141
141
  });
@@ -106,6 +106,20 @@ declare const _default: {
106
106
  type: string;
107
107
  };
108
108
  };
109
+ results: {
110
+ description: string;
111
+ type: {
112
+ required: boolean;
113
+ };
114
+ table: {
115
+ type: {
116
+ summary: string;
117
+ };
118
+ };
119
+ control: {
120
+ type: string;
121
+ };
122
+ };
109
123
  pagination: {
110
124
  defaultValue: boolean;
111
125
  description: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAyHE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
1
+ {"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAmIE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
@@ -102,6 +102,15 @@ exports.default = {
102
102
  defaultValue: { summary: true },
103
103
  },
104
104
  control: { type: 'boolean' },
105
+ }, results: {
106
+ description: 'Results store reference, overrides controller.store.results',
107
+ type: { required: false },
108
+ table: {
109
+ type: {
110
+ summary: 'Results store object',
111
+ },
112
+ },
113
+ control: { type: 'none' },
105
114
  }, pagination: {
106
115
  defaultValue: false,
107
116
  description: 'Display pagination dots',
@@ -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;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsD7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAoFpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,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;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuC7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAmGpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,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"}
@@ -58,23 +58,23 @@ var CSS = {
58
58
  });
59
59
  },
60
60
  };
61
- var defaultBreakpointsProps = {
62
- 0: {
63
- columns: 1,
64
- },
65
- 540: {
66
- columns: 2,
67
- },
68
- 768: {
69
- columns: 3,
70
- },
71
- 991: {
72
- columns: 4,
73
- },
74
- };
75
61
  exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
76
62
  var _a, _b, _c, _d, _e, _f, _g;
77
63
  var globalTheme = (0, providers_1.useTheme)();
64
+ var defaultBreakpointsProps = {
65
+ 0: {
66
+ columns: properties.columns || 1,
67
+ },
68
+ 540: {
69
+ columns: properties.columns || 2,
70
+ },
71
+ 768: {
72
+ columns: properties.columns || 3,
73
+ },
74
+ 991: {
75
+ columns: properties.columns || 4,
76
+ },
77
+ };
78
78
  var props = __assign(__assign(__assign({
79
79
  // default props
80
80
  results: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.results, columns: 4, gapSize: '20px', layout: types_1.Layout.GRID, breakpoints: defaultBreakpointsProps }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.results), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.results);
@@ -114,7 +114,7 @@ exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
114
114
  styling.css = [style];
115
115
  }
116
116
  return (results === null || results === void 0 ? void 0 : results.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
117
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', className) }), results.map(function (result) {
117
+ (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) {
118
118
  return (function () {
119
119
  switch (result.type) {
120
120
  case types_1.BannerType.BANNER:
@@ -133,7 +133,20 @@ declare const _default: {
133
133
  };
134
134
  };
135
135
  breakpoints: {
136
- defaultValue: {};
136
+ defaultValue: {
137
+ 0: {
138
+ columns: number;
139
+ };
140
+ 540: {
141
+ columns: number;
142
+ };
143
+ 768: {
144
+ columns: number;
145
+ };
146
+ 991: {
147
+ columns: number;
148
+ };
149
+ };
137
150
  description: string;
138
151
  table: {
139
152
  type: {
@@ -1 +1 @@
1
- {"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAqGE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
1
+ {"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAkHE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
@@ -123,7 +123,20 @@ exports.default = {
123
123
  },
124
124
  control: { type: 'text' },
125
125
  }, breakpoints: {
126
- defaultValue: {},
126
+ defaultValue: {
127
+ 0: {
128
+ columns: 1,
129
+ },
130
+ 540: {
131
+ columns: 2,
132
+ },
133
+ 768: {
134
+ columns: 3,
135
+ },
136
+ 991: {
137
+ columns: 4,
138
+ },
139
+ },
127
140
  description: 'Breakpoints options object',
128
141
  table: {
129
142
  type: {
@@ -1438,4 +1438,29 @@ export declare const badSearchResponse: {
1438
1438
  content: {};
1439
1439
  };
1440
1440
  };
1441
+ export declare const facetOverflowMock: {
1442
+ type: string;
1443
+ field: string;
1444
+ filtered: boolean;
1445
+ custom: {};
1446
+ collapsed: boolean;
1447
+ display: string;
1448
+ label: string;
1449
+ values: {
1450
+ filtered: boolean;
1451
+ value: string;
1452
+ label: string;
1453
+ count: number;
1454
+ }[];
1455
+ multiple: string;
1456
+ overflow: {
1457
+ enabled: boolean;
1458
+ limited: boolean;
1459
+ limit: number;
1460
+ remaining: number;
1461
+ setLimit: () => void;
1462
+ toggle: () => void;
1463
+ calculate: () => void;
1464
+ };
1465
+ };
1441
1466
  //# sourceMappingURL=searchResponse.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC"}
1
+ {"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwG7B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.badSearchResponse = exports.searchResponse = exports.sliderFacetMock = exports.hierarchyFacetFilteredMock = exports.hierarchyFacetMock = exports.paletteFacetMock = exports.listFacetMock = exports.gridFacetMock = void 0;
3
+ exports.facetOverflowMock = exports.badSearchResponse = exports.searchResponse = exports.sliderFacetMock = exports.hierarchyFacetFilteredMock = exports.hierarchyFacetMock = exports.paletteFacetMock = exports.listFacetMock = exports.gridFacetMock = void 0;
4
4
  exports.gridFacetMock = {
5
5
  field: 'size',
6
6
  label: 'Size',
@@ -2981,3 +2981,108 @@ exports.badSearchResponse = {
2981
2981
  content: {},
2982
2982
  },
2983
2983
  };
2984
+ exports.facetOverflowMock = {
2985
+ type: 'value',
2986
+ field: 'color_family',
2987
+ filtered: false,
2988
+ custom: {},
2989
+ collapsed: false,
2990
+ display: 'palette',
2991
+ label: 'Color',
2992
+ values: [
2993
+ {
2994
+ filtered: false,
2995
+ value: 'Blue',
2996
+ label: 'Blue',
2997
+ count: 755,
2998
+ },
2999
+ {
3000
+ filtered: false,
3001
+ value: 'White',
3002
+ label: 'White',
3003
+ count: 673,
3004
+ },
3005
+ {
3006
+ filtered: false,
3007
+ value: 'Pink',
3008
+ label: 'Pink',
3009
+ count: 530,
3010
+ },
3011
+ {
3012
+ filtered: false,
3013
+ value: 'Beige',
3014
+ label: 'Beige',
3015
+ count: 316,
3016
+ },
3017
+ {
3018
+ filtered: false,
3019
+ value: 'Black',
3020
+ label: 'Black',
3021
+ count: 366,
3022
+ },
3023
+ {
3024
+ filtered: false,
3025
+ value: 'Gray',
3026
+ label: 'Gray',
3027
+ count: 303,
3028
+ },
3029
+ {
3030
+ filtered: false,
3031
+ value: 'Brown',
3032
+ label: 'Brown',
3033
+ count: 174,
3034
+ },
3035
+ {
3036
+ filtered: false,
3037
+ value: 'Red',
3038
+ label: 'Red',
3039
+ count: 261,
3040
+ },
3041
+ {
3042
+ filtered: false,
3043
+ value: 'Green',
3044
+ label: 'Green',
3045
+ count: 237,
3046
+ },
3047
+ {
3048
+ filtered: false,
3049
+ value: 'Yellow',
3050
+ label: 'Yellow',
3051
+ count: 202,
3052
+ },
3053
+ {
3054
+ filtered: false,
3055
+ value: 'Orange',
3056
+ label: 'Orange',
3057
+ count: 97,
3058
+ },
3059
+ {
3060
+ filtered: false,
3061
+ value: 'Purple',
3062
+ label: 'Purple',
3063
+ count: 79,
3064
+ },
3065
+ {
3066
+ filtered: false,
3067
+ value: 'Black, Grey',
3068
+ label: 'Black, Grey',
3069
+ count: 2,
3070
+ },
3071
+ {
3072
+ filtered: false,
3073
+ value: 'Black, Orange',
3074
+ label: 'Black, Orange',
3075
+ count: 2,
3076
+ },
3077
+ ],
3078
+ multiple: 'or',
3079
+ overflow: {
3080
+ enabled: true,
3081
+ limited: true,
3082
+ limit: 12,
3083
+ remaining: 2,
3084
+ setLimit: function () { },
3085
+ toggle: function () { },
3086
+ calculate: function () { },
3087
+ },
3088
+ };
@@ -3,7 +3,7 @@ import { h } from 'preact';
3
3
  import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
4
4
  import { componentArgs } from '../../../utilities';
5
5
  import { Skeleton } from './Skeleton';
6
- import Readme from '../Badge/readme.md';
6
+ import Readme from '../Skeleton/readme.md';
7
7
  export default {
8
8
  title: `Atoms/Skeleton`,
9
9
  component: Skeleton,
@@ -150,6 +150,20 @@ declare const _default: {
150
150
  type: string;
151
151
  };
152
152
  };
153
+ startChecked: {
154
+ description: string;
155
+ table: {
156
+ type: {
157
+ summary: string;
158
+ };
159
+ defaultValue: {
160
+ summary: boolean;
161
+ };
162
+ };
163
+ control: {
164
+ type: string;
165
+ };
166
+ };
153
167
  native: {
154
168
  description: string;
155
169
  table: {
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAoGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
1
+ {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
@@ -80,6 +80,16 @@ export default {
80
80
  },
81
81
  control: { type: 'color' },
82
82
  },
83
+ startChecked: {
84
+ description: 'Checkbox is checked initially(managed state)',
85
+ table: {
86
+ type: {
87
+ summary: 'boolean',
88
+ },
89
+ defaultValue: { summary: false },
90
+ },
91
+ control: { type: 'boolean' },
92
+ },
83
93
  native: {
84
94
  description: 'Render as unstyled native checkbox',
85
95
  table: {
@@ -69,10 +69,10 @@ export const ErrorHandler = observer((properties) => {
69
69
  const theme = { ...globalTheme, ...properties.theme };
70
70
  const props = {
71
71
  // global theme
72
- ...globalTheme?.components?.carousel,
72
+ ...globalTheme?.components?.errorHandler,
73
73
  //props
74
74
  ...properties,
75
- ...properties.theme?.components?.carousel,
75
+ ...properties.theme?.components?.errorHandler,
76
76
  };
77
77
  const { controller, error, disableStyles, style, onRetryClick, className } = props;
78
78
  const subProps = {
@@ -93,6 +93,7 @@ declare const _default: {
93
93
  };
94
94
  };
95
95
  tickSize: {
96
+ defaultValue: number;
96
97
  description: string;
97
98
  table: {
98
99
  type: {
@@ -1 +1 @@
1
- {"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAuIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
1
+ {"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAwIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
@@ -40,6 +40,7 @@ export default {
40
40
  control: { type: 'boolean' },
41
41
  },
42
42
  tickSize: {
43
+ defaultValue: 20,
43
44
  description: 'distance between ticks',
44
45
  table: {
45
46
  type: {
@@ -11,6 +11,5 @@ export interface SlideoutProps extends ComponentProps {
11
11
  overlayColor?: string;
12
12
  slideDirection?: SlideDirectionType;
13
13
  }
14
- declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
15
- export {};
14
+ export declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
16
15
  //# sourceMappingURL=Slideout.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0BhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,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,aAAK,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":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAyBhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,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"}
@@ -6,9 +6,7 @@ import { useTheme, CacheProvider } from '../../../providers';
6
6
  import { useMediaQuery } from '../../../hooks';
7
7
  import { Overlay } from '../../Atoms/Overlay';
8
8
  const CSS = {
9
- slideout: ({ isActive, width, transitionSpeed, slideDirection }) =>
10
- //@ts-ignore
11
- css({
9
+ slideout: ({ isActive, width, transitionSpeed, slideDirection }) => css({
12
10
  display: 'block',
13
11
  position: 'fixed',
14
12
  transition: `${slideDirection ? slideDirection : 'left'} ${transitionSpeed}`,
@@ -155,13 +155,13 @@ export const Autocomplete = observer((properties) => {
155
155
  0: {
156
156
  columns: 2,
157
157
  rows: 1,
158
- hideFacets: true,
159
- vertical: true,
158
+ hideFacets: props.hideFacets || true,
159
+ vertical: props.vertical || true,
160
160
  },
161
161
  540: {
162
162
  columns: 3,
163
163
  rows: 1,
164
- vertical: true,
164
+ vertical: props.vertical || true,
165
165
  },
166
166
  768: {
167
167
  columns: 2,
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { RecommendationController } from '@searchspring/snap-controller';
3
- import { ComponentProps, BreakpointsProps } from '../../../types';
3
+ import { ComponentProps, BreakpointsProps, Result as ResultType, InlineBannerContent } from '../../../types';
4
4
  export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
5
5
  displayName: string;
6
6
  };
@@ -11,6 +11,7 @@ export interface RecommendationProps extends ComponentProps {
11
11
  nextButton?: JSX.Element | string;
12
12
  hideButtons?: boolean;
13
13
  loop?: boolean;
14
+ results?: ResultType[] | InlineBannerContent[];
14
15
  pagination?: boolean;
15
16
  controller: RecommendationController;
16
17
  children?: JSX.Element[];
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAoKnF,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
1
+ {"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,IAAI,UAAU,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAc7G,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAuKnF,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,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
@@ -39,15 +39,15 @@ export const Recommendation = observer((properties) => {
39
39
  theme,
40
40
  };
41
41
  }
42
- const { title, controller, children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
42
+ const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
43
43
  if (!controller || controller.type !== 'recommendation') {
44
44
  throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
45
45
  }
46
- if (children && children.length !== controller.store.results.length) {
47
- controller.log.error(`<Recommendation> Component received invalid number of children`);
46
+ const resultsToRender = results || controller.store?.results;
47
+ if (children && children.length !== resultsToRender.length) {
48
+ controller.log.error(`<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'`);
48
49
  return;
49
50
  }
50
- const results = controller.store?.results;
51
51
  const subProps = {
52
52
  carousel: {
53
53
  // default props
@@ -83,13 +83,13 @@ export const Recommendation = observer((properties) => {
83
83
  return;
84
84
  let resultLoopCount = [index, index + count];
85
85
  let resultLoopOverCount;
86
- if (index + count > results.length - 1) {
86
+ if (index + count > resultsToRender.length - 1) {
87
87
  resultLoopCount = [index];
88
- resultLoopOverCount = [0, index + count - results.length];
88
+ resultLoopOverCount = [0, index + count - resultsToRender.length];
89
89
  }
90
- let resultsImpressions = results.slice(...resultLoopCount);
90
+ let resultsImpressions = resultsToRender.slice(...resultLoopCount);
91
91
  if (resultLoopOverCount) {
92
- resultsImpressions = resultsImpressions.concat(results.slice(...resultLoopOverCount));
92
+ resultsImpressions = resultsImpressions.concat(resultsToRender.slice(...resultLoopOverCount));
93
93
  }
94
94
  resultsImpressions.map((result) => {
95
95
  controller.track.product.impression(result);
@@ -99,7 +99,7 @@ export const Recommendation = observer((properties) => {
99
99
  controller.track.impression();
100
100
  sendProductImpression(initialIndexes[0], initialIndexes[1]);
101
101
  }
102
- (children || results.length) && controller?.track?.render();
102
+ (children || resultsToRender.length) && controller?.track?.render();
103
103
  const styling = {};
104
104
  if (!disableStyles) {
105
105
  styling.css = [CSS.recommendation({ vertical }), style];
@@ -107,7 +107,7 @@ export const Recommendation = observer((properties) => {
107
107
  else if (style) {
108
108
  styling.css = [style];
109
109
  }
110
- return ((children || results?.length) && (jsx(CacheProvider, null,
110
+ return ((children || resultsToRender?.length) && (jsx(CacheProvider, null,
111
111
  jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__recommendation', className) },
112
112
  title && jsx("h3", { className: "ss__recommendation__title" }, title),
113
113
  jsx(Carousel, { onInit: (swiper) => {
@@ -123,9 +123,9 @@ export const Recommendation = observer((properties) => {
123
123
  const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
124
124
  controller.track.click(e);
125
125
  if (!Number.isNaN(clickedIndex)) {
126
- controller.track.product.click(e, results[clickedIndex]);
126
+ controller.track.product.click(e, resultsToRender[clickedIndex]);
127
127
  }
128
128
  }, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, children
129
129
  ? children.map((child) => child)
130
- : results.map((result) => jsx(Result, { controller: controller, result: result, ...subProps.result })))))));
130
+ : resultsToRender.map((result) => jsx(Result, { controller: controller, result: result, ...subProps.result })))))));
131
131
  });
@@ -106,6 +106,20 @@ declare const _default: {
106
106
  type: string;
107
107
  };
108
108
  };
109
+ results: {
110
+ description: string;
111
+ type: {
112
+ required: boolean;
113
+ };
114
+ table: {
115
+ type: {
116
+ summary: string;
117
+ };
118
+ };
119
+ control: {
120
+ type: string;
121
+ };
122
+ };
109
123
  pagination: {
110
124
  defaultValue: boolean;
111
125
  description: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAyHE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
1
+ {"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAmIE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
@@ -53,6 +53,16 @@ export default {
53
53
  },
54
54
  control: { type: 'boolean' },
55
55
  },
56
+ results: {
57
+ description: 'Results store reference, overrides controller.store.results',
58
+ type: { required: false },
59
+ table: {
60
+ type: {
61
+ summary: 'Results store object',
62
+ },
63
+ },
64
+ control: { type: 'none' },
65
+ },
56
66
  pagination: {
57
67
  defaultValue: false,
58
68
  description: 'Display pagination dots',
@@ -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;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsD7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAoFpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,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;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuC7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAmGpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,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"}
@@ -36,22 +36,22 @@ const CSS = {
36
36
  },
37
37
  }),
38
38
  };
39
- const defaultBreakpointsProps = {
40
- 0: {
41
- columns: 1,
42
- },
43
- 540: {
44
- columns: 2,
45
- },
46
- 768: {
47
- columns: 3,
48
- },
49
- 991: {
50
- columns: 4,
51
- },
52
- };
53
39
  export const Results = observer((properties) => {
54
40
  const globalTheme = useTheme();
41
+ const defaultBreakpointsProps = {
42
+ 0: {
43
+ columns: properties.columns || 1,
44
+ },
45
+ 540: {
46
+ columns: properties.columns || 2,
47
+ },
48
+ 768: {
49
+ columns: properties.columns || 3,
50
+ },
51
+ 991: {
52
+ columns: properties.columns || 4,
53
+ },
54
+ };
55
55
  let props = {
56
56
  // default props
57
57
  results: properties.controller?.store?.results,
@@ -114,7 +114,7 @@ export const Results = observer((properties) => {
114
114
  styling.css = [style];
115
115
  }
116
116
  return results?.length ? (jsx(CacheProvider, null,
117
- jsx("div", { ...styling, className: classnames('ss__results', className) }, results.map((result) => (() => {
117
+ jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (() => {
118
118
  switch (result.type) {
119
119
  case BannerType.BANNER:
120
120
  return jsx(InlineBanner, { key: result.uid, ...subProps.inlineBanner, banner: result, layout: props.layout });
@@ -133,7 +133,20 @@ declare const _default: {
133
133
  };
134
134
  };
135
135
  breakpoints: {
136
- defaultValue: {};
136
+ defaultValue: {
137
+ 0: {
138
+ columns: number;
139
+ };
140
+ 540: {
141
+ columns: number;
142
+ };
143
+ 768: {
144
+ columns: number;
145
+ };
146
+ 991: {
147
+ columns: number;
148
+ };
149
+ };
137
150
  description: string;
138
151
  table: {
139
152
  type: {
@@ -1 +1 @@
1
- {"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAqGE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
1
+ {"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAkHE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
@@ -76,7 +76,20 @@ export default {
76
76
  control: { type: 'text' },
77
77
  },
78
78
  breakpoints: {
79
- defaultValue: {},
79
+ defaultValue: {
80
+ 0: {
81
+ columns: 1,
82
+ },
83
+ 540: {
84
+ columns: 2,
85
+ },
86
+ 768: {
87
+ columns: 3,
88
+ },
89
+ 991: {
90
+ columns: 4,
91
+ },
92
+ },
80
93
  description: 'Breakpoints options object',
81
94
  table: {
82
95
  type: {
@@ -1438,4 +1438,29 @@ export declare const badSearchResponse: {
1438
1438
  content: {};
1439
1439
  };
1440
1440
  };
1441
+ export declare const facetOverflowMock: {
1442
+ type: string;
1443
+ field: string;
1444
+ filtered: boolean;
1445
+ custom: {};
1446
+ collapsed: boolean;
1447
+ display: string;
1448
+ label: string;
1449
+ values: {
1450
+ filtered: boolean;
1451
+ value: string;
1452
+ label: string;
1453
+ count: number;
1454
+ }[];
1455
+ multiple: string;
1456
+ overflow: {
1457
+ enabled: boolean;
1458
+ limited: boolean;
1459
+ limit: number;
1460
+ remaining: number;
1461
+ setLimit: () => void;
1462
+ toggle: () => void;
1463
+ calculate: () => void;
1464
+ };
1465
+ };
1441
1466
  //# sourceMappingURL=searchResponse.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC"}
1
+ {"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwG7B,CAAC"}
@@ -2978,3 +2978,108 @@ export const badSearchResponse = {
2978
2978
  content: {},
2979
2979
  },
2980
2980
  };
2981
+ export const facetOverflowMock = {
2982
+ type: 'value',
2983
+ field: 'color_family',
2984
+ filtered: false,
2985
+ custom: {},
2986
+ collapsed: false,
2987
+ display: 'palette',
2988
+ label: 'Color',
2989
+ values: [
2990
+ {
2991
+ filtered: false,
2992
+ value: 'Blue',
2993
+ label: 'Blue',
2994
+ count: 755,
2995
+ },
2996
+ {
2997
+ filtered: false,
2998
+ value: 'White',
2999
+ label: 'White',
3000
+ count: 673,
3001
+ },
3002
+ {
3003
+ filtered: false,
3004
+ value: 'Pink',
3005
+ label: 'Pink',
3006
+ count: 530,
3007
+ },
3008
+ {
3009
+ filtered: false,
3010
+ value: 'Beige',
3011
+ label: 'Beige',
3012
+ count: 316,
3013
+ },
3014
+ {
3015
+ filtered: false,
3016
+ value: 'Black',
3017
+ label: 'Black',
3018
+ count: 366,
3019
+ },
3020
+ {
3021
+ filtered: false,
3022
+ value: 'Gray',
3023
+ label: 'Gray',
3024
+ count: 303,
3025
+ },
3026
+ {
3027
+ filtered: false,
3028
+ value: 'Brown',
3029
+ label: 'Brown',
3030
+ count: 174,
3031
+ },
3032
+ {
3033
+ filtered: false,
3034
+ value: 'Red',
3035
+ label: 'Red',
3036
+ count: 261,
3037
+ },
3038
+ {
3039
+ filtered: false,
3040
+ value: 'Green',
3041
+ label: 'Green',
3042
+ count: 237,
3043
+ },
3044
+ {
3045
+ filtered: false,
3046
+ value: 'Yellow',
3047
+ label: 'Yellow',
3048
+ count: 202,
3049
+ },
3050
+ {
3051
+ filtered: false,
3052
+ value: 'Orange',
3053
+ label: 'Orange',
3054
+ count: 97,
3055
+ },
3056
+ {
3057
+ filtered: false,
3058
+ value: 'Purple',
3059
+ label: 'Purple',
3060
+ count: 79,
3061
+ },
3062
+ {
3063
+ filtered: false,
3064
+ value: 'Black, Grey',
3065
+ label: 'Black, Grey',
3066
+ count: 2,
3067
+ },
3068
+ {
3069
+ filtered: false,
3070
+ value: 'Black, Orange',
3071
+ label: 'Black, Orange',
3072
+ count: 2,
3073
+ },
3074
+ ],
3075
+ multiple: 'or',
3076
+ overflow: {
3077
+ enabled: true,
3078
+ limited: true,
3079
+ limit: 12,
3080
+ remaining: 2,
3081
+ setLimit: () => { },
3082
+ toggle: () => { },
3083
+ calculate: () => { },
3084
+ },
3085
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.23.1",
3
+ "version": "0.25.1",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -26,8 +26,8 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@emotion/react": "^11.7.1",
29
- "@searchspring/snap-preact": "^0.23.1",
30
- "@searchspring/snap-toolbox": "^0.23.1",
29
+ "@searchspring/snap-preact": "^0.25.1",
30
+ "@searchspring/snap-toolbox": "^0.25.1",
31
31
  "classnames": "^2.3.1",
32
32
  "deepmerge": "^4.2.2",
33
33
  "mobx-react-lite": "^3.2.3",
@@ -39,13 +39,13 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@mdx-js/loader": "^1.6.22",
42
- "@searchspring/snap-client": "^0.23.1",
43
- "@searchspring/snap-controller": "^0.23.1",
44
- "@searchspring/snap-event-manager": "^0.23.1",
45
- "@searchspring/snap-logger": "^0.23.1",
46
- "@searchspring/snap-profiler": "^0.23.1",
47
- "@searchspring/snap-store-mobx": "^0.23.1",
48
- "@searchspring/snap-url-manager": "^0.23.1",
42
+ "@searchspring/snap-client": "^0.25.1",
43
+ "@searchspring/snap-controller": "^0.25.1",
44
+ "@searchspring/snap-event-manager": "^0.25.1",
45
+ "@searchspring/snap-logger": "^0.25.1",
46
+ "@searchspring/snap-profiler": "^0.25.1",
47
+ "@searchspring/snap-store-mobx": "^0.25.1",
48
+ "@searchspring/snap-url-manager": "^0.25.1",
49
49
  "@storybook/addon-actions": "^6.4.9",
50
50
  "@storybook/addon-controls": "^6.4.9",
51
51
  "@storybook/addon-docs": "^6.4.9",
@@ -65,5 +65,5 @@
65
65
  "ts-loader": "^9.2.6"
66
66
  },
67
67
  "sideEffects": false,
68
- "gitHead": "56fee54f115b415326331ac2aa1100c73ced6523"
68
+ "gitHead": "56ab4bfc6d2d6c98ea80d7efa0ec65cca9e654ae"
69
69
  }