@constructor-io/constructorio-ui-autocomplete 1.23.18 → 1.23.19

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -108,7 +108,7 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
-                    if ((advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+                    if (advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) {
                         fetchRecommendationResults();
                     }
                     (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();

package/lib/cjs/hooks/useSections/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable max-params */
+const react_1 = require("react");
+const useActiveSections_1 = tslib_1.__importDefault(require("./useActiveSections"));
+const useSectionsResults_1 = tslib_1.__importDefault(require("./useSectionsResults"));
+const useActiveSectionsWithData_1 = tslib_1.__importDefault(require("./useActiveSectionsWithData"));
+const useRemoveSections_1 = tslib_1.__importDefault(require("./useRemoveSections"));
+function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const [podsData, setPodsData] = (0, react_1.useState)({});
+    // Get Active Sections defined by configuration object
+    const { activeSections, showZeroStateSections, setActiveSections } = (0, useActiveSections_1.default)(query, sections, podsData, zeroStateSections);
+    // create refs for active sections
+    const sectionsRefs = (0, react_1.useRef)(activeSections.map(() => (0, react_1.createRef)()));
+    // Get API results for each active section
+    const { recommendations, autocomplete } = (0, useSectionsResults_1.default)(query, cioClient, activeSections, advancedParameters);
+    // Access the Pods Data from the Recommendations response to update Active Sections configuration
+    (0, react_1.useEffect)(() => {
+        if (!recommendations.podsData) {
+            setPodsData(recommendations.podsData);
+        }
+    }, [recommendations.podsData]);
+    (0, useRemoveSections_1.default)(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections);
+    // Combine recommendations and autocomplete results in sectionsResults
+    const sectionsResults = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, autocomplete.results), recommendations.results)), [autocomplete.results, recommendations.results]);
+    // Return current active sections populated with data from the API response sectionsResults
+    const activeSectionsWithData = (0, useActiveSectionsWithData_1.default)(sectionsResults, activeSections, sectionsRefs, query);
+    return {
+        fetchRecommendationResults: recommendations.fetchRecommendationResults,
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections: showZeroStateSections,
+        request: autocomplete.request,
+        totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+    };
+}
+exports.default = useSections;

package/lib/cjs/hooks/useSections/useActiveSections.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const typeGuards_1 = require("../../typeGuards");
+function useActiveSections(query, sections, podsData, zeroStateSections) {
+    const showZeroStateSections = !query.length && !!(zeroStateSections === null || zeroStateSections === void 0 ? void 0 : zeroStateSections.length);
+    const [activeSections, setActiveSections] = (0, react_1.useState)(showZeroStateSections ? zeroStateSections : sections);
+    // Merge Recommendation Pods Display Name from Dashboard
+    const activeSectionsTransformed = (0, react_1.useMemo)(() => activeSections.map((config) => {
+        const mergedConfig = config;
+        if ((0, typeGuards_1.isRecommendationsSection)(config)) {
+            const podData = podsData === null || podsData === void 0 ? void 0 : podsData[config.podId];
+            const libraryDisplayName = config.displayName;
+            const dashboardDisplayName = podData === null || podData === void 0 ? void 0 : podData.displayName;
+            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
+        }
+        return mergedConfig;
+    }), [activeSections, podsData]);
+    return {
+        activeSections: activeSectionsTransformed,
+        showZeroStateSections,
+        setActiveSections,
+    };
+}
+exports.default = useActiveSections;

package/lib/cjs/hooks/useSections/useActiveSectionsWithData.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+function useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query) {
+    const [activeSectionsWithData, setActiveSectionsWithData] = (0, react_1.useState)([]);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
+    (0, react_1.useEffect)(() => {
+        const activeSectionsWithDataValue = (0, utils_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs);
+        if (activeSectionsWithDataValue.length || !query) {
+            setActiveSectionsWithData(activeSectionsWithDataValue);
+        }
+    }, [activeSections, sectionsResults, sectionsRefs, query]);
+    return activeSectionsWithData;
+}
+exports.default = useActiveSectionsWithData;

package/lib/cjs/hooks/useSections/useRemoveSections.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable max-params */
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+function useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections) {
+    // Remove sections if necessary
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const features = (0, utils_1.getFeatures)((_b = (_a = Object.values(podsData || {})) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.request);
+        if (showZeroStateSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, showZeroStateSections, sections, podsData, setActiveSections]);
+}
+exports.default = useRemoveSections;

package/lib/cjs/hooks/useSections/useSectionsResults.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("../useDebouncedFetchSections"));
+const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("../useFetchRecommendationPod"));
+const typeGuards_1 = require("../../typeGuards");
+function useSectionsResults(query, cioClient, activeSections, advancedParameters) {
+    // Fetch Autocomplete Results
+    const activeAutocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
+    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = (0, useDebouncedFetchSections_1.default)(query, cioClient, activeAutocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const activeRecommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isRecommendationsSection)(config)), [activeSections]);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, activeRecommendationsSections, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus);
+    return {
+        recommendations: {
+            results: recommendationsResults,
+            fetchRecommendationResults,
+            podsData,
+        },
+        autocomplete: {
+            results: autocompleteResults,
+            request,
+            totalNumResultsPerSection,
+        },
+    };
+}
+exports.default = useSectionsResults;

package/lib/cjs/utils.js

@@ -144,14 +144,14 @@ const getCioClient = (apiKey, cioJsClientOptions) => {
     return null;
 };
 exports.getCioClient = getCioClient;
-const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
+const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+    const getSectionData = (sectionConfig) => {
         const { type } = sectionConfig;
         let sectionData;
         switch (type) {
             case 'recommendations':
-                sectionData = sectionResults[sectionConfig.podId];
+                sectionData = sectionsResults[sectionConfig.podId];
                 break;
             case 'custom':
                 // Copy id from data to the top level
@@ -162,8 +162,12 @@ const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs)
                 break;
             default:
                 // Autocomplete
-                sectionData = sectionResults[sectionConfig.indexSectionName];
+                sectionData = sectionsResults[sectionConfig.indexSectionName];
         }
+        return sectionData;
+    };
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+        const sectionData = getSectionData(sectionConfig);
         if (Array.isArray(sectionData)) {
             const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
             // If ref passed as part of `SectionConfiguration`, use it.

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.23.18';
+exports.default = '1.23.19';

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -117,7 +117,7 @@ const useCioAutocomplete = (options) => {
                     openMenu();
                 }
                 try {
-                    if (advancedParameters?.fetchZeroStateOnFocus && items?.length === 0) {
+                    if (advancedParameters?.fetchZeroStateOnFocus) {
                         fetchRecommendationResults();
                     }
                     cioClient?.tracker?.trackInputFocus();

package/lib/mjs/hooks/useSections/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable max-params */
+import { createRef, useEffect, useMemo, useRef, useState } from 'react';
+import useActiveSections from './useActiveSections';
+import useSectionsResults from './useSectionsResults';
+import useActiveSectionsWithData from './useActiveSectionsWithData';
+import useRemoveSections from './useRemoveSections';
+export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
+    const [podsData, setPodsData] = useState({});
+    // Get Active Sections defined by configuration object
+    const { activeSections, showZeroStateSections, setActiveSections } = useActiveSections(query, sections, podsData, zeroStateSections);
+    // create refs for active sections
+    const sectionsRefs = useRef(activeSections.map(() => createRef()));
+    // Get API results for each active section
+    const { recommendations, autocomplete } = useSectionsResults(query, cioClient, activeSections, advancedParameters);
+    // Access the Pods Data from the Recommendations response to update Active Sections configuration
+    useEffect(() => {
+        if (!recommendations.podsData) {
+            setPodsData(recommendations.podsData);
+        }
+    }, [recommendations.podsData]);
+    useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections);
+    // Combine recommendations and autocomplete results in sectionsResults
+    const sectionsResults = useMemo(() => ({ ...autocomplete.results, ...recommendations.results }), [autocomplete.results, recommendations.results]);
+    // Return current active sections populated with data from the API response sectionsResults
+    const activeSectionsWithData = useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query);
+    return {
+        fetchRecommendationResults: recommendations.fetchRecommendationResults,
+        activeSections,
+        activeSectionsWithData,
+        zeroStateActiveSections: showZeroStateSections,
+        request: autocomplete.request,
+        totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+    };
+}

package/lib/mjs/hooks/useSections/useActiveSections.js

@@ -0,0 +1,22 @@
+import { useMemo, useState } from 'react';
+import { isRecommendationsSection } from '../../typeGuards';
+export default function useActiveSections(query, sections, podsData, zeroStateSections) {
+    const showZeroStateSections = !query.length && !!zeroStateSections?.length;
+    const [activeSections, setActiveSections] = useState(showZeroStateSections ? zeroStateSections : sections);
+    // Merge Recommendation Pods Display Name from Dashboard
+    const activeSectionsTransformed = useMemo(() => activeSections.map((config) => {
+        const mergedConfig = config;
+        if (isRecommendationsSection(config)) {
+            const podData = podsData?.[config.podId];
+            const libraryDisplayName = config.displayName;
+            const dashboardDisplayName = podData?.displayName;
+            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
+        }
+        return mergedConfig;
+    }), [activeSections, podsData]);
+    return {
+        activeSections: activeSectionsTransformed,
+        showZeroStateSections,
+        setActiveSections,
+    };
+}

package/lib/mjs/hooks/useSections/useActiveSectionsWithData.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { getActiveSectionsWithData } from '../../utils';
+export default function useActiveSectionsWithData(sectionsResults, activeSections, sectionsRefs, query) {
+    const [activeSectionsWithData, setActiveSectionsWithData] = useState([]);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
+    useEffect(() => {
+        const activeSectionsWithDataValue = getActiveSectionsWithData(activeSections, sectionsResults, sectionsRefs);
+        if (activeSectionsWithDataValue.length || !query) {
+            setActiveSectionsWithData(activeSectionsWithDataValue);
+        }
+    }, [activeSections, sectionsResults, sectionsRefs, query]);
+    return activeSectionsWithData;
+}

package/lib/mjs/hooks/useSections/useRemoveSections.js

@@ -0,0 +1,20 @@
+/* eslint-disable max-params */
+import { useEffect } from 'react';
+import { getFeatures } from '../../utils';
+export default function useRemoveSections(sections, podsData, setActiveSections, showZeroStateSections, zeroStateSections) {
+    // Remove sections if necessary
+    useEffect(() => {
+        const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
+        if (showZeroStateSections) {
+            if (!features.featureDisplayZeroStateRecommendations) {
+                setActiveSections([]);
+            }
+            else {
+                setActiveSections(zeroStateSections);
+            }
+        }
+        else {
+            setActiveSections(sections);
+        }
+    }, [zeroStateSections, showZeroStateSections, sections, podsData, setActiveSections]);
+}

package/lib/mjs/hooks/useSections/useSectionsResults.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import useDebouncedFetchSection from '../useDebouncedFetchSections';
+import useFetchRecommendationPod from '../useFetchRecommendationPod';
+import { isAutocompleteSection, isRecommendationsSection } from '../../typeGuards';
+export default function useSectionsResults(query, cioClient, activeSections, advancedParameters) {
+    // Fetch Autocomplete Results
+    const activeAutocompleteSections = useMemo(() => activeSections?.filter((config) => isAutocompleteSection(config)), [activeSections]);
+    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = useDebouncedFetchSection(query, cioClient, activeAutocompleteSections, advancedParameters);
+    // Fetch Recommendations Results
+    const activeRecommendationsSections = useMemo(() => activeSections?.filter((config) => isRecommendationsSection(config)), [activeSections]);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, activeRecommendationsSections, advancedParameters?.fetchZeroStateOnFocus);
+    return {
+        recommendations: {
+            results: recommendationsResults,
+            fetchRecommendationResults,
+            podsData,
+        },
+        autocomplete: {
+            results: autocompleteResults,
+            request,
+            totalNumResultsPerSection,
+        },
+    };
+}

package/lib/mjs/utils.js

@@ -130,14 +130,14 @@ export const getCioClient = (apiKey, cioJsClientOptions) => {
     }
     return null;
 };
-export const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
+export const getActiveSectionsWithData = (activeSections, sectionsResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    activeSections?.forEach((sectionConfig, index) => {
+    const getSectionData = (sectionConfig) => {
         const { type } = sectionConfig;
         let sectionData;
         switch (type) {
             case 'recommendations':
-                sectionData = sectionResults[sectionConfig.podId];
+                sectionData = sectionsResults[sectionConfig.podId];
                 break;
             case 'custom':
                 // Copy id from data to the top level
@@ -148,8 +148,12 @@ export const getActiveSectionsWithData = (activeSections, sectionResults, sectio
                 break;
             default:
                 // Autocomplete
-                sectionData = sectionResults[sectionConfig.indexSectionName];
+                sectionData = sectionsResults[sectionConfig.indexSectionName];
         }
+        return sectionData;
+    };
+    activeSections?.forEach((sectionConfig, index) => {
+        const sectionData = getSectionData(sectionConfig);
         if (Array.isArray(sectionData)) {
             const section = {
                 ...sectionConfig,

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.23.18';
+export default '1.23.19';

package/lib/types/hooks/{useSections.d.ts → useSections/index.d.ts}

@@ -1,11 +1,11 @@
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AdvancedParameters, UserDefinedSection, Section } from '../types';
+import { AdvancedParameters, UserDefinedSection } from '../../types';
 export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections?: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
     fetchRecommendationResults: () => Promise<void>;
     activeSections: UserDefinedSection[];
-    activeSectionsWithData: Section[];
-    zeroStateActiveSections: number | false | undefined;
+    activeSectionsWithData: import("../../types").Section[];
+    zeroStateActiveSections: boolean;
     request: Partial<import("@constructor-io/constructorio-client-javascript").AutocompleteRequestType>;
     totalNumResultsPerSection: Record<string, number>;
 };

package/lib/types/hooks/useSections/useActiveSections.d.ts

@@ -0,0 +1,6 @@
+import { PodData, UserDefinedSection } from '../../types';
+export default function useActiveSections(query: string, sections: UserDefinedSection[], podsData?: Record<string, PodData>, zeroStateSections?: UserDefinedSection[]): {
+    activeSections: UserDefinedSection[];
+    showZeroStateSections: boolean;
+    setActiveSections: import("react").Dispatch<import("react").SetStateAction<UserDefinedSection[]>>;
+};

package/lib/types/hooks/useSections/useActiveSectionsWithData.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+import { UserDefinedSection, Section, SectionsData } from '../../types';
+export default function useActiveSectionsWithData(sectionsResults: SectionsData, activeSections: UserDefinedSection[], sectionsRefs: React.MutableRefObject<RefObject<HTMLLIElement>[]>, query: string): Section[];

package/lib/types/hooks/useSections/useRemoveSections.d.ts

@@ -0,0 +1,2 @@
+import { PodData, UserDefinedSection } from '../../types';
+export default function useRemoveSections(sections: UserDefinedSection[], podsData: Record<string, PodData>, setActiveSections: any, showZeroStateSections: boolean, zeroStateSections?: UserDefinedSection[]): void;

package/lib/types/hooks/useSections/useSectionsResults.d.ts

@@ -0,0 +1,15 @@
+import ConstructorIO from '@constructor-io/constructorio-client-javascript';
+import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
+import { AdvancedParameters, UserDefinedSection } from '../../types';
+export default function useSectionsResults(query: string, cioClient: Nullable<ConstructorIO>, activeSections: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
+    recommendations: {
+        results: import("../../types").SectionsData;
+        fetchRecommendationResults: () => Promise<void>;
+        podsData: Record<string, import("../../types").PodData>;
+    };
+    autocomplete: {
+        results: import("../../types").SectionsData;
+        request: Partial<import("@constructor-io/constructorio-client-javascript").AutocompleteRequestType>;
+        totalNumResultsPerSection: Record<string, number>;
+    };
+};

package/lib/types/utils.d.ts

@@ -37,7 +37,7 @@ export declare const functionStrings: {
 export declare const stringifyWithDefaults: (obj: any) => string;
 export declare const disableStoryActions: (story: any) => void;
 export declare const getCioClient: (apiKey?: string, cioJsClientOptions?: ConstructorClientOptions) => ConstructorIOClient | null;
-export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
+export declare const getActiveSectionsWithData: (activeSections: UserDefinedSection[], sectionsResults: SectionsData, sectionsRefs: React.MutableRefObject<React.RefObject<HTMLLIElement>[]>) => Section[];
 export declare const escapeRegExp: (string: string) => string;
 export declare const trackRecommendationView: (target: HTMLElement, activeSectionsWithData: Section[], cioClient: Nullable<ConstructorIOClient>) => void;
 export declare const getItemsForActiveSections: (activeSectionsWithData: Section[]) => Item[];

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.23.18";
+declare const _default: "1.23.19";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.23.18",
+  "version": "1.23.19",
   "description": "Constructor.io Autocomplete UI library for web applications",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/lib/cjs/hooks/useSections.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable max-params */
-const react_1 = require("react");
-const utils_1 = require("../utils");
-const useDebouncedFetchSections_1 = tslib_1.__importDefault(require("./useDebouncedFetchSections"));
-const useFetchRecommendationPod_1 = tslib_1.__importDefault(require("./useFetchRecommendationPod"));
-const typeGuards_1 = require("../typeGuards");
-function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
-    const zeroStateActiveSections = !query.length && (zeroStateSections === null || zeroStateSections === void 0 ? void 0 : zeroStateSections.length);
-    // Define All Sections
-    const [activeSections, setActiveSections] = (0, react_1.useState)(zeroStateActiveSections ? zeroStateSections : sections);
-    const sectionsRefs = (0, react_1.useRef)(activeSections.map(() => (0, react_1.createRef)()));
-    const [activeSectionsWithData, setActiveSectionsWithData] = (0, react_1.useState)([]);
-    const autocompleteSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isAutocompleteSection)(config)), [activeSections]);
-    const recommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => (0, typeGuards_1.isRecommendationsSection)(config)), [activeSections]);
-    // Fetch Autocomplete Results
-    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
-    // Fetch Recommendations Results
-    const { fetchRecommendationResults, recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus);
-    // Remove sections if necessary
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const features = (0, utils_1.getFeatures)((_b = (_a = Object.values(podsData || {})) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.request);
-        if (zeroStateActiveSections) {
-            if (!features.featureDisplayZeroStateRecommendations) {
-                setActiveSections([]);
-            }
-            else {
-                setActiveSections(zeroStateSections);
-            }
-        }
-        else {
-            setActiveSections(sections);
-        }
-    }, [zeroStateSections, zeroStateActiveSections, sections, podsData]);
-    // Merge Recommendation Pods Display Name from Dashboard
-    const activeSectionConfigs = (0, react_1.useMemo)(() => activeSections.map((config) => {
-        const mergedConfig = config;
-        if ((0, typeGuards_1.isRecommendationsSection)(config)) {
-            const podData = podsData[config.podId];
-            const libraryDisplayName = config.displayName;
-            const dashboardDisplayName = podData === null || podData === void 0 ? void 0 : podData.displayName;
-            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
-        }
-        return mergedConfig;
-    }), [activeSections, podsData]);
-    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
-    (0, react_1.useEffect)(() => {
-        const sectionsResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
-        setActiveSectionsWithData((0, utils_1.getActiveSectionsWithData)(activeSectionConfigs, sectionsResults, sectionsRefs));
-    }, [autocompleteResults, recommendationsResults, activeSectionConfigs]);
-    return {
-        fetchRecommendationResults,
-        activeSections,
-        activeSectionsWithData,
-        zeroStateActiveSections,
-        request,
-        totalNumResultsPerSection,
-    };
-}
-exports.default = useSections;

package/lib/mjs/hooks/useSections.js

@@ -1,58 +0,0 @@
-/* eslint-disable max-params */
-import { createRef, useEffect, useMemo, useRef, useState } from 'react';
-import { getActiveSectionsWithData, getFeatures } from '../utils';
-import useDebouncedFetchSection from './useDebouncedFetchSections';
-import useFetchRecommendationPod from './useFetchRecommendationPod';
-import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
-export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
-    const zeroStateActiveSections = !query.length && zeroStateSections?.length;
-    // Define All Sections
-    const [activeSections, setActiveSections] = useState(zeroStateActiveSections ? zeroStateSections : sections);
-    const sectionsRefs = useRef(activeSections.map(() => createRef()));
-    const [activeSectionsWithData, setActiveSectionsWithData] = useState([]);
-    const autocompleteSections = useMemo(() => activeSections?.filter((config) => isAutocompleteSection(config)), [activeSections]);
-    const recommendationsSections = useMemo(() => activeSections?.filter((config) => isRecommendationsSection(config)), [activeSections]);
-    // Fetch Autocomplete Results
-    const { sectionsData: autocompleteResults, request, totalNumResultsPerSection, } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
-    // Fetch Recommendations Results
-    const { fetchRecommendationResults, recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections, advancedParameters?.fetchZeroStateOnFocus);
-    // Remove sections if necessary
-    useEffect(() => {
-        const features = getFeatures(Object.values(podsData || {})?.[0]?.request);
-        if (zeroStateActiveSections) {
-            if (!features.featureDisplayZeroStateRecommendations) {
-                setActiveSections([]);
-            }
-            else {
-                setActiveSections(zeroStateSections);
-            }
-        }
-        else {
-            setActiveSections(sections);
-        }
-    }, [zeroStateSections, zeroStateActiveSections, sections, podsData]);
-    // Merge Recommendation Pods Display Name from Dashboard
-    const activeSectionConfigs = useMemo(() => activeSections.map((config) => {
-        const mergedConfig = config;
-        if (isRecommendationsSection(config)) {
-            const podData = podsData[config.podId];
-            const libraryDisplayName = config.displayName;
-            const dashboardDisplayName = podData?.displayName;
-            mergedConfig.displayName = libraryDisplayName || dashboardDisplayName;
-        }
-        return mergedConfig;
-    }), [activeSections, podsData]);
-    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
-    useEffect(() => {
-        const sectionsResults = { ...autocompleteResults, ...recommendationsResults };
-        setActiveSectionsWithData(getActiveSectionsWithData(activeSectionConfigs, sectionsResults, sectionsRefs));
-    }, [autocompleteResults, recommendationsResults, activeSectionConfigs]);
-    return {
-        fetchRecommendationResults,
-        activeSections,
-        activeSectionsWithData,
-        zeroStateActiveSections,
-        request,
-        totalNumResultsPerSection,
-    };
-}