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

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.20';

package/lib/types/hooks/useCioAutocomplete.d.ts

@@ -1,6 +1,5 @@
-import { CioAutocompleteProps, Section, UserDefinedSection, HTMLPropsWithCioDataAttributes, Item } from '../types';
+import { Section, UserDefinedSection, HTMLPropsWithCioDataAttributes, Item, UseCioAutocompleteOptions } from '../types';
 export declare const defaultSections: UserDefinedSection[];
-export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     query: string;
     sections: Section[];

package/lib/types/hooks/useDownShift.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
-import { UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
+import { UseComboboxProps, UseComboboxReturnValue } from 'downshift';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { Item, OnSubmit } from '../types';
-type UseDownShiftOptions = {
+interface UseDownShiftOptions extends UseComboboxProps<Item> {
     setQuery: React.Dispatch<React.SetStateAction<string>>;
-    items: Item[];
     onSubmit: OnSubmit;
     previousQuery?: string;
     cioClient: Nullable<ConstructorIOClient>;
-    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
-};
+}
 export type DownShift = UseComboboxReturnValue<Item>;
 type UseDownShift = (options: UseDownShiftOptions) => DownShift;
 declare const useDownShift: UseDownShift;

package/lib/types/hooks/useNormalizedProps.d.ts

@@ -0,0 +1,9 @@
+import { UseCioAutocompleteOptions, UserDefinedSection } from '../types';
+export declare const defaultSections: UserDefinedSection[];
+declare const useNormalizedProps: (options: UseCioAutocompleteOptions) => {
+    sections: UserDefinedSection[];
+    zeroStateSections: UserDefinedSection[] | undefined;
+    cioJsClientOptions: import("@constructor-io/constructorio-client-javascript").ConstructorClientOptions | undefined;
+    advancedParameters: import("../types").AdvancedParameters | undefined;
+};
+export default useNormalizedProps;

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/types.d.ts

@@ -1,4 +1,4 @@
-import { GetItemPropsOptions, UseComboboxStateChange } from 'downshift';
+import { GetItemPropsOptions, UseComboboxProps } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { IAutocompleteParameters, SearchSuggestion as SearchSuggestionFromClient, Product as ProductFromClient, Item as ItemBase, AutocompleteRequestType, ConstructorClientOptions, RecommendationsParameters } from '@constructor-io/constructorio-client-javascript/lib/types';
@@ -19,13 +19,16 @@ export interface AdvancedParametersBase {
     fetchZeroStateOnFocus?: boolean;
 }
 export type AdvancedParameters = AdvancedParametersBase & Omit<IAutocompleteParameters, 'resultsPerSection'>;
-export type CioAutocompleteProps = CioClientConfig & {
+type OptionalItemsComboboxProps<Item> = Partial<UseComboboxProps<Item>> & {
+    items?: Item[];
+};
+export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
+export type CioAutocompleteProps = CioClientConfig & OptionalItemsComboboxProps<Item> & {
     openOnFocus?: boolean;
     getSearchResultsUrl?: (item: SearchSuggestion) => string;
     onSubmit: OnSubmit;
     onFocus?: () => void;
     onChange?: (input: string) => void;
-    onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
     placeholder?: string;
     children?: ReactNode;
     sections?: UserDefinedSection[];

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.20";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-autocomplete",
-  "version": "1.23.18",
+  "version": "1.23.20",
   "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,
-    };
-}