ublo-lib 1.15.0 → 1.16.0

package/es/common/components/gesco-contact-form/gesco-contact-form.js

@@ -163,7 +163,6 @@ function ContactForm({
     children: [_jsx(Select, {
       label: Messages.get(widgetLang, "subject"),
       className: css.fullWidthField,
-      icon: "Mail",
       placeholder: Messages.get(widgetLang, "defaultSubject"),
       value: fields.subject.value,
       onValueChange: changed("subject"),
@@ -197,7 +196,7 @@ function ContactForm({
       valid: fields.lastname.touched && !fields.lastname.error
     }), _jsx(Input, {
       type: "email",
-      icon: "AtSign",
+      icon: "Mail",
       label: Messages.get(widgetLang, "email"),
       value: fields.email.value,
       onValueChange: changed("email"),
@@ -282,7 +281,7 @@ function ContactForm({
         children: [_jsx(Icons.Loader2, {}), Messages.get(widgetLang, "submit")]
       }) : _jsxs(Button, {
         type: "submit",
-        children: [_jsx(Icons.Mail, {}), Messages.get(widgetLang, "submit")]
+        children: [_jsx(Icons.Plane, {}), Messages.get(widgetLang, "submit")]
       })
     })]
   });

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

@@ -0,0 +1,2 @@
+export default function useConstant(fn: any): any;
+//# sourceMappingURL=use-constant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-constant.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-constant.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,EAAE,GAAG,OAQ1C"}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export default function useDebouncedSearch(searchFunction: any): {
+    text: string;
+    setText: React.Dispatch<React.SetStateAction<string>>;
+    search: import("react-async-hook").UseAsyncReturn<any, any[]>;
+};
+//# sourceMappingURL=use-debounced-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-search.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-debounced-search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,cAAc,KAAA;;;;EAWxD"}

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

@@ -0,0 +1,11 @@
+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 };
+}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare 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[]>;
+};
+//# sourceMappingURL=use-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-search.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/instant-search/hooks/use-search.ts"],"names":[],"mappings":";AAOA,oBAAY,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;;;;EAW1E"}

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

@@ -0,0 +1,10 @@
+import getConfig from "next/config";
+import useDebouncedSearch from "./use-debounced-search";
+import * as API from "../services/api";
+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);
+    });
+}

package/es/common/components/instant-search/i18n.json

@@ -0,0 +1,76 @@
+{
+  "fr": {
+    "try": "Essayez",
+    "pages": "Pages",
+    "faqs": "Questions fréquentes",
+    "information": "Informations",
+    "instructors": "Moniteurs",
+    "noProducts": "Pas de produit correspondant",
+    "productTitleWithWeek": "Les offres pour la période du ",
+    "productTitleWithoutWeek": "Choisissez votre période pour afficher les tarifs et affiner les résultats",
+    "chooseWeek": "Choisir ma période",
+    "updateWeek": "Modifier ma période",
+    "showOtherResults": "Afficher les autres résultats"
+  },
+  "en": {
+    "try": "Try",
+    "pages": "Pages",
+    "faqs": "FAQs",
+    "information": "Information",
+    "instructors": "Instructors",
+    "noProducts": "No matching product",
+    "productTitleWithWeek": "Offers for the period from ",
+    "productTitleWithoutWeek": "Choose your period to view rates and refine results below",
+    "chooseWeek": "Choose my period",
+    "updateWeek": "Change my period",
+    "showOtherResults": "Show other results"
+  },
+  "es": {
+    "pages": "Paginas",
+    "faqs": "Preguntas frecuentes",
+    "information": "Informaciones",
+    "instructors": "Instructores",
+    "noProducts": "Ningún producto coincidente",
+    "productTitleWithWeek": "Ofertas para el período de ",
+    "productTitleWithoutWeek": "Elija su período para ver las tarifas y refinar los resultados a continuación",
+    "chooseWeek": "Elige mi periodo",
+    "updateWeek": "Cambiar mi periodo",
+    "showOtherResults": "Mostrar otros resultados"
+  },
+  "it": {
+    "pages": "Pagine",
+    "faqs": "Domande frequenti",
+    "information": "Informazioni",
+    "instructors": "Insegnanti",
+    "noProducts": "Nessun prodotto corrispondente",
+    "productTitleWithWeek": "Offerte per il periodo dal ",
+    "productTitleWithoutWeek": "Scegli il tuo periodo per visualizzare le tariffe e perfezionare i risultati di seguito",
+    "chooseWeek": "Scegli il mio periodo",
+    "updateWeek": "Cambia il mio ciclo",
+    "showOtherResults": "Mostra altri risultati"
+  },
+  "nl": {
+    "pages": "Pagina's",
+    "faqs": "Veel Gestelde Vragen",
+    "information": "Informatie",
+    "instructors": "Instructeurs",
+    "noProducts": "Geen bijpassend product",
+    "productTitleWithWeek": "Aanbiedingen voor de periode van ",
+    "productTitleWithoutWeek": "Kies hieronder uw periode om tarieven te bekijken en resultaten te verfijnen",
+    "chooseWeek": "Kies mijn periode",
+    "updateWeek": "Wijzig mijn menstruatie",
+    "showOtherResults": "Toon andere resultaten"
+  },
+  "ru": {
+    "pages": "Страницы",
+    "faqs": "Часто задаваемые вопросы",
+    "information": "Информация",
+    "instructors": "Преподаватели",
+    "noProducts": "Нет подходящего продукта",
+    "productTitleWithWeek": "Предложения на период с ",
+    "productTitleWithoutWeek": "Выберите период, чтобы просмотреть цены и уточнить результаты ниже",
+    "chooseWeek": "Выберите мой период",
+    "updateWeek": "Изменить мой период",
+    "showOtherResults": "Показать другие результаты"
+  }
+}

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

@@ -0,0 +1,3 @@
+import InstantSearch from "./instant-search";
+export default InstantSearch;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,eAAe,aAAa,CAAC"}

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

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare type Suggestions = {
+    fr?: string[];
+    en?: string[];
+};
+declare 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): JSX.Element;
+export {};
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/input.tsx"],"names":[],"mappings":";AASA,aAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;CACf,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,WAAW,GACZ,EAAE,KAAK,eA8EP"}

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: css.container, children: [_jsx(Input, { value: text, onValueChange: setText, icon: inputIcon, className: classes }), enableSuggestion && !text && (_jsxs("div", { className: css.suggestion, children: [message(lang, "try"), _jsx("div", { className: css.buttons, children: 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 (_jsxs("button", { className: classes, onClick: updateText(suggestion), onMouseDown: createRipple, children: ["\u00AB ", suggestion, " \u00BB"] }, suggestion));
+                        }) })] })), _jsx(Button, { variant: "transparent", className: css.close, onClick: closeSearch, children: _jsx(Icons.Cross, {}) })] }));
+}
+function getSuggestions(suggestions = {}) {
+    return {
+        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/input.module.css

@@ -0,0 +1,87 @@
+.container {
+  position: relative;
+  padding: 10px;
+}
+
+.input {
+  --ds-input-padding: 14px;
+  --ds-input-background: var(--ds-grey-000, #fff);
+
+  width: 100%;
+  border-radius: var(--ds-radius-200, 10px);
+  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+}
+
+.inputLoading svg {
+  animation: search-loader-spinning 1280ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)) infinite;
+}
+
+@keyframes search-loader-spinning {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+.suggestion {
+  position: absolute;
+  top: 50%;
+  left: 54px;
+  height: 21px;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  color: var(--ds-grey-500, #484848);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.buttons {
+  position: relative;
+  height: inherit;
+  color: inherit;
+}
+
+.button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  height: 100%;
+  padding: 2px 5px 4px 5px;
+  color: inherit;
+  line-height: 1;
+  font-weight: 700;
+  cursor: pointer;
+  pointer-events: auto;
+  border-radius: var(--ds-radius-100, 6px);
+  transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    opacity 320ms var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    transform 320ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.buttonPrev {
+  transform: translateY(-100%);
+}
+
+.buttonCurrent {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.button:is(:hover, :focus) {
+  background-color: var(--ds-grey-100, #f5f5f5);
+}
+
+.close {
+  position: absolute;
+  top: 17px;
+  right: 14px;
+  color: inherit;
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SearchOptions } from "./hooks/use-search";
+declare type Props = {
+    lang: string;
+    className?: string;
+    ubloContext: any;
+    suggestions?: {
+        fr?: string[];
+        en?: string[];
+    };
+    options?: SearchOptions;
+};
+export default function InstantSearch({ lang, suggestions, className, ubloContext, options, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=instant-search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"instant-search.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/instant-search.tsx"],"names":[],"mappings":";AAUA,OAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAK9D,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE;QACZ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAY,GACb,EAAE,KAAK,eAsIP"}

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 [closing, setClosing] = 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 dialogClasses = classNames(css.dialog, {
+        [css.dialogClosing]: closing,
+    });
+    const openSearch = () => {
+        setOpened(true);
+    };
+    const closeSearch = (skipEvent) => {
+        setClosing(true);
+        setTimeout(() => {
+            setClosing(false);
+            setOpened(false);
+            setText("");
+            document.body.style.removeProperty("overflow");
+            if (!skipEvent) {
+                const event = search?.result?.length === 0 ? "Search failed" : "Search canceled";
+                if (text.length > 0) {
+                    Plausible.sendGoal(event, {
+                        Terms: text,
+                    });
+                }
+            }
+        }, 320);
+    };
+    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 (_jsxs(_Fragment, { children: [_jsx(Button, { className: classes, onClick: openSearch, children: _jsx(Icons.Search, { className: css.searchIcon }) }), _jsxs(Dialog, { className: dialogClasses, isOpened: closing || opened, showCloseButton: false, close: closeSearch, container: "body", children: [_jsx(Input, { lang: lang, text: text, setText: setText, closeSearch: closeSearch, loading: search.loading === true, suggestions: suggestions }), _jsx(Results, { lang: lang, text: text, results: search.result, weekNumber: weekNumber, openPeriodPicker: openPeriodPicker, loading: search.loading === true && search.result === undefined, sendPlausibleGoal: sendPlausibleGoal })] }), _jsx(Dialog, { isOpened: periodPickerOpened, close: closePeriodPicker, container: "body", children: _jsx(PeriodPicker, { onChange: updateWeek, ubloContext: ubloContext }) })] }));
+}

package/es/common/components/instant-search/instant-search.module.css

@@ -0,0 +1,38 @@
+.dialog {
+  width: 1100px;
+  max-width: calc(100% - 6px);
+  max-height: calc(100% - 6px);
+  background-color: transparent;
+  box-shadow: none;
+  transition: opacity 320ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+  pointer-events: auto;
+}
+
+.dialog::backdrop {
+  transition: opacity 320ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.dialog[open]:not(.loading) {
+  animation: dialog-appearance 320ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+@keyframes dialog-appearance {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  70% {
+    transform: translateY(-4px);
+  }
+  100% {
+    transform: none;
+  }
+}
+
+.dialogClosing,
+.dialogClosing::backdrop {
+  opacity: 0;
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Hit } from "./results";
+declare 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): JSX.Element | null;
+export {};
+//# sourceMappingURL=links.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../../src/common/components/instant-search/links.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGrC,aAAK,KAAK,GAAG;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,iBAAiB,GAClB,EAAE,KAAK,sBAoEP"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: css.linksSection, children: [_jsx("div", { className: css.linksTitle, children: linksTitle }), _jsxs("div", { className: css.links, children: [loading &&
+                        PLACEHOLDERS.map((_, i) => {
+                            return (_jsx("div", { className: css.loaderContainer, children: _jsx(Loader, { className: css.loader, variant: "overlay" }) }, i));
+                        }), !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 (
+                            // @ts-ignore
+                            _jsxs(Link, { href: decodedPath, className: css.link, onClick: sendPlausibleGoal(decodedPath), onMouseDown: createRipple, children: [_jsx(Icon, { className: css.linkIcon }), _jsxs("div", { className: css.linkContent, children: [parentTitle && (_jsx("div", { className: css.linkParent, dangerouslySetInnerHTML: { __html: parentTitle } })), _jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: linkTitle } }), linkText && (_jsx("div", { className: css.linkText, dangerouslySetInnerHTML: { __html: linkText } }))] })] }, id));
+                        })] })] }));
+}

package/es/common/components/instant-search/links.module.css

@@ -0,0 +1,96 @@
+.linksSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.linksTitle {
+  position: sticky;
+  top: 16px;
+  font-size: 17px;
+  font-weight: 700;
+  padding: 3px 8px;
+  background-color: var(--ds-grey-200, #efefef);
+  border-radius: var(--ds-radius-100, 6px);
+  z-index: 1;
+}
+
+@media (min-width: 730px) {
+  .linksTitle {
+    top: 0;
+  }
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.loaderContainer {
+  position: relative;
+  width: 100%;
+  height: 44px;
+  border-radius: var(--ds-radius-100, 6px);
+}
+
+.link {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  padding: 6px;
+  color: var(--ds-grey-500, #484848);
+  border-radius: var(--ds-radius-100, 6px);
+  transition: background-color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.link:is(:hover, :focus) {
+  background-color: var(--ds-grey-100, #f5f5f5);
+}
+
+.linkIcon {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  fill: currentColor;
+}
+
+.linkContent {
+  flex: 1 1 auto;
+}
+
+.linkTitle {
+  font-size: 15px;
+}
+
+.link mark {
+  position: relative;
+  display: inline-block;
+  font-weight: 700;
+  color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  background-color: transparent;
+}
+
+.link mark::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  border-radius: calc(var(--ds-radius-100, 6px) / 3);
+  opacity: 0.15;
+}
+
+.linkParent {
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+.linkText {
+  font-size: 12px;
+  white-space: pre-wrap;
+}