@searchspring/snap-preact-components 0.39.3 → 0.40.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 (25) hide show
  1. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts +1 -0
  2. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  3. package/dist/cjs/components/Molecules/Slideout/Slideout.js +4 -31
  4. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts +14 -0
  5. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts.map +1 -1
  6. package/dist/cjs/components/Molecules/Slideout/Slideout.stories.js +9 -0
  7. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts +5 -0
  8. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  9. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +63 -19
  10. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +75 -0
  11. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
  12. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.js +51 -1
  13. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts +1 -0
  14. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  15. package/dist/esm/components/Molecules/Slideout/Slideout.js +4 -31
  16. package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts +14 -0
  17. package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts.map +1 -1
  18. package/dist/esm/components/Molecules/Slideout/Slideout.stories.js +10 -0
  19. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts +5 -0
  20. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
  21. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +62 -17
  22. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts +75 -0
  23. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map +1 -1
  24. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js +56 -1
  25. package/package.json +11 -11
package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts CHANGED
@@ -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;
package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map CHANGED
@@ -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"}
package/dist/cjs/components/Molecules/Slideout/Slideout.js CHANGED
@@ -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
- };
package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts CHANGED
@@ -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;
package/dist/cjs/components/Molecules/Slideout/Slideout.stories.d.ts.map CHANGED
@@ -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"}
package/dist/cjs/components/Molecules/Slideout/Slideout.stories.js CHANGED
@@ -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),
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts CHANGED
@@ -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;
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -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;;CAuc/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E"}
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -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,
@@ -232,7 +238,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
232
238
  var rect = input === null || input === void 0 ? void 0 : input.getBoundingClientRect();
233
239
  inputViewportOffsetBottom = (rect === null || rect === void 0 ? void 0 : rect.bottom) || 0;
234
240
  }
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;
241
+ 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
242
  var subProps = {
237
243
  facets: __assign(__assign(__assign({
238
244
  // default props
@@ -262,6 +268,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
262
268
  theme: props.theme }),
263
269
  };
264
270
  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;
271
+ var history = controller.store.history || [];
265
272
  // you can pass in a selector or the actual input element,
266
273
  // if its the selector, we need to bind it to the controller here.
267
274
  if (controller && typeof input == 'string') {
@@ -271,17 +278,33 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
271
278
  controller.bind();
272
279
  }, []);
273
280
  }
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));
281
+ var visible = Boolean(input === state.focusedInput) &&
282
+ (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
283
  var showTrending = false;
276
- if (!results.length && !state.input && (trending === null || trending === void 0 ? void 0 : trending.length)) {
284
+ if ((trending === null || trending === void 0 ? void 0 : trending.length) && (retainTrending || (!results.length && !state.input))) {
277
285
  showTrending = true;
278
286
  }
279
287
  else if ((trending === null || trending === void 0 ? void 0 : trending.length) && !terms.length) {
280
288
  // has results and trending -> show trending terms while term load
281
289
  showTrending = true;
282
290
  }
291
+ var showHistory = false;
292
+ if ((history === null || history === void 0 ? void 0 : history.length) && (retainHistory || (!results.length && !state.input))) {
293
+ showHistory = true;
294
+ }
295
+ else if ((history === null || history === void 0 ? void 0 : history.length) && !terms.length) {
296
+ // has results and trending -> show trending terms while term load
297
+ showHistory = true;
298
+ }
283
299
  var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
284
300
  var onlyTerms = (trending === null || trending === void 0 ? void 0 : trending.length) && !loaded;
301
+ // results logic
302
+ 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));
303
+ var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
304
+ var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
305
+ if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
306
+ showResults = false;
307
+ }
285
308
  var styling = {};
286
309
  if (!disableStyles) {
287
310
  styling.css = [
@@ -289,7 +312,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
289
312
  inputViewportOffsetBottom: inputViewportOffsetBottom,
290
313
  hideFacets: hideFacets,
291
314
  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),
315
+ noResults: Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0),
293
316
  contentSlotExists: Boolean(contentSlot),
294
317
  viewportMaxHeight: viewportMaxHeight,
295
318
  vertical: vertical,
@@ -304,20 +327,39 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
304
327
  }
305
328
  return visible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
306
329
  (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" },
330
+ !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, {
331
+ terms: terms,
332
+ trending: trending,
333
+ termsTitle: termsTitle,
334
+ trendingTitle: trendingTitle,
335
+ showTrending: showTrending,
336
+ history: history,
337
+ historyTitle: historyTitle,
338
+ valueProps: valueProps,
339
+ emIfy: emIfy,
340
+ onTermClick: onTermClick,
341
+ controller: controller,
342
+ })) : ((0, react_1.jsx)(preact_1.Fragment, null,
343
+ terms.length > 0 ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__suggestions" },
344
+ termsTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
310
345
  (0, react_1.jsx)("h5", null, termsTitle))) : null,
311
346
  (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
347
  'ss__autocomplete__terms__option--active': term.active,
313
348
  }) },
314
349
  (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,
350
+ showTrending && !hideTrending ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__trending" },
316
351
  trendingTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
317
352
  (0, react_1.jsx)("h5", null, trendingTitle))) : null,
318
353
  (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
354
  'ss__autocomplete__terms__option--active': term.active,
320
355
  }) },
356
+ (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,
357
+ showHistory && !hideHistory ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__terms__history" },
358
+ historyTitle ? ((0, react_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
359
+ (0, react_1.jsx)("h5", null, historyTitle))) : null,
360
+ (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', {
361
+ 'ss__autocomplete__terms__option--active': term.active,
362
+ }) },
321
363
  (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)))),
322
364
  !hideFacets &&
323
365
  (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,
@@ -328,7 +370,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
328
370
  (0, react_1.jsx)("h5", null, facetsTitle))) : null,
329
371
  (0, react_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })),
330
372
  !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" },
373
+ !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
374
  (0, react_1.jsx)(preact_1.Fragment, null,
333
375
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER })) : null,
334
376
  !hideBanners ? (0, react_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER })) : null,
@@ -356,14 +398,16 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
356
398
  (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon))))) : null) : null))) : null) : null))) : ((0, react_1.jsx)(preact_1.Fragment, null));
357
399
  });
358
400
  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) : ''));
401
+ if (term && search) {
402
+ var match = term.match(escapeRegExp(search));
403
+ if (search && term && match && match.index) {
404
+ var beforeMatch = term.slice(0, match.index);
405
+ var afterMatch = term.slice(match.index + search.length, term.length);
406
+ return ((0, react_1.jsx)(preact_1.Fragment, null,
407
+ beforeMatch ? (0, react_1.jsx)("em", null, beforeMatch) : '',
408
+ search,
409
+ afterMatch ? (0, react_1.jsx)("em", null, afterMatch) : ''));
410
+ }
367
411
  }
368
412
  return ((0, react_1.jsx)(preact_1.Fragment, null,
369
413
  (0, react_1.jsx)("em", null, term)));
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts CHANGED
@@ -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;
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map CHANGED
@@ -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"}
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.stories.js CHANGED
@@ -110,7 +110,47 @@ exports.default = {
110
110
  control: { type: 'text' },
111
111
  }, hideTerms: {
112
112
  defaultValue: false,
113
- description: 'prevent terms from rendering (also applicable to trending terms)',
113
+ description: 'prevent all terms from rendering (also applicable to trending and history terms)',
114
+ table: {
115
+ type: {
116
+ summary: 'boolean',
117
+ },
118
+ defaultValue: { summary: false },
119
+ },
120
+ control: { type: 'boolean' },
121
+ }, hideHistory: {
122
+ defaultValue: false,
123
+ description: 'prevent historical terms and results from rendering',
124
+ table: {
125
+ type: {
126
+ summary: 'boolean',
127
+ },
128
+ defaultValue: { summary: false },
129
+ },
130
+ control: { type: 'boolean' },
131
+ }, hideTrending: {
132
+ defaultValue: false,
133
+ description: 'prevent trending terms and results from rendering',
134
+ table: {
135
+ type: {
136
+ summary: 'boolean',
137
+ },
138
+ defaultValue: { summary: false },
139
+ },
140
+ control: { type: 'boolean' },
141
+ }, retainHistory: {
142
+ defaultValue: false,
143
+ description: 'allow history terms to render even when there is a query in the input',
144
+ table: {
145
+ type: {
146
+ summary: 'boolean',
147
+ },
148
+ defaultValue: { summary: false },
149
+ },
150
+ control: { type: 'boolean' },
151
+ }, retainTrending: {
152
+ defaultValue: false,
153
+ description: 'allow trending terms to render even when there is a query in the input',
114
154
  table: {
115
155
  type: {
116
156
  summary: 'boolean',
@@ -198,6 +238,16 @@ exports.default = {
198
238
  defaultValue: { summary: 'Popular Searches' },
199
239
  },
200
240
  control: { type: 'text' },
241
+ }, historyTitle: {
242
+ defaultValue: 'Previously Searched',
243
+ description: 'Change historical terms header title',
244
+ table: {
245
+ type: {
246
+ summary: 'string',
247
+ },
248
+ defaultValue: { summary: 'Previously Searched' },
249
+ },
250
+ control: { type: 'text' },
201
251
  }, facetsTitle: {
202
252
  defaultValue: '',
203
253
  description: 'Change facets header title',
package/dist/esm/components/Molecules/Slideout/Slideout.d.ts CHANGED
@@ -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;
package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map CHANGED
@@ -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"}
package/dist/esm/components/Molecules/Slideout/Slideout.js CHANGED
@@ -26,7 +26,6 @@ const CSS = {
26
26
  overflowY: 'auto',
27
27
  }),
28
28
  };
29
- const buttonClass = 'ss__slideout__button';
30
29
  export function Slideout(properties) {
31
30
  const globalTheme = useTheme();
32
31
  const props = {
@@ -35,7 +34,7 @@ export function Slideout(properties) {
35
34
  displayAt: '',
36
35
  slideDirection: 'left',
37
36
  width: '300px',
38
- buttonContent: jsx("div", { className: buttonClass }, "click me"),
37
+ buttonContent: 'click me',
39
38
  overlayColor: 'rgba(0,0,0,0.8)',
40
39
  transitionSpeed: '0.25s',
41
40
  // global theme
@@ -44,7 +43,7 @@ export function Slideout(properties) {
44
43
  ...properties,
45
44
  ...properties.theme?.components?.slideout,
46
45
  };
47
- const { children, active, width, displayAt, transitionSpeed, overlayColor, slideDirection, buttonContent, disableStyles, className, style } = props;
46
+ const { children, active, buttonContent, noButtonWrapper, width, displayAt, transitionSpeed, overlayColor, slideDirection, disableStyles, className, style, } = props;
48
47
  const subProps = {
49
48
  overlay: {
50
49
  // default props
@@ -79,34 +78,8 @@ export function Slideout(properties) {
79
78
  styling.css = [style];
80
79
  }
81
80
  return isVisible ? (jsx(CacheProvider, null,
82
- jsx(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
81
+ buttonContent &&
82
+ (noButtonWrapper ? (cloneWithProps(buttonContent, { toggleActive, active: isActive })) : (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, cloneWithProps(buttonContent, { active: isActive })))),
83
83
  jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
84
84
  jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))) : (jsx(Fragment, null));
85
85
  }
86
- const ButtonContent = (props) => {
87
- const { content, toggleActive } = props;
88
- if (content && typeof content == 'string') {
89
- return (jsx("div", { className: buttonClass, onClick: () => toggleActive() }, content));
90
- }
91
- else if (content && typeof content == 'object') {
92
- let clone = cloneWithProps(content, {
93
- onClick: () => toggleActive(),
94
- });
95
- if (clone.props.class || clone.props.className) {
96
- // check if class
97
- if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
98
- clone.props.class = `${clone.props.class} ${buttonClass}`;
99
- }
100
- // check if classname
101
- if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
102
- clone.props.className = `${clone.props.className} ${buttonClass}`;
103
- }
104
- }
105
- else {
106
- clone.props.className = clone.props.class = buttonClass;
107
- }
108
- return clone;
109
- }
110
- else
111
- return jsx(Fragment, null);
112
- };
package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts CHANGED
@@ -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;
package/dist/esm/components/Molecules/Slideout/Slideout.stories.d.ts.map CHANGED
@@ -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"}
package/dist/esm/components/Molecules/Slideout/Slideout.stories.js CHANGED
@@ -90,6 +90,16 @@ export default {
90
90
  },
91
91
  control: { type: 'color' },
92
92
  },
93
+ noButtonWrapper: {
94
+ description: 'Prevent the wrapper element from rendering (this element has the onClick handler to toggle the state)',
95
+ table: {
96
+ type: {
97
+ summary: 'boolean',
98
+ },
99
+ defaultValue: { summary: false },
100
+ },
101
+ control: { type: 'boolean' },
102
+ },
93
103
  ...componentArgs,
94
104
  },
95
105
  };
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts CHANGED
@@ -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;
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -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;;CAuc/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E"}
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -33,7 +33,7 @@ const CSS = {
33
33
  '&.ss__autocomplete--only-terms': {
34
34
  width: `${vertical || horizontalTerms || contentSlotExists ? width : '150px'}`,
35
35
  },
36
- '.ss__autocomplete__title--trending': {
36
+ '.ss__autocomplete__title--trending, .ss__autocomplete__title--history, .ss__autocomplete__title--terms': {
37
37
  fontWeight: 'normal',
38
38
  margin: 0,
39
39
  color: '#c5c5c5',
@@ -48,6 +48,8 @@ const CSS = {
48
48
  order: vertical ? 2 : undefined,
49
49
  },
50
50
  '& .ss__autocomplete__terms': {
51
+ display: 'flex',
52
+ flexDirection: 'column',
51
53
  flex: `1 1 auto`,
52
54
  maxWidth: `${vertical || horizontalTerms ? 'auto' : '150px'}`,
53
55
  order: 1,
@@ -136,6 +138,7 @@ export const Autocomplete = observer((properties) => {
136
138
  // default props
137
139
  termsTitle: '',
138
140
  trendingTitle: 'Popular Searches',
141
+ historyTitle: 'Previously Searched',
139
142
  facetsTitle: '',
140
143
  contentTitle: '',
141
144
  width: '100%',
@@ -152,11 +155,15 @@ export const Autocomplete = observer((properties) => {
152
155
  rows: 1,
153
156
  hideFacets: props.hideFacets || true,
154
157
  vertical: props.vertical || true,
158
+ hideHistory: props.hideHistory || true,
159
+ hideTrending: props.hideTrending || true,
155
160
  },
156
161
  540: {
157
162
  columns: 3,
158
163
  rows: 1,
159
164
  vertical: props.vertical || true,
165
+ hideHistory: props.hideHistory || true,
166
+ hideTrending: props.hideTrending || true,
160
167
  },
161
168
  768: {
162
169
  columns: 2,
@@ -224,7 +231,7 @@ export const Autocomplete = observer((properties) => {
224
231
  const rect = input?.getBoundingClientRect();
225
232
  inputViewportOffsetBottom = rect?.bottom || 0;
226
233
  }
227
- const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, horizontalTerms, vertical, termsTitle, trendingTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onTermClick, disableStyles, className, width, style, controller, } = props;
234
+ const { hideTerms, hideFacets, hideContent, hideBanners, hideLink, hideHistory, hideTrending, retainTrending, retainHistory, horizontalTerms, vertical, termsTitle, trendingTitle, historyTitle, facetsTitle, contentTitle, viewportMaxHeight, termsSlot, facetsSlot, contentSlot, resultsSlot, noResultsSlot, linkSlot, onTermClick, disableStyles, className, width, style, controller, } = props;
228
235
  const subProps = {
229
236
  facets: {
230
237
  // default props
@@ -278,6 +285,7 @@ export const Autocomplete = observer((properties) => {
278
285
  },
279
286
  };
280
287
  const { search, terms, trending, results, merchandising, pagination, loaded, filters, facets, state } = controller.store;
288
+ const history = controller.store.history || [];
281
289
  // you can pass in a selector or the actual input element,
282
290
  // if its the selector, we need to bind it to the controller here.
283
291
  if (controller && typeof input == 'string') {
@@ -287,17 +295,33 @@ export const Autocomplete = observer((properties) => {
287
295
  controller.bind();
288
296
  }, []);
289
297
  }
290
- const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0 || (state.input && controller.store.loaded));
298
+ const visible = Boolean(input === state.focusedInput) &&
299
+ (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
291
300
  let showTrending = false;
292
- if (!results.length && !state.input && trending?.length) {
301
+ if (trending?.length && (retainTrending || (!results.length && !state.input))) {
293
302
  showTrending = true;
294
303
  }
295
304
  else if (trending?.length && !terms.length) {
296
305
  // has results and trending -> show trending terms while term load
297
306
  showTrending = true;
298
307
  }
308
+ let showHistory = false;
309
+ if (history?.length && (retainHistory || (!results.length && !state.input))) {
310
+ showHistory = true;
311
+ }
312
+ else if (history?.length && !terms.length) {
313
+ // has results and trending -> show trending terms while term load
314
+ showHistory = true;
315
+ }
299
316
  const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
300
317
  const onlyTerms = trending?.length && !loaded;
318
+ // results logic
319
+ let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
320
+ const trendingActive = trending?.filter((term) => term.active).pop();
321
+ const historyActive = history?.filter((term) => term.active).pop();
322
+ if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
323
+ showResults = false;
324
+ }
301
325
  const styling = {};
302
326
  if (!disableStyles) {
303
327
  styling.css = [
@@ -320,20 +344,39 @@ export const Autocomplete = observer((properties) => {
320
344
  }
321
345
  return visible ? (jsx(CacheProvider, null,
322
346
  jsx("div", { ...styling, className: classnames('ss__autocomplete', className, { 'ss__autocomplete--only-terms': onlyTerms }), onClick: (e) => e.stopPropagation() },
323
- !hideTerms && (showTrending || terms.length > 0 || termsSlot) && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, { terms, trending, termsTitle, trendingTitle, showTrending, valueProps, emIfy, onTermClick, controller })) : (jsx(Fragment, null,
324
- terms.length > 0 ? (jsx(Fragment, null,
325
- termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms" },
347
+ !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && (jsx("div", { className: classnames('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }) }, termsSlot ? (cloneWithProps(termsSlot, {
348
+ terms,
349
+ trending,
350
+ termsTitle,
351
+ trendingTitle,
352
+ showTrending,
353
+ history,
354
+ historyTitle,
355
+ valueProps,
356
+ emIfy,
357
+ onTermClick,
358
+ controller,
359
+ })) : (jsx(Fragment, null,
360
+ terms.length > 0 ? (jsx("div", { className: "ss__autocomplete__terms__suggestions" },
361
+ termsTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions" },
326
362
  jsx("h5", null, termsTitle))) : null,
327
363
  jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
328
364
  'ss__autocomplete__terms__option--active': term.active,
329
365
  }) },
330
366
  jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
331
- showTrending ? (jsx(Fragment, null,
367
+ showTrending && !hideTrending ? (jsx("div", { className: "ss__autocomplete__terms__trending" },
332
368
  trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
333
369
  jsx("h5", null, trendingTitle))) : null,
334
370
  jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
335
371
  'ss__autocomplete__terms__option--active': term.active,
336
372
  }) },
373
+ jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
374
+ showHistory && !hideHistory ? (jsx("div", { className: "ss__autocomplete__terms__history" },
375
+ historyTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
376
+ jsx("h5", null, historyTitle))) : null,
377
+ jsx("div", { className: "ss__autocomplete__terms__options" }, history.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
378
+ 'ss__autocomplete__terms__option--active': term.active,
379
+ }) },
337
380
  jsx("a", { onClick: (e) => onTermClick && onTermClick(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
338
381
  !hideFacets &&
339
382
  (facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
@@ -344,7 +387,7 @@ export const Autocomplete = observer((properties) => {
344
387
  jsx("h5", null, facetsTitle))) : null,
345
388
  jsx(Facets, { ...subProps.facets, facets: facetsToShow }),
346
389
  !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.LEFT }) : null))))),
347
- !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneWithProps(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string ? (jsx("div", { className: "ss__autocomplete__content" },
390
+ !hideContent ? (contentSlot ? (jsx("div", { className: "ss__autocomplete__content" }, cloneWithProps(contentSlot, { results, merchandising, search, pagination, filters, controller }))) : showResults ? (jsx("div", { className: "ss__autocomplete__content" },
348
391
  jsx(Fragment, null,
349
392
  !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.HEADER }) : null,
350
393
  !hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.BANNER }) : null,
@@ -372,14 +415,16 @@ export const Autocomplete = observer((properties) => {
372
415
  jsx(Icon, { ...subProps.icon })))) : null) : null))) : null) : null))) : (jsx(Fragment, null));
373
416
  });
374
417
  const emIfy = (term, search) => {
375
- const match = term.match(escapeRegExp(search));
376
- if (search && term && match && match.index) {
377
- const beforeMatch = term.slice(0, match.index);
378
- const afterMatch = term.slice(match.index + search.length, term.length);
379
- return (jsx(Fragment, null,
380
- beforeMatch ? jsx("em", null, beforeMatch) : '',
381
- search,
382
- afterMatch ? jsx("em", null, afterMatch) : ''));
418
+ if (term && search) {
419
+ const match = term.match(escapeRegExp(search));
420
+ if (search && term && match && match.index) {
421
+ const beforeMatch = term.slice(0, match.index);
422
+ const afterMatch = term.slice(match.index + search.length, term.length);
423
+ return (jsx(Fragment, null,
424
+ beforeMatch ? jsx("em", null, beforeMatch) : '',
425
+ search,
426
+ afterMatch ? jsx("em", null, afterMatch) : ''));
427
+ }
383
428
  }
384
429
  return (jsx(Fragment, null,
385
430
  jsx("em", null, term)));
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts CHANGED
@@ -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;
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.d.ts.map CHANGED
@@ -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"}
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.stories.js CHANGED
@@ -61,7 +61,51 @@ export default {
61
61
  },
62
62
  hideTerms: {
63
63
  defaultValue: false,
64
- description: 'prevent terms from rendering (also applicable to trending terms)',
64
+ description: 'prevent all terms from rendering (also applicable to trending and history terms)',
65
+ table: {
66
+ type: {
67
+ summary: 'boolean',
68
+ },
69
+ defaultValue: { summary: false },
70
+ },
71
+ control: { type: 'boolean' },
72
+ },
73
+ hideHistory: {
74
+ defaultValue: false,
75
+ description: 'prevent historical terms and results from rendering',
76
+ table: {
77
+ type: {
78
+ summary: 'boolean',
79
+ },
80
+ defaultValue: { summary: false },
81
+ },
82
+ control: { type: 'boolean' },
83
+ },
84
+ hideTrending: {
85
+ defaultValue: false,
86
+ description: 'prevent trending terms and results from rendering',
87
+ table: {
88
+ type: {
89
+ summary: 'boolean',
90
+ },
91
+ defaultValue: { summary: false },
92
+ },
93
+ control: { type: 'boolean' },
94
+ },
95
+ retainHistory: {
96
+ defaultValue: false,
97
+ description: 'allow history terms to render even when there is a query in the input',
98
+ table: {
99
+ type: {
100
+ summary: 'boolean',
101
+ },
102
+ defaultValue: { summary: false },
103
+ },
104
+ control: { type: 'boolean' },
105
+ },
106
+ retainTrending: {
107
+ defaultValue: false,
108
+ description: 'allow trending terms to render even when there is a query in the input',
65
109
  table: {
66
110
  type: {
67
111
  summary: 'boolean',
@@ -158,6 +202,17 @@ export default {
158
202
  },
159
203
  control: { type: 'text' },
160
204
  },
205
+ historyTitle: {
206
+ defaultValue: 'Previously Searched',
207
+ description: 'Change historical terms header title',
208
+ table: {
209
+ type: {
210
+ summary: 'string',
211
+ },
212
+ defaultValue: { summary: 'Previously Searched' },
213
+ },
214
+ control: { type: 'text' },
215
+ },
161
216
  facetsTitle: {
162
217
  defaultValue: '',
163
218
  description: 'Change facets header title',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.39.3",
3
+ "version": "0.40.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@emotion/react": "11.9.0",
29
- "@searchspring/snap-toolbox": "^0.39.3",
29
+ "@searchspring/snap-toolbox": "^0.40.0",
30
30
  "classnames": "^2.3.2",
31
31
  "deepmerge": "4.2.2",
32
32
  "mobx-react-lite": "3.4.0",
@@ -37,14 +37,14 @@
37
37
  "preact": "10.9.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@searchspring/snap-client": "^0.39.3",
41
- "@searchspring/snap-controller": "^0.39.3",
42
- "@searchspring/snap-event-manager": "^0.39.3",
43
- "@searchspring/snap-logger": "^0.39.3",
44
- "@searchspring/snap-profiler": "^0.39.3",
45
- "@searchspring/snap-store-mobx": "^0.39.3",
46
- "@searchspring/snap-tracker": "^0.39.3",
47
- "@searchspring/snap-url-manager": "^0.39.3",
40
+ "@searchspring/snap-client": "^0.40.0",
41
+ "@searchspring/snap-controller": "^0.40.0",
42
+ "@searchspring/snap-event-manager": "^0.40.0",
43
+ "@searchspring/snap-logger": "^0.40.0",
44
+ "@searchspring/snap-profiler": "^0.40.0",
45
+ "@searchspring/snap-store-mobx": "^0.40.0",
46
+ "@searchspring/snap-tracker": "^0.40.0",
47
+ "@searchspring/snap-url-manager": "^0.40.0",
48
48
  "@storybook/addon-actions": "6.4.22",
49
49
  "@storybook/addon-controls": "6.4.22",
50
50
  "@storybook/addon-docs": "6.4.22",
@@ -66,5 +66,5 @@
66
66
  "ts-loader": "9.3.0"
67
67
  },
68
68
  "sideEffects": false,
69
- "gitHead": "b0c786549f24e0d1313163ef37d13db3320ec674"
69
+ "gitHead": "ab543649e56e547374715ad0f018db29d72a0d8e"
70
70
  }