@depict-ai/react-ui 0.0.9 → 0.0.11

package/dist/main.js

@@ -1,90 +1,103 @@
-var $lgFzj$reactdom = require("react-dom");
-var $lgFzj$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
-var $lgFzj$react = require("react");
-var $lgFzj$depictaiui = require("@depict-ai/ui");
-var $lgFzj$reactjsxruntime = require("react/jsx-runtime");
-var $lgFzj$depictaiutilishared = require("@depict-ai/utilishared");
-var $lgFzj$solidjs = require("solid-js");
+var $1pn1h$reactdom = require("react-dom");
+var $1pn1h$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
+var $1pn1h$react = require("react");
+var $1pn1h$depictaiui = require("@depict-ai/ui");
+var $1pn1h$reactjsxruntime = require("react/jsx-runtime");
+var $1pn1h$solidjs = require("solid-js");
+var $1pn1h$depictaiutilishared = require("@depict-ai/utilishared");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "DepictSearchPage", () => $6abe21f0d440de7c$export$210723f5a54a7028);
-$parcel$export(module.exports, "DepictProvider", () => $36997bef3cf034d6$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "openModal", () => $74e00cdf1575ca1b$export$a7f6cffb6b8ba11c);
-$parcel$export(module.exports, "DepictSearchHeader", () => $74e00cdf1575ca1b$export$cbcd1ecdb41b1d0a);
+$parcel$export(module.exports, "DepictSearchPage", () => $7c7f5a6b750dca70$export$210723f5a54a7028);
+$parcel$export(module.exports, "DepictProvider", () => $18b830ef84ac138a$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "openModal", () => $20bf907adee775ba$export$a7f6cffb6b8ba11c);
+$parcel$export(module.exports, "DepictSearchHeader", () => $20bf907adee775ba$export$cbcd1ecdb41b1d0a);
 
 
 
 
 
+const $e589c49931886c97$export$8e769ad4338a911e = {
+    search: null,
+    header_alignment: null
+};
+
+
+
 
-let $35c9ea6fbd139a83$var$set = false;
-function $35c9ea6fbd139a83$export$6453cbc34515a94d() {
-    if ($35c9ea6fbd139a83$var$set) return; // Just being safe
-    $35c9ea6fbd139a83$var$set = true;
+
+function $b4d0d98857ed9934$export$5cae361ad82dce8b(value) {
+    const ref = (0, $1pn1h$react.useRef)();
+    (0, $1pn1h$react.useEffect)(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+}
+let $b4d0d98857ed9934$var$run_on_href_change;
+function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
+    $b4d0d98857ed9934$var$run_on_href_change = cb;
+}
+(async ()=>{
+    for await (const href of (0, $1pn1h$depictaiutilishared.href_change_ipns))$b4d0d98857ed9934$var$run_on_href_change?.(href);
+})();
+
+
+
+
+
+let $80a9072c96ebf849$var$set = false;
+function $80a9072c96ebf849$export$6453cbc34515a94d(is_search_page) {
+    if ($80a9072c96ebf849$var$set) return; // Just being safe
+    $80a9072c96ebf849$var$set = true;
     let should_use_old_scroll = false;
     const old_scrollTo = window.scrollTo;
     window.scrollTo = (...args)=>{
-        const is_next_scrolling_enabled = args?.[1] !== 0; // TODO: This is not working for me right now: process.env.__NEXT_SCROLL_RESTORATION
-        if (should_use_old_scroll || is_next_scrolling_enabled) return Reflect.apply(old_scrollTo, window, args);
+        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
         else should_use_old_scroll = true;
     };
-    addEventListener("popstate", ()=>{
+    addEventListener("popstate", (e)=>{
+        if (!is_search_page(location)) {
+            $80a9072c96ebf849$var$removeLotsOfPadding(); // Just making sure
+            return;
+        }
         should_use_old_scroll = false;
-        $35c9ea6fbd139a83$var$addLotsOfPadding();
-    });
-    (0, $lgFzj$depictaiutilishared.observer).onexists(".depict.plp .listing-page .cards > div > *", ()=>{
-        $35c9ea6fbd139a83$var$removeLotsOfPadding();
+        $80a9072c96ebf849$var$addLotsOfPadding();
+        (0, $1pn1h$depictaiutilishared.observer).wait_for_element(".depict.plp .listing-page").then(()=>{
+            $80a9072c96ebf849$var$removeLotsOfPadding();
+        });
     });
-    (0, $lgFzj$depictaiutilishared.history_replacer)(()=>{
-        (0, $lgFzj$depictaiutilishared.queueMacroTask)(()=>{
-            $35c9ea6fbd139a83$var$removeLotsOfPadding();
+    (0, $1pn1h$depictaiutilishared.history_replacer)(()=>{
+        (0, $1pn1h$depictaiutilishared.queueMacroTask)(()=>{
+            $80a9072c96ebf849$var$removeLotsOfPadding();
         });
     }, false);
     window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $35c9ea6fbd139a83$var$addLotsOfPadding();
+        $80a9072c96ebf849$var$addLotsOfPadding();
     });
 }
-function $35c9ea6fbd139a83$var$addLotsOfPadding() {
+function $80a9072c96ebf849$var$addLotsOfPadding() {
     document.body.style.paddingBottom = (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px";
 }
-function $35c9ea6fbd139a83$var$removeLotsOfPadding() {
+function $80a9072c96ebf849$var$removeLotsOfPadding() {
     document.body.style.paddingBottom = "";
 }
 
 
-const $eb4ef6a57c8b8ada$export$8e769ad4338a911e = {
-    search: null,
-    header_alignment: null
-};
-
-
-
-
-function $c23231ddd12eea0a$export$5cae361ad82dce8b(value) {
-    const ref = (0, $lgFzj$react.useRef)();
-    (0, $lgFzj$react.useEffect)(()=>{
-        ref.current = value;
-    }, [
-        value
-    ]);
-    return ref.current;
-}
-
-
-
-const $ed09819de7bb86d1$export$99ae278b8f3607a0 = (opts)=>{
+const $7b6eabbde6829606$export$99ae278b8f3607a0 = (opts)=>{
     const path = "/search";
     const param = "q";
     const is_page_ = (url)=>url.pathname == path;
-    const search = new (0, $lgFzj$depictaiui.DepictSearch)({
+    const search = new (0, $1pn1h$depictaiui.DepictSearch)({
         search_query_url_param_name: param,
         merchant: opts.merchant,
         market: opts.market,
+        enable_category_suggestions: false,
         localization: {
-            ...(0, $lgFzj$depictaiui.swedish_search_translation),
+            ...(0, $1pn1h$depictaiui.swedish_search_translation),
             price_formatting_: {
                 pre_: "€ ",
                 post_: "",
@@ -95,7 +108,6 @@ const $ed09819de7bb86d1$export$99ae278b8f3607a0 = (opts)=>{
         },
         on_navigation: (new_href)=>{
             const shallow = is_page_(location);
-            debugger;
             window.next.router.push(new_href, undefined, {
                 shallow: shallow,
                 scroll: true
@@ -105,25 +117,19 @@ const $ed09819de7bb86d1$export$99ae278b8f3607a0 = (opts)=>{
             url.pathname = path;
         }
     });
+    (0, $80a9072c96ebf849$export$6453cbc34515a94d)(is_page_);
     return search;
 };
 
 
-function $36997bef3cf034d6$export$9fac37a9c21c2f3b(props) {
-    const { children: children , merchant: merchant , market: market , search_page_path: search_page_path  } = props;
-    const previous_props = (0, $c23231ddd12eea0a$export$5cae361ad82dce8b)(props);
-    if (!(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search) // Todo: use search_page_path for navigation
-    (0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search = (0, $ed09819de7bb86d1$export$99ae278b8f3607a0)({
-        merchant: merchant,
-        market: market
+function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
+    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
+    const { search: search  } = (0, $e589c49931886c97$export$8e769ad4338a911e);
+    if (!search) // Todo: use search_page_path for navigation
+    (0, $e589c49931886c97$export$8e769ad4338a911e).search = (0, $7b6eabbde6829606$export$99ae278b8f3607a0)({
+        ...assignable_options
     });
-    else if (previous_props) {
-        const { prev_merchant: prev_merchant , prev_market: prev_market , search_page_path: search_page_path1  } = previous_props;
-    // Todo: here we can check if our search config changed and react to it.
-    // Do we need to know if it changed specifically, or could we just always set the values regardless if they changed or not?
-    // Should changing merchant log an error? Is it ever not a bug?
-    }
-    console.log("DepictProvider render", props, previous_props);
+    else Object.assign(search, assignable_options);
     return children;
 }
 
@@ -134,39 +140,39 @@ function $36997bef3cf034d6$export$9fac37a9c21c2f3b(props) {
 
 
 
-function $74e00cdf1575ca1b$export$cbcd1ecdb41b1d0a() {
-    return (0, $lgFzj$react.createElement)("div", {
+function $20bf907adee775ba$export$cbcd1ecdb41b1d0a() {
+    return (0, $1pn1h$react.createElement)("div", {
         className: "depict aligner",
-        ref: (e)=>(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).header_alignment = e
+        ref: (e)=>(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment = e
     });
 }
-let $74e00cdf1575ca1b$var$sheet;
-function $74e00cdf1575ca1b$export$a7f6cffb6b8ba11c() {
-    if (!(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search) {
+let $20bf907adee775ba$var$sheet;
+function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
+    if (!(0, $e589c49931886c97$export$8e769ad4338a911e).search) {
         console.error("No active search in the app!");
         return;
     }
-    if (!(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).header_alignment) {
+    if (!(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment) {
         console.error("No active search header aligner on the page!");
         return;
     }
-    const style_props_ = (0, $lgFzj$solidjs.createSignal)({
+    const style_props_ = (0, $1pn1h$solidjs.createSignal)({
         position: "fixed",
         top: 0
     });
-    if ((0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        if (!$74e00cdf1575ca1b$var$sheet) {
+    if ((0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight) {
+        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        if (!$20bf907adee775ba$var$sheet) {
             const style = document.createElement("style");
             style.append(styles);
             document.head.appendChild(style);
         }
     }
-    const class_list_ = (0, $lgFzj$solidjs.createMemo)(()=>({
+    const class_list_ = (0, $1pn1h$solidjs.createMemo)(()=>({
             in_header: true
         }));
-    (0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search.modal_open = [
+    (0, $e589c49931886c97$export$8e769ad4338a911e).search.modal_open = [
         {
             style_props_: style_props_,
             class_list_: class_list_
@@ -175,14 +181,13 @@ function $74e00cdf1575ca1b$export$a7f6cffb6b8ba11c() {
 }
 
 
-let $6abe21f0d440de7c$var$active_render_card;
-function $6abe21f0d440de7c$var$DepictSearchPageContent(opts) {
-    (0, $35c9ea6fbd139a83$export$6453cbc34515a94d)();
-    const [bridge, setBridge] = (0, $lgFzj$react.useState)(null);
-    const [portals, set_portals] = (0, $lgFzj$react.useState)([]);
-    (0, $lgFzj$react.useEffect)(()=>{
-        const component_portals = [];
-        $6abe21f0d440de7c$var$active_render_card = async (display)=>{
+let $7c7f5a6b750dca70$var$active_render_card;
+function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
+    const [bridge, setBridge] = (0, $1pn1h$react.useState)(null);
+    const [portals, set_portals] = (0, $1pn1h$react.useState)([]);
+    (0, $1pn1h$react.useEffect)(()=>{
+        const component_portals = new Set((0, $1pn1h$react.ReactPortal));
+        $7c7f5a6b750dca70$var$active_render_card = async (display)=>{
             const solid_container = document.createElement("div");
             const react_has_rendered = new Promise((r)=>{
                 const m_o = new MutationObserver(()=>{
@@ -193,55 +198,76 @@ function $6abe21f0d440de7c$var$DepictSearchPageContent(opts) {
                     childList: true
                 });
             });
-            const reactProductCard = (0, $lgFzj$reactjsxruntime.jsx)(opts.productCardFactory, {
+            const reactProductCard = (0, $1pn1h$reactjsxruntime.jsx)(opts.productCardFactory, {
                 display: display
             });
-            const portal = $lgFzj$reactdom.createPortal(reactProductCard, solid_container);
-            component_portals.push(portal);
+            const portal = $1pn1h$reactdom.createPortal(reactProductCard, solid_container);
+            component_portals.add(portal);
             set_portals([
                 ...component_portals
             ]);
+            (0, $1pn1h$solidjs.onCleanup)(()=>{
+                // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+                component_portals.delete(portal);
+                set_portals([
+                    ...component_portals
+                ]);
+            });
             await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
             return [
                 solid_container
             ];
         };
-        if (!(0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
-        const el = (0, $lgFzj$depictaiui.SearchPage)({
-            depict_search: (0, $eb4ef6a57c8b8ada$export$8e769ad4338a911e).search,
-            cols_at_size: [
-                [
-                    4
-                ],
-                [
-                    3,
-                    1024
-                ],
-                [
-                    2,
-                    901
-                ]
-            ],
-            grid_spacing: "10px",
-            product_card_template: (...args)=>$6abe21f0d440de7c$var$active_render_card(...args),
-            // function might not exist yet,
-            get_product_id: ()=>""
-        });
-        const solidBridge = (0, $lgFzj$reactjsxruntime.jsx)((0, $lgFzj$depictaireactsolidbridge.ReactToSolidBridge), {
-            solidComponent: ()=>el,
+        if (!(0, $e589c49931886c97$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
+        const solidBridge = (0, $1pn1h$reactjsxruntime.jsx)((0, $1pn1h$depictaireactsolidbridge.ReactToSolidBridge), {
+            solidComponent: ()=>{
+                const [el, dispose] = (0, $1pn1h$solidjs.createRoot)((dispose)=>{
+                    (0, $b4d0d98857ed9934$export$74f3924c5027fe1d)((href)=>{
+                        // TODO: Will be user specified
+                        if (!new URL(href).pathname.startsWith("/search")) dispose();
+                    });
+                    const el = (0, $1pn1h$depictaiui.SearchPage)({
+                        depict_search: (0, $e589c49931886c97$export$8e769ad4338a911e).search,
+                        include_input_field: true,
+                        cols_at_size: [
+                            [
+                                4
+                            ],
+                            [
+                                3,
+                                1024
+                            ],
+                            [
+                                2,
+                                901
+                            ]
+                        ],
+                        grid_spacing: "10px",
+                        product_card_template: (...args)=>$7c7f5a6b750dca70$var$active_render_card(...args),
+                        // function might not exist yet,
+                        get_product_id: ()=>""
+                    });
+                    return [
+                        el,
+                        dispose
+                    ];
+                });
+                (0, $1pn1h$solidjs.onCleanup)(dispose);
+                return el;
+            },
             key: Math.random()
         });
         setBridge(solidBridge);
     }, []);
     console.log("Searchpage render", bridge, portals.length);
-    return bridge ? (0, $lgFzj$react.createElement)("div", {}, [
+    return bridge ? (0, $1pn1h$react.createElement)("div", {}, [
         bridge,
         ...portals
     ]) : "";
 }
-function $6abe21f0d440de7c$export$210723f5a54a7028(opts) {
-    return (0, $lgFzj$reactjsxruntime.jsx)((0, $lgFzj$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
-        children: (0, $lgFzj$reactjsxruntime.jsx)($6abe21f0d440de7c$var$DepictSearchPageContent, opts)
+function $7c7f5a6b750dca70$export$210723f5a54a7028(opts) {
+    return (0, $1pn1h$reactjsxruntime.jsx)((0, $1pn1h$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
+        children: (0, $1pn1h$reactjsxruntime.jsx)($7c7f5a6b750dca70$var$DepictSearchPageContent, opts)
     });
 }