@constructor-io/constructorio-ui-autocomplete - npm Package Compare versions

Comparing version 1.22.2 to 1.23.0

lib/cjs/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translationsDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
+exports.translationsDescription = exports.fetchZeroStateOnFocusDescription = exports.debounceDescription = exports.termsWithImagesAndCountsDescription = exports.filteredSuggestionsDescription = exports.termsWithGroupSuggestionsDescription = exports.advancedParametersDefaultDescription = exports.advancedParametersDescription = exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.displaySearchTermHighlightsDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientOptionsDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.fullFeaturedAndStyledExampleDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
 // Autocomplete key index
@@ -231,2 +231,3 @@ exports.apiKey = 'key_M57QS8SMPdLdLx4x';
 exports.debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+exports.fetchZeroStateOnFocusDescription = `Pass a boolean to \`fetchZeroStateOnFocus\` to override the zero state fetching behavior from initial render to input focus.`;
 exports.translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
@@ -233,0 +234,0 @@

lib/cjs/hooks/useCioAutocomplete.js

@@ -60,3 +60,3 @@ "use strict";
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = (0, react_1.useMemo)(() => (0, utils_1.getFeatures)(request), [request]);
@@ -109,2 +109,5 @@ // Get dropdown items array from active sections (autocomplete + recommendations + custom)
                 try {
+                    if ((advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus) && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+                        fetchRecommendationResults();
+                    }
                     (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();
@@ -116,3 +119,3 @@ }
                 }
-            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder, onKeyDownCapture: ({ code, key }) => {
+            }, className: 'cio-input', 'data-testid': 'cio-input', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
@@ -132,2 +135,6 @@ const isUserInput = highlightedIndex < 0;
                 }
+                if (code === 'Home' || code === 'End') {
+                    // eslint-disable-next-line no-param-reassign
+                    nativeEvent.preventDownshiftDefault = true;
+                }
             } })),
@@ -134,0 +141,0 @@ getFormProps: () => ({

lib/cjs/hooks/useFetchRecommendationPod.js

@@ -5,43 +5,45 @@ "use strict";
 const react_1 = require("react");
-const useFetchRecommendationPod = (cioClient, recommendationPods) => {
+const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroStateOnFocus = false) => {
     const [recommendationsResults, setRecommendationsResults] = (0, react_1.useState)({});
     const [podsData, setPodsData] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const fetchRecommendationResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
             return;
-        const fetchRecommendationResults = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-            const responses = yield Promise.all(recommendationPods.map((_a) => {
-                var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
-                return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
-            }));
-            const recommendationsPodResults = {};
-            const recommendationsPodsData = {};
-            responses.forEach(({ response, request }, index) => {
-                const { pod, results } = response;
-                if (pod === null || pod === void 0 ? void 0 : pod.id) {
-                    recommendationsPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
-                        var _a, _b;
-                        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 }));
-                    });
-                    recommendationsPodsData[pod.id] = {
-                        displayName: pod.display_name,
-                        podId: pod.id,
-                        request,
-                    };
-                }
-            });
-            try {
-                setRecommendationsResults(recommendationsPodResults);
-                setPodsData(recommendationsPodsData);
+        const responses = yield Promise.all(recommendationPods.map((_a) => {
+            var { podId, indexSectionName } = _a, parameters = tslib_1.__rest(_a, ["podId", "indexSectionName"]);
+            return cioClient.recommendations.getRecommendations(podId, Object.assign(Object.assign({}, parameters), { section: indexSectionName }));
+        }));
+        const recommendationsPodResults = {};
+        const recommendationsPodsData = {};
+        responses.forEach(({ response, request }, index) => {
+            const { pod, results } = response;
+            if (pod === null || pod === void 0 ? void 0 : pod.id) {
+                recommendationsPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
+                    var _a, _b;
+                    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 }));
+                });
+                recommendationsPodsData[pod.id] = {
+                    displayName: pod.display_name,
+                    podId: pod.id,
+                    request,
+                };
             }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log(error);
-            }
         });
+        try {
+            setRecommendationsResults(recommendationsPodResults);
+            setPodsData(recommendationsPodsData);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (fetchZeroStateOnFocus)
+            return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cioClient]);
-    return { recommendationsResults, podsData };
+    return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 exports.default = useFetchRecommendationPod;

lib/cjs/hooks/useRecommendationsObserver.js

@@ -5,2 +5,3 @@ "use strict";
 const typeGuards_1 = require("../typeGuards");
+const viewedRecommendations = new Set();
 /**
@@ -33,4 +34,5 @@ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
             entries.forEach((entry) => {
-                if (entry.isIntersecting) {
+                if (entry.isIntersecting && !viewedRecommendations.has(entry.target)) {
                     trackRecommendationView(entry.target, sections, constructorIO);
+                    viewedRecommendations.add(entry.target);
                 }
@@ -54,4 +56,10 @@ });
         // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen, sections]);
+    // clear viewed recommendations when menu is closed
+    (0, react_1.useEffect)(() => {
+        if (!menuIsOpen) {
+            viewedRecommendations.clear();
+        }
     }, [menuIsOpen]);
 }
 exports.default = useRecommendationsObserver;

lib/cjs/hooks/useSections.js

@@ -21,3 +21,3 @@ "use strict";
     // Fetch Recommendations Results
-    const { recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections, advancedParameters === null || advancedParameters === void 0 ? void 0 : advancedParameters.fetchZeroStateOnFocus);
     // Remove sections if necessary
@@ -56,2 +56,3 @@ (0, react_1.useEffect)(() => {
     return {
+        fetchRecommendationResults,
         activeSections,
@@ -58,0 +59,0 @@ activeSectionsWithData,

lib/cjs/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.22.2';
+exports.default = '1.23.0';

lib/mjs/constants.js

@@ -227,2 +227,3 @@ // Autocomplete key index
 export const debounceDescription = `Pass an integer to \`debounce\` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.`;
+export const fetchZeroStateOnFocusDescription = `Pass a boolean to \`fetchZeroStateOnFocus\` to override the zero state fetching behavior from initial render to input focus.`;
 export const translationsDescription = `Pass a \`translations\` object to display translatable words in your preferred language.
@@ -229,0 +230,0 @@

lib/mjs/hooks/useCioAutocomplete.js

@@ -56,3 +56,3 @@ 'use client';
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = useMemo(() => getFeatures(request), [request]);
@@ -114,2 +114,5 @@ // Get dropdown items array from active sections (autocomplete + recommendations + custom)
                 try {
+                    if (advancedParameters?.fetchZeroStateOnFocus && items?.length === 0) {
+                        fetchRecommendationResults();
+                    }
                     cioClient?.tracker?.trackInputFocus();
@@ -125,3 +128,3 @@ }
             placeholder,
-            onKeyDownCapture: ({ code, key }) => {
+            onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
@@ -141,2 +144,6 @@ const isUserInput = highlightedIndex < 0;
                 }
+                if (code === 'Home' || code === 'End') {
+                    // eslint-disable-next-line no-param-reassign
+                    nativeEvent.preventDownshiftDefault = true;
+                }
             },
@@ -143,0 +150,0 @@ }),

lib/mjs/hooks/useFetchRecommendationPod.js

 import { useEffect, useState } from 'react';
-const useFetchRecommendationPod = (cioClient, recommendationPods) => {
+const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroStateOnFocus = false) => {
     const [recommendationsResults, setRecommendationsResults] = useState({});
     const [podsData, setPodsData] = useState({});
-    useEffect(() => {
+    const fetchRecommendationResults = async () => {
         if (!cioClient || !Array.isArray(recommendationPods) || recommendationPods.length === 0)
             return;
-        const fetchRecommendationResults = async () => {
-            const responses = await Promise.all(recommendationPods.map(({ podId, indexSectionName, ...parameters }) => cioClient.recommendations.getRecommendations(podId, {
-                ...parameters,
-                section: indexSectionName,
-            })));
-            const recommendationsPodResults = {};
-            const recommendationsPodsData = {};
-            responses.forEach(({ response, request }, index) => {
-                const { pod, results } = response;
-                if (pod?.id) {
-                    recommendationsPodResults[pod.id] = results?.map((item) => ({
-                        ...item,
-                        id: item?.data?.id,
-                        section: recommendationPods[index]?.indexSectionName,
-                        podId: pod.id,
-                    }));
-                    recommendationsPodsData[pod.id] = {
-                        displayName: pod.display_name,
-                        podId: pod.id,
-                        request,
-                    };
-                }
-            });
-            try {
-                setRecommendationsResults(recommendationsPodResults);
-                setPodsData(recommendationsPodsData);
+        const responses = await Promise.all(recommendationPods.map(({ podId, indexSectionName, ...parameters }) => cioClient.recommendations.getRecommendations(podId, {
+            ...parameters,
+            section: indexSectionName,
+        })));
+        const recommendationsPodResults = {};
+        const recommendationsPodsData = {};
+        responses.forEach(({ response, request }, index) => {
+            const { pod, results } = response;
+            if (pod?.id) {
+                recommendationsPodResults[pod.id] = results?.map((item) => ({
+                    ...item,
+                    id: item?.data?.id,
+                    section: recommendationPods[index]?.indexSectionName,
+                    podId: pod.id,
+                }));
+                recommendationsPodsData[pod.id] = {
+                    displayName: pod.display_name,
+                    podId: pod.id,
+                    request,
+                };
             }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log(error);
-            }
-        };
+        });
+        try {
+            setRecommendationsResults(recommendationsPodResults);
+            setPodsData(recommendationsPodsData);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    useEffect(() => {
+        if (fetchZeroStateOnFocus)
+            return;
         fetchRecommendationResults();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cioClient]);
-    return { recommendationsResults, podsData };
+    return { fetchRecommendationResults, recommendationsResults, podsData };
 };
 export default useFetchRecommendationPod;

lib/mjs/hooks/useRecommendationsObserver.js

 import { useEffect } from 'react';
 import { isRecommendationsSection } from '../typeGuards';
+const viewedRecommendations = new Set();
 /**
@@ -30,4 +31,5 @@ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
             entries.forEach((entry) => {
-                if (entry.isIntersecting) {
+                if (entry.isIntersecting && !viewedRecommendations.has(entry.target)) {
                     trackRecommendationView(entry.target, sections, constructorIO);
+                    viewedRecommendations.add(entry.target);
                 }
@@ -51,4 +53,10 @@ });
         // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuIsOpen, sections]);
+    // clear viewed recommendations when menu is closed
+    useEffect(() => {
+        if (!menuIsOpen) {
+            viewedRecommendations.clear();
+        }
     }, [menuIsOpen]);
 }
 export default useRecommendationsObserver;

lib/mjs/hooks/useSections.js

@@ -18,3 +18,3 @@ /* eslint-disable max-params */
     // Fetch Recommendations Results
-    const { recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections);
+    const { fetchRecommendationResults, recommendationsResults, podsData } = useFetchRecommendationPod(cioClient, recommendationsSections, advancedParameters?.fetchZeroStateOnFocus);
     // Remove sections if necessary
@@ -52,2 +52,3 @@ useEffect(() => {
     return {
+        fetchRecommendationResults,
         activeSections,
@@ -54,0 +55,0 @@ activeSectionsWithData,

lib/mjs/version.js

@@ -1,1 +0,1 @@
-export default '1.22.2';
+export default '1.23.0';

lib/types/constants.d.ts

@@ -35,2 +35,3 @@ import { AutocompleteSubmitEvent } from './types';
 export declare const debounceDescription = "Pass an integer to `debounce` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.";
+export declare const fetchZeroStateOnFocusDescription = "Pass a boolean to `fetchZeroStateOnFocus` to override the zero state fetching behavior from initial render to input focus.";
 export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\"\n  }\n```\n";

lib/types/hooks/useFetchRecommendationPod.d.ts

 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { SectionsData, RecommendationsSectionConfiguration, PodData } from '../types';
-declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[]) => {
+declare const useFetchRecommendationPod: (cioClient: Nullable<ConstructorIOClient>, recommendationPods: RecommendationsSectionConfiguration[], fetchZeroStateOnFocus?: boolean) => {
+    fetchRecommendationResults: () => Promise<void>;
     recommendationsResults: SectionsData;
@@ -6,0 +7,0 @@ podsData: Record<string, PodData>;

lib/types/hooks/useSections.d.ts

@@ -5,2 +5,3 @@ import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections: UserDefinedSection[] | undefined, advancedParameters?: AdvancedParameters): {
+    fetchRecommendationResults: () => Promise<void>;
     activeSections: UserDefinedSection[];
@@ -7,0 +8,0 @@ activeSectionsWithData: Section[];

lib/types/types.d.ts

@@ -18,2 +18,3 @@ import { GetItemPropsOptions } from 'downshift';
     translations?: Translations;
+    fetchZeroStateOnFocus?: boolean;
 }
@@ -20,0 +21,0 @@ export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;

lib/types/version.d.ts

@@ -1,2 +0,2 @@
-declare const _default: "1.22.2";
+declare const _default: "1.23.0";
 export default _default;

package.json

 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.22.2",
+  "version": "1.23.0",
   "description": "Constructor.io Autocomplete UI library for web applications",
@@ -5,0 +5,0 @@ "main": "lib/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

487762

increased by0.63%

Lines of code

4800

increased by0.93%

No dependency changes