@constructor-io/constructorio-ui-autocomplete 1.15.1 → 1.16.1

package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const SectionItem_1 = tslib_1.__importDefault(require("../SectionItem/SectionItem"));
 const utils_1 = require("../../../utils");
+const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b;
+    const { getSectionProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
     const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
     if (!((_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length))
         return null;
-    return (react_1.default.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
+    return (react_1.default.createElement("li", Object.assign({}, getSectionProps(section)),
         react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionName)),
         react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_b = section === null || section === void 0 ? void 0 : section.data) === null || _b === void 0 ? void 0 : _b.map((item) => (react_1.default.createElement(SectionItem_1.default, { item: item, key: item === null || item === void 0 ? void 0 : item.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };

package/lib/cjs/constants.js

@@ -35,6 +35,7 @@ const {
   getInputProps: () => ({...})), // prop getter for jsx input element
   getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container
   getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result
+  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.
 
   // available for use, but not required for all use cases
   selectedItem: item, // undefined or current selected item (via hover or arrow keys)

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -9,7 +9,7 @@ const usePrevious_1 = tslib_1.__importDefault(require("./usePrevious"));
 const utils_1 = require("../utils");
 const useConsoleErrors_1 = tslib_1.__importDefault(require("./useConsoleErrors"));
 const useSections_1 = tslib_1.__importDefault(require("./useSections"));
-const useItems_1 = tslib_1.__importDefault(require("./useItems"));
+const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecommendationsObserver"));
 exports.defaultSections = [
     {
         identifier: 'Search Suggestions',
@@ -28,11 +28,12 @@ const useCioAutocomplete = (options) => {
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
-    const items = (0, useItems_1.default)(activeSectionsWithData);
-    const downshift = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex } = downshift;
+    const items = (0, react_1.useMemo)(() => (0, utils_1.getItemsForActiveSections)(activeSectionsWithData), [activeSectionsWithData]);
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps, } = (0, useDownShift_1.default)({ setQuery, items, onSubmit, cioClient, previousQuery });
     // Log console errors
     (0, useConsoleErrors_1.default)(sections, activeSections);
+    // Track recommendation view
+    (0, useRecommendationsObserver_1.default)(isOpen, activeSectionsWithData, cioClient, utils_1.trackRecommendationView);
     return {
         query,
         sections: activeSectionsWithData,
@@ -46,9 +47,9 @@ const useCioAutocomplete = (options) => {
         getItemProps: (item) => {
             const { index, sectionId } = (0, utils_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
-            return Object.assign(Object.assign({}, downshift.getItemProps({ item, index })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
+            return Object.assign(Object.assign({}, getItemProps({ item, index })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
         },
-        getInputProps: () => (Object.assign(Object.assign({}, downshift.getInputProps({
+        getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {
                 setQuery(e.target.value);
                 if (onChange) {
@@ -61,10 +62,10 @@ const useCioAutocomplete = (options) => {
                     options.onFocus();
                 }
                 if (zeroStateActiveSections && openOnFocus !== false) {
-                    downshift.openMenu();
+                    openMenu();
                 }
                 if (query === null || query === void 0 ? void 0 : query.length) {
-                    downshift.openMenu();
+                    openMenu();
                 }
                 try {
                     (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();
@@ -107,6 +108,22 @@ const useCioAutocomplete = (options) => {
             className: 'cio-form',
             'data-testid': 'cio-form',
         }),
+        getSectionProps: (section) => {
+            var _a;
+            const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
+            const attributes = {
+                className: `${sectionName} cio-section`,
+                ref: section.ref,
+                role: 'none',
+                'data-cnstrc-section': (_a = section.data[0]) === null || _a === void 0 ? void 0 : _a.section,
+            };
+            // Add data attributes for recommendations
+            if (section.type === 'recommendations') {
+                attributes['data-cnstrc-recommendations'] = true;
+                attributes['data-cnstrc-recommendations-pod-id'] = section.identifier;
+            }
+            return attributes;
+        },
         setQuery,
         cioClient,
         autocompleteClassName,

package/lib/cjs/hooks/useDownShift.js

@@ -9,22 +9,38 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     onSelectedItemChange({ selectedItem }) {
         var _a;
         if (selectedItem) {
-            if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
-                setQuery(selectedItem.value || '');
-            }
             if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });
                 try {
-                    if (!((_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.data) === null || _a === void 0 ? void 0 : _a.url)) {
+                    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.section) === 'Search Suggestions') {
+                        setQuery(selectedItem.value || '');
                         cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackSearchSubmit(selectedItem.value, {
                             originalQuery: previousQuery,
                         });
                     }
-                    cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
-                        originalQuery: previousQuery,
-                        section: selectedItem.section,
-                    });
+                    // Autocomplete Select tracking
+                    // Recommendation Select tracking
+                    if (selectedItem.podId && ((_a = selectedItem.data) === null || _a === void 0 ? void 0 : _a.id)) {
+                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationClick({
+                            itemName: selectedItem.value,
+                            itemId: selectedItem.data.id,
+                            variationId: selectedItem.data.variation_id,
+                            podId: selectedItem.podId,
+                            strategyId: selectedItem.strategy.id,
+                            section: selectedItem.section,
+                            resultId: selectedItem.result_id,
+                        });
+                        // Select tracking for all other Constructor sections:
+                        // (ie: Search Suggestions, Products, Custom Cio sections, etc)
+                        // This does not apply to custom user defined sections that aren't part of Constructor index
+                    }
+                    else if (selectedItem.result_id) {
+                        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
+                            originalQuery: previousQuery,
+                            section: selectedItem.section,
+                        });
+                    }
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console

package/lib/cjs/hooks/useRecommendationsObserver.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
+ * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
+ * That is done by passing the ref of each recommendation section to the IntersectionObserver.
+ * The refs are either passed as a prop in `SectionConfiguration` or created by the library by default.
+ * Either way the refs are stored in the sections array.
+ *
+ * @param menuIsOpen - A boolean indicating whether the menu is open.
+ * @param sections - An array of sections to observe.
+ * @param constructorIO - An instance of the ConstructorIO client.
+ * @param trackRecommendationView - A callback function to track the recommendation view event.
+ */
+function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRecommendationView) {
+    // Get refs for each section
+    const refs = sections
+        .filter((section) => section.type === 'recommendations')
+        .map((section) => section.ref);
+    (0, react_1.useEffect)(() => {
+        const intersectionObserverOptions = {
+            // Root element is the bounding target for the observer to observe. If null, then the document viewport is used.
+            root: null,
+            // 0.1 indicate the callback should be called when that proportion of the target is visible (e.g., 10% visible).
+            threshold: 0.1,
+        };
+        const observer = new IntersectionObserver((entries) => {
+            // For each section, check if it's intersecting
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    trackRecommendationView(entry.target, sections, constructorIO);
+                }
+            });
+        }, intersectionObserverOptions);
+        // Observe each section
+        refs.forEach((ref) => {
+            if (ref === null || ref === void 0 ? void 0 : ref.current) {
+                observer.observe(ref.current);
+            }
+        });
+        return () => {
+            // Unobserve each section
+            refs.forEach((ref) => {
+                if (ref === null || ref === void 0 ? void 0 : ref.current) {
+                    observer.unobserve(ref.current);
+                }
+            });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen]);
+}
+exports.default = useRecommendationsObserver;

package/lib/cjs/hooks/useSections.js

@@ -1,32 +1,28 @@
 "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"));
 function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
     const zeroStateActiveSections = !query.length && zeroStateSections;
-    const [activeSections, setActiveSections] = (0, react_1.useState)(zeroStateActiveSections ? zeroStateSections : sections);
+    // Define All Sections
+    const activeSections = 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) => config.type === 'autocomplete' || !config.type), [activeSections]);
-    const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
+    const recommendationsSections = (0, react_1.useMemo)(() => activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations'), [activeSections]);
     // Fetch Autocomplete Results
     const { sectionsData: autocompleteResults, request } = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
-    const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
-    const activeSectionsWithData = (0, utils_1.getActiveSectionsWithData)(activeSections, sectionResults);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
     (0, react_1.useEffect)(() => {
-        setActiveSections(zeroStateActiveSections ? zeroStateSections : sections);
-    }, [query, sections, zeroStateSections, zeroStateActiveSections]);
-    (0, react_1.useEffect)(() => {
-        if (sections && !Array.isArray(sections)) {
-            setActiveSections([]);
-        }
-        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
-            setActiveSections([]);
-        }
-    }, [sections, zeroStateSections]);
+        const sectionsResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
+        setActiveSectionsWithData((0, utils_1.getActiveSectionsWithData)(activeSections, sectionsResults, sectionsRefs));
+    }, [autocompleteResults, recommendationsResults, activeSections]);
     return {
         activeSections,
         activeSectionsWithData,

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
+exports.getItemsForActiveSections = exports.trackRecommendationView = exports.escapeRegExp = exports.getActiveSectionsWithData = exports.getCioClient = exports.disableStoryActions = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getItemPosition = exports.getSearchSuggestionFeatures = void 0;
 const tslib_1 = require("tslib");
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
 const typeGuards_1 = require("./typeGuards");
@@ -120,23 +120,29 @@ const getCioClient = (apiKey, cioJsClientOptions) => {
     return null;
 };
 exports.getCioClient = getCioClient;
-const getActiveSectionsWithData = (activeSections, sectionResults) => {
+const getActiveSectionsWithData = (activeSections, sectionResults, sectionsRefs) => {
     const activeSectionsWithData = [];
-    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((config) => {
-        const { identifier } = config;
-        let data;
-        if ((0, typeGuards_1.isCustomSection)(config)) {
+    activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((sectionConfig, index) => {
+        const { identifier } = sectionConfig;
+        let sectionData;
+        if ((0, typeGuards_1.isCustomSection)(sectionConfig)) {
             // Copy id from data to the top level
-            data = config.data.map((item) => {
+            sectionData = sectionConfig.data.map((item) => {
                 var _a;
                 return (Object.assign(Object.assign({}, item), { id: (item === null || item === void 0 ? void 0 : item.id) || ((_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id) }));
             });
         }
         else {
-            data = sectionResults[identifier];
+            sectionData = sectionResults[identifier];
         }
-        if (Array.isArray(data)) {
-            activeSectionsWithData.push(Object.assign(Object.assign({}, config), { data }));
+        if (Array.isArray(sectionData)) {
+            const section = Object.assign(Object.assign({}, sectionConfig), { data: sectionData });
+            // If ref passed as part of `SectionConfiguration`, use it.
+            // Otherwise, use the ref from our library generated refs array
+            const userDefinedSectionRef = sectionConfig.ref;
+            const libraryGeneratedSectionRef = sectionsRefs.current[index];
+            section.ref = userDefinedSectionRef || libraryGeneratedSectionRef;
+            activeSectionsWithData.push(section);
         }
     });
     return activeSectionsWithData;
@@ -144,3 +150,35 @@ const getActiveSectionsWithData = (activeSections, sectionResults) => {
 exports.getActiveSectionsWithData = getActiveSectionsWithData;
 const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 exports.escapeRegExp = escapeRegExp;
+const trackRecommendationView = (target, activeSectionsWithData, cioClient) => {
+    if (target.dataset.cnstrcRecommendationsPodId) {
+        // Pull recommendations from activeSectionsWithData by podId surfaced on target
+        const recommendationSection = activeSectionsWithData.find((section) => section.identifier === target.dataset.cnstrcRecommendationsPodId);
+        const recommendationItems = recommendationSection === null || recommendationSection === void 0 ? void 0 : recommendationSection.data.map((item) => {
+            var _a, _b;
+            return ({
+                itemId: (_a = item.data) === null || _a === void 0 ? void 0 : _a.id,
+                itemName: item.value,
+                variationId: (_b = item.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            });
+        });
+        cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackRecommendationView({
+            podId: target.dataset.cnstrcRecommendationsPodId,
+            numResultsViewed: (recommendationItems === null || recommendationItems === void 0 ? void 0 : recommendationItems.length) || 0,
+            url: window.location.href,
+            section: target.dataset.cnstrcSection,
+            items: recommendationItems,
+        });
+    }
+};
+exports.trackRecommendationView = trackRecommendationView;
+const getItemsForActiveSections = (activeSectionsWithData) => {
+    const items = [];
+    activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
+        if (config === null || config === void 0 ? void 0 : config.data) {
+            items.push(...config.data);
+        }
+    });
+    return items;
+};
+exports.getItemsForActiveSections = getItemsForActiveSections;

package/lib/cjs/version.js

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

package/lib/mjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import SectionItem from '../SectionItem/SectionItem';
 import { camelToStartCase } from '../../../utils';
+import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
+    const { getSectionProps } = useContext(CioAutocompleteContext);
     const sectionName = section?.displayName || section?.identifier;
     if (!section?.data?.length)
         return null;
-    return (React.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
+    return (React.createElement("li", { ...getSectionProps(section) },
         React.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, camelToStartCase(sectionName)),
         React.createElement("ul", { className: 'cio-section-items', role: 'none' }, section?.data?.map((item) => (React.createElement(SectionItem, { item: item, key: item?.id, displaySearchTermHighlights: section.displaySearchTermHighlights }))))));
 };

package/lib/mjs/constants.js

@@ -32,6 +32,7 @@ const {
   getInputProps: () => ({...})), // prop getter for jsx input element
   getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container
   getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result
+  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.
 
   // available for use, but not required for all use cases
   selectedItem: item, // undefined or current selected item (via hover or arrow keys)

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import usePrevious from './usePrevious';
-import { getItemPosition, getSearchSuggestionFeatures } from '../utils';
+import { getItemPosition, getItemsForActiveSections, getSearchSuggestionFeatures, trackRecommendationView, } from '../utils';
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
-import useItems from './useItems';
+import useRecommendationsObserver from './useRecommendationsObserver';
 export const defaultSections = [
     {
         identifier: 'Search Suggestions',
@@ -24,11 +24,12 @@ const useCioAutocomplete = (options) => {
     // Get autocomplete sections (autocomplete + recommendations + custom)
     const { activeSections, activeSectionsWithData, zeroStateActiveSections, request } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
-    const items = useItems(activeSectionsWithData);
-    const downshift = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
-    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex } = downshift;
+    const items = useMemo(() => getItemsForActiveSections(activeSectionsWithData), [activeSectionsWithData]);
+    const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu, highlightedIndex, getInputProps, getItemProps, } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery });
     // Log console errors
     useConsoleErrors(sections, activeSections);
+    // Track recommendation view
+    useRecommendationsObserver(isOpen, activeSectionsWithData, cioClient, trackRecommendationView);
     return {
         query,
         sections: activeSectionsWithData,
@@ -47,13 +48,13 @@ const useCioAutocomplete = (options) => {
             const { index, sectionId } = getItemPosition({ item, items });
             const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`;
             return {
-                ...downshift.getItemProps({ item, index }),
+                ...getItemProps({ item, index }),
                 className: `cio-item ${sectionItemTestId}`,
                 'data-testid': sectionItemTestId,
             };
         },
         getInputProps: () => ({
-            ...downshift.getInputProps({
+            ...getInputProps({
                 onChange: (e) => {
                     setQuery(e.target.value);
                     if (onChange) {
@@ -67,10 +68,10 @@ const useCioAutocomplete = (options) => {
                     options.onFocus();
                 }
                 if (zeroStateActiveSections && openOnFocus !== false) {
-                    downshift.openMenu();
+                    openMenu();
                 }
                 if (query?.length) {
-                    downshift.openMenu();
+                    openMenu();
                 }
                 try {
                     cioClient?.tracker?.trackInputFocus();
@@ -118,6 +119,21 @@ const useCioAutocomplete = (options) => {
             className: 'cio-form',
             'data-testid': 'cio-form',
         }),
+        getSectionProps: (section) => {
+            const sectionName = section?.displayName || section?.identifier;
+            const attributes = {
+                className: `${sectionName} cio-section`,
+                ref: section.ref,
+                role: 'none',
+                'data-cnstrc-section': section.data[0]?.section,
+            };
+            // Add data attributes for recommendations
+            if (section.type === 'recommendations') {
+                attributes['data-cnstrc-recommendations'] = true;
+                attributes['data-cnstrc-recommendations-pod-id'] = section.identifier;
+            }
+            return attributes;
+        },
         setQuery,
         cioClient,
         autocompleteClassName,

package/lib/mjs/hooks/useDownShift.js

@@ -6,22 +6,38 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
     itemToString: (item) => item?.value || '',
     onSelectedItemChange({ selectedItem }) {
         if (selectedItem) {
-            if (selectedItem?.section === 'Search Suggestions') {
-                setQuery(selectedItem.value || '');
-            }
             if (selectedItem?.value) {
                 if (onSubmit)
                     onSubmit({ item: selectedItem, originalQuery: previousQuery });
                 try {
-                    if (!selectedItem?.data?.url) {
+                    if (selectedItem?.section === 'Search Suggestions') {
+                        setQuery(selectedItem.value || '');
                         cioClient?.tracker.trackSearchSubmit(selectedItem.value, {
                             originalQuery: previousQuery,
                         });
                     }
-                    cioClient?.tracker.trackAutocompleteSelect(selectedItem.value, {
-                        originalQuery: previousQuery,
-                        section: selectedItem.section,
-                    });
+                    // Autocomplete Select tracking
+                    // Recommendation Select tracking
+                    if (selectedItem.podId && selectedItem.data?.id) {
+                        cioClient?.tracker.trackRecommendationClick({
+                            itemName: selectedItem.value,
+                            itemId: selectedItem.data.id,
+                            variationId: selectedItem.data.variation_id,
+                            podId: selectedItem.podId,
+                            strategyId: selectedItem.strategy.id,
+                            section: selectedItem.section,
+                            resultId: selectedItem.result_id,
+                        });
+                        // Select tracking for all other Constructor sections:
+                        // (ie: Search Suggestions, Products, Custom Cio sections, etc)
+                        // This does not apply to custom user defined sections that aren't part of Constructor index
+                    }
+                    else if (selectedItem.result_id) {
+                        cioClient?.tracker.trackAutocompleteSelect(selectedItem.value, {
+                            originalQuery: previousQuery,
+                            section: selectedItem.section,
+                        });
+                    }
                 }
                 catch (error) {
                     // eslint-disable-next-line no-console

package/lib/mjs/hooks/useRecommendationsObserver.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+/**
+ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
+ * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
+ * That is done by passing the ref of each recommendation section to the IntersectionObserver.
+ * The refs are either passed as a prop in `SectionConfiguration` or created by the library by default.
+ * Either way the refs are stored in the sections array.
+ *
+ * @param menuIsOpen - A boolean indicating whether the menu is open.
+ * @param sections - An array of sections to observe.
+ * @param constructorIO - An instance of the ConstructorIO client.
+ * @param trackRecommendationView - A callback function to track the recommendation view event.
+ */
+function useRecommendationsObserver(menuIsOpen, sections, constructorIO, trackRecommendationView) {
+    // Get refs for each section
+    const refs = sections
+        .filter((section) => section.type === 'recommendations')
+        .map((section) => section.ref);
+    useEffect(() => {
+        const intersectionObserverOptions = {
+            // Root element is the bounding target for the observer to observe. If null, then the document viewport is used.
+            root: null,
+            // 0.1 indicate the callback should be called when that proportion of the target is visible (e.g., 10% visible).
+            threshold: 0.1,
+        };
+        const observer = new IntersectionObserver((entries) => {
+            // For each section, check if it's intersecting
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    trackRecommendationView(entry.target, sections, constructorIO);
+                }
+            });
+        }, intersectionObserverOptions);
+        // Observe each section
+        refs.forEach((ref) => {
+            if (ref?.current) {
+                observer.observe(ref.current);
+            }
+        });
+        return () => {
+            // Unobserve each section
+            refs.forEach((ref) => {
+                if (ref?.current) {
+                    observer.unobserve(ref.current);
+                }
+            });
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen]);
+}
+export default useRecommendationsObserver;

package/lib/mjs/hooks/useSections.js

@@ -1,29 +1,25 @@
-import { useEffect, useMemo, useState } from 'react';
+/* eslint-disable max-params */
+import { createRef, useEffect, useMemo, useRef, useState } from 'react';
 import { getActiveSectionsWithData } from '../utils';
 import useDebouncedFetchSection from './useDebouncedFetchSections';
 import useFetchRecommendationPod from './useFetchRecommendationPod';
 export default function useSections(query, cioClient, sections, zeroStateSections, advancedParameters) {
     const zeroStateActiveSections = !query.length && zeroStateSections;
-    const [activeSections, setActiveSections] = useState(zeroStateActiveSections ? zeroStateSections : sections);
+    // Define All Sections
+    const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
+    const sectionsRefs = useRef(activeSections.map(() => createRef()));
+    const [activeSectionsWithData, setActiveSectionsWithData] = useState([]);
     const autocompleteSections = useMemo(() => activeSections?.filter((config) => config.type === 'autocomplete' || !config.type), [activeSections]);
-    const recommendationsSections = activeSections?.filter((config) => config.type === 'recommendations');
+    const recommendationsSections = useMemo(() => activeSections?.filter((config) => config.type === 'recommendations'), [activeSections]);
     // Fetch Autocomplete Results
     const { sectionsData: autocompleteResults, request } = useDebouncedFetchSection(query, cioClient, autocompleteSections, advancedParameters);
     // Fetch Recommendations Results
     const recommendationsResults = useFetchRecommendationPod(cioClient, recommendationsSections);
-    const sectionResults = { ...autocompleteResults, ...recommendationsResults };
-    const activeSectionsWithData = getActiveSectionsWithData(activeSections, sectionResults);
+    // Add to active sections the results data and refs when autocomplete results or recommendation results fetched
     useEffect(() => {
-        setActiveSections(zeroStateActiveSections ? zeroStateSections : sections);
-    }, [query, sections, zeroStateSections, zeroStateActiveSections]);
-    useEffect(() => {
-        if (sections && !Array.isArray(sections)) {
-            setActiveSections([]);
-        }
-        if (zeroStateSections && !Array.isArray(zeroStateSections)) {
-            setActiveSections([]);
-        }
-    }, [sections, zeroStateSections]);
+        const sectionsResults = { ...autocompleteResults, ...recommendationsResults };
+        setActiveSectionsWithData(getActiveSectionsWithData(activeSections, sectionsResults, sectionsRefs));
+    }, [autocompleteResults, recommendationsResults, activeSections]);
     return {
         activeSections,
         activeSectionsWithData,