ublo-lib 1.31.42 → 1.31.44

package/es/common/components/info-buttons.js

@@ -1,107 +1,103 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as React from "react";
 import { memo, useEffect, useState, useRef } from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import Popup from "./popup";
 import Levels from "../../esf/components/levels";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const SLASH = "/";
 const modules = {
-  Levels
+    Levels,
 };
-const isLocalUrl = href => href !== null && href !== undefined && href.length > 2 && href[0] === SLASH && href[1] !== SLASH;
+const isLocalUrl = (href) => href !== null &&
+    href !== undefined &&
+    href.length > 2 &&
+    href[0] === SLASH &&
+    href[1] !== SLASH;
 const pdfRegex = /.*\.pdf$/;
-const isPdfUrl = href => href !== null && href !== undefined && pdfRegex.exec(href) !== null;
-const hasUrlTarget = target => target === "_blank";
-const handleClick = async (config, lang, section, zone, setContent, setModule, setClosed, e, setPopupClassName) => {
-  const anchor = section.querySelector("a");
-  const href = anchor.getAttribute("href");
-  const target = anchor.getAttribute("target");
-  const module = anchor.dataset.module;
-  const isLocal = isLocalUrl(href);
-  const isPdf = isPdfUrl(href);
-  const hasTarget = hasUrlTarget(target);
-  const className = section.getAttribute("data-class");
-  if (!isLocal || isPdf || module === undefined && !hasTarget) {
-    return;
-  }
-  e.preventDefault();
-  e.stopPropagation();
-  if (module !== undefined) {
-    const Module = modules[module];
-    const menu = href === "" || href === null || href === undefined ? undefined : href;
-    setContent();
-    setModule(_jsx(Module, {
-      menu: menu
-    }));
-    setClosed(false);
-  } else {
-    const {
-      ubloApi,
-      site
-    } = config;
-    const url = `${ubloApi}/api/zone?site=${site}&lang=${lang}&path=${href}&id=${zone}`;
-    const req = await fetch(url);
-    const data = await req.text();
-    setModule();
-    setContent(data);
-    setClosed(false);
-  }
-  setPopupClassName(className);
-};
-const InfoButtons = ({
-  zone = "contenu",
-  selector = ".tool-button",
-  children
-}) => {
-  const ref = useRef();
-  const {
-    cmsMode,
-    config,
-    lang
-  } = useUbloContext();
-  const [count, setCount] = useState(0);
-  const [content, setContent] = useState("");
-  const [module, setModule] = useState();
-  const [closed, setClosed] = useState(true);
-  const [popupClassName, setPopupClassName] = useState();
-  const close = () => {
-    setClosed(true);
-  };
-  useEffect(() => {
-    if (window.location.hostname === "localhost") {
-      console.warn("InfoButtons is deprecated, prefer useInfoButtons");
+const isPdfUrl = (href) => href !== null && href !== undefined && pdfRegex.exec(href) !== null;
+const hasUrlTarget = (target) => target === "_blank";
+const handleClick = (config, lang, section, zone, setContent, setModule, setClosed, e, setPopupClassName) => __awaiter(void 0, void 0, void 0, function* () {
+    const anchor = section.querySelector("a");
+    const href = anchor.getAttribute("href");
+    const target = anchor.getAttribute("target");
+    // eslint-disable-next-line @next/next/no-assign-module-variable
+    const module = anchor.dataset.module;
+    const isLocal = isLocalUrl(href);
+    const isPdf = isPdfUrl(href);
+    const hasTarget = hasUrlTarget(target);
+    const className = section.getAttribute("data-class");
+    if (!isLocal || isPdf || (module === undefined && !hasTarget)) {
+        return;
     }
-  }, []);
-  useEffect(() => {
-    const infos = ref.current;
-    const sections = infos.querySelectorAll(`section${selector}`);
-    setCount(sections.length);
-    const clicked = section => e => {
-      handleClick(config, lang, section, zone, setContent, setModule, setClosed, e, setPopupClassName);
-    };
-    if (cmsMode !== "editing") {
-      Array.prototype.forEach.call(sections, section => {
-        section.clicked = clicked(section);
-        section.addEventListener("click", section.clicked);
-      });
-      return () => {
-        Array.prototype.forEach.call(sections, section => {
-          section.removeEventListener("click", section.clicked);
-        });
-      };
+    e.preventDefault();
+    e.stopPropagation();
+    if (module !== undefined) {
+        const Module = modules[module];
+        const menu = href === "" || href === null || href === undefined ? undefined : href;
+        setContent();
+        setModule(<Module menu={menu}/>);
+        setClosed(false);
     }
-  }, [count, cmsMode, config, lang, zone, selector]);
-  return _jsxs("div", {
-    className: "info-buttons",
-    ref: ref,
-    children: [children, !closed && _jsx(Popup, {
-      close: close,
-      html: content,
-      className: popupClassName,
-      backdrop: true,
-      children: module
-    })]
-  });
+    else {
+        const { ubloApi, site } = config;
+        const url = `${ubloApi}/api/zone?site=${site}&lang=${lang}&path=${href}&id=${zone}`;
+        const req = yield fetch(url);
+        const data = yield req.text();
+        setModule();
+        setContent(data);
+        setClosed(false);
+    }
+    setPopupClassName(className);
+});
+const InfoButtons = ({ zone = "contenu", selector = ".tool-button", children, }) => {
+    const ref = useRef();
+    const { cmsMode, config, lang } = useUbloContext();
+    const [count, setCount] = useState(0);
+    const [content, setContent] = useState("");
+    const [module, setModule] = useState();
+    const [closed, setClosed] = useState(true);
+    const [popupClassName, setPopupClassName] = useState();
+    const close = () => {
+        setClosed(true);
+    };
+    useEffect(() => {
+        if (window.location.hostname === "localhost") {
+            // eslint-disable-next-line no-console
+            console.warn("InfoButtons is deprecated, prefer useInfoButtons");
+        }
+    }, []);
+    useEffect(() => {
+        const infos = ref.current;
+        const sections = infos.querySelectorAll(`section${selector}`);
+        setCount(sections.length);
+        const clicked = (section) => (e) => {
+            handleClick(config, lang, section, zone, setContent, setModule, setClosed, e, setPopupClassName);
+        };
+        if (cmsMode !== "editing") {
+            Array.prototype.forEach.call(sections, (section) => {
+                section.clicked = clicked(section);
+                section.addEventListener("click", section.clicked);
+            });
+            return () => {
+                Array.prototype.forEach.call(sections, (section) => {
+                    section.removeEventListener("click", section.clicked);
+                });
+            };
+        }
+    }, [count, cmsMode, config, lang, zone, selector]);
+    return (<div className="info-buttons" ref={ref}>
+      {children}
+      {!closed && (<Popup close={close} html={content} className={popupClassName} backdrop>
+          {module}
+        </Popup>)}
+    </div>);
 };
-export default memo(InfoButtons);
+export default memo(InfoButtons);

package/es/common/components/information/index.d.ts

@@ -0,0 +1,2 @@
+import Information from "./information";
+export default Information;

package/es/common/components/information/index.js

@@ -1,2 +1,2 @@
 import Information from "./information";
-export default Information;
+export default Information;

package/es/common/components/information/information.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export default function Information({ source, zone, preventOpening, }: {
+    source?: string;
+    zone?: string;
+    preventOpening: any;
+}): React.JSX.Element;

package/es/common/components/information/information.jsx

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import Router from "next/router";
+import { useUbloContext } from "ublo/with-ublo";
+import { fetchZone, fetchMenus } from "ublo/fetcher";
+import Dialog from "dt-design-system/es/dialog";
+import styles from "./information.module.css";
+const STORAGE_KEY = "information_viewed";
+export default function Information({ source = "/popup", zone = "content", preventOpening, }) {
+    const [content, setContent] = React.useState();
+    const { config, lang } = useUbloContext();
+    const { ubloApi, site } = config;
+    const close = React.useCallback(() => {
+        sessionStorage.setItem(STORAGE_KEY, "true");
+        setContent(undefined);
+    }, []);
+    const getContent = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        const menus = yield fetchMenus(ubloApi, site, lang, source, 1, true);
+        if (menus.length === 1) {
+            const content = yield fetchZone(ubloApi, site, lang, source, zone);
+            if (!content)
+                return;
+            setContent(content);
+        }
+    }), [lang, site, source, ubloApi, zone]);
+    React.useEffect(() => {
+        const alreadySeen = sessionStorage.getItem(STORAGE_KEY) ||
+            sessionStorage.getItem("cms_token");
+        if (!preventOpening && !alreadySeen) {
+            getContent();
+        }
+    }, [getContent, preventOpening]);
+    Router.ready(() => {
+        Router.events.on("routeChangeComplete", () => {
+            close();
+        });
+    });
+    return (<Dialog className={styles.information} close={close} isOpened={!!content}>
+      <div className={styles.inner} dangerouslySetInnerHTML={{ __html: content }} data-information-popup=""/>
+    </Dialog>);
+}

package/es/common/components/instant-search/hooks/use-constant.d.ts

@@ -0,0 +1 @@
+export default function useConstant(fn: any): any;

package/es/common/components/instant-search/hooks/use-constant.js

@@ -1,10 +1,8 @@
 import * as React from "react";
 export default function useConstant(fn) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
-  }
-  return ref.current.v;
-}
+    const ref = React.useRef();
+    if (!ref.current) {
+        ref.current = { v: fn() };
+    }
+    return ref.current.v;
+}

package/es/common/components/instant-search/hooks/use-debounced-search.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export default function useDebouncedSearch(searchFunction: (text: string) => Promise<any>): {
+    text: string;
+    setText: React.Dispatch<React.SetStateAction<string>>;
+    search: import("react-async-hook").UseAsyncReturn<any, any[]>;
+};

package/es/common/components/instant-search/hooks/use-debounced-search.js

@@ -1,20 +1,20 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as React from "react";
 import debouncePromise from "awesome-debounce-promise";
 import { useAsync } from "react-async-hook";
 import useConstant from "./use-constant";
 const DEBOUNCE_AMOUNT = 400;
 export default function useDebouncedSearch(searchFunction) {
-  const [text, setText] = React.useState("");
-  const debouncedSearchFunction = useConstant(() => debouncePromise(searchFunction, DEBOUNCE_AMOUNT));
-  const search = useAsync(async () => text.length === 0 ? undefined : debouncedSearchFunction(text), [debouncedSearchFunction, text], {
-    setLoading: state => ({
-      ...state,
-      loading: true
-    })
-  });
-  return {
-    text,
-    setText,
-    search
-  };
-}
+    const [text, setText] = React.useState("");
+    const debouncedSearchFunction = useConstant(() => debouncePromise(searchFunction, DEBOUNCE_AMOUNT));
+    const search = useAsync(() => __awaiter(this, void 0, void 0, function* () { return (text.length === 0 ? undefined : debouncedSearchFunction(text)); }), [debouncedSearchFunction, text], { setLoading: (state) => (Object.assign(Object.assign({}, state), { loading: true })) });
+    return { text, setText, search };
+}

package/es/common/components/instant-search/hooks/use-search.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type SearchOptions = {
+    groupLimit?: number;
+    page?: number;
+    perPage?: number;
+    queryBy?: string;
+    queryByWeights?: string;
+    filterBy?: string;
+    sortBy?: string;
+};
+export default function useSearch(lang: string, options?: SearchOptions): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    search: import("react-async-hook").UseAsyncReturn<any, any[]>;
+};

package/es/common/components/instant-search/hooks/use-search.js

@@ -1,14 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import getConfig from "next/config";
 import useDebouncedSearch from "./use-debounced-search";
 import * as API from "../services/api";
-const {
-  publicRuntimeConfig
-} = getConfig();
-const {
-  site
-} = publicRuntimeConfig;
+const { publicRuntimeConfig } = getConfig();
+const { site } = publicRuntimeConfig;
 export default function useSearch(lang, options = {}) {
-  return useDebouncedSearch(async query => {
-    return API.fetchResults(site, lang, query, options.groupLimit, options.queryBy, options.queryByWeights);
-  });
-}
+    return useDebouncedSearch((query) => __awaiter(this, void 0, void 0, function* () {
+        return API.fetchResults(site, lang, query, options.groupLimit, options.queryBy, options.queryByWeights);
+    }));
+}

package/es/common/components/instant-search/{index.js → index.d.ts}

@@ -1,2 +1,2 @@
 import InstantSearch from "./instant-search";
-export default InstantSearch;
+export default InstantSearch;

package/es/common/components/instant-search/index.jsx

@@ -0,0 +1,2 @@
+import InstantSearch from "./instant-search";
+export default InstantSearch;

package/es/common/components/instant-search/input.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+type Suggestions = {
+    fr?: string[];
+    en?: string[];
+};
+type Props = {
+    lang: string;
+    text: string;
+    setText: (value: string) => void;
+    loading: boolean;
+    closeSearch: () => void;
+    suggestions?: Suggestions;
+};
+export default function SearchInput({ lang, text, setText, closeSearch, loading, suggestions, }: Props): React.JSX.Element;
+export {};

package/es/common/components/instant-search/input.jsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import classNames from "classnames";
+import Input from "dt-design-system/es/input";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import * as Ripple from "dt-design-system/es/ripple";
+import message from "./services/messages";
+import css from "./input.module.css";
+const TRANSITION_DURATION = 1800;
+export default function SearchInput({ lang, text, setText, closeSearch, loading, suggestions, }) {
+    const [currentSuggestion, setCurrentSuggestion] = React.useState(0);
+    const updateText = (value) => () => {
+        setText(value);
+    };
+    const classes = classNames(css.input, {
+        [css.inputLoading]: loading,
+    });
+    const inputIcon = loading ? "Loader2" : "Search";
+    const suggestionsSet = getSuggestions(suggestions)[lang];
+    const enableSuggestion = Boolean(suggestionsSet);
+    const createRipple = (e) => {
+        Ripple.create(e);
+    };
+    React.useEffect(() => {
+        if (enableSuggestion && !text) {
+            const interval = setInterval(() => {
+                setCurrentSuggestion((current) => {
+                    const nextSuggestion = current >= suggestionsSet.length - 1 ? 0 : current + 1;
+                    return nextSuggestion;
+                });
+            }, TRANSITION_DURATION);
+            return () => {
+                clearInterval(interval);
+            };
+        }
+    }, [enableSuggestion, suggestionsSet, text]);
+    return (<div className={css.container}>
+      <Input value={text} onValueChange={setText} icon={inputIcon} className={classes}/>
+      {enableSuggestion && !text && (<div className={css.suggestion}>
+          {message(lang, "try")}
+          <div className={css.buttons}>
+            {suggestionsSet.map((suggestion, i) => {
+                const isCurrent = i === currentSuggestion;
+                const isPrev = currentSuggestion === 0
+                    ? i === suggestionsSet.length - 1
+                    : i === currentSuggestion - 1;
+                const classes = classNames(css.button, {
+                    [css.buttonCurrent]: isCurrent,
+                    [css.buttonPrev]: isPrev,
+                });
+                return (<button key={suggestion} className={classes} onClick={updateText(suggestion)} onMouseDown={createRipple}>
+                  « {suggestion} »
+                </button>);
+            })}
+          </div>
+        </div>)}
+      <Button variant="transparent" className={css.close} onClick={closeSearch}>
+        <Icons.Cross />
+      </Button>
+    </div>);
+}
+function getSuggestions(suggestions = {}) {
+    return Object.assign({ fr: ["cours de ski", "cours privés", "compétition", "cours débutants"], en: ["ski lessons", "private lessons", "competition"] }, suggestions);
+}

package/es/common/components/instant-search/instant-search.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SearchOptions } from "./hooks/use-search";
+type Props = {
+    lang: string;
+    className?: string;
+    ubloContext: {
+        lang: string;
+        cmsMode: "connected" | "editing" | "info";
+        metadata: Record<string, string>;
+        path: string;
+    };
+    suggestions?: {
+        fr?: string[];
+        en?: string[];
+    };
+    options?: SearchOptions;
+};
+export default function InstantSearch({ lang, suggestions, className, ubloContext, options, }: Props): React.JSX.Element;
+export {};

package/es/common/components/instant-search/instant-search.jsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import classNames from "classnames";
+import Router from "next/router";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import Dialog from "dt-design-system/es/dialog";
+// import PeriodPicker from "ublo-lib/es/esf/components/period-picker";
+import PeriodPicker from "../../../esf/components/period-picker";
+import Input from "./input";
+import Results from "./results";
+import useSearch from "./hooks/use-search";
+// import * as Plausible from "ublo-lib/es/common/components/plausible";
+import * as Plausible from "../plausible";
+import css from "./instant-search.module.css";
+export default function InstantSearch({ lang, suggestions, className, ubloContext, options = {}, }) {
+    const [opened, setOpened] = React.useState(false);
+    const [periodPickerOpened, setPeriodPickerOpened] = React.useState(false);
+    const [weekNumber, setWeekNumber] = React.useState(null);
+    const { text, setText, search } = useSearch(lang, options);
+    const classes = classNames(css.search, className);
+    const openSearch = () => {
+        setOpened(true);
+    };
+    const closeSearch = (skipEvent) => {
+        var _a;
+        setOpened(false);
+        setText("");
+        document.body.style.removeProperty("overflow");
+        if (!skipEvent) {
+            const event = ((_a = search === null || search === void 0 ? void 0 : search.result) === null || _a === void 0 ? void 0 : _a.length) === 0 ? "Search failed" : "Search canceled";
+            if (text.length > 0) {
+                Plausible.sendGoal(event, {
+                    Terms: text,
+                });
+            }
+        }
+    };
+    const sendPlausibleGoal = (path) => () => {
+        Plausible.sendGoal("Search", {
+            "Terms - Destination": `${text} - ${path}`,
+        });
+    };
+    const openPeriodPicker = () => {
+        setPeriodPickerOpened(true);
+    };
+    const closePeriodPicker = () => {
+        setPeriodPickerOpened(false);
+    };
+    const updateWeek = () => {
+        const storedWeekNumber = window.sessionStorage.getItem("stayWeek");
+        if (storedWeekNumber !== null) {
+            setWeekNumber(Number(storedWeekNumber));
+            setPeriodPickerOpened(false);
+        }
+    };
+    Router.ready(() => {
+        Router.events.on("routeChangeStart", () => {
+            if (opened) {
+                closeSearch(true);
+            }
+        });
+    });
+    const handleKeyPresses = React.useCallback((e) => {
+        const allowedKeys = ["k"];
+        const { code, ctrlKey, key, metaKey } = e;
+        const isAllowed = (ctrlKey || metaKey) &&
+            (allowedKeys.includes(code) || allowedKeys.includes(key));
+        if (!isAllowed)
+            return;
+        e.preventDefault();
+        if (key === "k" && (ctrlKey || metaKey)) {
+            openSearch();
+        }
+    }, []);
+    React.useEffect(() => {
+        if (opened) {
+            updateWeek();
+        }
+    }, [opened]);
+    React.useEffect(() => {
+        window.addEventListener("keydown", handleKeyPresses);
+        return () => {
+            window.removeEventListener("keydown", handleKeyPresses);
+        };
+    }, [handleKeyPresses]);
+    return (<>
+      <Button className={classes} onClick={openSearch}>
+        <Icons.Search className={css.searchIcon}/>
+      </Button>
+      <Dialog className={css.dialog} isOpened={opened} showCloseButton={false} close={closeSearch} container="body">
+        <Input lang={lang} text={text} setText={setText} closeSearch={closeSearch} loading={search.loading === true} suggestions={suggestions}/>
+        <Results lang={lang} text={text} results={search.result} weekNumber={weekNumber} openPeriodPicker={openPeriodPicker} loading={search.loading === true && search.result === undefined} sendPlausibleGoal={sendPlausibleGoal}/>
+      </Dialog>
+      <Dialog isOpened={periodPickerOpened} close={closePeriodPicker} container="body">
+        <PeriodPicker onChange={updateWeek} ubloContext={ubloContext}/>
+      </Dialog>
+    </>);
+}

package/es/common/components/instant-search/links.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { Hit } from "./results";
+type Props = {
+    linksTitle: string;
+    icon: "FileText" | "Info" | "Question" | "User";
+    links: Hit[];
+    pageTitleAsTitle?: boolean;
+    loading: boolean;
+    sendPlausibleGoal: (path: string) => void;
+};
+export default function Links({ icon, linksTitle, links, pageTitleAsTitle, loading, sendPlausibleGoal, }: Props): React.JSX.Element;
+export {};

package/es/common/components/instant-search/links.jsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import Link from "ublo/link";
+import Loader from "dt-design-system/es/loader";
+import * as Icons from "dt-design-system/es/icons";
+import * as Ripple from "dt-design-system/es/ripple";
+import * as Utils from "./services/utils";
+import css from "./links.module.css";
+const PLACEHOLDERS = [...new Array(3)];
+export default function Links({ icon, linksTitle, links, pageTitleAsTitle, loading, sendPlausibleGoal, }) {
+    const Icon = Icons[icon];
+    const noResult = !loading && !links.length;
+    const createRipple = (e) => {
+        Ripple.create(e);
+    };
+    if (noResult)
+        return null;
+    return (<div className={css.linksSection}>
+      <div className={css.linksTitle}>{linksTitle}</div>
+      <div className={css.links}>
+        {loading &&
+            PLACEHOLDERS.map((_, i) => {
+                return (<div key={i} className={css.loaderContainer}>
+                <Loader className={css.loader} variant="overlay"/>
+              </div>);
+            })}
+        {!loading &&
+            links.map((link) => {
+                const { id, text, parentTitle, path } = link.document;
+                const decodedPath = decodeURIComponent(path);
+                const titleProperty = pageTitleAsTitle ? "pageTitle" : "title";
+                const linkTitle = Utils.getHighlight(titleProperty, link.highlight) ||
+                    link.document[titleProperty];
+                const linkText = Utils.getHighlight("text", link.highlight, true) || text;
+                return (<Link key={id} href={decodedPath} className={css.link} onClick={sendPlausibleGoal(decodedPath)} onMouseDown={createRipple}>
+                <Icon className={css.linkIcon}/>
+                <div className={css.linkContent}>
+                  {parentTitle && (<div className={css.linkParent} dangerouslySetInnerHTML={{ __html: parentTitle }}/>)}
+                  <div className={css.linkTitle} dangerouslySetInnerHTML={{ __html: linkTitle }}/>
+                  {linkText && (<div className={css.linkText} dangerouslySetInnerHTML={{ __html: linkText }}/>)}
+                </div>
+              </Link>);
+            })}
+      </div>
+    </div>);
+}

package/es/common/components/instant-search/no-product.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type Props = {
+    className?: string;
+};
+export default function NoProduct({ className }: Props): React.JSX.Element;
+export {};