@depict-ai/react-ui 0.0.9 → 0.0.11

package/dist/module.js

@@ -1,82 +1,95 @@
-import {createPortal as $5DrVA$createPortal} from "react-dom";
-import {ReactToSolidBridge as $5DrVA$ReactToSolidBridge, ReactToSolidBridgeProvider as $5DrVA$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
-import {useState as $5DrVA$useState, useEffect as $5DrVA$useEffect, createElement as $5DrVA$createElement, useRef as $5DrVA$useRef} from "react";
-import {SearchPage as $5DrVA$SearchPage, DepictSearch as $5DrVA$DepictSearch, swedish_search_translation as $5DrVA$swedish_search_translation} from "@depict-ai/ui";
-import {jsx as $5DrVA$jsx} from "react/jsx-runtime";
-import {observer as $5DrVA$observer, history_replacer as $5DrVA$history_replacer, queueMacroTask as $5DrVA$queueMacroTask} from "@depict-ai/utilishared";
-import {createSignal as $5DrVA$createSignal, createMemo as $5DrVA$createMemo} from "solid-js";
+import {createPortal as $9xHCU$createPortal} from "react-dom";
+import {ReactToSolidBridge as $9xHCU$ReactToSolidBridge, ReactToSolidBridgeProvider as $9xHCU$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
+import {useState as $9xHCU$useState, useEffect as $9xHCU$useEffect, ReactPortal as $9xHCU$ReactPortal, createElement as $9xHCU$createElement, useRef as $9xHCU$useRef} from "react";
+import {SearchPage as $9xHCU$SearchPage, DepictSearch as $9xHCU$DepictSearch, swedish_search_translation as $9xHCU$swedish_search_translation} from "@depict-ai/ui";
+import {jsx as $9xHCU$jsx} from "react/jsx-runtime";
+import {onCleanup as $9xHCU$onCleanup, createRoot as $9xHCU$createRoot, createSignal as $9xHCU$createSignal, createMemo as $9xHCU$createMemo} from "solid-js";
+import {href_change_ipns as $9xHCU$href_change_ipns, observer as $9xHCU$observer, history_replacer as $9xHCU$history_replacer, queueMacroTask as $9xHCU$queueMacroTask} from "@depict-ai/utilishared";
 
 
 
 
 
 
+const $9ce874af9a04465f$export$8e769ad4338a911e = {
+    search: null,
+    header_alignment: null
+};
+
+
+
 
-let $a788a5d95af0ff8b$var$set = false;
-function $a788a5d95af0ff8b$export$6453cbc34515a94d() {
-    if ($a788a5d95af0ff8b$var$set) return; // Just being safe
-    $a788a5d95af0ff8b$var$set = true;
+
+function $c83ba9ab79386687$export$5cae361ad82dce8b(value) {
+    const ref = (0, $9xHCU$useRef)();
+    (0, $9xHCU$useEffect)(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+}
+let $c83ba9ab79386687$var$run_on_href_change;
+function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
+    $c83ba9ab79386687$var$run_on_href_change = cb;
+}
+(async ()=>{
+    for await (const href of (0, $9xHCU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
+})();
+
+
+
+
+
+let $01e7216f8f859389$var$set = false;
+function $01e7216f8f859389$export$6453cbc34515a94d(is_search_page) {
+    if ($01e7216f8f859389$var$set) return; // Just being safe
+    $01e7216f8f859389$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)) {
+            $01e7216f8f859389$var$removeLotsOfPadding(); // Just making sure
+            return;
+        }
         should_use_old_scroll = false;
-        $a788a5d95af0ff8b$var$addLotsOfPadding();
-    });
-    (0, $5DrVA$observer).onexists(".depict.plp .listing-page .cards > div > *", ()=>{
-        $a788a5d95af0ff8b$var$removeLotsOfPadding();
+        $01e7216f8f859389$var$addLotsOfPadding();
+        (0, $9xHCU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
+            $01e7216f8f859389$var$removeLotsOfPadding();
+        });
     });
-    (0, $5DrVA$history_replacer)(()=>{
-        (0, $5DrVA$queueMacroTask)(()=>{
-            $a788a5d95af0ff8b$var$removeLotsOfPadding();
+    (0, $9xHCU$history_replacer)(()=>{
+        (0, $9xHCU$queueMacroTask)(()=>{
+            $01e7216f8f859389$var$removeLotsOfPadding();
         });
     }, false);
     window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $a788a5d95af0ff8b$var$addLotsOfPadding();
+        $01e7216f8f859389$var$addLotsOfPadding();
     });
 }
-function $a788a5d95af0ff8b$var$addLotsOfPadding() {
+function $01e7216f8f859389$var$addLotsOfPadding() {
     document.body.style.paddingBottom = (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px";
 }
-function $a788a5d95af0ff8b$var$removeLotsOfPadding() {
+function $01e7216f8f859389$var$removeLotsOfPadding() {
     document.body.style.paddingBottom = "";
 }
 
 
-const $d05612ee1ad913f8$export$8e769ad4338a911e = {
-    search: null,
-    header_alignment: null
-};
-
-
-
-
-function $420bb46ab3e903ef$export$5cae361ad82dce8b(value) {
-    const ref = (0, $5DrVA$useRef)();
-    (0, $5DrVA$useEffect)(()=>{
-        ref.current = value;
-    }, [
-        value
-    ]);
-    return ref.current;
-}
-
-
-
-const $f1d8262ca0141c24$export$99ae278b8f3607a0 = (opts)=>{
+const $cd2077d7481df27e$export$99ae278b8f3607a0 = (opts)=>{
     const path = "/search";
     const param = "q";
     const is_page_ = (url)=>url.pathname == path;
-    const search = new (0, $5DrVA$DepictSearch)({
+    const search = new (0, $9xHCU$DepictSearch)({
         search_query_url_param_name: param,
         merchant: opts.merchant,
         market: opts.market,
+        enable_category_suggestions: false,
         localization: {
-            ...(0, $5DrVA$swedish_search_translation),
+            ...(0, $9xHCU$swedish_search_translation),
             price_formatting_: {
                 pre_: "€ ",
                 post_: "",
@@ -87,7 +100,6 @@ const $f1d8262ca0141c24$export$99ae278b8f3607a0 = (opts)=>{
         },
         on_navigation: (new_href)=>{
             const shallow = is_page_(location);
-            debugger;
             window.next.router.push(new_href, undefined, {
                 shallow: shallow,
                 scroll: true
@@ -97,25 +109,19 @@ const $f1d8262ca0141c24$export$99ae278b8f3607a0 = (opts)=>{
             url.pathname = path;
         }
     });
+    (0, $01e7216f8f859389$export$6453cbc34515a94d)(is_page_);
     return search;
 };
 
 
-function $17200933bad0a218$export$9fac37a9c21c2f3b(props) {
-    const { children: children , merchant: merchant , market: market , search_page_path: search_page_path  } = props;
-    const previous_props = (0, $420bb46ab3e903ef$export$5cae361ad82dce8b)(props);
-    if (!(0, $d05612ee1ad913f8$export$8e769ad4338a911e).search) // Todo: use search_page_path for navigation
-    (0, $d05612ee1ad913f8$export$8e769ad4338a911e).search = (0, $f1d8262ca0141c24$export$99ae278b8f3607a0)({
-        merchant: merchant,
-        market: market
+function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
+    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
+    const { search: search  } = (0, $9ce874af9a04465f$export$8e769ad4338a911e);
+    if (!search) // Todo: use search_page_path for navigation
+    (0, $9ce874af9a04465f$export$8e769ad4338a911e).search = (0, $cd2077d7481df27e$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;
 }
 
@@ -126,39 +132,39 @@ function $17200933bad0a218$export$9fac37a9c21c2f3b(props) {
 
 
 
-function $5ec9f73037322aa8$export$cbcd1ecdb41b1d0a() {
-    return (0, $5DrVA$createElement)("div", {
+function $f41a371216eff80b$export$cbcd1ecdb41b1d0a() {
+    return (0, $9xHCU$createElement)("div", {
         className: "depict aligner",
-        ref: (e)=>(0, $d05612ee1ad913f8$export$8e769ad4338a911e).header_alignment = e
+        ref: (e)=>(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment = e
     });
 }
-let $5ec9f73037322aa8$var$sheet;
-function $5ec9f73037322aa8$export$a7f6cffb6b8ba11c() {
-    if (!(0, $d05612ee1ad913f8$export$8e769ad4338a911e).search) {
+let $f41a371216eff80b$var$sheet;
+function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
+    if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).search) {
         console.error("No active search in the app!");
         return;
     }
-    if (!(0, $d05612ee1ad913f8$export$8e769ad4338a911e).header_alignment) {
+    if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment) {
         console.error("No active search header aligner on the page!");
         return;
     }
-    const style_props_ = (0, $5DrVA$createSignal)({
+    const style_props_ = (0, $9xHCU$createSignal)({
         position: "fixed",
         top: 0
     });
-    if ((0, $d05612ee1ad913f8$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $d05612ee1ad913f8$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $d05612ee1ad913f8$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        if (!$5ec9f73037322aa8$var$sheet) {
+    if ((0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight) {
+        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+        if (!$f41a371216eff80b$var$sheet) {
             const style = document.createElement("style");
             style.append(styles);
             document.head.appendChild(style);
         }
     }
-    const class_list_ = (0, $5DrVA$createMemo)(()=>({
+    const class_list_ = (0, $9xHCU$createMemo)(()=>({
             in_header: true
         }));
-    (0, $d05612ee1ad913f8$export$8e769ad4338a911e).search.modal_open = [
+    (0, $9ce874af9a04465f$export$8e769ad4338a911e).search.modal_open = [
         {
             style_props_: style_props_,
             class_list_: class_list_
@@ -167,14 +173,13 @@ function $5ec9f73037322aa8$export$a7f6cffb6b8ba11c() {
 }
 
 
-let $ea53d4d38ca71150$var$active_render_card;
-function $ea53d4d38ca71150$var$DepictSearchPageContent(opts) {
-    (0, $a788a5d95af0ff8b$export$6453cbc34515a94d)();
-    const [bridge, setBridge] = (0, $5DrVA$useState)(null);
-    const [portals, set_portals] = (0, $5DrVA$useState)([]);
-    (0, $5DrVA$useEffect)(()=>{
-        const component_portals = [];
-        $ea53d4d38ca71150$var$active_render_card = async (display)=>{
+let $a854d2a2f2059f57$var$active_render_card;
+function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
+    const [bridge, setBridge] = (0, $9xHCU$useState)(null);
+    const [portals, set_portals] = (0, $9xHCU$useState)([]);
+    (0, $9xHCU$useEffect)(()=>{
+        const component_portals = new Set((0, $9xHCU$ReactPortal));
+        $a854d2a2f2059f57$var$active_render_card = async (display)=>{
             const solid_container = document.createElement("div");
             const react_has_rendered = new Promise((r)=>{
                 const m_o = new MutationObserver(()=>{
@@ -185,57 +190,78 @@ function $ea53d4d38ca71150$var$DepictSearchPageContent(opts) {
                     childList: true
                 });
             });
-            const reactProductCard = (0, $5DrVA$jsx)(opts.productCardFactory, {
+            const reactProductCard = (0, $9xHCU$jsx)(opts.productCardFactory, {
                 display: display
             });
-            const portal = $5DrVA$createPortal(reactProductCard, solid_container);
-            component_portals.push(portal);
+            const portal = $9xHCU$createPortal(reactProductCard, solid_container);
+            component_portals.add(portal);
             set_portals([
                 ...component_portals
             ]);
+            (0, $9xHCU$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, $d05612ee1ad913f8$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
-        const el = (0, $5DrVA$SearchPage)({
-            depict_search: (0, $d05612ee1ad913f8$export$8e769ad4338a911e).search,
-            cols_at_size: [
-                [
-                    4
-                ],
-                [
-                    3,
-                    1024
-                ],
-                [
-                    2,
-                    901
-                ]
-            ],
-            grid_spacing: "10px",
-            product_card_template: (...args)=>$ea53d4d38ca71150$var$active_render_card(...args),
-            // function might not exist yet,
-            get_product_id: ()=>""
-        });
-        const solidBridge = (0, $5DrVA$jsx)((0, $5DrVA$ReactToSolidBridge), {
-            solidComponent: ()=>el,
+        if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
+        const solidBridge = (0, $9xHCU$jsx)((0, $9xHCU$ReactToSolidBridge), {
+            solidComponent: ()=>{
+                const [el, dispose] = (0, $9xHCU$createRoot)((dispose)=>{
+                    (0, $c83ba9ab79386687$export$74f3924c5027fe1d)((href)=>{
+                        // TODO: Will be user specified
+                        if (!new URL(href).pathname.startsWith("/search")) dispose();
+                    });
+                    const el = (0, $9xHCU$SearchPage)({
+                        depict_search: (0, $9ce874af9a04465f$export$8e769ad4338a911e).search,
+                        include_input_field: true,
+                        cols_at_size: [
+                            [
+                                4
+                            ],
+                            [
+                                3,
+                                1024
+                            ],
+                            [
+                                2,
+                                901
+                            ]
+                        ],
+                        grid_spacing: "10px",
+                        product_card_template: (...args)=>$a854d2a2f2059f57$var$active_render_card(...args),
+                        // function might not exist yet,
+                        get_product_id: ()=>""
+                    });
+                    return [
+                        el,
+                        dispose
+                    ];
+                });
+                (0, $9xHCU$onCleanup)(dispose);
+                return el;
+            },
             key: Math.random()
         });
         setBridge(solidBridge);
     }, []);
     console.log("Searchpage render", bridge, portals.length);
-    return bridge ? (0, $5DrVA$createElement)("div", {}, [
+    return bridge ? (0, $9xHCU$createElement)("div", {}, [
         bridge,
         ...portals
     ]) : "";
 }
-function $ea53d4d38ca71150$export$210723f5a54a7028(opts) {
-    return (0, $5DrVA$jsx)((0, $5DrVA$ReactToSolidBridgeProvider), {
-        children: (0, $5DrVA$jsx)($ea53d4d38ca71150$var$DepictSearchPageContent, opts)
+function $a854d2a2f2059f57$export$210723f5a54a7028(opts) {
+    return (0, $9xHCU$jsx)((0, $9xHCU$ReactToSolidBridgeProvider), {
+        children: (0, $9xHCU$jsx)($a854d2a2f2059f57$var$DepictSearchPageContent, opts)
     });
 }
 
 
-export {$ea53d4d38ca71150$export$210723f5a54a7028 as DepictSearchPage, $17200933bad0a218$export$9fac37a9c21c2f3b as DepictProvider, $5ec9f73037322aa8$export$a7f6cffb6b8ba11c as openModal, $5ec9f73037322aa8$export$cbcd1ecdb41b1d0a as DepictSearchHeader};
+export {$a854d2a2f2059f57$export$210723f5a54a7028 as DepictSearchPage, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader};

package/dist/styles/components/PLP/Buttons.scss

@@ -0,0 +1,124 @@
+@use "../../variables";
+@use "../../helpers/supports-hover";
+@use "../../helpers/utils";
+@use "sass:color";
+
+$primary-button-background: variables.$brand-black;
+$primary-button-color: #fff;
+$primary-button-border: 1px solid transparent; // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
+$primary-button-border-radius: variables.$border-radius;
+$primary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
+$primary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
+$primary-button-focus-visible-filter: drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
+  drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8));
+
+$secondary-button-background: variables.$brand-lightest-grey;
+$secondary-button-color: variables.$brand-dark-grey;
+$secondary-button-border: 1px solid variables.$brand-black;
+$secondary-button-border-radius: variables.$border-radius;
+$secondary-button-hover-filter: drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
+$secondary-button-active-filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25))
+  drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15));
+$secondary-button-focus-visible-filter: drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
+  drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8));
+
+@mixin PrimaryButton(
+  $background: $primary-button-background,
+  $color: $primary-button-color,
+  $border: $primary-button-border,
+  $border-radius: $primary-button-border-radius,
+  $hover-filter: $primary-button-hover-filter,
+  $active-filter: $primary-button-active-filter,
+  $focus-visible-filter: $primary-button-focus-visible-filter
+) {
+  // not using .primary since that's 100% going to conflict with existing declarations on sites
+  button.major {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@mixin SecondaryButton(
+  $background: $secondary-button-background,
+  $color: $secondary-button-color,
+  $border: $secondary-button-border,
+  $border-radius: $secondary-button-border-radius,
+  $hover-filter: $secondary-button-hover-filter,
+  $active-filter: $secondary-button-active-filter,
+  $focus-visible-filter: $secondary-button-focus-visible-filter
+) {
+  // not using .secondary since that's 100% going to conflict with existing declarations on sites
+  button.minor {
+    @include Button(
+      $background,
+      $color,
+      $border,
+      $border-radius,
+      $hover-filter,
+      $active-filter,
+      $focus-visible-filter
+    ) {
+      @content;
+    }
+  }
+}
+
+@mixin Button(
+  $background,
+  $color,
+  $border,
+  $border-radius,
+  $hover-filter,
+  $active-filter,
+  $focus-visible-filter,
+  $padding: 10px 20px
+) {
+  background: $background;
+  color: $color;
+  border: $border;
+  border-radius: $border-radius;
+  @if $padding {
+    padding: $padding;
+  }
+  display: flex;
+  white-space: pre-wrap; // can't have spaces otherwise
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: filter 150ms ease-in-out, background 100ms ease-in-out;
+
+  svg path {
+    fill: $color; // treat icons the same as text
+  }
+
+  @include supports-hover.supports-hover() {
+    &:hover {
+      filter: $hover-filter;
+      @include utils.highlight-background($normal-background: $background);
+    }
+  }
+  &:active {
+    filter: $active-filter;
+    @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+  }
+  &:focus {
+    outline-style: none;
+  }
+  &:focus-visible {
+    filter: $focus-visible-filter;
+    @include utils.highlight-background($normal-background: $background);
+  }
+  @content;
+}

package/dist/styles/components/PLP/MorphingSign.scss

@@ -0,0 +1,31 @@
+@mixin MorphingSign($color: #fff) {
+  .morphing-sign {
+    /* https://stackoverflow.com/a/38136283 */
+    border: 0;
+    font-size: 1.5em;
+    position: relative;
+    width: 1em;
+    height: 1em;
+
+    span {
+      position: absolute;
+      background: $color;
+      border-radius: 2px;
+    }
+
+    /* Create the "+" shape by positioning the spans absolutely */
+    span:first-child {
+      top: 25%;
+      bottom: 25%;
+      width: 10%;
+      left: 45%;
+    }
+
+    span:last-child {
+      left: 25%;
+      right: 25%;
+      height: 10%;
+      top: 45%;
+    }
+  }
+}

package/dist/styles/components/PLP/PLPResults.scss

@@ -0,0 +1,20 @@
+@use "../../variables";
+@use "../../helpers/utils";
+
+@mixin PLPResults() {
+  .listing-page {
+    .no-results {
+      background: white;
+      padding: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: column;
+      flex-grow: 2;
+      .hint {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}