@constructor-io/constructorio-ui-autocomplete 1.19.4 → 1.20.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 (13) hide show
  1. package/dist/constructorio-ui-autocomplete-bundled.js +10 -10
  2. package/lib/cjs/hooks/useCioAutocomplete.js +15 -17
  3. package/lib/cjs/hooks/useFetchRecommendationPod.js +9 -5
  4. package/lib/cjs/hooks/useSections.js +14 -3
  5. package/lib/cjs/version.js +1 -1
  6. package/lib/mjs/hooks/useCioAutocomplete.js +15 -17
  7. package/lib/mjs/hooks/useFetchRecommendationPod.js +9 -5
  8. package/lib/mjs/hooks/useSections.js +14 -3
  9. package/lib/mjs/version.js +1 -1
  10. package/lib/types/hooks/useFetchRecommendationPod.d.ts +5 -2
  11. package/lib/types/types.d.ts +4 -0
  12. package/lib/types/version.d.ts +1 -1
  13. package/package.json +1 -1
package/lib/cjs/hooks/useCioAutocomplete.js CHANGED
@@ -141,27 +141,25 @@ const useCioAutocomplete = (options) => {
141
141
  }),
142
142
  getSectionProps: (section) => {
143
143
  var _a;
144
- const { type, displayName } = section;
145
- let sectionTitle = displayName;
144
+ const { type } = section;
145
+ let sectionTitle;
146
146
  // Add the indexSectionName as a class to the section container to make sure it gets the styles
147
147
  // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
148
148
  // ... they should be styled accordingly
149
149
  const indexSectionName = type !== 'custom' && section.indexSectionName ? (0, utils_1.toKebabCase)(section.indexSectionName) : '';
150
- if (!sectionTitle) {
151
- switch (type) {
152
- case 'recommendations':
153
- sectionTitle = section.podId;
154
- break;
155
- case 'autocomplete':
156
- sectionTitle = section.indexSectionName;
157
- break;
158
- case 'custom':
159
- sectionTitle = section.displayName;
160
- break;
161
- default:
162
- sectionTitle = section.indexSectionName;
163
- break;
164
- }
150
+ switch (type) {
151
+ case 'recommendations':
152
+ sectionTitle = section.podId;
153
+ break;
154
+ case 'autocomplete':
155
+ sectionTitle = section.displayName || section.indexSectionName;
156
+ break;
157
+ case 'custom':
158
+ sectionTitle = section.displayName;
159
+ break;
160
+ default:
161
+ sectionTitle = section.displayName || section.indexSectionName;
162
+ break;
165
163
  }
166
164
  const attributes = {
167
165
  className: `${sectionTitle} cio-section ${indexSectionName}`,
package/lib/cjs/hooks/useFetchRecommendationPod.js CHANGED
@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = require("react");
5
5
  const useFetchRecommendationPod = (cioClient, recommendationPods) => {
6
- const [recommendationResults, setRecommendationResults] = (0, react_1.useState)({});
6
+ const [recommendationsResults, setRecommendationsResults] = (0, react_1.useState)({});
7
+ const [podsData, setPodsData] = (0, react_1.useState)({});
7
8
  (0, react_1.useEffect)(() => {
8
9
  if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
9
10
  return;
@@ -12,18 +13,21 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
12
13
  var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
13
14
  return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
14
15
  }));
15
- const recommendationPodResults = {};
16
+ const recommendationsPodResults = {};
17
+ const recommendationsPodsData = {};
16
18
  responses.forEach(({ response }, index) => {
17
19
  const { pod, results } = response;
18
20
  if (pod === null || pod === void 0 ? void 0 : pod.id) {
19
- recommendationPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
21
+ recommendationsPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
20
22
  var _a, _b;
21
23
  return (Object.assign(Object.assign({}, item), { id: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id, section: (_b = recommendationPods[index]) === null || _b === void 0 ? void 0 : _b.indexSectionName, podId: pod.id }));
22
24
  });
25
+ recommendationsPodsData[pod.id] = { displayName: pod.display_name, podId: pod.id };
23
26
  }
24
27
  });
25
28
  try {
26
- setRecommendationResults(recommendationPodResults);
29
+ setRecommendationsResults(recommendationsPodResults);
30
+ setPodsData(recommendationsPodsData);
27
31
  }
28
32
  catch (error) {
29
33
  // eslint-disable-next-line no-console
@@ -33,6 +37,6 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
33
37
  fetchRecommendationResults();
34
38
  // eslint-disable-next-line react-hooks/exhaustive-deps
35
39
  }, [cioClient]);
36
- return recommendationResults;
40
+ return { recommendationsResults, podsData };
37
41
  };
38
42
  exports.default = useFetchRecommendationPod;
package/lib/cjs/hooks/useSections.js CHANGED
@@ -18,12 +18,23 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
18
18
  // Fetch Autocomplete Results
19
19
  const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
20
20
  // Fetch Recommendations Results
21
- const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
21
+ const { recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
22
+ // Merge Recommendation Pods Display Name from Dashboard
23
+ const activeSectionConfigs = (0, react_1.useMemo)(() => activeSections.map((config) => {
24
+ const mergedConfig = config;
25
+ if ((0, typeGuards_1.isRecommendationsSection)(config)) {
26
+ const podData = podsData[config.podId];
27
+ const libraryDisplayName = config.displayName;
28
+ const dashboardDisplayName = podData === null || podData === void 0 ? void 0 : podData.displayName;
29
+ mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
30
+ }
31
+ return mergedConfig;
32
+ }), [activeSections, podsData]);
22
33
  // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
23
34
  (0, react_1.useEffect)(() => {
24
35
  const sectionsResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
25
- setActiveSectionsWithData((0, utils_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs));
26
- }, [autocompleteResults, recommendationsResults, activeSections]);
36
+ setActiveSectionsWithData((0, utils_1.getActiveSectionsWithData)(activeSectionConfigs, sectionsResults, sectionsRefs));
37
+ }, [autocompleteResults, recommendationsResults, activeSectionConfigs, podsData]);
27
38
  return {
28
39
  activeSections,
29
40
  activeSectionsWithData,
package/lib/cjs/version.js CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = '1.19.4';
3
+ exports.default = '1.20.0';
package/lib/mjs/hooks/useCioAutocomplete.js CHANGED
@@ -151,27 +151,25 @@ const useCioAutocomplete = (options) => {
151
151
  'data-testid': 'cio-form',
152
152
  }),
153
153
  getSectionProps: (section) => {
154
- const { type, displayName } = section;
155
- let sectionTitle = displayName;
154
+ const { type } = section;
155
+ let sectionTitle;
156
156
  // Add the indexSectionName as a class to the section container to make sure it gets the styles
157
157
  // Even if the section is a recommendation pod, if the results are "Products" or "Search Suggestions"
158
158
  // ... they should be styled accordingly
159
159
  const indexSectionName = type !== 'custom' && section.indexSectionName ? toKebabCase(section.indexSectionName) : '';
160
- if (!sectionTitle) {
161
- switch (type) {
162
- case 'recommendations':
163
- sectionTitle = section.podId;
164
- break;
165
- case 'autocomplete':
166
- sectionTitle = section.indexSectionName;
167
- break;
168
- case 'custom':
169
- sectionTitle = section.displayName;
170
- break;
171
- default:
172
- sectionTitle = section.indexSectionName;
173
- break;
174
- }
160
+ switch (type) {
161
+ case 'recommendations':
162
+ sectionTitle = section.podId;
163
+ break;
164
+ case 'autocomplete':
165
+ sectionTitle = section.displayName || section.indexSectionName;
166
+ break;
167
+ case 'custom':
168
+ sectionTitle = section.displayName;
169
+ break;
170
+ default:
171
+ sectionTitle = section.displayName || section.indexSectionName;
172
+ break;
175
173
  }
176
174
  const attributes = {
177
175
  className: `${sectionTitle} cio-section ${indexSectionName}`,
package/lib/mjs/hooks/useFetchRecommendationPod.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useEffect, useState } from 'react';
2
2
  const useFetchRecommendationPod = (cioClient, recommendationPods) => {
3
- const [recommendationResults, setRecommendationResults] = useState({});
3
+ const [recommendationsResults, setRecommendationsResults] = useState({});
4
+ const [podsData, setPodsData] = useState({});
4
5
  useEffect(() => {
5
6
  if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
6
7
  return;
@@ -9,20 +10,23 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
9
10
  ...parameters,
10
11
  section: indexSectionName,
11
12
  })));
12
- const recommendationPodResults = {};
13
+ const recommendationsPodResults = {};
14
+ const recommendationsPodsData = {};
13
15
  responses.forEach(({ response }, index) => {
14
16
  const { pod, results } = response;
15
17
  if (pod?.id) {
16
- recommendationPodResults[pod.id] = results?.map((item) => ({
18
+ recommendationsPodResults[pod.id] = results?.map((item) => ({
17
19
  ...item,
18
20
  id: item?.data?.id,
19
21
  section: recommendationPods[index]?.indexSectionName,
20
22
  podId: pod.id,
21
23
  }));
24
+ recommendationsPodsData[pod.id] = { displayName: pod.display_name, podId: pod.id };
22
25
  }
23
26
  });
24
27
  try {
25
- setRecommendationResults(recommendationPodResults);
28
+ setRecommendationsResults(recommendationsPodResults);
29
+ setPodsData(recommendationsPodsData);
26
30
  }
27
31
  catch (error) {
28
32
  // eslint-disable-next-line no-console
@@ -32,6 +36,6 @@ const useFetchRecommendationPod = (cioClient, recommendationPods) => {
32
36
  fetchRecommendationResults();
33
37
  // eslint-disable-next-line react-hooks/exhaustive-deps
34
38
  }, [cioClient]);
35
- return recommendationResults;
39
+ return { recommendationsResults, podsData };
36
40
  };
37
41
  export default useFetchRecommendationPod;
package/lib/mjs/hooks/useSections.js CHANGED
@@ -15,12 +15,23 @@ export default function useSections(query, cioClient, sections, zeroStateSection
15
15
  // Fetch Autocomplete Results
16
16
  const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
17
17
  // Fetch Recommendations Results
18
- const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
18
+ const { recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections);
19
+ // Merge Recommendation Pods Display Name from Dashboard
20
+ const activeSectionConfigs = useMemo(() => activeSections.map((config) => {
21
+ const mergedConfig = config;
22
+ if (isRecommendationsSection(config)) {
23
+ const podData = podsData[config.podId];
24
+ const libraryDisplayName = config.displayName;
25
+ const dashboardDisplayName = podData?.displayName;
26
+ mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
27
+ }
28
+ return mergedConfig;
29
+ }), [activeSections, podsData]);
19
30
  // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
20
31
  useEffect(() => {
21
32
  const sectionsResults = { ...autocompleteResults, ...recommendationsResults };
22
- setActiveSectionsWithData(getActiveSectionsWithData(activeSections, sectionsResults, sectionsRefs));
23
- }, [autocompleteResults, recommendationsResults, activeSections]);
33
+ setActiveSectionsWithData(getActiveSectionsWithData(activeSectionConfigs, sectionsResults, sectionsRefs));
34
+ }, [autocompleteResults, recommendationsResults, activeSectionConfigs, podsData]);
24
35
  return {
25
36
  activeSections,
26
37
  activeSectionsWithData,
package/lib/mjs/version.js CHANGED
@@ -1 +1 @@
1
- export default '1.19.4';
1
+ export default '1.20.0';
package/lib/types/hooks/useFetchRecommendationPod.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
2
2
  import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
3
- import { SectionsData, RecommendationsSectionConfiguration } from '../types';
4
- declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[]) => SectionsData;
3
+ import { SectionsData, RecommendationsSectionConfiguration, PodData } from '../types';
4
+ declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[]) => {
5
+ recommendationsResults: SectionsData;
6
+ podsData: Record<string, PodData>;
7
+ };
5
8
  export default useFetchRecommendationPod;
package/lib/types/types.d.ts CHANGED
@@ -134,3 +134,7 @@ export type HTMLPropsWithCioDataAttributes<T = any> = React.DetailedHTMLProps<Re
134
134
  export type Translations = {
135
135
  in?: string;
136
136
  };
137
+ export interface PodData {
138
+ podId: string;
139
+ displayName: string;
140
+ }
package/lib/types/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "1.19.4";
1
+ declare const _default: "1.20.0";
2
2
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@constructor-io/constructorio-ui-autocomplete",
3
- "version": "1.19.4",
3
+ "version": "1.20.0",
4
4
  "description": "Constructor.io Autocomplete UI library for web applications",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",